diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss index b890658bde..a0ba5512c4 100644 --- a/res/css/views/right_panel/_ThreadPanel.scss +++ b/res/css/views/right_panel/_ThreadPanel.scss @@ -290,3 +290,61 @@ limitations under the License. .mx_ThreadPanel_copyLinkToThread::before { 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: 48px; + bottom: 8px; + left: 8px; + right: 8px; + padding: 20px; + + h2 { + color: $primary-content; + font-weight: 600; + font-size: $font-18px; + } + + p { + font-size: $font-15px; + color: $secondary-content; + } + + button { + border: none; + background: none; + color: $accent; + + &:hover, + &:active { + text-decoration: underline; + cursor: pointer; + } + } +} + +.mx_ThreadPanel_largeIcon { + width: 28px; + height: 28px; + padding: 18px; + background: $system; + border-radius: 50%; + + &::after { + content: ""; + width: inherit; + height: inherit; + mask-image: url('$(res)/img/element-icons/thread-summary.svg'); + mask-position: center; + display: inline-block; + mask-repeat: no-repeat; + mask-size: contain; + background-color: $secondary-content; + } +} diff --git a/src/components/structures/ThreadPanel.tsx b/src/components/structures/ThreadPanel.tsx index 3754e0d364..5adaf61713 100644 --- a/src/components/structures/ThreadPanel.tsx +++ b/src/components/structures/ThreadPanel.tsx @@ -180,6 +180,30 @@ export const ThreadPanelHeader = ({ filterOption, setFilterOption }: { ; }; +interface EmptyThreadIProps { + filterOption: ThreadFilterType; + showAllThreadsCallback: () => void; +} + +const EmptyThread: React.FC = ({ filterOption, showAllThreadsCallback }) => { + return ; +}; + const ThreadPanel: React.FC = ({ roomId, onClose, permalinkCreator }) => { const mxClient = useContext(MatrixClientContext); const roomContext = useContext(RoomContext); @@ -216,7 +240,10 @@ const ThreadPanel: React.FC = ({ roomId, onClose, permalinkCreator }) => sendReadReceiptOnLoad={false} // No RR support in thread's MVP timelineSet={filteredTimelineSet} showUrlPreview={true} - empty={
empty
} + empty={ setFilterOption(ThreadFilterType.All)} + />} alwaysShowTimestamps={true} layout={Layout.Group} hideThreadedMessages={false} diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 1fab6eda59..202b442e5a 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -3023,6 +3023,9 @@ "All threads": "All threads", "Shows all threads from current room": "Shows all threads from current room", "Show:": "Show:", + "Keep discussions organised with threads": "Keep discussions organised with threads", + "Threads help you keep conversations on-topic and easilytrack them over time. Create the first one by using the\"Reply in thread\" button on a message.": "Threads help you keep conversations on-topic and easilytrack them over time. Create the first one by using the\"Reply in thread\" button on a message.", + "Show all threads": "Show all threads", "Thread": "Thread", "Tried to load a specific point in this room's timeline, but you do not have permission to view the message in question.": "Tried to load a specific point in this room's timeline, but you do not have permission to view the message in question.", "Tried to load a specific point in this room's timeline, but was unable to find it.": "Tried to load a specific point in this room's timeline, but was unable to find it.",