Page MenuHomePhabricator
Files F3539247

D3204.id9679.diff
No OneTemporary
Actions

D3204.id9679.diff
View Options

diff --git a/web/chat/chat-thread-list-item-menu.react.js b/web/chat/chat-thread-list-item-menu.react.js
--- a/web/chat/chat-thread-list-item-menu.react.js
+++ b/web/chat/chat-thread-list-item-menu.react.js
@@ -1,5 +1,6 @@
// @flow
+import classNames from 'classnames';
import * as React from 'react';
import {
@@ -16,7 +17,6 @@
useDispatchActionPromise,
} from 'lib/utils/action-utils';
-import Button from '../components/button.react';
import SWMansionIcon from '../SWMansionIcon.react';
import css from './chat-thread-list.css';
@@ -74,22 +74,24 @@
}`;
const menuIconSize = renderStyle === 'chat' ? 24 : 16;
-
- let btn;
- if (menuVisible) {
- btn = (
- <Button variant="toggle_read" onClick={toggleUnreadStatus}>
- {toggleUnreadStatusButtonText}
- </Button>
- );
- }
-
return (
<div className={css.menu} onMouseLeave={hideMenu}>
<button onClick={toggleMenu}>
<SWMansionIcon icon="menu-vertical" size={menuIconSize} />
</button>
- <div>{btn}</div>
+ <div
+ className={classNames(css.menuContent, {
+ [css.menuContentVisible]: menuVisible,
+ })}
+ >
+ <ul>
+ <li>
+ <button onClick={toggleUnreadStatus}>
+ {toggleUnreadStatusButtonText}
+ </button>
+ </li>
+ </ul>
+ </div>
</div>
);
}
diff --git a/web/chat/chat-thread-list.css b/web/chat/chat-thread-list.css
--- a/web/chat/chat-thread-list.css
+++ b/web/chat/chat-thread-list.css
@@ -161,7 +161,6 @@
.menu {
position: relative;
display: flex;
- padding: 5px;
justify-content: flex-end;
}
.menu > button {
@@ -189,7 +188,16 @@
border-radius: 5px;
box-shadow: 1px 1px 5px 2px #00000022;
}
-button.menuContent {
+.menuContentVisible {
+ display: block;
+}
+.menuContent ul {
+ list-style: none;
+}
+.menuContent li:not(:last-child) {
+ border-bottom: 1px solid #dddddd;
+}
+.menuContent button {
border: none;
cursor: pointer;
padding: 10px;
diff --git a/web/components/button.css b/web/components/button.css
--- a/web/components/button.css
+++ b/web/components/button.css
@@ -32,16 +32,3 @@
border-radius: 50%;
padding: 0;
}
-
-.unread {
- background: var(--unread-btn-bg);
- color: var(--fg);
- position: absolute;
- z-index: 1;
- font-size: var(--xs-font-12);
- font-weight: var(--semi-bold);
- top: 0;
- right: 25px;
- width: max-content;
- padding: 10px;
-}
diff --git a/web/components/button.react.js b/web/components/button.react.js
--- a/web/components/button.react.js
+++ b/web/components/button.react.js
@@ -8,7 +8,7 @@
type Props = {
+onClick: (event: SyntheticEvent<HTMLButtonElement>) => void,
+children: React.Node,
- +variant?: 'primary' | 'secondary' | 'danger' | 'round' | 'toggle_read',
+ +variant?: 'primary' | 'secondary' | 'danger' | 'round',
+type?: string,
+disabled?: boolean,
+className?: string,
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -1,6 +1,6 @@
:root {
- /* Never use color values defined here directly in CSS. Add color variables to "Color Theme" below
-
+ /* Never use color values defined here directly in CSS. Add color variables to "Color Theme" below
+
The reason we never use color values defined here directly in CSS is
1. It makes changing themes from light / dark / user generated impossible.
@@ -101,5 +101,4 @@
--thread-ancestor-keyserver-border: var(--shades-black-70);
--thread-ancestor-color-light: var(--shades-white-70);
--thread-ancestor-color-dark: var(--shades-black-100);
- --unread-btn-bg: var(--shades-black-80);
}

File Metadata

Mime Type
text/plain
Expires
Fri, Dec 27, 12:12 AM (10 h, 21 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2706740
Default Alt Text
D3204.id9679.diff (3 KB)

Event Timeline