From 9e14ae947fbdcdb06683e4c67e7d942f6c358d2d Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 17 Jun 2022 16:36:49 +0900 Subject: [PATCH 01/11] Specify the data-layout=irc against ':not([data-layout=bubble])' Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_IRCLayout.pcss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/rooms/_IRCLayout.pcss b/res/css/views/rooms/_IRCLayout.pcss index 02ae02fa5eb..96ed02158a1 100644 --- a/res/css/views/rooms/_IRCLayout.pcss +++ b/res/css/views/rooms/_IRCLayout.pcss @@ -23,7 +23,7 @@ $irc-line-height: $font-18px; line-height: $irc-line-height !important; - .mx_EventTile { + .mx_EventTile[data-layout="irc"] { --EventTile_irc_line-padding-block: 1px; /* timestamps are links which shouldn't be underlined */ From c5ecf16021a8d7b23d435e4aecb98b8272fa5c58 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 17 Jun 2022 16:39:30 +0900 Subject: [PATCH 02/11] Include mx_EventTile_info in mx_EventTile[data-layout=irc] Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_IRCLayout.pcss | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/res/css/views/rooms/_IRCLayout.pcss b/res/css/views/rooms/_IRCLayout.pcss index 96ed02158a1..a94de42abc1 100644 --- a/res/css/views/rooms/_IRCLayout.pcss +++ b/res/css/views/rooms/_IRCLayout.pcss @@ -150,6 +150,13 @@ $irc-line-height: $font-18px; .mx_EditMessageComposer_buttons { position: relative; } + + &.mx_EventTile_info { + .mx_ViewSourceEvent, /* For hidden events */ + .mx_TextualEvent { + line-height: $irc-line-height; + } + } } .mx_EventTile_emote { @@ -162,13 +169,6 @@ $irc-line-height: $font-18px; margin: 0; } - .mx_EventTile.mx_EventTile_info { - .mx_ViewSourceEvent, /* For hidden events */ - .mx_TextualEvent { - line-height: $irc-line-height; - } - } - /* Suppress highlight thing from the normal Layout. */ .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line, .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line, From 3861c44ebd66880c26dbaa788553967805f48934 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 17 Jun 2022 16:46:39 +0900 Subject: [PATCH 03/11] Move declarations up, removing a default declaration Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_IRCLayout.pcss | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/res/css/views/rooms/_IRCLayout.pcss b/res/css/views/rooms/_IRCLayout.pcss index a94de42abc1..f06f981f9bf 100644 --- a/res/css/views/rooms/_IRCLayout.pcss +++ b/res/css/views/rooms/_IRCLayout.pcss @@ -26,17 +26,16 @@ $irc-line-height: $font-18px; .mx_EventTile[data-layout="irc"] { --EventTile_irc_line-padding-block: 1px; + display: flex; + align-items: flex-start; + padding-top: 0; + /* timestamps are links which shouldn't be underlined */ > a { text-decoration: none; min-width: $MessageTimestamp_width; } - display: flex; - flex-direction: row; - align-items: flex-start; - padding-top: 0; - > * { margin-right: var(--right-padding); } From bb79f0e145ad101098e9c118a6a3b190e0148468 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 17 Jun 2022 16:49:34 +0900 Subject: [PATCH 04/11] Tidy up mx_EventTile:hover Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_IRCLayout.pcss | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/res/css/views/rooms/_IRCLayout.pcss b/res/css/views/rooms/_IRCLayout.pcss index f06f981f9bf..219148981bc 100644 --- a/res/css/views/rooms/_IRCLayout.pcss +++ b/res/css/views/rooms/_IRCLayout.pcss @@ -156,6 +156,15 @@ $irc-line-height: $font-18px; line-height: $irc-line-height; } } + + /* Suppress highlight thing from the normal Layout. */ + &:hover.mx_EventTile_verified, + &:hover.mx_EventTile_unverified, + &:hover.mx_EventTile_unknown { + .mx_EventTile_line { + border-left: 0; + } + } } .mx_EventTile_emote { @@ -168,13 +177,6 @@ $irc-line-height: $font-18px; margin: 0; } - /* Suppress highlight thing from the normal Layout. */ - .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line, - .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line, - .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line { - border-left: 0; - } - .mx_ReplyChain { margin: 0; .mx_DisambiguatedProfile { From 4a30bcbf4f1b71b60d2223b45acf7b2e2274e6b1 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 17 Jun 2022 17:45:22 +0900 Subject: [PATCH 05/11] Use a spacing variable Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_IRCLayout.pcss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/res/css/views/rooms/_IRCLayout.pcss b/res/css/views/rooms/_IRCLayout.pcss index 219148981bc..6060d2a6ee5 100644 --- a/res/css/views/rooms/_IRCLayout.pcss +++ b/res/css/views/rooms/_IRCLayout.pcss @@ -19,7 +19,7 @@ $irc-line-height: $font-18px; .mx_IRCLayout { --name-width: 70px; --icon-width: 14px; - --right-padding: 5px; + --right-padding: 5px; /* TODO: Use a spacing variable */ line-height: $irc-line-height !important; @@ -90,7 +90,7 @@ $irc-line-height: $font-18px; visibility: collapse; /* Override the inherited margin. */ margin-left: 0; - padding: 0 5px; + padding: 0 5px; /* TODO: Use a spacing variable */ } &:hover { @@ -102,7 +102,7 @@ $irc-line-height: $font-18px; display: inline; background-color: $event-selected-color; border-radius: 8px 0 0 8px; - padding-right: 8px; + padding-right: $spacing-8; } > .mx_DisambiguatedProfile_mxid { From 3f9129147fa631fc45a432acb7a880e2b7321de3 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 17 Jun 2022 19:06:57 +0900 Subject: [PATCH 06/11] Sort by order properties Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_IRCLayout.pcss | 30 ++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/res/css/views/rooms/_IRCLayout.pcss b/res/css/views/rooms/_IRCLayout.pcss index 6060d2a6ee5..495926b4169 100644 --- a/res/css/views/rooms/_IRCLayout.pcss +++ b/res/css/views/rooms/_IRCLayout.pcss @@ -40,21 +40,6 @@ $irc-line-height: $font-18px; margin-right: var(--right-padding); } - .mx_EventTile_msgOption { - order: 5; - flex-shrink: 0; - } - - .mx_EventTile_line, - .mx_EventTile_reply { - display: flex; - flex-direction: column; - order: 3; - flex-grow: 1; - flex-shrink: 1; - min-width: 0; - } - .mx_EventTile_avatar { order: 1; position: relative; @@ -142,10 +127,25 @@ $irc-line-height: $font-18px; } } + .mx_EventTile_line, + .mx_EventTile_reply { + order: 3; + display: flex; + flex-direction: column; + flex-grow: 1; + flex-shrink: 1; + min-width: 0; + } + .mx_EventTile_reply { order: 4; } + .mx_EventTile_msgOption { + order: 5; + flex-shrink: 0; + } + .mx_EditMessageComposer_buttons { position: relative; } From ef9a28f897c88388ae36f250f1cca383197f0e9c Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 7 Jul 2022 17:38:17 +0900 Subject: [PATCH 07/11] Move and add comments Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_IRCLayout.pcss | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/res/css/views/rooms/_IRCLayout.pcss b/res/css/views/rooms/_IRCLayout.pcss index 495926b4169..a858294352d 100644 --- a/res/css/views/rooms/_IRCLayout.pcss +++ b/res/css/views/rooms/_IRCLayout.pcss @@ -30,10 +30,9 @@ $irc-line-height: $font-18px; align-items: flex-start; padding-top: 0; - /* timestamps are links which shouldn't be underlined */ > a { - text-decoration: none; - min-width: $MessageTimestamp_width; + text-decoration: none; /* timestamps are links which shouldn't be underlined */ + min-width: $MessageTimestamp_width; /* ensure space for EventTile without timestamp */ } > * { @@ -73,8 +72,7 @@ $irc-line-height: $font-18px; > .mx_DisambiguatedProfile_mxid { visibility: collapse; - /* Override the inherited margin. */ - margin-left: 0; + margin-left: 0; /* Override the inherited margin. */ padding: 0 5px; /* TODO: Use a spacing variable */ } From 82c839e889440eb630d915f7c5134ff90ea31631 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 12 Jul 2022 23:35:35 +0900 Subject: [PATCH 08/11] Merge style declarations - flex-shrink and height Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_IRCLayout.pcss | 21 ++++++++++++--------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/res/css/views/rooms/_IRCLayout.pcss b/res/css/views/rooms/_IRCLayout.pcss index a858294352d..59bb9fdb63b 100644 --- a/res/css/views/rooms/_IRCLayout.pcss +++ b/res/css/views/rooms/_IRCLayout.pcss @@ -39,11 +39,21 @@ $irc-line-height: $font-18px; margin-right: var(--right-padding); } + .mx_EventTile_avatar, + .mx_EventTile_e2eIcon { + height: $irc-line-height; + } + + .mx_EventTile_avatar, + .mx_DisambiguatedProfile, + .mx_EventTile_e2eIcon, + .mx_EventTile_msgOption { + flex-shrink: 0; + } + .mx_EventTile_avatar { order: 1; position: relative; - flex-shrink: 0; - height: $irc-line-height; display: flex; align-items: center; @@ -61,7 +71,6 @@ $irc-line-height: $font-18px; width: var(--name-width); margin-inline-end: 0; /* override mx_EventTile > * */ order: 2; - flex-shrink: 0; > .mx_DisambiguatedProfile_displayName { width: 100%; @@ -98,12 +107,7 @@ $irc-line-height: $font-18px; .mx_EventTile_e2eIcon { padding: 0; - - flex-shrink: 0; flex-grow: 0; - - height: $font-18px; - background-position: center; } @@ -141,7 +145,6 @@ $irc-line-height: $font-18px; .mx_EventTile_msgOption { order: 5; - flex-shrink: 0; } .mx_EditMessageComposer_buttons { From a5ccb6419c58460c4a77052e86e42d3bb81e9444 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Mon, 20 Feb 2023 17:58:22 +0900 Subject: [PATCH 09/11] Consider cascading order Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_IRCLayout.pcss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/res/css/views/rooms/_IRCLayout.pcss b/res/css/views/rooms/_IRCLayout.pcss index 59bb9fdb63b..033b87599f8 100644 --- a/res/css/views/rooms/_IRCLayout.pcss +++ b/res/css/views/rooms/_IRCLayout.pcss @@ -23,6 +23,10 @@ $irc-line-height: $font-18px; line-height: $irc-line-height !important; + blockquote { + margin: 0; + } + .mx_EventTile[data-layout="irc"] { --EventTile_irc_line-padding-block: 1px; @@ -174,10 +178,6 @@ $irc-line-height: $font-18px; } } - blockquote { - margin: 0; - } - .mx_ReplyChain { margin: 0; .mx_DisambiguatedProfile { From 7db02fe458684356830538f702e2b3b3981a4d3f Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Mon, 20 Feb 2023 18:01:34 +0900 Subject: [PATCH 10/11] Move order declaration top Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_IRCLayout.pcss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/rooms/_IRCLayout.pcss b/res/css/views/rooms/_IRCLayout.pcss index 033b87599f8..61f24484357 100644 --- a/res/css/views/rooms/_IRCLayout.pcss +++ b/res/css/views/rooms/_IRCLayout.pcss @@ -72,9 +72,9 @@ $irc-line-height: $font-18px; } .mx_DisambiguatedProfile { + order: 2; width: var(--name-width); margin-inline-end: 0; /* override mx_EventTile > * */ - order: 2; > .mx_DisambiguatedProfile_displayName { width: 100%; From 0d039fad7bfa6611d55383a79b9f342d822ec153 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sat, 25 Mar 2023 21:55:54 +0900 Subject: [PATCH 11/11] Fix an invalid comment Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_IRCLayout.pcss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/rooms/_IRCLayout.pcss b/res/css/views/rooms/_IRCLayout.pcss index bc39f39d3df..1523bf88eee 100644 --- a/res/css/views/rooms/_IRCLayout.pcss +++ b/res/css/views/rooms/_IRCLayout.pcss @@ -17,7 +17,7 @@ limitations under the License. $irc-line-height: $font-18px; .mx_IRCLayout { - --name-width: 80px; // cf. ircDisplayNameWidth on Settings.tsx + --name-width: 80px; /* cf. ircDisplayNameWidth on Settings.tsx */ --icon-width: 14px; --line-height: $irc-line-height; --right-padding: 5px; /* TODO: Use a spacing variable */