diff --git a/web/chat/chat-thread-list-item-menu.css b/web/chat/chat-thread-list-item-menu.css new file mode 100644 index 000000000..a1e86aafc --- /dev/null +++ b/web/chat/chat-thread-list-item-menu.css @@ -0,0 +1,55 @@ +div.sidebar .menu > button svg { + font-size: 16px; + color: var(--thread-color-read); +} +div.sidebar .menu { + opacity: 0; +} +div.sidebar:hover .menu { + display: flex; + align-self: flex-end; + opacity: 1; +} +.menu { + position: relative; + display: flex; + justify-content: flex-end; +} +.menu > button { + background-color: transparent; + color: var(--thread-color-read); + border: none; + cursor: pointer; + display: flex; + align-items: center; +} + +.menu > button:focus { + outline: none; +} + +.menuContent { + display: none; + position: absolute; + top: calc(100% + 1px); + right: 0; + z-index: 1; + width: max-content; + overflow: hidden; + background-color: #eeeeee; + border-radius: 5px; + box-shadow: 1px 1px 5px 2px #00000022; +} +.menuContentVisible { + display: block; +} + +button.menuContent { + border: none; + cursor: pointer; + padding: 10px; + font-size: 16px; +} +button.menuContent:hover { + background-color: #dddddd; +} diff --git a/web/chat/chat-thread-list-item-menu.react.js b/web/chat/chat-thread-list-item-menu.react.js index 42154a3f0..2a0b4c249 100644 --- a/web/chat/chat-thread-list-item-menu.react.js +++ b/web/chat/chat-thread-list-item-menu.react.js @@ -1,94 +1,94 @@ // @flow import classNames from 'classnames'; import * as React from 'react'; import { setThreadUnreadStatusActionTypes, setThreadUnreadStatus, } from 'lib/actions/activity-actions'; import type { SetThreadUnreadStatusPayload, SetThreadUnreadStatusRequest, } from 'lib/types/activity-types'; import type { ThreadInfo } from 'lib/types/thread-types'; import { useServerCall, useDispatchActionPromise, } from 'lib/utils/action-utils'; import SWMansionIcon from '../SWMansionIcon.react'; -import css from './chat-thread-list.css'; +import css from './chat-thread-list-item-menu.css'; type Props = { +threadInfo: ThreadInfo, +mostRecentNonLocalMessage: ?string, +renderStyle?: 'chat' | 'thread', }; function ChatThreadListItemMenu(props: Props): React.Node { const { renderStyle = 'chat' } = props; const [menuVisible, setMenuVisible] = React.useState(false); const toggleMenu = React.useCallback(() => { setMenuVisible(!menuVisible); }, [menuVisible]); const hideMenu = React.useCallback(() => { setMenuVisible(false); }, []); const { threadInfo, mostRecentNonLocalMessage } = props; const dispatchActionPromise = useDispatchActionPromise(); const boundSetThreadUnreadStatus: ( request: SetThreadUnreadStatusRequest, ) => Promise = useServerCall( setThreadUnreadStatus, ); const toggleUnreadStatus = React.useCallback(() => { const { unread } = threadInfo.currentUser; const request = { threadID: threadInfo.id, unread: !unread, latestMessage: mostRecentNonLocalMessage, }; dispatchActionPromise( setThreadUnreadStatusActionTypes, boundSetThreadUnreadStatus(request), undefined, { threadID: threadInfo.id, unread: !unread, }, ); hideMenu(); }, [ threadInfo, mostRecentNonLocalMessage, dispatchActionPromise, hideMenu, boundSetThreadUnreadStatus, ]); const toggleUnreadStatusButtonText = `Mark as ${ threadInfo.currentUser.unread ? 'read' : 'unread' }`; const menuIconSize = renderStyle === 'chat' ? 24 : 16; const btnCls = classNames(css.menuContent, { [css.menuContentVisible]: menuVisible, }); return (
); } export default ChatThreadListItemMenu;