From 2367498f358e705841fef1d35a4509e7d85eccc3 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 17 Mar 2023 03:54:46 +0900 Subject: [PATCH 1/6] Replace the magic number for the profile resizer with variables on IRC layout Signed-off-by: Suguru Hirahara --- res/css/_common.pcss | 2 ++ res/css/structures/_RoomView.pcss | 6 +++++- res/css/views/rooms/_IRCLayout.pcss | 14 ++++++++++++-- 3 files changed, 19 insertions(+), 3 deletions(-) diff --git a/res/css/_common.pcss b/res/css/_common.pcss index 7b0d4c8d87c..6282a9c11f7 100644 --- a/res/css/_common.pcss +++ b/res/css/_common.pcss @@ -42,6 +42,8 @@ $timeline-image-border-radius: 8px; --transition-short: 0.1s; --transition-standard: 0.3s; + + --MessageTimestamp-width: $MessageTimestamp_width; } @media (prefers-reduced-motion) { diff --git a/res/css/structures/_RoomView.pcss b/res/css/structures/_RoomView.pcss index 755ec98ae26..b03ea7d0ab1 100644 --- a/res/css/structures/_RoomView.pcss +++ b/res/css/structures/_RoomView.pcss @@ -14,6 +14,10 @@ See the License for the specific language governing permissions and limitations under the License. */ +:root { + --RoomView_MessageList-padding: 18px; /* TODO: use a variable */ +} + .mx_RoomView_wrapper { display: flex; flex-direction: column; @@ -176,7 +180,7 @@ limitations under the License. .mx_RoomView_MessageList { list-style-type: none; - padding: 18px; + padding: var(--RoomView_MessageList-padding); /* mx_ProfileResizer depends on this value */ margin: 0; /* needed as min-height is set to clientHeight in ScrollPanel to prevent shrinking when WhoIsTypingTile is hidden */ diff --git a/res/css/views/rooms/_IRCLayout.pcss b/res/css/views/rooms/_IRCLayout.pcss index 61a7c5e090f..8b3b7666bdc 100644 --- a/res/css/views/rooms/_IRCLayout.pcss +++ b/res/css/views/rooms/_IRCLayout.pcss @@ -217,11 +217,21 @@ $irc-line-height: $font-18px; } .mx_ProfileResizer { + --resizer-width: 15px; + position: absolute; height: 100%; - width: 15px; - left: calc(80px + var(--name-width)); + width: var(--resizer-width); cursor: col-resize; z-index: 100; + + /* Add width of every element rendered before the resizer (including padding for the avatar and the display + name), subtracting the resizer width itself to prevent the resizer from overlapping the text. + Please note that MessageTimestamp does not have inline padding. */ + /* stylelint-disable-next-line declaration-colon-space-after */ + inset-inline-start: calc( + var(--RoomView_MessageList-padding) + var(--MessageTimestamp-width) + var(--icon-width) + + var(--right-padding) + var(--name-width) + var(--right-padding) - var(--resizer-width) + ); } } From 6eb76e91bc89086d02f9472dea602ef7180b042f Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 17 Mar 2023 04:11:00 +0900 Subject: [PATCH 2/6] Add a test Signed-off-by: Suguru Hirahara --- cypress/e2e/timeline/timeline.spec.ts | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/cypress/e2e/timeline/timeline.spec.ts b/cypress/e2e/timeline/timeline.spec.ts index 537b796f346..bc8d5f33f08 100644 --- a/cypress/e2e/timeline/timeline.spec.ts +++ b/cypress/e2e/timeline/timeline.spec.ts @@ -161,8 +161,22 @@ describe("Timeline", () => { "created and configured the room.", ).should("exist"); - // Check room name line-height is reset - cy.get(".mx_IRCLayout .mx_NewRoomIntro h2").should("have.css", "line-height", "normal"); + cy.get(".mx_IRCLayout").within(() => { + // Check room name line-height is reset + cy.get(".mx_NewRoomIntro h2").should("have.css", "line-height", "normal"); + + // Check the profile resizer's place + // See: _IRCLayout + // --RoomView_MessageList-padding = 18px (See: _RoomView.pcss) + // --MessageTimestamp-width = $MessageTimestamp_width = 46px (See: _common.pcss) + // --icon-width = 14px + // --right-padding = 5px + // --name-width = 80px + // --resizer-width = 15px + // 18px + 46px + 14px + 5px + 80px + 5px - 15px + // = 153px + cy.get(".mx_ProfileResizer").should("have.css", "inset-inline-start", "153px"); + }); cy.get(".mx_MainSplit").percySnapshotElement("Configured room on IRC layout"); }); From 0f8f9a67d074a2226c025508de8974600e4f37a6 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 17 Mar 2023 04:51:06 +0900 Subject: [PATCH 3/6] lint Signed-off-by: Suguru Hirahara --- res/css/_common.pcss | 1 - 1 file changed, 1 deletion(-) diff --git a/res/css/_common.pcss b/res/css/_common.pcss index 6282a9c11f7..bec6fe8844e 100644 --- a/res/css/_common.pcss +++ b/res/css/_common.pcss @@ -42,7 +42,6 @@ $timeline-image-border-radius: 8px; --transition-short: 0.1s; --transition-standard: 0.3s; - --MessageTimestamp-width: $MessageTimestamp_width; } From d796bf7ea511392385b631181a010fd92bc93f3c Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 17 Mar 2023 23:57:28 +0900 Subject: [PATCH 4/6] Remove the deprecated rules Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_IRCLayout.pcss | 1 - 1 file changed, 1 deletion(-) diff --git a/res/css/views/rooms/_IRCLayout.pcss b/res/css/views/rooms/_IRCLayout.pcss index 8b3b7666bdc..bd335af421b 100644 --- a/res/css/views/rooms/_IRCLayout.pcss +++ b/res/css/views/rooms/_IRCLayout.pcss @@ -228,7 +228,6 @@ $irc-line-height: $font-18px; /* Add width of every element rendered before the resizer (including padding for the avatar and the display name), subtracting the resizer width itself to prevent the resizer from overlapping the text. Please note that MessageTimestamp does not have inline padding. */ - /* stylelint-disable-next-line declaration-colon-space-after */ inset-inline-start: calc( var(--RoomView_MessageList-padding) + var(--MessageTimestamp-width) + var(--icon-width) + var(--right-padding) + var(--name-width) + var(--right-padding) - var(--resizer-width) From 8a31cb15ab134a084b126bb0778885a6a2131796 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 21 Mar 2023 01:00:24 +0900 Subject: [PATCH 5/6] Add --resizer-a11y 3px Signed-off-by: Suguru Hirahara --- cypress/e2e/timeline/timeline.spec.ts | 7 ++++--- res/css/views/rooms/_IRCLayout.pcss | 7 +++++-- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/cypress/e2e/timeline/timeline.spec.ts b/cypress/e2e/timeline/timeline.spec.ts index bc8d5f33f08..c90b1707e76 100644 --- a/cypress/e2e/timeline/timeline.spec.ts +++ b/cypress/e2e/timeline/timeline.spec.ts @@ -173,9 +173,10 @@ describe("Timeline", () => { // --right-padding = 5px // --name-width = 80px // --resizer-width = 15px - // 18px + 46px + 14px + 5px + 80px + 5px - 15px - // = 153px - cy.get(".mx_ProfileResizer").should("have.css", "inset-inline-start", "153px"); + // --resizer-a11y = 3px + // 18px + 46px + 14px + 5px + 80px + 5px - 15px - 3px + // = 150px + cy.get(".mx_ProfileResizer").should("have.css", "inset-inline-start", "150px"); }); cy.get(".mx_MainSplit").percySnapshotElement("Configured room on IRC layout"); diff --git a/res/css/views/rooms/_IRCLayout.pcss b/res/css/views/rooms/_IRCLayout.pcss index bd335af421b..276feeca036 100644 --- a/res/css/views/rooms/_IRCLayout.pcss +++ b/res/css/views/rooms/_IRCLayout.pcss @@ -218,6 +218,7 @@ $irc-line-height: $font-18px; .mx_ProfileResizer { --resizer-width: 15px; + --resizer-a11y: 3px; /* Magic number, to be replaced with something more proper from the perspective of a11y */ position: absolute; height: 100%; @@ -226,11 +227,13 @@ $irc-line-height: $font-18px; z-index: 100; /* Add width of every element rendered before the resizer (including padding for the avatar and the display - name), subtracting the resizer width itself to prevent the resizer from overlapping the text. + name), subtracting the resizer width itself to prevent the resizer from overlapping the text and moving + the resizer a bit to the left to make it easier to avoid selecting the resizer when highlighting text. Please note that MessageTimestamp does not have inline padding. */ inset-inline-start: calc( var(--RoomView_MessageList-padding) + var(--MessageTimestamp-width) + var(--icon-width) + - var(--right-padding) + var(--name-width) + var(--right-padding) - var(--resizer-width) + var(--right-padding) + var(--name-width) + var(--right-padding) - var(--resizer-width) - + var(--resizer-a11y) ; ); } } From 4146859ab52c0f1e07587c31164f33a69f1cb241 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 21 Mar 2023 02:22:24 +0900 Subject: [PATCH 6/6] Fix the declaration 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 276feeca036..21a7eab6e9a 100644 --- a/res/css/views/rooms/_IRCLayout.pcss +++ b/res/css/views/rooms/_IRCLayout.pcss @@ -233,7 +233,7 @@ $irc-line-height: $font-18px; inset-inline-start: calc( var(--RoomView_MessageList-padding) + var(--MessageTimestamp-width) + var(--icon-width) + var(--right-padding) + var(--name-width) + var(--right-padding) - var(--resizer-width) - - var(--resizer-a11y) ; + var(--resizer-a11y) ); } }