Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
Add reusable empty state for the right panel
Browse files Browse the repository at this point in the history 
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
  • Loading branch information
@t3chguy
t3chguy committed Jul 19, 2024
1 parent 39d453a commit 90e8cb2
Show file tree
Hide file tree
Showing 6 changed files with 126 additions and 163 deletions.
1 change: 1 addition & 0 deletions res/css/_components.pcss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -259,6 +259,7 @@
@import "./views/polls/pollHistory/_PollHistory.pcss";
@import "./views/polls/pollHistory/_PollHistoryList.pcss";
@import "./views/right_panel/_BaseCard.pcss";
@import "./views/right_panel/_EmptyState.pcss";
@import "./views/right_panel/_EncryptionInfo.pcss";
@import "./views/right_panel/_PinnedMessagesCard.pcss";
@import "./views/right_panel/_RightPanelTabs.pcss";
Expand Down
45 changes: 45 additions & 0 deletions res/css/views/right_panel/_EmptyState.pcss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
/*
Copyright 2024 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

.mx_EmptyState {
height: 100%;
box-sizing: border-box;
padding: var(--cpd-space-4x);
text-align: center;

svg {
width: 56px;
height: 56px;
box-sizing: border-box;
border-radius: 8px;
padding: var(--cpd-space-3x);
background-color: $panel-actions;
}

&::before {
/* Bloom using magic numbers directly out of Figma */
content: "";
position: absolute;
z-index: -1;
width: 642px;
height: 775px;
right: -253.77px;
top: 0;
background: radial-gradient(49.95% 49.95% at 50% 50%, rgba(13, 189, 139, 0.12) 0%, rgba(18, 115, 235, 0) 100%);
transform: rotate(-89.69deg);
overflow: hidden;
}
}
75 changes: 8 additions & 67 deletions res/css/views/right_panel/_ThreadPanel.pcss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,10 +106,17 @@ limitations under the License.
}

.mx_RoomView_messagePanel {
/* To avoid the rule from being applied to .mx_ThreadPanel_empty */
&.mx_RoomView_messageListWrapper {
position: initial;
}

.mx_RoomView_messageListWrapper {
width: calc(100% + 6px); /* 8px - 2px */
}

.mx_RoomView_empty {
display: contents;
}
}

.mx_RoomView_MessageList {
Expand Down Expand Up @@ -168,72 +175,6 @@ limitations under the License.
mask-image: url("$(res)/img/element-icons/link.svg");
}

.mx_ThreadPanel_empty {
border-radius: 8px;
background: $background;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
padding: 20px;
box-sizing: border-box; /* Include padding and border */
width: 100%;

h2 {
color: $primary-content;
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-18px;
margin-top: 24px;
margin-bottom: 10px;
}

p {
font-size: $font-15px;
color: $secondary-content;
margin: 10px 0;
}

button {
border: none;
background: none;
color: $accent;
font-size: $font-15px;

&:hover,
&:active {
text-decoration: underline;
cursor: pointer;
}
}

.mx_ThreadPanel_empty_tip {
font-size: $font-12px;
line-height: $font-15px;

> b {
font-weight: var(--cpd-font-weight-semibold);
}
}
}

.mx_ThreadPanel_largeIcon {
width: 28px;
height: 28px;
padding: 18px;
background: $system;
border-radius: 50%;

&::after {
@mixin ThreadSummaryIcon;
width: inherit;
height: inherit;
}
}

.mx_ContextualMenu_wrapper {
.mx_ThreadPanel_Header_FilterOptionItem {
display: flex;
Expand Down
119 changes: 28 additions & 91 deletions src/components/structures/ThreadPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import React, { useContext, useEffect, useRef, useState } from "react";
import { EventTimelineSet, Room, Thread } from "matrix-js-sdk/src/matrix";
import { IconButton, Tooltip } from "@vector-im/compound-web";
import { logger } from "matrix-js-sdk/src/logger";
import { Icon as ThreadsIcon } from "@vector-im/compound-design-tokens/icons/threads.svg";

import { Icon as MarkAllThreadsReadIcon } from "../../../res/img/element-icons/check-all.svg";
import BaseCard from "../views/right_panel/BaseCard";
Expand All @@ -37,6 +38,7 @@ 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";

interface IProps {
roomId: string;
Expand Down Expand Up @@ -73,8 +75,7 @@ export const ThreadPanelHeaderFilterOptionItem: React.FC<
export const ThreadPanelHeader: React.FC<{
filterOption: ThreadFilterType;
setFilterOption: (filterOption: ThreadFilterType) => void;
empty: boolean;
}> = ({ filterOption, setFilterOption, empty }) => {
}> = ({ filterOption, setFilterOption }) => {
const mxClient = useMatrixClientContext();
const roomContext = useRoomContext();
const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu<HTMLElement>();
Expand Down Expand Up @@ -140,86 +141,24 @@ export const ThreadPanelHeader: React.FC<{
<Heading size="4" className="mx_BaseCard_header_title_heading">
{_t("common|threads")}
</Heading>
{!empty && (
<>
<Tooltip label={_t("threads|mark_all_read")}>
<IconButton
onClick={onMarkAllThreadsReadClick}
aria-label={_t("threads|mark_all_read")}
size="24px"
>
<MarkAllThreadsReadIcon />
</IconButton>
</Tooltip>
<div className="mx_ThreadPanel_vertical_separator" />
<ContextMenuButton
className="mx_ThreadPanel_dropdown"
ref={button}
isExpanded={menuDisplayed}
onClick={(ev: ButtonEvent) => {
openMenu();
PosthogTrackers.trackInteraction("WebRightPanelThreadPanelFilterDropdown", ev);
}}
>
{`${_t("threads|show_thread_filter")} ${value?.label}`}
</ContextMenuButton>
{contextMenu}
</>
)}
</div>
);
};

interface EmptyThreadIProps {
hasThreads: boolean;
filterOption: ThreadFilterType;
showAllThreadsCallback: () => void;
}

const EmptyThread: React.FC<EmptyThreadIProps> = ({ hasThreads, filterOption, showAllThreadsCallback }) => {
let body: JSX.Element;
if (hasThreads) {
body = (
<>
<p>
{_t("threads|empty_has_threads_tip", {
replyInThread: _t("action|reply_in_thread"),
})}
</p>
<p>
{/* Always display that paragraph to prevent layout shift when hiding the button */}
{filterOption === ThreadFilterType.My ? (
<button onClick={showAllThreadsCallback}>{_t("threads|show_all_threads")}</button>
) : (
<>&nbsp;</>
)}
</p>
</>
);
} else {
body = (
<>
<p>{_t("threads|empty_explainer")}</p>
<p className="mx_ThreadPanel_empty_tip">
{_t(
"threads|empty_tip",
{
replyInThread: _t("action|reply_in_thread"),
},
{
b: (sub) => <b>{sub}</b>,
},
)}
</p>
</>
);
}

return (
<div className="mx_ThreadPanel_empty">
<div className="mx_ThreadPanel_largeIcon" />
<h2>{_t("threads|empty_heading")}</h2>
{body}
<Tooltip label={_t("threads|mark_all_read")}>
<IconButton onClick={onMarkAllThreadsReadClick} aria-label={_t("threads|mark_all_read")} size="24px">
<MarkAllThreadsReadIcon />
</IconButton>
</Tooltip>
<div className="mx_ThreadPanel_vertical_separator" />
<ContextMenuButton
className="mx_ThreadPanel_dropdown"
ref={button}
isExpanded={menuDisplayed}
onClick={(ev: ButtonEvent) => {
openMenu();
PosthogTrackers.trackInteraction("WebRightPanelThreadPanelFilterDropdown", ev);
}}
>
{`${_t("threads|show_thread_filter")} ${value?.label}`}
</ContextMenuButton>
{contextMenu}
</div>
);
};
Expand Down Expand Up @@ -268,11 +207,7 @@ const ThreadPanel: React.FC<IProps> = ({ roomId, onClose, permalinkCreator }) =>
<BaseCard
hideHeaderButtons
header={
<ThreadPanelHeader
filterOption={filterOption}
setFilterOption={setFilterOption}
empty={!hasThreads}
/>
hasThreads && <ThreadPanelHeader filterOption={filterOption} setFilterOption={setFilterOption} />
}
id="thread-panel"
className="mx_ThreadPanel"
Expand All @@ -295,10 +230,12 @@ const ThreadPanel: React.FC<IProps> = ({ roomId, onClose, permalinkCreator }) =>
timelineSet={timelineSet}
showUrlPreview={false} // No URL previews at the threads list level
empty={
<EmptyThread
hasThreads={hasThreads}
filterOption={filterOption}
showAllThreadsCallback={() => setFilterOption(ThreadFilterType.All)}
<EmptyState
Icon={ThreadsIcon}
title={_t("threads|empty_title")}
description={_t("threads|empty_description", {
replyInThread: _t("action|reply_in_thread"),
})}
/>
}
alwaysShowTimestamps={true}
Expand Down
42 changes: 42 additions & 0 deletions src/components/views/right_panel/EmptyState.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
/*
Copyright 2024 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

import React, { ComponentType } from "react";
import { Text } from "@vector-im/compound-web";

import { Flex } from "../../utils/Flex";

interface Props {
Icon: ComponentType<React.SVGAttributes<SVGElement>>;
title: string;
description: string;
}

const EmptyState: React.FC<Props> = ({ Icon, title, description }) => {
return (
<Flex className="mx_EmptyState" direction="column" gap="var(--cpd-space-4x)" align="center" justify="center">
<Icon width="32px" height="32px" />
<Text size="lg" weight="semibold">
{title}
</Text>
<Text size="md" weight="regular">
{description}
</Text>
</Flex>
);
};

export default EmptyState;
7 changes: 2 additions & 5 deletions src/i18n/strings/en_EN.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3193,16 +3193,13 @@
"one": "%(count)s reply",
"other": "%(count)s replies"
},
"empty_explainer": "Threads help keep your conversations on-topic and easy to track.",
"empty_has_threads_tip": "Reply to an ongoing thread or use “%(replyInThread)s” when hovering over a message to start a new one.",
"empty_heading": "Keep discussions organised with threads",
"empty_tip": "<b>Tip:</b> Use “%(replyInThread)s” when hovering over a message.",
"empty_description": "Use “%(replyInThread)s” when hovering over a message.",
"empty_title": "Threads help keep your conversations on-topic and easy to track.",
"error_start_thread_existing_relation": "Can't create a thread from an event with an existing relation",
"mark_all_read": "Mark all as read",
"my_threads": "My threads",
"my_threads_description": "Shows all threads you've participated in",
"open_thread": "Open thread",
"show_all_threads": "Show all threads",
"show_thread_filter": "Show:"
},
"threads_activity_centre": {
Expand Down

0 comments on commit 90e8cb2

Please sign in to comment.