From 4e1ee7429bca0a0dfd66d246ae65a2171a0de8ff Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 19 May 2022 02:50:06 +0900 Subject: [PATCH 1/4] Enable background color on hover for chat panel and thread panel - Display reactions row on hover - Use variables Signed-off-by: Suguru Hirahara --- res/css/views/right_panel/_TimelineCard.scss | 14 +++++++++++++- res/css/views/rooms/_EventBubbleTile.scss | 9 ++++++--- res/css/views/rooms/_EventTile.scss | 9 +++++++++ 3 files changed, 28 insertions(+), 4 deletions(-) diff --git a/res/css/views/right_panel/_TimelineCard.scss b/res/css/views/right_panel/_TimelineCard.scss index 8b3064e5295..150415df3ff 100644 --- a/res/css/views/right_panel/_TimelineCard.scss +++ b/res/css/views/right_panel/_TimelineCard.scss @@ -51,7 +51,18 @@ limitations under the License. margin-right: 0; } - .mx_EventTile:not([data-layout="bubble"]) { + .mx_EventTile { + &[data-layout=bubble] { + &::before { + z-index: auto; // enable background color on hover + } + + .mx_ReactionsRow { + position: relative; // display on hover + } + } + + &:not([data-layout="bubble"]) { &.mx_EventTile_info .mx_EventTile_line, .mx_EventTile_line { padding: var(--BaseCard_EventTile_line-padding-block) var(--BaseCard_EventTile-spacing-horizontal); @@ -103,6 +114,7 @@ limitations under the License. } } } + } .mx_EventTile, .mx_GenericEventListSummary { diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index c6a6c276c8d..aad0d179613 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -53,9 +53,12 @@ limitations under the License. } .mx_EventTile[data-layout=bubble] { + --EventTile_bubble-margin-inline-start: 49px; + --EventTile_bubble-margin-inline-end: 60px; + position: relative; margin-top: var(--gutterSize); - margin-left: 49px; + margin-left: var(--EventTile_bubble-margin-inline-start); font-size: $font-14px; .mx_ThreadSummary { @@ -89,8 +92,8 @@ limitations under the License. position: absolute; top: -1px; bottom: -1px; - left: -60px; - right: -60px; + left: calc(-1 * var(--EventTile_bubble-margin-inline-start)); + right: calc(-1 * var(--EventTile_bubble-margin-inline-end)); z-index: -1; border-radius: 4px; } diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 13eb3c27dfb..0adec3c2bef 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -965,6 +965,15 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss margin-inline-start: var(--BaseCard_EventTile-spacing-horizontal); margin-inline-end: var(--BaseCard_EventTile-spacing-horizontal); + &::before { + inset-inline: calc(-1 * var(--BaseCard_EventTile-spacing-horizontal)); + z-index: auto; // enable background color on hover + } + + .mx_ReactionsRow { + position: relative; // display on hover + } + .mx_EventTile_line.mx_EventTile_mediaLine { padding-block: 0; padding-inline-start: 0; From 1d43ab4665c0a4f26c728872253d8f80667ea197 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 19 May 2022 02:59:43 +0900 Subject: [PATCH 2/4] Replace --BaseCard_EventTile-spacing-horizontal with --BaseCard_EventTile-spacing-inline - horizontal: inline - vertical: block Signed-off-by: Suguru Hirahara --- res/css/views/right_panel/_BaseCard.scss | 2 +- res/css/views/right_panel/_TimelineCard.scss | 12 ++++++------ res/css/views/rooms/_EventTile.scss | 6 +++--- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/res/css/views/right_panel/_BaseCard.scss b/res/css/views/right_panel/_BaseCard.scss index 39e699a60ad..fa3cbe9e668 100644 --- a/res/css/views/right_panel/_BaseCard.scss +++ b/res/css/views/right_panel/_BaseCard.scss @@ -16,7 +16,7 @@ limitations under the License. .mx_BaseCard { --BaseCard_EventTile_line-padding-block: 2px; - --BaseCard_EventTile-spacing-horizontal: 36px; + --BaseCard_EventTile-spacing-inline: 36px; padding: 0 8px; overflow: hidden; diff --git a/res/css/views/right_panel/_TimelineCard.scss b/res/css/views/right_panel/_TimelineCard.scss index 150415df3ff..4342e22eb3c 100644 --- a/res/css/views/right_panel/_TimelineCard.scss +++ b/res/css/views/right_panel/_TimelineCard.scss @@ -43,8 +43,8 @@ limitations under the License. } .mx_NewRoomIntro { - margin-inline-start: var(--BaseCard_EventTile-spacing-horizontal); - margin-inline-end: var(--BaseCard_EventTile-spacing-horizontal); + margin-inline-start: var(--BaseCard_EventTile-spacing-inline); + margin-inline-end: var(--BaseCard_EventTile-spacing-inline); } .mx_EventTile_content { @@ -65,7 +65,7 @@ limitations under the License. &:not([data-layout="bubble"]) { &.mx_EventTile_info .mx_EventTile_line, .mx_EventTile_line { - padding: var(--BaseCard_EventTile_line-padding-block) var(--BaseCard_EventTile-spacing-horizontal); + padding: var(--BaseCard_EventTile_line-padding-block) var(--BaseCard_EventTile-spacing-inline); padding-inline-end: $MessageTimestamp_width; // ensure timestamp is not hidden .mx_EventTile_e2eIcon { @@ -76,7 +76,7 @@ limitations under the License. .mx_DisambiguatedProfile, .mx_ReactionsRow, .mx_ThreadSummary { - margin-inline-start: var(--BaseCard_EventTile-spacing-horizontal); + margin-inline-start: var(--BaseCard_EventTile-spacing-inline); } .mx_ReactionsRow { @@ -146,8 +146,8 @@ limitations under the License. .mx_GenericEventListSummary:not([data-layout=bubble]) { .mx_EventTile_line, > .mx_GenericEventListSummary_unstyledList > .mx_EventTile_info .mx_EventTile_avatar ~ .mx_EventTile_line { - padding-inline-start: var(--BaseCard_EventTile-spacing-horizontal); - padding-inline-end: var(--BaseCard_EventTile-spacing-horizontal); + padding-inline-start: var(--BaseCard_EventTile-spacing-inline); + padding-inline-end: var(--BaseCard_EventTile-spacing-inline); } } diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 0adec3c2bef..dc9f2981d43 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -962,11 +962,11 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss } &[data-layout=bubble] { - margin-inline-start: var(--BaseCard_EventTile-spacing-horizontal); - margin-inline-end: var(--BaseCard_EventTile-spacing-horizontal); + margin-inline-start: var(--BaseCard_EventTile-spacing-inline); + margin-inline-end: var(--BaseCard_EventTile-spacing-inline); &::before { - inset-inline: calc(-1 * var(--BaseCard_EventTile-spacing-horizontal)); + inset-inline: calc(-1 * var(--BaseCard_EventTile-spacing-inline)); z-index: auto; // enable background color on hover } From 0b4910670c7a759c441356fe092ff05bb2b2a9b7 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 3 Jun 2022 19:02:38 +0900 Subject: [PATCH 3/4] mx_EventTile.mx_EventTile_bad[data-layout=bubble] seems to require bubble layout Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventBubbleTile.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index aad0d179613..d79bd5fab64 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -712,8 +712,7 @@ limitations under the License. } /* events that do not require bubble layout */ -.mx_GenericEventListSummary[data-layout=bubble], -.mx_EventTile.mx_EventTile_bad[data-layout=bubble] { +.mx_GenericEventListSummary[data-layout=bubble] { .mx_EventTile_line { background: transparent; } From 1dae50499d46f2c40e1cc012765d84f5b519978b Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 3 Jun 2022 19:04:14 +0900 Subject: [PATCH 4/4] yarn run lint:style --fix Signed-off-by: Suguru Hirahara --- res/css/views/right_panel/_TimelineCard.scss | 78 ++++++++++---------- res/css/views/rooms/_EventBubbleTile.scss | 24 +++--- 2 files changed, 50 insertions(+), 52 deletions(-) diff --git a/res/css/views/right_panel/_TimelineCard.scss b/res/css/views/right_panel/_TimelineCard.scss index 4342e22eb3c..e1b28aabecb 100644 --- a/res/css/views/right_panel/_TimelineCard.scss +++ b/res/css/views/right_panel/_TimelineCard.scss @@ -63,58 +63,58 @@ limitations under the License. } &:not([data-layout="bubble"]) { - &.mx_EventTile_info .mx_EventTile_line, - .mx_EventTile_line { - padding: var(--BaseCard_EventTile_line-padding-block) var(--BaseCard_EventTile-spacing-inline); - padding-inline-end: $MessageTimestamp_width; // ensure timestamp is not hidden + &.mx_EventTile_info .mx_EventTile_line, + .mx_EventTile_line { + padding: var(--BaseCard_EventTile_line-padding-block) var(--BaseCard_EventTile-spacing-inline); + padding-inline-end: $MessageTimestamp_width; // ensure timestamp is not hidden - .mx_EventTile_e2eIcon { - inset-inline-start: 8px; + .mx_EventTile_e2eIcon { + inset-inline-start: 8px; + } } - } - .mx_DisambiguatedProfile, - .mx_ReactionsRow, - .mx_ThreadSummary { - margin-inline-start: var(--BaseCard_EventTile-spacing-inline); - } + .mx_DisambiguatedProfile, + .mx_ReactionsRow, + .mx_ThreadSummary { + margin-inline-start: var(--BaseCard_EventTile-spacing-inline); + } - .mx_ReactionsRow { - padding: 0; + .mx_ReactionsRow { + padding: 0; - // See margin setting of ReactionsRow on _EventTile.scss - margin-right: 8px; - } + // See margin setting of ReactionsRow on _EventTile.scss + margin-right: 8px; + } - .mx_ThreadSummary { - margin-right: 0; - max-width: min(calc(100% - 36px), 600px); - } + .mx_ThreadSummary { + margin-right: 0; + max-width: min(calc(100% - 36px), 600px); + } - .mx_EventTile_avatar { - position: absolute; // for IRC layout - top: 12px; - left: -3px; - } + .mx_EventTile_avatar { + position: absolute; // for IRC layout + top: 12px; + left: -3px; + } - .mx_MessageTimestamp { - position: absolute; // for modern layout and IRC layout - inset-inline-start: auto; - inset-inline-end: 0; - } + .mx_MessageTimestamp { + position: absolute; // for modern layout and IRC layout + inset-inline-start: auto; + inset-inline-end: 0; + } - .mx_EventTile_msgOption { - // Override mx_EventTile_msgOption of mx_EventTile:not([data-layout="bubble"]) - margin-inline-end: 0; - } + .mx_EventTile_msgOption { + // Override mx_EventTile_msgOption of mx_EventTile:not([data-layout="bubble"]) + margin-inline-end: 0; + } - &.mx_EventTile_info { - .mx_EventTile_avatar { - left: 18px; + &.mx_EventTile_info { + .mx_EventTile_avatar { + left: 18px; + } } } } - } .mx_EventTile, .mx_GenericEventListSummary { diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index d79bd5fab64..161fe9a6cc1 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -668,6 +668,17 @@ limitations under the License. } } + /* events that do not require bubble layout */ + .mx_EventTile_line { + background: transparent; + } + + &:hover { + &::before { + background: transparent; + } + } + &::after { content: ""; clear: both; @@ -711,19 +722,6 @@ limitations under the License. } } -/* events that do not require bubble layout */ -.mx_GenericEventListSummary[data-layout=bubble] { - .mx_EventTile_line { - background: transparent; - } - - &:hover { - &::before { - background: transparent; - } - } -} - .mx_EventTile_tileError[data-layout=bubble] .mx_EventTile_line { flex-direction: column; // restore the centering }