From b1f8d36a69413e09aeb24d3cef1b4d116491e51a Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 8 Jul 2022 08:58:49 +0000 Subject: [PATCH] Re-add margin to tiles based on EventTileBubble (#9015) * Re-add margin to HistoryTile, which is based on EventTileBubble Signed-off-by: Suguru Hirahara * Readd margin to the other tiles based on EventTileBubble Signed-off-by: Suguru Hirahara * Default margin is not required for mx_MJitsiWidgetEvent as it appears inside EventTile Signed-off-by: Suguru Hirahara * Cancel left value for cryptoEvent on IRC layout Signed-off-by: Suguru Hirahara --- res/css/views/messages/_CreateEvent.scss | 4 +++- res/css/views/messages/_EventTileBubble.scss | 2 ++ res/css/views/messages/_MJitsiWidgetEvent.scss | 2 +- res/css/views/messages/_common_CryptoEvent.scss | 4 +++- res/css/views/rooms/_EventTile.scss | 6 +++++- res/css/views/rooms/_HistoryTile.scss | 10 +++++++--- 6 files changed, 21 insertions(+), 7 deletions(-) diff --git a/res/css/views/messages/_CreateEvent.scss b/res/css/views/messages/_CreateEvent.scss index b3f1ad4e4d..db6e024442 100644 --- a/res/css/views/messages/_CreateEvent.scss +++ b/res/css/views/messages/_CreateEvent.scss @@ -14,7 +14,9 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_CreateEvent { +.mx_EventTileBubble.mx_CreateEvent { + margin: var(--EventTileBubble_margin-block) auto; + &::before { background-color: $header-panel-text-primary-color; mask-image: url('$(res)/img/element-icons/chat-bubbles.svg'); diff --git a/res/css/views/messages/_EventTileBubble.scss b/res/css/views/messages/_EventTileBubble.scss index 6813fec666..4135dc09f2 100644 --- a/res/css/views/messages/_EventTileBubble.scss +++ b/res/css/views/messages/_EventTileBubble.scss @@ -15,6 +15,8 @@ limitations under the License. */ .mx_EventTileBubble { + --EventTileBubble_margin-block: 10px; // TODO: Use a spacing variable + background-color: $dark-panel-bg-color; padding: 10px; // TODO: Use a spacing variable border-radius: 8px; diff --git a/res/css/views/messages/_MJitsiWidgetEvent.scss b/res/css/views/messages/_MJitsiWidgetEvent.scss index 6360d089fa..0d811a74b0 100644 --- a/res/css/views/messages/_MJitsiWidgetEvent.scss +++ b/res/css/views/messages/_MJitsiWidgetEvent.scss @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_MJitsiWidgetEvent { +.mx_EventTileBubble.mx_MJitsiWidgetEvent { &::before { background-color: $header-panel-text-primary-color; // XXX: Variable abuse mask-image: url('$(res)/img/element-icons/call/video-call.svg'); diff --git a/res/css/views/messages/_common_CryptoEvent.scss b/res/css/views/messages/_common_CryptoEvent.scss index 5938f4fcb9..5753a8bf79 100644 --- a/res/css/views/messages/_common_CryptoEvent.scss +++ b/res/css/views/messages/_common_CryptoEvent.scss @@ -14,7 +14,9 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_cryptoEvent { +.mx_EventTileBubble.mx_cryptoEvent { + margin: var(--EventTileBubble_margin-block) auto; + // white infill for the transparency &.mx_cryptoEvent_icon::before { background-color: #ffffff; diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index f2c0391fd2..e8d404d232 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -74,7 +74,7 @@ $left-gutter: 64px; } .mx_EventTileBubble { - margin-block: 10px; // TODO: Use a spacing variable + margin-block: var(--EventTileBubble_margin-block); } .mx_MImageBody { @@ -238,6 +238,10 @@ $left-gutter: 64px; .mx_EventTileBubble { position: relative; left: var(--EventTile_irc_line_info-inset-inline-start); + + &.mx_cryptoEvent { + left: unset; + } } .mx_ReplyTile .mx_EventTileBubble { diff --git a/res/css/views/rooms/_HistoryTile.scss b/res/css/views/rooms/_HistoryTile.scss index 48f5a4ce2e..1cd9dd062f 100644 --- a/res/css/views/rooms/_HistoryTile.scss +++ b/res/css/views/rooms/_HistoryTile.scss @@ -14,7 +14,11 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_HistoryTile::before { - background-color: $header-panel-text-primary-color; - mask-image: url('$(res)/img/element-icons/hide.svg'); +.mx_EventTileBubble.mx_HistoryTile { + margin: var(--EventTileBubble_margin-block) auto; + + &::before { + background-color: $header-panel-text-primary-color; + mask-image: url('$(res)/img/element-icons/hide.svg'); + } }