Page MenuHomePhorge
Files F32385866

D3376.1765333331.diff
No OneTemporary
Actions

Size
5 KB
Referenced Files
None
Subscribers
None

D3376.1765333331.diff
View Options

diff --git a/web/components/menu.css b/web/components/menu.css
--- a/web/components/menu.css
+++ b/web/components/menu.css
@@ -2,33 +2,54 @@
background-color: transparent;
border: none;
cursor: pointer;
- color: var(--thread-top-bar-menu-color);
+ color: inherit;
+}
+
+div.menuActionListContainer {
+ position: absolute;
+ z-index: 4;
}
div.menuActionList {
position: absolute;
- right: 10px;
- top: 55px;
z-index: 1;
display: flex;
flex-direction: column;
background-color: var(--menu-bg);
+ color: var(--menu-color);
border-radius: 4px;
padding: 4px 0;
+ line-height: var(--line-height-text);
+ min-width: max-content;
+}
+
+div.menuActionListThreadActions {
+ font-size: var(--m-font-16);
+ top: 40px;
+ right: -20px;
+}
+
+div.menuActionListMemberActions {
+ font-size: var(--xs-font-12);
+ background-color: var(--menu-bg-light);
+ color: var(--menu-color-light);
+ top: 0;
+ right: 5px;
}
button.menuAction {
+ color: inherit;
z-index: 1;
background-color: transparent;
padding: 12px 16px;
- color: var(--menu-color);
- background-color: var(--menu-bg);
- font-size: var(--m-font-16);
line-height: 1.5;
+ background-color: transparent;
border: none;
cursor: pointer;
display: flex;
align-items: center;
+ color: inherit;
+ font-size: inherit;
}
button.menuAction:hover {
@@ -36,11 +57,10 @@
}
div.menuActionIcon {
- font-size: var(--l-font-18);
+ font-size: 1.125em;
display: flex;
justify-content: center;
margin-right: 8px;
- width: 20px;
}
button.menuActionDangerous {
diff --git a/web/components/menu.react.js b/web/components/menu.react.js
--- a/web/components/menu.react.js
+++ b/web/components/menu.react.js
@@ -1,18 +1,35 @@
// @flow
+import classnames from 'classnames';
import * as React from 'react';
+import { useRenderInMenuPortal } from '../menu-portal-provider.react';
import css from './menu.css';
+type MenuVariant = 'thread-actions' | 'member-actions';
+
type MenuProps = {
- icon: React.Node,
- children: $ReadOnlyArray<React.Node>,
+ +icon: React.Node,
+ +children: $ReadOnlyArray<React.Node>,
+ +variant?: MenuVariant,
+ +onChange?: boolean => void,
};
function Menu(props: MenuProps): React.Node {
const [isOpen, setIsOpen] = React.useState(false);
+ const [buttonPosition, setButtonPosition] = React.useState(null);
+
+ const buttonRef = React.useRef();
+ const renderInMenuPortal = useRenderInMenuPortal();
+ const { icon, children, variant = 'thread-actions', onChange } = props;
- const { icon, children } = props;
+ const updatePosition = React.useCallback(() => {
+ if (buttonRef.current) {
+ setButtonPosition(buttonRef.current.getBoundingClientRect());
+ }
+ }, []);
+
+ React.useEffect(updatePosition, [updatePosition]);
const closeMenuCallback = React.useCallback(() => {
document.removeEventListener('click', closeMenuCallback);
@@ -21,6 +38,20 @@
}
}, [isOpen]);
+ React.useEffect(() => {
+ if (onChange) {
+ onChange(isOpen);
+ }
+ }, [isOpen, onChange]);
+
+ React.useEffect(() => {
+ if (!window) {
+ return undefined;
+ }
+
+ window.addEventListener('resize', updatePosition);
+ return () => window.removeEventListener('resize', updatePosition);
+ });
React.useEffect(() => {
if (!document || !isOpen) {
return undefined;
@@ -30,8 +61,9 @@
}, [closeMenuCallback, isOpen]);
const switchMenuCallback = React.useCallback(() => {
+ updatePosition();
setIsOpen(isMenuOpen => !isMenuOpen);
- }, []);
+ }, [updatePosition]);
if (children.length === 0) {
return null;
@@ -39,16 +71,35 @@
let menuActionList = null;
if (isOpen) {
- menuActionList = <div className={css.menuActionList}>{children}</div>;
+ const menuActionListClasses = classnames(css.menuActionList, {
+ [css.menuActionListThreadActions]: variant === 'thread-actions',
+ [css.menuActionListMemberActions]: variant === 'member-actions',
+ });
+
+ const actionListStyle = buttonPosition
+ ? {
+ top: buttonPosition.top,
+ left: buttonPosition.left,
+ }
+ : {};
+ menuActionList = renderInMenuPortal(
+ <div style={actionListStyle} className={css.menuActionListContainer}>
+ <div className={menuActionListClasses}>{children}</div>
+ </div>,
+ );
}
return (
- <div>
- <button className={css.menuButton} onClick={switchMenuCallback}>
+ <>
+ <button
+ ref={buttonRef}
+ className={css.menuButton}
+ onClick={switchMenuCallback}
+ >
{icon}
</button>
{menuActionList}
- </div>
+ </>
);
}
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -103,8 +103,10 @@
--text-message-default-background: var(--shades-black-80);
--message-action-tooltip-bg: var(--shades-black-90);
--menu-bg: var(--shades-black-90);
+ --menu-bg-light: var(--shades-black-80);
--menu-separator-color: var(--shades-black-80);
--menu-color: var(--shades-black-60);
+ --menu-color-light: var(--shades-white-60);
--menu-color-hover: var(--shades-white-100);
--menu-color-dangerous: var(--error-primary);
--menu-color-dangerous-hover: var(--error-light-50);

File Metadata

Mime Type
text/plain
Expires
Wed, Dec 10, 2:22 AM (21 h, 16 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5859931
Default Alt Text
D3376.1765333331.diff (5 KB)

Event Timeline