From 60e26125fd953d0ac0068a6d3658b924882178ca Mon Sep 17 00:00:00 2001 From: Alexander Zinchuk Date: Mon, 19 Apr 2021 18:37:06 +0300 Subject: [PATCH] Middle Footer: Various issues (#1031) --- src/components/middle/MessageList.scss | 2 +- .../middle/MessageSelectToolbar.scss | 16 ++-- src/components/middle/MiddleColumn.scss | 74 +++---------------- src/components/middle/MiddleColumn.tsx | 3 + src/components/middle/composer/Composer.scss | 2 +- .../calculateMiddleFooterTransforms.ts | 5 ++ src/components/right/RightColumn.scss | 2 +- src/components/ui/Menu.scss | 2 +- src/components/ui/Modal.scss | 2 +- 9 files changed, 33 insertions(+), 75 deletions(-) diff --git a/src/components/middle/MessageList.scss b/src/components/middle/MessageList.scss index 7c99124f8..d10766ca7 100644 --- a/src/components/middle/MessageList.scss +++ b/src/components/middle/MessageList.scss @@ -62,7 +62,7 @@ &.select-mode-active { .messages-container { - padding-bottom: 5.25rem; + padding-bottom: 4.75rem; } } diff --git a/src/components/middle/MessageSelectToolbar.scss b/src/components/middle/MessageSelectToolbar.scss index 549fca4cf..00fccc111 100644 --- a/src/components/middle/MessageSelectToolbar.scss +++ b/src/components/middle/MessageSelectToolbar.scss @@ -13,6 +13,10 @@ right: auto !important; } + .no-composer & { + width: 100%; + } + @media (min-width: 601px) { left: 1rem; right: 1rem; @@ -30,19 +34,15 @@ transition: transform var(--select-transition), opacity var(--select-transition); } - &.with-composer .MessageSelectToolbar-inner { + & .MessageSelectToolbar-inner { transform: scaleX(1) translateX(0); } + .no-composer .unpin-button-container + &, .no-composer .messaging-disabled + & { top: auto; } - .no-composer .unpin-button-container + & { - top: auto; - margin-bottom: 1rem; - } - body.animation-level-0 & { transition: none !important; } @@ -58,6 +58,10 @@ &.with-composer .MessageSelectToolbar-inner { transform: scaleX(var(--toolbar-hidden-scale, 1)) translateX(var(--toolbar-translate-x, 0)); } + + &:not(.with-composer) .MessageSelectToolbar-inner { + transform: scaleX(var(--toolbar-unpin-hidden-scale)) translateX(0); + } } &::before { diff --git a/src/components/middle/MiddleColumn.scss b/src/components/middle/MiddleColumn.scss index f9929e058..d244b3116 100644 --- a/src/components/middle/MiddleColumn.scss +++ b/src/components/middle/MiddleColumn.scss @@ -279,63 +279,11 @@ position: relative; } -.MessageSelectToolbar, +.MessageSelectToolbar-inner, .unpin-all-button, .messaging-disabled { - .mask-image-disabled &::before { - --shadow-color: #84a686; - - content: ""; - display: block; - position: absolute; - top: 0; - left: 0.125rem; - right: 0.125rem; - height: 3.5rem; - border-radius: var(--border-radius-messages); - box-shadow: 0 0 .5rem .5rem var(--shadow-color); - background: var(--shadow-color); - z-index: -1; - - @media (max-width: 600px) { - left: 0; - right: 0; - z-index: -1; - --shadow-color: #678a64; - - body.is-symbol-menu-open & { - --shadow-color: #b4bf9e; - } - } - - @media screen and (min-height: 750px) { - --shadow-color: #9bb281;; - } - - @media screen and (min-width: 1276px) { - body.animation-level-2 & { - --shadow-color: #97af8e; - } - - body.animation-level-2 #Main.right-column-open & { - --shadow-color: #9cb186; - } - - @media (min-height: 750px) { - body.animation-level-2 & { - --shadow-color: #91a67f; - } - - body.animation-level-2 #Main.right-column-open & { - --shadow-color: #97ae86; - } - } - } - } - - .custom-bg-color &::before, - .custom-bg-image &::before { - display: none; + .mask-image-disabled & { + box-shadow: 0 .25rem .5rem .125rem var(--color-default-shadow); } } @@ -344,19 +292,15 @@ display: flex; justify-content: center; position: absolute; - margin-top: 0.25rem; - padding-bottom: 1rem; + padding-bottom: 1.25rem; .unpin-all-button { text-transform: capitalize; color: var(--color-black); - height: 3.125rem; + height: 3.5rem; overflow: visible; - box-shadow: 0 1px 2px var(--color-default-shadow); - - &::before { - height: 3.125rem; - } + transform: scaleX(1); + transition: transform var(--select-transition), background-color .15s, color .15s; &:hover { .icon-unpin { @@ -365,7 +309,8 @@ } .select-mode-active + .middle-column-footer & { - display: none; + box-shadow: none; + transform: scaleX(var(--unpin-hidden-scale)); } @media (max-width: 600px) { @@ -377,6 +322,7 @@ margin-left: -0.438rem; color: var(--color-text-secondary); font-size: 1.5rem; + transition: color .15s } } diff --git a/src/components/middle/MiddleColumn.tsx b/src/components/middle/MiddleColumn.tsx index 9c404ec2b..94fc41753 100644 --- a/src/components/middle/MiddleColumn.tsx +++ b/src/components/middle/MiddleColumn.tsx @@ -183,6 +183,7 @@ const MiddleColumn: FC = ({ const { composerHiddenScale, toolbarHiddenScale, composerTranslateX, toolbarTranslateX, + unpinHiddenScale, toolbarForUnpinHiddenScale, } = useMemo( () => calculateMiddleFooterTransforms(windowWidth, renderingCanPost), [renderingCanPost, windowWidth], @@ -198,6 +199,8 @@ const MiddleColumn: FC = ({ style={` --composer-hidden-scale: ${composerHiddenScale}; --toolbar-hidden-scale: ${toolbarHiddenScale}; + --unpin-hidden-scale: ${unpinHiddenScale}; + --toolbar-unpin-hidden-scale: ${toolbarForUnpinHiddenScale}; --composer-translate-x: ${composerTranslateX}px; --toolbar-translate-x: ${toolbarTranslateX}px; `} diff --git a/src/components/middle/composer/Composer.scss b/src/components/middle/composer/Composer.scss index b1ff83e61..ccbc41a0b 100644 --- a/src/components/middle/composer/Composer.scss +++ b/src/components/middle/composer/Composer.scss @@ -5,7 +5,7 @@ @media (min-width: 601px) { position: absolute; padding-right: 2rem; - margin-top: -.5rem; + bottom: 0; } @media (max-width: 600px) { diff --git a/src/components/middle/helpers/calculateMiddleFooterTransforms.ts b/src/components/middle/helpers/calculateMiddleFooterTransforms.ts index de618f423..af4f31919 100644 --- a/src/components/middle/helpers/calculateMiddleFooterTransforms.ts +++ b/src/components/middle/helpers/calculateMiddleFooterTransforms.ts @@ -9,6 +9,7 @@ const MAX_TOOLBAR_WIDTH = 32 * REM; const MAX_MESSAGES_LIST_WIDTH = 45.5 * REM; const SIDE_COLUMN_MAX_WIDTH = 26.5 * REM; const MIN_LEFT_COLUMN_WIDTH = 18 * REM; +const UNPIN_BUTTON_WIDTH = 16.125 * REM; export default function calculateMiddleFooterTransforms(windowWidth: number, canPost?: boolean) { const sidePadding = windowWidth <= MOBILE_SCREEN_MAX_WIDTH @@ -28,6 +29,8 @@ export default function calculateMiddleFooterTransforms(windowWidth: number, can const composerHiddenScale = toolbarWidth / composerWidth; const toolbarHiddenScale = composerWidth / toolbarWidth; + const unpinHiddenScale = toolbarWidth / UNPIN_BUTTON_WIDTH; + const toolbarForUnpinHiddenScale = UNPIN_BUTTON_WIDTH / toolbarWidth; const composerTranslateX = canPost ? (sendButtonWidth / 2) * toolbarHiddenScale @@ -42,6 +45,8 @@ export default function calculateMiddleFooterTransforms(windowWidth: number, can toolbarHiddenScale, composerTranslateX, toolbarTranslateX, + unpinHiddenScale, + toolbarForUnpinHiddenScale, }; } diff --git a/src/components/right/RightColumn.scss b/src/components/right/RightColumn.scss index 93c07a851..e9b736ba2 100644 --- a/src/components/right/RightColumn.scss +++ b/src/components/right/RightColumn.scss @@ -23,7 +23,7 @@ } @media (max-width: 1275px) { - box-shadow: 0 .25rem .5rem .1rem var(--color-default-shadow); + box-shadow: 0 .25rem .5rem .125rem var(--color-default-shadow); } @media (max-width: 600px) { diff --git a/src/components/ui/Menu.scss b/src/components/ui/Menu.scss index 7ec48663e..1972fc36f 100644 --- a/src/components/ui/Menu.scss +++ b/src/components/ui/Menu.scss @@ -21,7 +21,7 @@ margin: 0; position: absolute; background-color: var(--color-background); - box-shadow: 0 .25rem .5rem .1rem var(--color-default-shadow); + box-shadow: 0 .25rem .5rem .125rem var(--color-default-shadow); border-radius: var(--border-radius-default); min-width: 13.5rem; z-index: var(--z-menu-bubble); diff --git a/src/components/ui/Modal.scss b/src/components/ui/Modal.scss index 74dfd7270..ab90a8ef1 100644 --- a/src/components/ui/Modal.scss +++ b/src/components/ui/Modal.scss @@ -48,7 +48,7 @@ min-width: 17.5rem; margin: 2rem auto; background-color: var(--color-background); - box-shadow: 0 .25rem .5rem .1rem var(--color-default-shadow); + box-shadow: 0 .25rem .5rem .125rem var(--color-default-shadow); border-radius: var(--border-radius-default); transform: translate3d(0, -1rem, 0);