imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use typographical quotes in no threads UI (#7713)

Browse source
This commit is contained in:
Germain 2022-02-07 15:13:34 +00:00 • committed by GitHub
parent ec92102fe3
commit 544957bdad
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 44 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -139,22 +139,23 @@ export const ThreadPanelHeaderFilterOptionItem = ({
</MenuItemRadio>;
};
export const ThreadPanelHeader = ({ filterOption, setFilterOption }: {
export const ThreadPanelHeader = ({ filterOption, setFilterOption, empty }: {
filterOption: ThreadFilterType;
setFilterOption: (filterOption: ThreadFilterType) => void;
empty: boolean;
}) => {
const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu<HTMLElement>();
const options: readonly ThreadPanelHeaderOption[] = [
{
label: _t("My threads"),
description: _t("Shows all threads you've participated in"),
key: ThreadFilterType.My,
},
{
label: _t("All threads"),
description: _t('Shows all threads from current room'),
key: ThreadFilterType.All,
},
{
label: _t("My threads"),
description: _t("Shows all threads you've participated in"),
key: ThreadFilterType.My,
},
];
const value = options.find(option => option.key === filterOption);
@ -179,10 +180,12 @@ export const ThreadPanelHeader = ({ filterOption, setFilterOption }: {
</ContextMenu> : null;
return <div className="mx_ThreadPanel__header">
<span>{ _t("Threads") }</span>
<ContextMenuButton className="mx_ThreadPanel_dropdown" inputRef={button} isExpanded={menuDisplayed} onClick={() => menuDisplayed ? closeMenu() : openMenu()}>
{ `${_t('Show:')} ${value.label}` }
</ContextMenuButton>
{ contextMenu }
{ !empty && <>
<ContextMenuButton className="mx_ThreadPanel_dropdown" inputRef={button} isExpanded={menuDisplayed} onClick={() => menuDisplayed ? closeMenu() : openMenu()}>
{ `${_t('Show:')} ${value.label}` }
</ContextMenuButton>
{ contextMenu }
</> }
</div>;
};
@ -195,9 +198,8 @@ const EmptyThread: React.FC<EmptyThreadIProps> = ({ filterOption, showAllThreads
return <aside className="mx_ThreadPanel_empty">
<div className="mx_ThreadPanel_largeIcon" />
<h2>{ _t("Keep discussions organised with threads") }</h2>
<p>{ _t("Threads help you keep conversations on-topic and easily "
+ "track them over time. Create the first one by using the "
+ "\"Reply in thread\" button on a message.") }
<p>{ _t("Reply to an ongoing thread or use “Reply in thread”"
+ "when hovering over a message to start a new one.") }
</p>
<p>
{ /* Always display that paragraph to prevent layout shift
@ -217,6 +219,8 @@ const ThreadPanel: React.FC<IProps> = ({ roomId, onClose, permalinkCreator }) =>
const [filterOption, setFilterOption] = useState<ThreadFilterType>(ThreadFilterType.All);
const ref = useRef<TimelinePanel>();
const [threadCount, setThreadCount] = useState(room.threads.size);
const [timelineSet, setTimelineSet] = useState<EventTimelineSet | null>(null);
useEffect(() => {
getThreadTimelineSet(mxClient, room, filterOption)
@ -232,6 +236,7 @@ const ThreadPanel: React.FC<IProps> = ({ roomId, onClose, permalinkCreator }) =>
});
useEventEmitter(room, ThreadEvent.New, async (thread: Thread) => {
setThreadCount(room.threads.size);
if (timelineSet) {
const capabilities = await mxClient.getCapabilities();
const serverSupportsThreads = capabilities['io.element.thread']?.enabled;
@ -267,7 +272,11 @@ const ThreadPanel: React.FC<IProps> = ({ roomId, onClose, permalinkCreator }) =>
showHiddenEventsInTimeline: true,
}}>
<BaseCard
header={<ThreadPanelHeader filterOption={filterOption} setFilterOption={setFilterOption} />}
header={<ThreadPanelHeader
filterOption={filterOption}
setFilterOption={setFilterOption}
empty={threadCount === 0}
/>}
className="mx_ThreadPanel"
onClose={onClose}
withoutScrollContainer={true}