From c81ed0eb61bbf001e364937a7f9674a69c2d9374 Mon Sep 17 00:00:00 2001 From: Alexander Zinchuk Date: Fri, 25 Feb 2022 22:52:51 +0200 Subject: [PATCH] Compact context menus on desktop (#1726) --- src/components/calls/group/GroupCall.scss | 18 ++++------ .../calls/group/GroupCallParticipantMenu.scss | 14 ++++++-- src/components/left/main/LeftMainHeader.scss | 10 ++++++ .../middle/composer/BotCommandMenu.tsx | 1 + .../middle/composer/BotKeyboardMenu.tsx | 1 + src/components/middle/composer/SendAsMenu.tsx | 1 + src/components/middle/composer/SymbolMenu.tsx | 1 + .../middle/message/MessageContextMenu.scss | 6 +++- .../middle/message/ReactionSelector.scss | 25 ++++++++++++-- .../middle/message/ReactionSelector.tsx | 4 ++- .../message/ReactionSelectorReaction.scss | 5 +++ .../message/ReactionSelectorReaction.tsx | 7 ++-- src/components/ui/Menu.scss | 12 +++++++ src/components/ui/Menu.tsx | 5 ++- src/components/ui/MenuItem.scss | 33 ++++++++++++++++++- src/components/ui/MenuItem.tsx | 2 ++ src/styles/_variables.scss | 3 ++ src/styles/themes.json | 3 ++ src/util/environment.ts | 1 + 19 files changed, 130 insertions(+), 22 deletions(-) diff --git a/src/components/calls/group/GroupCall.scss b/src/components/calls/group/GroupCall.scss index 7858267ca..13f9ac2c1 100644 --- a/src/components/calls/group/GroupCall.scss +++ b/src/components/calls/group/GroupCall.scss @@ -11,17 +11,13 @@ background: #181f27; } - .Menu .bubble { - --color-background: #232a34; - --color-chat-hover: #2f363e; - --color-item-active: #2f363e; - --color-text: #fff; - box-shadow: 0 0.25rem 0.5rem 0.125rem rgba(16, 16, 16, 0.3); - } - - // Compact menu items - .MenuItem { - padding: 0.75rem 1rem !important; + .Menu { + --color-text: white; + --color-background-compact-menu: #212121DD; + --color-background-compact-menu-hover: #00000066; + .bubble { + box-shadow: 0 0.25rem 0.5rem 0.125rem rgba(16, 16, 16, 0.3); + } } &.single-column { diff --git a/src/components/calls/group/GroupCallParticipantMenu.scss b/src/components/calls/group/GroupCallParticipantMenu.scss index 28001713d..ed1ce1f86 100644 --- a/src/components/calls/group/GroupCallParticipantMenu.scss +++ b/src/components/calls/group/GroupCallParticipantMenu.scss @@ -2,14 +2,18 @@ .participant-menu { position: absolute; + --color-text: white; + --color-background-compact-menu: #212121DD; + --color-background-compact-menu-hover: #00000066; + .bubble { - background: none; + background: none !important; border-radius: 0; padding: 0; border: none !important; box-shadow: none !important; overflow: visible; - color: #ffffff; + color: var(--color-text); .group { box-shadow: 0 0.25rem 0.5rem 0.125rem rgba(16, 16, 16, 0.3); @@ -20,6 +24,12 @@ } } + &.compact { + .group { + background: var(--color-background-compact-menu); + } + } + .volume-control { height: 3rem; diff --git a/src/components/left/main/LeftMainHeader.scss b/src/components/left/main/LeftMainHeader.scss index 1198393b1..4768d7cb4 100644 --- a/src/components/left/main/LeftMainHeader.scss +++ b/src/components/left/main/LeftMainHeader.scss @@ -69,6 +69,16 @@ flex-shrink: 0; } + .MenuItem.compact .archived-badge { + background: none; + padding: 0; + color: var(--color-text-secondary); + } + + .MenuItem.compact .Switcher { + transform: scale(0.75); + } + [dir="rtl"] .archived-badge { margin-left: 0; margin-right: auto; diff --git a/src/components/middle/composer/BotCommandMenu.tsx b/src/components/middle/composer/BotCommandMenu.tsx index 387932b8b..1a7c7c119 100644 --- a/src/components/middle/composer/BotCommandMenu.tsx +++ b/src/components/middle/composer/BotCommandMenu.tsx @@ -43,6 +43,7 @@ const BotCommandMenu: FC = ({ onMouseEnter={!IS_TOUCH_ENV ? handleMouseEnter : undefined} onMouseLeave={!IS_TOUCH_ENV ? handleMouseLeave : undefined} noCloseOnBackdrop={!IS_TOUCH_ENV} + noCompact > {botCommands.map((botCommand) => ( = ({ onCloseAnimationEnd={handleClose} onMouseEnter={!IS_TOUCH_ENV ? handleMouseEnter : undefined} onMouseLeave={!IS_TOUCH_ENV ? handleMouseLeave : undefined} + noCompact >
{message.keyboardButtons.map((row) => ( diff --git a/src/components/middle/composer/SendAsMenu.tsx b/src/components/middle/composer/SendAsMenu.tsx index 33a6b6456..121dd5473 100644 --- a/src/components/middle/composer/SendAsMenu.tsx +++ b/src/components/middle/composer/SendAsMenu.tsx @@ -86,6 +86,7 @@ const SendAsMenu: FC = ({ onMouseEnter={!IS_TOUCH_ENV ? handleMouseEnter : undefined} onMouseLeave={!IS_TOUCH_ENV ? handleMouseLeave : undefined} noCloseOnBackdrop={!IS_TOUCH_ENV} + noCompact >
{lang('SendMessageAsTitle')}
{usersById && chatsById && sendAsIds?.map((id, index) => { diff --git a/src/components/middle/composer/SymbolMenu.tsx b/src/components/middle/composer/SymbolMenu.tsx index 0d017faa6..3b0f48090 100644 --- a/src/components/middle/composer/SymbolMenu.tsx +++ b/src/components/middle/composer/SymbolMenu.tsx @@ -232,6 +232,7 @@ const SymbolMenu: FC = ({ onMouseEnter={!IS_TOUCH_ENV ? handleMouseEnter : undefined} onMouseLeave={!IS_TOUCH_ENV ? handleMouseLeave : undefined} noCloseOnBackdrop={!IS_TOUCH_ENV} + noCompact > {content} diff --git a/src/components/middle/message/MessageContextMenu.scss b/src/components/middle/message/MessageContextMenu.scss index 38325514b..bdb27fb49 100644 --- a/src/components/middle/message/MessageContextMenu.scss +++ b/src/components/middle/message/MessageContextMenu.scss @@ -9,11 +9,15 @@ overscroll-behavior: contain; } + &.compact .scrollable-content { + padding: 0.25rem 0; + } + .bubble { transition: opacity 0.15s cubic-bezier(0.2, 0, 0.2, 1), transform 0.15s cubic-bezier(0.2, 0, 0.2, 1) !important; transform: scale(0.7); overflow: initial; - padding: 0; + padding: 0 !important; } &.with-reactions .bubble { diff --git a/src/components/middle/message/ReactionSelector.scss b/src/components/middle/message/ReactionSelector.scss index 43adb5b08..94f4f34c3 100644 --- a/src/components/middle/message/ReactionSelector.scss +++ b/src/components/middle/message/ReactionSelector.scss @@ -11,6 +11,7 @@ top: -3.5rem; &__bubble-big { + border: 0.5rem solid var(--color-background); position: absolute; display: block; content: ""; @@ -18,8 +19,10 @@ bottom: -0.5rem; width: 1rem; height: 1rem; - border-radius: 50%; - background: var(--color-background); + border-top: 0; + border-left: 0; + border-right: 0; + border-radius: 0 0 50% 50%; z-index: -1; } @@ -64,4 +67,22 @@ align-items: center; border-radius: 3rem; } + + &--compact { + background: var(--color-background-compact-menu-reactions); + height: 2rem; + top: -2.5rem; + } + + &--compact &__items { + padding: 0 0.5rem; + } + + &--compact &__bubble-big { + border-color: var(--color-background-compact-menu-reactions); + } + + &--compact &__bubble-small { + background: var(--color-background-compact-menu-reactions); + } } diff --git a/src/components/middle/message/ReactionSelector.tsx b/src/components/middle/message/ReactionSelector.tsx index 355e534b2..06c66aeb6 100644 --- a/src/components/middle/message/ReactionSelector.tsx +++ b/src/components/middle/message/ReactionSelector.tsx @@ -8,6 +8,8 @@ import useHorizontalScroll from '../../../hooks/useHorizontalScroll'; import useFlag from '../../../hooks/useFlag'; import { getTouchY } from '../../../util/scrollLock'; import { createClassNameBuilder } from '../../../util/buildClassName'; +import { IS_COMPACT_MENU } from '../../../util/environment'; + import ReactionSelectorReaction from './ReactionSelectorReaction'; import './ReactionSelector.scss'; @@ -50,7 +52,7 @@ const ReactionSelector: FC = ({ if ((!isPrivate && !enabledReactions?.length) || !availableReactions) return undefined; return ( -
+
diff --git a/src/components/middle/message/ReactionSelectorReaction.scss b/src/components/middle/message/ReactionSelectorReaction.scss index 50bc5e146..4b1e59208 100644 --- a/src/components/middle/message/ReactionSelectorReaction.scss +++ b/src/components/middle/message/ReactionSelectorReaction.scss @@ -23,4 +23,9 @@ top: 0; left: 0; } + + &--compact { + min-width: 1.5rem; + min-height: 1.5rem; + } } diff --git a/src/components/middle/message/ReactionSelectorReaction.tsx b/src/components/middle/message/ReactionSelectorReaction.tsx index 3f667558a..53e9b02b5 100644 --- a/src/components/middle/message/ReactionSelectorReaction.tsx +++ b/src/components/middle/message/ReactionSelectorReaction.tsx @@ -8,12 +8,13 @@ import useMedia from '../../../hooks/useMedia'; import useFlag from '../../../hooks/useFlag'; import useShowTransition from '../../../hooks/useShowTransition'; import { createClassNameBuilder } from '../../../util/buildClassName'; +import { IS_COMPACT_MENU } from '../../../util/environment'; import AnimatedSticker from '../../common/AnimatedSticker'; import './ReactionSelectorReaction.scss'; -const REACTION_SIZE = 32; +const REACTION_SIZE = IS_COMPACT_MENU ? 24 : 32; type OwnProps = { reaction: ApiAvailableReaction; @@ -48,7 +49,7 @@ const ReactionSelectorReaction: FC = ({ reaction, previewIndex, onSend return (
= ({ reaction, previewIndex, onSend 'static', isReady ? [staticClassNames] : undefined, )} - style={`background-position-x: ${previewIndex * -32}px;`} + style={`background-position-x: ${previewIndex * -REACTION_SIZE}px;`} /> )} {shouldRenderAnimated && ( diff --git a/src/components/ui/Menu.scss b/src/components/ui/Menu.scss index fcd1a7ca0..7850219a9 100644 --- a/src/components/ui/Menu.scss +++ b/src/components/ui/Menu.scss @@ -78,4 +78,16 @@ font-size: 0.8125rem; text-align: center; } + + &.compact { + .bubble { + background: var(--color-background-compact-menu); + backdrop-filter: blur(10px); + padding: 0.25rem 0; + } + + .footer { + background: none; + } + } } diff --git a/src/components/ui/Menu.tsx b/src/components/ui/Menu.tsx index 55a6a6691..0712db95a 100644 --- a/src/components/ui/Menu.tsx +++ b/src/components/ui/Menu.tsx @@ -10,6 +10,7 @@ import buildClassName from '../../util/buildClassName'; import { dispatchHeavyAnimationEvent } from '../../hooks/useHeavyAnimationCheck'; import useHistoryBack from '../../hooks/useHistoryBack'; import { preventMessageInputBlurWithBubbling } from '../middle/helpers/preventMessageInputBlur'; +import { IS_COMPACT_MENU } from '../../util/environment'; import './Menu.scss'; @@ -28,6 +29,7 @@ type OwnProps = { shouldSkipTransition?: boolean; footer?: string; noCloseOnBackdrop?: boolean; + noCompact?: boolean; onKeyDown?: (e: React.KeyboardEvent) => void; onCloseAnimationEnd?: () => void; onClose?: () => void; @@ -53,6 +55,7 @@ const Menu: FC = ({ autoClose = false, footer, noCloseOnBackdrop = false, + noCompact, onCloseAnimationEnd, onClose, onMouseEnter, @@ -110,7 +113,7 @@ const Menu: FC = ({ return (
= (props) => { className, disabled && 'disabled', destructive && 'destructive', + IS_COMPACT_MENU && 'compact', ); const content = ( diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index 0d1f8680a..87d5b75d6 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -65,6 +65,9 @@ $color-message-reaction-own-hover: #b5e0a4; :root { --color-background: #{$color-white}; + --color-background-compact-menu: #FFFFFFBB; + --color-background-compact-menu-reactions: #FFFFFFEB; + --color-background-compact-menu-hover: #000000B2; --color-background-selected: #f4f4f5; --color-background-secondary: #f4f4f5; --color-background-secondary-accent: #e4e4e5; diff --git a/src/styles/themes.json b/src/styles/themes.json index 18103b19c..7be63aa3b 100644 --- a/src/styles/themes.json +++ b/src/styles/themes.json @@ -3,6 +3,9 @@ "--color-primary-opacity": ["#50A2E980", "#8378DB80"], "--color-primary-shade": ["#4a95d6", "#7b71c6"], "--color-background": ["#FFFFFF", "#212121"], + "--color-background-compact-menu": ["#FFFFFFBB", "#212121DD"], + "--color-background-compact-menu-reactions": ["#FFFFFFEB", "#212121DD"], + "--color-background-compact-menu-hover": ["#00000011", "#00000066"], "--color-background-secondary": ["#f4f4f5", "#0F0F0F"], "--color-background-secondary-accent": ["#E4E4E5", "#100f10"], "--color-background-own": ["#EEFFDE", "#8774E1"], diff --git a/src/util/environment.ts b/src/util/environment.ts index c0cb9ac1a..6114ca1f9 100644 --- a/src/util/environment.ts +++ b/src/util/environment.ts @@ -86,6 +86,7 @@ export const DPR = window.devicePixelRatio || 1; export const MASK_IMAGE_DISABLED = true; +export const IS_COMPACT_MENU = !IS_TOUCH_ENV; export const IS_SCROLL_PATCH_NEEDED = !IS_MAC_OS && !IS_IOS && !IS_ANDROID; // Smaller area reduces scroll jumps caused by `patchChromiumScroll`