PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Update Thread Panel to match latest designs (#12797)

Browse source 
* Add reusable empty state for the right panel

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Improve coverage

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update Thread Panel to match latest Figma

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* i18n

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Use --cpd-space var

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2024-07-23 10:12:07 +01:00 committed by GitHub
parent 5308c91842
commit 25fcd6a65f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 8 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
res/css/_common.pcss
View file

@ -851,7 +851,7 @@ legend {
@define-mixin ThreadSummaryIcon {
content: "";
display: inline-block;
mask-image: url("$(res)/img/element-icons/thread-summary.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/threads.svg");
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;

9
res/css/views/right_panel/_ThreadPanel.pcss
View file

@ -18,12 +18,13 @@ limitations under the License.
height: 100px;
overflow: visible;
/* Unset flex on the thread list, but not the thread view */
&:not(.mx_ThreadView) .mx_BaseCard_header .mx_BaseCard_header_title {
flex: unset;
}
.mx_BaseCard_header {
.mx_BaseCard_header_title {
.mx_BaseCard_header_title_heading {
margin-right: auto;
}
.mx_AccessibleButton {
font-size: 12px;
color: $secondary-content;

4
res/css/views/rooms/_EventTile.pcss
View file

@ -1024,7 +1024,7 @@ $left-gutter: 64px;
$notification-dot-size: 8px; /* notification dot next to the timestamp */
margin: calc(var(--topOffset) + $hrHeight) 0 var(--topOffset); /* include the height of horizontal line */
padding: $padding $spacing-24 $padding $padding;
padding: $padding;
border-radius: $borderRadius;
display: flex;
@ -1039,7 +1039,7 @@ $left-gutter: 64px;
&::after {
$inset-block-start: auto;
$inset-inline-end: calc(32px - $padding);
$inset-inline-end: calc(-1 * var(--cpd-space-2x));
$inset-block-end: calc(-1 * var(--topOffset) - $hrHeight); /* exclude the height of horizontal line */
$inset-inline-start: calc(var(--leftOffset) + $padding);
inset: $inset-block-start $inset-inline-end $inset-block-end $inset-inline-start;

1
res/img/element-icons/thread-summary.svg
View file

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 18 18"><path fill="#17191C" fill-rule="evenodd" d="M3 .25A2.75 2.75 0 0 0 .25 3v14a.75.75 0 0 0 1.2.6L4.916 15c.217-.162.48-.25.75-.25H15A2.75 2.75 0 0 0 17.75 12V3A2.75 2.75 0 0 0 15 .25H3ZM4.25 6A.75.75 0 0 1 5 5.25h8a.75.75 0 0 1 0 1.5H5A.75.75 0 0 1 4.25 6ZM5 8.25a.75.75 0 0 0 0 1.5h4a.75.75 0 1 0 0-1.5H5Z" clip-rule="evenodd"/></svg>
Side by side

Before

Width:  |  Height:  |  Size: 428 B

4
src/components/structures/ThreadPanel.tsx
View file

@ -36,7 +36,6 @@ import Measured from "../views/elements/Measured";
import PosthogTrackers from "../../PosthogTrackers";
import { ButtonEvent } from "../views/elements/AccessibleButton";
import Spinner from "../views/elements/Spinner";
import Heading from "../views/typography/Heading";
import { clearRoomNotification } from "../../utils/notifications";
import EmptyState from "../views/right_panel/EmptyState";
@ -138,9 +137,6 @@ export const ThreadPanelHeader: React.FC<{
return (
<div className="mx_BaseCard_header_title">
<Heading size="4" className="mx_BaseCard_header_title_heading">
{_t("common|threads")}
</Heading>
<Tooltip label={_t("threads|mark_all_read")}>
<IconButton onClick={onMarkAllThreadsReadClick} aria-label={_t("threads|mark_all_read")} size="24px">
<MarkAllThreadsReadIcon />

10
test/components/structures/__snapshots__/ThreadPanel-test.tsx.snap
View file

@ -5,11 +5,6 @@ exports[`ThreadPanel Header expect that All filter for ThreadPanelHeader properl
<div
class="mx_BaseCard_header_title"
>
<h4
class="mx_Heading_h4 mx_BaseCard_header_title_heading"
>
Threads
</h4>
<button
aria-label="Mark all as read"
class="_icon-button_bh2qc_17"
@ -45,11 +40,6 @@ exports[`ThreadPanel Header expect that My filter for ThreadPanelHeader properly
<div
class="mx_BaseCard_header_title"
>
<h4
class="mx_Heading_h4 mx_BaseCard_header_title_heading"
>
Threads
</h4>
<button
aria-label="Mark all as read"
class="_icon-button_bh2qc_17"