From 85444a8f20071820b959003d675c9d7701487d5e Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 11 Mar 2022 14:12:20 +0000 Subject: [PATCH 1/4] Show displayname in non-narrow thread summeries --- res/css/views/rooms/_EventTile.scss | 5 +++++ src/components/views/rooms/ThreadSummary.tsx | 12 ++++++++++-- 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index a63efb7e286..058cb04ea57 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -784,6 +784,11 @@ $left-gutter: 64px; width: initial; } +.mx_ThreadInfo_sender { + margin-left: 8px; + font-weight: $font-semi-bold; +} + .mx_ThreadInfo_content { text-overflow: ellipsis; overflow: hidden; diff --git a/src/components/views/rooms/ThreadSummary.tsx b/src/components/views/rooms/ThreadSummary.tsx index 22c30dacdac..4afe497b5b9 100644 --- a/src/components/views/rooms/ThreadSummary.tsx +++ b/src/components/views/rooms/ThreadSummary.tsx @@ -61,12 +61,17 @@ const ThreadSummary = ({ mxEvent, thread }: IProps) => { { countSection } - + ); }; -export const ThreadMessagePreview = ({ thread }: Pick) => { +interface IPreviewProps { + thread: Thread; + showDisplayname?: boolean; +} + +export const ThreadMessagePreview = ({ thread, showDisplayname = false }: IPreviewProps) => { const cli = useContext(MatrixClientContext); const lastReply = useTypedEventEmitterState(thread, ThreadEvent.Update, () => thread.replyToEvent); const preview = useAsyncMemo(async () => { @@ -85,6 +90,9 @@ export const ThreadMessagePreview = ({ thread }: Pick) => { height={24} className="mx_ThreadInfo_avatar" /> + { showDisplayname &&
+ { sender?.name ?? lastReply.getSender() } +
}
{ preview } From babcf0cecdd2a09971d277b01d6315cfb73ae114 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 11 Mar 2022 16:12:47 +0000 Subject: [PATCH 2/4] Iterate PR --- res/css/views/right_panel/_ThreadPanel.scss | 4 ++++ res/css/views/rooms/_EventTile.scss | 24 +++++++++++---------- 2 files changed, 17 insertions(+), 11 deletions(-) diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss index cb438c47068..4b1d37f6930 100644 --- a/res/css/views/right_panel/_ThreadPanel.scss +++ b/res/css/views/right_panel/_ThreadPanel.scss @@ -224,6 +224,10 @@ limitations under the License. .mx_ThreadPanel_replies { margin-top: 8px; + + .mx_ThreadInfo_avatar { + top: 10px; + } } .mx_ThreadPanel_repliesSummary { diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 058cb04ea57..bbda8026538 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -723,14 +723,14 @@ $left-gutter: 64px; .mx_ThreadInfo { min-width: 267px; - max-width: min(calc(100% - 64px), 600px); + max-width: min(calc(100% - $left-gutter - 64px), 600px); // leave space on both left & right gutters width: fit-content; height: 40px; position: relative; background-color: $system; padding-left: 12px; display: flex; - align-items: center; + align-items: baseline; border-radius: 8px; padding-right: 16px; margin-top: 8px; @@ -738,16 +738,16 @@ $left-gutter: 64px; color: $secondary-content; box-sizing: border-box; justify-content: flex-start; - clear: both; overflow: hidden; + border: 1px solid $system; // always render a border so the hover effect doesn't require a re-layout &:hover { cursor: pointer; - border: 1px solid $quinary-content; - padding-top: 7px; - padding-bottom: 7px; - padding-left: 11px; - padding-right: 15px; + border-color: $quinary-content; + } + + &::before { + align-self: center; // v-align the threads icon } &::after { @@ -785,7 +785,6 @@ $left-gutter: 64px; } .mx_ThreadInfo_sender { - margin-left: 8px; font-weight: $font-semi-bold; } @@ -793,14 +792,17 @@ $left-gutter: 64px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; - padding-left: 8px; + margin-left: 4px; font-size: $font-12px; line-height: calc(2 * $font-12px); color: $secondary-content; + display: inline-block; } .mx_ThreadInfo_avatar { - float: left; + margin-right: 8px; + top: 50%; + transform: translateY(-50%); } .mx_ThreadInfo_threads-amount { From c046660fadfc410c95acf5fe780044a818f4bbb3 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 11 Mar 2022 17:36:28 +0000 Subject: [PATCH 3/4] Iterate PR to use line-height based approach --- res/css/views/right_panel/_ThreadPanel.scss | 4 ---- res/css/views/rooms/_EventTile.scss | 15 +++++++++------ 2 files changed, 9 insertions(+), 10 deletions(-) diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss index 4b1d37f6930..cb438c47068 100644 --- a/res/css/views/right_panel/_ThreadPanel.scss +++ b/res/css/views/right_panel/_ThreadPanel.scss @@ -224,10 +224,6 @@ limitations under the License. .mx_ThreadPanel_replies { margin-top: 8px; - - .mx_ThreadInfo_avatar { - top: 10px; - } } .mx_ThreadPanel_repliesSummary { diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index bbda8026538..fdd6a8d3c00 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -730,7 +730,7 @@ $left-gutter: 64px; background-color: $system; padding-left: 12px; display: flex; - align-items: baseline; + align-items: center; border-radius: 8px; padding-right: 16px; margin-top: 8px; @@ -738,6 +738,7 @@ $left-gutter: 64px; color: $secondary-content; box-sizing: border-box; justify-content: flex-start; + clear: both; overflow: hidden; border: 1px solid $system; // always render a border so the hover effect doesn't require a re-layout @@ -784,8 +785,11 @@ $left-gutter: 64px; width: initial; } +$threadInfoLineHeight: calc(2 * $font-12px); + .mx_ThreadInfo_sender { font-weight: $font-semi-bold; + line-height: $threadInfoLineHeight; } .mx_ThreadInfo_content { @@ -794,22 +798,21 @@ $left-gutter: 64px; white-space: nowrap; margin-left: 4px; font-size: $font-12px; - line-height: calc(2 * $font-12px); + line-height: $threadInfoLineHeight; color: $secondary-content; - display: inline-block; } .mx_ThreadInfo_avatar { + float: left; margin-right: 8px; - top: 50%; - transform: translateY(-50%); } .mx_ThreadInfo_threads-amount { - font-weight: 600; + font-weight: $font-semi-bold; position: relative; padding: 0 12px 0 8px; white-space: nowrap; + line-height: $threadInfoLineHeight; } .mx_EventTile[data-shape=ThreadsList] { From 70f7e19fe3ffc840bd8927fd53350520438fefc4 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 11 Mar 2022 18:13:05 +0000 Subject: [PATCH 4/4] Fix hover/focus chevron on thread summary relying on font character --- res/css/views/rooms/_EventTile.scss | 51 +++++++++++--------- res/img/compound/chevron-right-12px.svg | 10 ++++ src/components/views/rooms/ThreadSummary.tsx | 1 + 3 files changed, 40 insertions(+), 22 deletions(-) create mode 100644 res/img/compound/chevron-right-12px.svg diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index fdd6a8d3c00..afa05668ecf 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -742,40 +742,47 @@ $left-gutter: 64px; overflow: hidden; border: 1px solid $system; // always render a border so the hover effect doesn't require a re-layout - &:hover { - cursor: pointer; - border-color: $quinary-content; - } - - &::before { - align-self: center; // v-align the threads icon - } - - &::after { - content: "›"; + .mx_ThreadInfo_chevron { position: absolute; top: 0; right: 0; bottom: 0; width: 60px; - padding: 0 10px; - font-size: 15px; - line-height: 39px; box-sizing: border-box; - - text-align: right; - font-weight: 600; - background: linear-gradient(270deg, $system 52.6%, transparent 100%); opacity: 0; - transform: translateX(20px); + transform: translateX(60px); transition: all .1s ease-in-out; + + &::before { + content: ''; + position: absolute; + top: 50%; + right: 12px; + transform: translateY(-50%); + width: 12px; + height: 12px; + mask-image: url('$(res)/img/compound/chevron-right-12px.svg'); + mask-position: center; + mask-size: contain; + mask-repeat: no-repeat; + background-color: $secondary-content; + } } - &:hover::after { - opacity: 1; - transform: translateX(0); + &:hover, &:focus { + cursor: pointer; + border-color: $quinary-content; + + .mx_ThreadInfo_chevron { + opacity: 1; + transform: translateX(0); + } + } + + &::before { + align-self: center; // v-align the threads icon } } diff --git a/res/img/compound/chevron-right-12px.svg b/res/img/compound/chevron-right-12px.svg new file mode 100644 index 00000000000..02f61f36ff3 --- /dev/null +++ b/res/img/compound/chevron-right-12px.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/components/views/rooms/ThreadSummary.tsx b/src/components/views/rooms/ThreadSummary.tsx index 4afe497b5b9..47a38ff17e9 100644 --- a/src/components/views/rooms/ThreadSummary.tsx +++ b/src/components/views/rooms/ThreadSummary.tsx @@ -62,6 +62,7 @@ const ThreadSummary = ({ mxEvent, thread }: IProps) => { { countSection } +
); };