From e705375a3f3eba277e48928b69d830d6cb611afa Mon Sep 17 00:00:00 2001 From: Alexander Zinchuk Date: Fri, 10 Dec 2021 18:33:23 +0100 Subject: [PATCH] Middle Column: "Join / Subscribe / Start" buttons (follow-up) (#1571) --- src/components/middle/MessageList.scss | 13 +++- src/components/middle/MessageList.tsx | 3 + .../middle/MessageSelectToolbar.scss | 2 +- src/components/middle/MiddleColumn.scss | 42 +++++------ src/components/middle/MiddleColumn.tsx | 75 +++++++++++-------- 5 files changed, 76 insertions(+), 59 deletions(-) diff --git a/src/components/middle/MessageList.scss b/src/components/middle/MessageList.scss index 3281e3e08..7e5855a1e 100644 --- a/src/components/middle/MessageList.scss +++ b/src/components/middle/MessageList.scss @@ -94,10 +94,15 @@ } @media (max-width: 600px) { - &.type-pinned .last-in-list { - @supports (padding-bottom: env(safe-area-inset-bottom)) { - body:not(.keyboard-visible) & { - margin-bottom: calc(4.25rem + env(safe-area-inset-bottom)); + &.with-bottom-shift { + margin-bottom: 0; + .last-in-list { + margin-bottom: 4.25rem; + + @supports (padding-bottom: env(safe-area-inset-bottom)) { + body:not(.keyboard-visible) & { + margin-bottom: calc(4.25rem + env(safe-area-inset-bottom)); + } } } } diff --git a/src/components/middle/MessageList.tsx b/src/components/middle/MessageList.tsx index 7157d09fd..f8ce9323d 100644 --- a/src/components/middle/MessageList.tsx +++ b/src/components/middle/MessageList.tsx @@ -65,6 +65,7 @@ type OwnProps = { onFabToggle: (shouldShow: boolean) => void; onNotchToggle: (shouldShow: boolean) => void; hasTools?: boolean; + withBottomShift?: boolean; }; type StateProps = { @@ -136,6 +137,7 @@ const MessageList: FC = ({ botDescription, threadTopMessageId, hasLinkedChat, + withBottomShift, openHistoryCalendar, }) => { // eslint-disable-next-line no-null/no-null @@ -470,6 +472,7 @@ const MessageList: FC = ({ noAvatars && 'no-avatars', !canPost && 'no-composer', type === 'pinned' && 'type-pinned', + withBottomShift && 'with-bottom-shift', isSelectModeActive && 'select-mode-active', isScrolled && 'scrolled', !isReady && 'is-animating', diff --git a/src/components/middle/MessageSelectToolbar.scss b/src/components/middle/MessageSelectToolbar.scss index e9ef8deb0..36f1cf54e 100644 --- a/src/components/middle/MessageSelectToolbar.scss +++ b/src/components/middle/MessageSelectToolbar.scss @@ -45,7 +45,7 @@ transform: scaleX(1) translateX(0); } - .no-composer .unpin-button-container + &, + .no-composer .middle-column-footer-button-container + &, .no-composer .messaging-disabled + & { top: auto; } diff --git a/src/components/middle/MiddleColumn.scss b/src/components/middle/MiddleColumn.scss index aed04b0bb..17eecd795 100644 --- a/src/components/middle/MiddleColumn.scss +++ b/src/components/middle/MiddleColumn.scss @@ -286,14 +286,6 @@ background: linear-gradient(90deg, rgba(127, 127, 127, 0) 0%, rgba(127, 127, 127, 0.4) 2%, rgba(127, 127, 127, 0.4) 98%, rgba(127, 127, 127, 0) 100%); } } - - .join-subscribe-button { - margin-bottom: 0.5rem; - - @supports (padding-bottom: env(safe-area-inset-bottom)) { - margin-bottom: calc(0.5rem + env(safe-area-inset-bottom)); - } - } } /* Common styles for message list fade-out shadow */ @@ -310,6 +302,7 @@ .Composer, .MessageSelectToolbar, .unpin-all-button, +.join-subscribe-button, .messaging-disabled { width: 100%; display: flex; @@ -319,6 +312,7 @@ .MessageSelectToolbar-inner, .unpin-all-button, +.join-subscribe-button, .messaging-disabled { .mask-image-disabled & { box-shadow: 0 .25rem .5rem .125rem var(--color-default-shadow); @@ -326,7 +320,7 @@ } } -.unpin-button-container { +.middle-column-footer-button-container { width: 100%; display: flex; justify-content: center; @@ -336,10 +330,6 @@ .unpin-all-button { text-transform: capitalize; color: var(--color-black); - height: 3.5rem; - overflow: visible; - transform: scaleX(1); - transition: transform var(--select-transition), background-color .15s, color .15s; &:hover { .icon-unpin { @@ -347,15 +337,6 @@ } } - .select-mode-active + .middle-column-footer & { - box-shadow: none; - transform: scaleX(var(--unpin-hidden-scale)); - } - - @media (max-width: 600px) { - height: 2.5rem; - } - .icon-unpin { margin-inline-start: -0.4375rem; margin-inline-end: .75rem; @@ -365,6 +346,23 @@ } } + .join-subscribe-button, + .unpin-all-button { + height: 3.5rem; + overflow: visible; + transform: scaleX(1); + transition: transform var(--select-transition), background-color .15s, color .15s; + + .select-mode-active + .middle-column-footer & { + box-shadow: none; + transform: scaleX(var(--unpin-hidden-scale)); + } + + @media (max-width: 600px) { + height: 2.5rem; + } + } + @media (max-width: 600px) { padding-bottom: 0.75rem; diff --git a/src/components/middle/MiddleColumn.tsx b/src/components/middle/MiddleColumn.tsx index d883747cf..8241172bc 100644 --- a/src/components/middle/MiddleColumn.tsx +++ b/src/components/middle/MiddleColumn.tsx @@ -179,13 +179,14 @@ const MiddleColumn: FC = ({ const renderingChatId = usePrevDuringAnimation(chatId, CLOSE_ANIMATION_DURATION); const renderingThreadId = usePrevDuringAnimation(threadId, CLOSE_ANIMATION_DURATION); const renderingMessageListType = usePrevDuringAnimation(messageListType, CLOSE_ANIMATION_DURATION); - const renderingCanPost = usePrevDuringAnimation(canPost, CLOSE_ANIMATION_DURATION); - const renderingHasTools = usePrevDuringAnimation(hasTools, CLOSE_ANIMATION_DURATION); - const renderingIsFabShown = usePrevDuringAnimation(isFabShown, CLOSE_ANIMATION_DURATION); - const renderingIsChannel = usePrevDuringAnimation(isChannel, CLOSE_ANIMATION_DURATION); const renderingCanSubscribe = usePrevDuringAnimation(canSubscribe, CLOSE_ANIMATION_DURATION); const renderingCanStartBot = usePrevDuringAnimation(canStartBot, CLOSE_ANIMATION_DURATION); const renderingCanRestartBot = usePrevDuringAnimation(canRestartBot, CLOSE_ANIMATION_DURATION); + const renderingCanPost = usePrevDuringAnimation(canPost, CLOSE_ANIMATION_DURATION) + && !renderingCanRestartBot && !renderingCanStartBot && !renderingCanSubscribe; + const renderingHasTools = usePrevDuringAnimation(hasTools, CLOSE_ANIMATION_DURATION); + const renderingIsFabShown = usePrevDuringAnimation(isFabShown, CLOSE_ANIMATION_DURATION); + const renderingIsChannel = usePrevDuringAnimation(isChannel, CLOSE_ANIMATION_DURATION); const prevTransitionKey = usePrevious(currentTransitionKey); const willSwitchMessageList = prevTransitionKey !== undefined && prevTransitionKey !== currentTransitionKey; @@ -349,10 +350,10 @@ const MiddleColumn: FC = ({ useHistoryBack(isSelectModeActive, exitMessageSelectMode); const isMessagingDisabled = Boolean(!isPinnedMessageList && !renderingCanPost && messageSendingRestrictionReason); - const withExtraShift = Boolean( - isMessagingDisabled || isSelectModeActive || isPinnedMessageList - || renderingCanSubscribe || renderingCanStartBot || renderingCanRestartBot, + const withMessageListBottomShift = Boolean( + renderingCanRestartBot || renderingCanSubscribe || renderingCanStartBot || isPinnedMessageList, ); + const withExtraShift = Boolean(isMessagingDisabled || isSelectModeActive || withMessageListBottomShift); return (
= ({ onNotchToggle={setIsNotchShown} isReady={isReady && !willSwitchMessageList} isActive={isActive} + withBottomShift={withMessageListBottomShift} />
{renderingCanPost && ( @@ -421,7 +423,7 @@ const MiddleColumn: FC = ({ /> )} {isPinnedMessageList && ( -
+
)} {IS_SINGLE_COLUMN_LAYOUT && renderingCanSubscribe && ( - +
+ +
)} {IS_SINGLE_COLUMN_LAYOUT && renderingCanStartBot && ( - +
+ +
)} {IS_SINGLE_COLUMN_LAYOUT && renderingCanRestartBot && ( - +
+ +
)}