Design thread list tiles according to mockups (#7078)

Author: germain-gg

res/css/views/right_panel/_ThreadPanel.scss

@@ -21,13 +21,10 @@ limitations under the License.
     padding-right: 0;
 
     .mx_BaseCard_header {
-        padding: 6px 8px 6px 0;
-
         .mx_BaseCard_close,
         .mx_BaseCard_back {
             margin-top: 15px;
         }
-
         .mx_BaseCard_close {
             right: -8px;
         }
@@ -39,6 +36,7 @@ limitations under the License.
         display: flex;
         flex: 1;
         justify-content: space-between;
+        align-items: center;
 
         span:first-of-type {
             font-weight: 600;
@@ -49,7 +47,11 @@ limitations under the License.
 
         .mx_AccessibleButton {
             font-size: 12px;
-            color: $secondary-content;
+            color: $primary-content;
+        }
+
+        .mx_MessageActionBar_optionsButton {
+            position: relative;
         }
 
         .mx_ContextualMenu_wrapper {
@@ -178,6 +180,33 @@ limitations under the License.
         padding: 0 8px;
         box-sizing: border-box;
     }
+
+    .mx_ThreadPanel_dropdown {
+        padding: 4px 8px;
+        border-radius: 4px;
+        line-height: 1.5;
+        user-select: none;
+    }
+
+    .mx_ThreadPanel_dropdown:hover,
+    .mx_ThreadPanel_dropdown[aria-expanded=true] {
+        background: $quinary-content;
+    }
+
+    .mx_ThreadPanel_dropdown::before {
+        content: "";
+        width: 18px;
+        height: 18px;
+        background: currentColor;
+        mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
+        mask-size: 100%;
+        mask-repeat: no-repeat;
+        float: right;
+    }
+
+    .mx_ThreadPanel_dropdown[aria-expanded=true]::before {
+        transform: rotate(180deg);
+    }
 }
 
 .mx_ThreadPanel_viewInRoom::before {

res/css/views/rooms/_EventTile.scss

@@ -687,28 +687,82 @@ $left-gutter: 64px;
         padding-left: 11px;
         padding-right: 15px;
     }
+}
 
-    .mx_ThreadInfo_content {
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-        padding-left: 8px;
+.mx_ThreadInfo_content {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    padding-left: 8px;
+}
+
+.mx_ThreadInfo_thread-icon {
+    mask-image: url('$(res)/img/element-icons/thread-summary.svg');
+    mask-position: center;
+    height: 16px;
+    min-width: 16px;
+    background-color: $secondary-content;
+    mask-repeat: no-repeat;
+    mask-size: contain;
+}
+.mx_ThreadInfo_threads-amount {
+    font-weight: 600;
+    position: relative;
+    padding: 0 8px;
+    white-space: nowrap;
+}
+
+.mx_EventTile[data-shape=thread_list] {
+    --topOffset: 24px;
+    --leftOffset: 46px;
+
+    margin: var(--topOffset) 0;
+    border-radius: 8px;
+
+    &:hover {
+        background-color: $system;
     }
 
-    .mx_ThreadInfo_thread-icon {
-        mask-image: url('$(res)/img/element-icons/thread-summary.svg');
-        mask-position: center;
-        height: 16px;
-        min-width: 16px;
-        background-color: $secondary-content;
-        mask-repeat: no-repeat;
-        mask-size: contain;
+    &::after {
+        content: "";
+        position: absolute;
+        left: var(--leftOffset);
+        right: 0;
+        height: 1px;
+        bottom: calc(-1 * var(--topOffset));
+        background-color: $quinary-content;
     }
-    .mx_ThreadInfo_threads-amount {
-        font-weight: 600;
-        position: relative;
-        padding: 0 8px;
-        white-space: nowrap;
+
+    &:last-child {
+        &::after {
+            content: unset;
+        }
+        margin-bottom: 0;
+    }
+
+    &:first-child {
+        margin-top: 0;
+    }
+
+    padding-top: 0;
+
+    .mx_EventTile_avatar {
+        top: -4px;
+        left: 0;
+    }
+
+    .mx_SenderProfile {
+        margin-left: var(--leftOffset) !important;
+    }
+
+    .mx_EventTile_line {
+        padding-left: var(--leftOffset) !important;
+        padding-bottom: 0;
+    }
+    .mx_MessageTimestamp {
+        right: 0;
+        left: auto;
+        top: -23px;
     }
 }
 

src/components/structures/ThreadPanel.tsx

@@ -167,7 +167,7 @@ export const ThreadPanelHeader = ({ filterOption, setFilterOption }: {
     </ContextMenu> : null;
     return <div className="mx_ThreadPanel__header">
         <span>{ _t("Threads") }</span>
-        <ContextMenuButton inputRef={button} isExpanded={menuDisplayed} onClick={() => menuDisplayed ? closeMenu() : openMenu()}>
+        <ContextMenuButton className="mx_ThreadPanel_dropdown" inputRef={button} isExpanded={menuDisplayed} onClick={() => menuDisplayed ? closeMenu() : openMenu()}>
             { `${_t('Show:')} ${value.label}` }
         </ContextMenuButton>
         { contextMenu }

src/components/structures/ThreadView.tsx

@@ -39,15 +39,8 @@ import EditorStateTransfer from '../../utils/EditorStateTransfer';
 import RoomContext, { TimelineRenderingType } from '../../contexts/RoomContext';
 import ContentMessages from '../../ContentMessages';
 import UploadBar from './UploadBar';
-import { ChevronFace, ContextMenuTooltipButton } from './ContextMenu';
 import { _t } from '../../languageHandler';
-import IconizedContextMenu, {
-    IconizedContextMenuOption,
-    IconizedContextMenuOptionList,
-} from '../views/context_menus/IconizedContextMenu';
-import { ButtonEvent } from '../views/elements/AccessibleButton';
-import { copyPlaintext } from '../../utils/strings';
-import { sleep } from 'matrix-js-sdk/src/utils';
+import { ThreadListContextMenu } from '../views/context_menus/ThreadListContextMenu';
 
 interface IProps {
     room: Room;
@@ -63,24 +56,8 @@ interface IState {
     thread?: Thread;
     editState?: EditorStateTransfer;
     replyToEvent?: MatrixEvent;
-    threadOptionsPosition: DOMRect | null;
-    copyingPhase: CopyingPhase;
 }
 
-enum CopyingPhase {
-    Idle,
-    Copying,
-    Failed,
-}
-
-const contextMenuBelow = (elementRect: DOMRect) => {
-    // align the context menu's icons with the icon which opened the context menu
-    const left = elementRect.left + window.pageXOffset + elementRect.width;
-    const top = elementRect.bottom + window.pageYOffset + 17;
-    const chevronFace = ChevronFace.None;
-    return { left, top, chevronFace };
-};
-
 @replaceableComponent("structures.ThreadView")
 export default class ThreadView extends React.Component<IProps, IState> {
     static contextType = RoomContext;
@@ -90,12 +67,8 @@ export default class ThreadView extends React.Component<IProps, IState> {
 
     constructor(props: IProps) {
         super(props);
-        this.state = {
-            threadOptionsPosition: null,
-            copyingPhase: CopyingPhase.Idle,
-        };
+        this.state = {};
     }
-
     public componentDidMount(): void {
         this.setupThread(this.props.mxEvent);
         this.dispatcherRef = dis.register(this.onAction);
@@ -210,95 +183,12 @@ export default class ThreadView extends React.Component<IProps, IState> {
         }
     };
 
-    private onThreadOptionsClick = (ev: ButtonEvent): void => {
-        if (this.isThreadOptionsVisible) {
-            this.closeThreadOptions();
-        } else {
-            const position = ev.currentTarget.getBoundingClientRect();
-            this.setState({
-                threadOptionsPosition: position,
-            });
-        }
-    };
-
-    private closeThreadOptions = (): void => {
-        this.setState({
-            threadOptionsPosition: null,
-        });
-    };
-
-    private get isThreadOptionsVisible(): boolean {
-        return !!this.state.threadOptionsPosition;
-    }
-
-    private viewInRoom = (evt: ButtonEvent): void => {
-        evt.preventDefault();
-        evt.stopPropagation();
-        dis.dispatch({
-            action: 'view_room',
-            event_id: this.props.mxEvent.getId(),
-            highlighted: true,
-            room_id: this.props.mxEvent.getRoomId(),
-        });
-        this.closeThreadOptions();
-    };
-
-    private copyLinkToThread = async (evt: ButtonEvent): Promise<void> => {
-        evt.preventDefault();
-        evt.stopPropagation();
-
-        const matrixToUrl = this.props.permalinkCreator.forEvent(this.props.mxEvent.getId());
-
-        this.setState({
-            copyingPhase: CopyingPhase.Copying,
-        });
-
-        const hasSuccessfullyCopied = await copyPlaintext(matrixToUrl);
-
-        if (hasSuccessfullyCopied) {
-            await sleep(500);
-        } else {
-            this.setState({ copyingPhase: CopyingPhase.Failed });
-            await sleep(2500);
-        }
-
-        this.setState({ copyingPhase: CopyingPhase.Idle });
-
-        if (hasSuccessfullyCopied) {
-            this.closeThreadOptions();
-        }
-    };
-
     private renderThreadViewHeader = (): JSX.Element => {
         return <div className="mx_ThreadPanel__header">
             <span>{ _t("Thread") }</span>
-            <ContextMenuTooltipButton
-                className="mx_ThreadPanel_button mx_ThreadPanel_OptionsButton"
-                onClick={this.onThreadOptionsClick}
-                title={_t("Thread options")}
-                isExpanded={this.isThreadOptionsVisible}
-            />
-            { this.isThreadOptionsVisible && (<IconizedContextMenu
-                onFinished={this.closeThreadOptions}
-                className="mx_RoomTile_contextMenu"
-                compact
-                rightAligned
-                {...contextMenuBelow(this.state.threadOptionsPosition)}
-            >
-                <IconizedContextMenuOptionList>
-                    <IconizedContextMenuOption
-                        onClick={(e) => this.viewInRoom(e)}
-                        label={_t("View in room")}
-                        iconClassName="mx_ThreadPanel_viewInRoom"
-                    />
-                    <IconizedContextMenuOption
-                        onClick={(e) => this.copyLinkToThread(e)}
-                        label={_t("Copy link to thread")}
-                        iconClassName="mx_ThreadPanel_copyLinkToThread"
-                    />
-                </IconizedContextMenuOptionList>
-            </IconizedContextMenu>) }
-
+            <ThreadListContextMenu
+                mxEvent={this.props.mxEvent}
+                permalinkCreator={this.props.permalinkCreator} />
         </div>;
     };