From ac32d45bcd75e17f4187bc40ef8825ad5eb988ca Mon Sep 17 00:00:00 2001 From: Germain Date: Wed, 11 Oct 2023 15:43:01 +0100 Subject: [PATCH] Usability fixes for new room header (#11729) * Usability fixes for new room header * lintfix * Apply padding to both heading and topic * lintfix * comment clarity * Remove title attr --- res/css/views/rooms/_RoomHeader.pcss | 37 ++++++++++++++----- res/themes/dark/css/_dark.pcss | 1 + res/themes/legacy-dark/css/_legacy-dark.pcss | 1 + .../legacy-light/css/_legacy-light.pcss | 1 + res/themes/light-custom/css/_custom.pcss | 1 + res/themes/light/css/_light.pcss | 1 + src/components/views/elements/FacePile.tsx | 10 ++--- src/components/views/rooms/RoomHeader.tsx | 17 ++++----- .../__snapshots__/FacePile-test.tsx.snap | 30 +++++++-------- .../__snapshots__/RoomFacePile-test.tsx.snap | 30 +++++++-------- .../__snapshots__/RoomHeader-test.tsx.snap | 7 +++- 11 files changed, 76 insertions(+), 60 deletions(-) diff --git a/res/css/views/rooms/_RoomHeader.pcss b/res/css/views/rooms/_RoomHeader.pcss index 2614e1713a..6fd3897c5e 100644 --- a/res/css/views/rooms/_RoomHeader.pcss +++ b/res/css/views/rooms/_RoomHeader.pcss @@ -19,11 +19,29 @@ limitations under the License. padding: 0 var(--cpd-space-3x); border-bottom: 1px solid $separator; background-color: $background; + transition: all 0.3s ease; + cursor: pointer; +} + +.mx_RoomHeader:hover { + background-color: $header-panel-bg-hover; } .mx_RoomHeader_info { - cursor: pointer; flex: 1; + /* We want the spacing to be 64px, 13x = 52px but we have a flex gap of + 12px set on the flex container, which sums up to 64 */ + padding-right: var(--cpd-space-13x); +} + +.mx_RoomHeader_truncated { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 1; + + overflow: hidden; + word-break: break-all; + text-overflow: ellipsis; } .mx_RoomHeader_heading { @@ -35,14 +53,6 @@ limitations under the License. .mx_RoomHeader_topic { height: 0; opacity: 0; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 1; - - overflow: hidden; - word-break: break-all; - text-overflow: ellipsis; - transition: all var(--transition-standard) ease 0.1s; } @@ -51,10 +61,19 @@ limitations under the License. value in pixels */ height: calc($font-13px * 1.5); opacity: 1; + + a:hover { + text-decoration: underline; + } +} + +.mx_RoomHeader_icon { + flex-shrink: 0; } .mx_RoomHeader .mx_FacePile { color: $secondary-content; + background: $background; display: flex; align-items: center; gap: var(--cpd-space-2x); diff --git a/res/themes/dark/css/_dark.pcss b/res/themes/dark/css/_dark.pcss index f451d0114e..299f51ffc0 100644 --- a/res/themes/dark/css/_dark.pcss +++ b/res/themes/dark/css/_dark.pcss @@ -54,6 +54,7 @@ $accent-1400: var(--cpd-color-green-1400); /* ******************** */ $inverted-bg-color: var(--cpd-color-bg-action-primary-rest); $header-panel-bg-color: var(--cpd-color-bg-subtle-secondary); +$header-panel-bg-hover: var(--cpd-color-gray-200); /* ******************** */ /* Theme specific colors */ diff --git a/res/themes/legacy-dark/css/_legacy-dark.pcss b/res/themes/legacy-dark/css/_legacy-dark.pcss index cb73179815..d9db846583 100644 --- a/res/themes/legacy-dark/css/_legacy-dark.pcss +++ b/res/themes/legacy-dark/css/_legacy-dark.pcss @@ -8,6 +8,7 @@ $bg-color: #181b21; $base-color: #15171b; $base-text-color: #edf3ff; $header-panel-bg-color: #22262e; +$header-panel-bg-hover: var(--cpd-color-gray-200); $header-panel-text-primary-color: #a1b2d1; $header-panel-text-secondary-color: #c8c8cd; $text-primary-color: #edf3ff; diff --git a/res/themes/legacy-light/css/_legacy-light.pcss b/res/themes/legacy-light/css/_legacy-light.pcss index 2ece9e6a84..f10e674351 100644 --- a/res/themes/legacy-light/css/_legacy-light.pcss +++ b/res/themes/legacy-light/css/_legacy-light.pcss @@ -16,6 +16,7 @@ $monospace-font-family: "Inconsolata", "Twemoji", "Apple Color Emoji", "Segoe UI /* unified palette */ /* try to use these colors when possible */ $header-panel-bg-color: #f3f8fd; +$header-panel-bg-hover: var(--cpd-color-gray-200); /* typical text (dark-on-white in light skin) */ $primary-fg-color: #2e2f32; diff --git a/res/themes/light-custom/css/_custom.pcss b/res/themes/light-custom/css/_custom.pcss index ffe9b5ad12..87ed2ba5be 100644 --- a/res/themes/light-custom/css/_custom.pcss +++ b/res/themes/light-custom/css/_custom.pcss @@ -57,6 +57,7 @@ $dialog-backdrop-color: var(--sidebar-color-50pct); /* --roomlist-background-color */ $header-panel-bg-color: var(--roomlist-background-color); +$header-panel-bg-hover: var(--cpd-color-gray-200); $panel-gradient: var(--roomlist-background-color-0pct), var(--roomlist-background-color); /* these were #f2f5f8 instead of #f3f8fd, but close enough */ $dark-panel-bg-color: var(--roomlist-background-color); diff --git a/res/themes/light/css/_light.pcss b/res/themes/light/css/_light.pcss index c257a064e8..d3448a82c7 100644 --- a/res/themes/light/css/_light.pcss +++ b/res/themes/light/css/_light.pcss @@ -75,6 +75,7 @@ $accent-1400: var(--cpd-color-green-1400); /* ******************** */ $inverted-bg-color: var(--cpd-color-bg-action-primary-rest); $header-panel-bg-color: var(--cpd-color-bg-subtle-primary); +$header-panel-bg-hover: var(--cpd-color-gray-200); /* ******************** */ /* Theme specific colors */ diff --git a/src/components/views/elements/FacePile.tsx b/src/components/views/elements/FacePile.tsx index 5c76219965..0165543faa 100644 --- a/src/components/views/elements/FacePile.tsx +++ b/src/components/views/elements/FacePile.tsx @@ -65,12 +65,10 @@ const FacePile: FC = ({ ); const content = ( -
- - {pileContents} - {children} - -
+ + {pileContents} + {children} + ); return tooltipLabel ? ( diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx index 2c580f7499..f7ff511ce8 100644 --- a/src/components/views/rooms/RoomHeader.tsx +++ b/src/components/views/rooms/RoomHeader.tsx @@ -123,48 +123,47 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element { size="lg" weight="semibold" dir="auto" - title={roomName} role="heading" aria-level={1} className="mx_RoomHeader_heading" > - {roomName} + {roomName} {!isDirectMessage && roomState.getJoinRule() === JoinRule.Public && ( - + )} {isDirectMessage && e2eStatus === E2EStatus.Verified && ( - + )} {isDirectMessage && e2eStatus === E2EStatus.Warning && ( - + )} {roomTopic && ( - + {roomTopicBody} )} diff --git a/test/components/views/elements/__snapshots__/FacePile-test.tsx.snap b/test/components/views/elements/__snapshots__/FacePile-test.tsx.snap index 6c2b64cc15..5c358d91c1 100644 --- a/test/components/views/elements/__snapshots__/FacePile-test.tsx.snap +++ b/test/components/views/elements/__snapshots__/FacePile-test.tsx.snap @@ -3,28 +3,24 @@ exports[` renders with a tooltip 1`] = `
- + 4 +
diff --git a/test/components/views/elements/__snapshots__/RoomFacePile-test.tsx.snap b/test/components/views/elements/__snapshots__/RoomFacePile-test.tsx.snap index 11056fad01..c354a474f9 100644 --- a/test/components/views/elements/__snapshots__/RoomFacePile-test.tsx.snap +++ b/test/components/views/elements/__snapshots__/RoomFacePile-test.tsx.snap @@ -3,28 +3,24 @@ exports[` renders 1`] = `
- + b +
diff --git a/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap b/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap index 526a310106..bec6c82cdd 100644 --- a/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap +++ b/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap @@ -25,9 +25,12 @@ exports[`RoomHeader does not show the face pile for DMs 1`] = ` class="_font-body-lg-semibold_1jx6b_83 mx_RoomHeader_heading" dir="auto" role="heading" - title="!1:example.org" > - !1:example.org + + !1:example.org +