Page MenuHomePhorge
Files F32515760

D3187.1767121503.diff
No OneTemporary
Actions

Size
3 KB
Referenced Files
None
Subscribers
None

D3187.1767121503.diff
View Options

diff --git a/web/chat/thread-menu.css b/web/chat/thread-menu.css
new file mode 100644
--- /dev/null
+++ b/web/chat/thread-menu.css
@@ -0,0 +1,22 @@
+button.topBarMenuButton {
+ background-color: transparent;
+ border: none;
+ cursor: pointer;
+ color: var(--thread-top-bar-menu-color);
+}
+
+div.topBarMenuActionList {
+ position: absolute;
+ right: 10px;
+ top: 55px;
+ z-index: 1;
+ display: flex;
+ flex-direction: column;
+ background-color: var(--thread-menu-bg);
+ border-radius: 4px;
+ padding: 5px 0px;
+}
+
+div.disabled {
+ display: none;
+}
diff --git a/web/chat/thread-menu.react.js b/web/chat/thread-menu.react.js
new file mode 100644
--- /dev/null
+++ b/web/chat/thread-menu.react.js
@@ -0,0 +1,61 @@
+// @flow
+
+import classNames from 'classnames';
+import * as React from 'react';
+
+import { type ThreadInfo } from 'lib/types/thread-types';
+
+import SWMansionIcon from '../SWMansionIcon.react';
+import css from './thread-menu.css';
+
+type ThreadMenuProps = {
+ +threadInfo: ThreadInfo,
+};
+
+function ThreadMenu(props: ThreadMenuProps): React.Node {
+ const [isOpen, setIsOpen] = React.useState(false);
+
+ // eslint-disable-next-line no-unused-vars
+ const { threadInfo } = props;
+
+ const menuItems = [];
+
+ const menuActionListClasses = classNames(css.topBarMenuActionList, {
+ [css.disabled]: !isOpen,
+ });
+
+ const clickOutsideCallback = React.useCallback(() => {
+ window.removeEventListener('click', clickOutsideCallback);
+ if (isOpen) {
+ setIsOpen(false);
+ }
+ }, [isOpen]);
+
+ React.useEffect(() => {
+ if (!window || !isOpen) {
+ return undefined;
+ }
+ window.addEventListener('click', clickOutsideCallback);
+ return () => window.removeEventListener('click', clickOutsideCallback);
+ }, [clickOutsideCallback, isOpen]);
+
+ if (menuItems.length === 0) {
+ return null;
+ }
+
+ return (
+ <div>
+ <button
+ className={css.topBarMenuButton}
+ onClick={() => {
+ setIsOpen(!isOpen);
+ }}
+ >
+ <SWMansionIcon icon="menu-vertical" size={20} />
+ </button>
+ <div className={menuActionListClasses}>{menuItems}</div>
+ </div>
+ );
+}
+
+export default ThreadMenu;
diff --git a/web/chat/thread-top-bar.react.js b/web/chat/thread-top-bar.react.js
--- a/web/chat/thread-top-bar.react.js
+++ b/web/chat/thread-top-bar.react.js
@@ -4,8 +4,8 @@
import type { ThreadInfo } from 'lib/types/thread-types';
-import SWMansionIcon from '../SWMansionIcon.react';
import ThreadAncestors from './chat-thread-ancestors.react';
+import ThreadMenu from './thread-menu.react';
import css from './thread-top-bar.css';
type threadTopBarProps = {
@@ -30,9 +30,7 @@
<p className={css.threadTitle}>{threadInfo.uiName}</p>
<ThreadAncestors threadInfo={threadInfo} />
</div>
- <button className={css.topBarMenu}>
- <SWMansionIcon icon="menu-vertical" size={20} />
- </button>
+ <ThreadMenu threadInfo={threadInfo} />
</div>
);
}
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -100,4 +100,5 @@
--thread-ancestor-keyserver-border: var(--shades-black-70);
--thread-ancestor-color-light: var(--shades-white-70);
--thread-ancestor-color-dark: var(--shades-black-100);
+ --thread-menu-bg: var(--shades-black-90);
}

File Metadata

Mime Type
text/plain
Expires
Tue, Dec 30, 7:05 PM (2 h, 48 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5869253
Default Alt Text
D3187.1767121503.diff (3 KB)

Event Timeline