From 0f3edbb3c7fb295e5d31b58eee61135b60d86e47 Mon Sep 17 00:00:00 2001 From: Germain Date: Wed, 11 Oct 2023 10:53:22 +0100 Subject: [PATCH 1/6] Usability fixes for new room header --- res/css/views/rooms/_RoomHeader.pcss | 38 ++++++++++++++----- 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 | 16 ++++---- .../__snapshots__/FacePile-test.tsx.snap | 30 +++++++-------- .../__snapshots__/RoomFacePile-test.tsx.snap | 30 +++++++-------- .../__snapshots__/RoomHeader-test.tsx.snap | 6 ++- 11 files changed, 77 insertions(+), 58 deletions(-) diff --git a/res/css/views/rooms/_RoomHeader.pcss b/res/css/views/rooms/_RoomHeader.pcss index 2614e1713ad..d874dd15132 100644 --- a/res/css/views/rooms/_RoomHeader.pcss +++ b/res/css/views/rooms/_RoomHeader.pcss @@ -19,30 +19,41 @@ limitations under the License. padding: 0 var(--cpd-space-3x); border-bottom: 1px solid $separator; background-color: $background; + transition: all .3s ease; + cursor: pointer; +} + +.mx_RoomHeader:hover { + background-color: $header-panel-bg-hover; } .mx_RoomHeader_info { - cursor: pointer; flex: 1; } +.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 { display: flex; gap: var(--cpd-space-1x); align-items: center; + + /* Spacing of 64px between the topic and the buttons, but we have + to account for the gap of the flex items */ + padding-right: var(--cpd-space-13x); } .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 +62,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 f451d0114e6..299f51ffc0b 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 cb731798150..d9db8465831 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 2ece9e6a844..f10e6743511 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 ffe9b5ad12f..87ed2ba5bea 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 c257a064e8d..d3448a82c77 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 5c762199655..0165543faa9 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 2c580f74996..f18e3da4bf7 100644 --- a/src/components/views/rooms/RoomHeader.tsx +++ b/src/components/views/rooms/RoomHeader.tsx @@ -128,43 +128,43 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element { 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 6c2b64cc155..5c358d91c19 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 11056fad011..c354a474f9d 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 526a310106e..1948b6f7dd7 100644 --- a/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap +++ b/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap @@ -27,7 +27,11 @@ exports[`RoomHeader does not show the face pile for DMs 1`] = ` role="heading" title="!1:example.org" > - !1:example.org + + !1:example.org +