ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Middle Column: "Join / Subscribe / Start" buttons (follow-up) (#1571)

Browse Source
This commit is contained in:
Alexander Zinchuk 2021-12-10 18:33:23 +01:00
parent 49c0794789
commit e705375a3f
5 changed files with 76 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/middle/MessageList.scss
View File

@ -94,10 +94,15 @@
} }
@media (max-width: 600px) { @media (max-width: 600px) {
&.type-pinned .last-in-list { &.with-bottom-shift {
@supports (padding-bottom: env(safe-area-inset-bottom)) { margin-bottom: 0;
body:not(.keyboard-visible) & { .last-in-list {
margin-bottom: calc(4.25rem + env(safe-area-inset-bottom)); 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));
}
} }
} }
} }

3
src/components/middle/MessageList.tsx
View File

@ -65,6 +65,7 @@ type OwnProps = {
onFabToggle: (shouldShow: boolean) => void; onFabToggle: (shouldShow: boolean) => void;
onNotchToggle: (shouldShow: boolean) => void; onNotchToggle: (shouldShow: boolean) => void;
hasTools?: boolean; hasTools?: boolean;
withBottomShift?: boolean;
}; };
type StateProps = { type StateProps = {
@ -136,6 +137,7 @@ const MessageList: FC<OwnProps & StateProps & DispatchProps> = ({
botDescription, botDescription,
threadTopMessageId, threadTopMessageId,
hasLinkedChat, hasLinkedChat,
withBottomShift,
openHistoryCalendar, openHistoryCalendar,
}) => { }) => {
// eslint-disable-next-line no-null/no-null // eslint-disable-next-line no-null/no-null
@ -470,6 +472,7 @@ const MessageList: FC<OwnProps & StateProps & DispatchProps> = ({
noAvatars && 'no-avatars', noAvatars && 'no-avatars',
!canPost && 'no-composer', !canPost && 'no-composer',
type === 'pinned' && 'type-pinned', type === 'pinned' && 'type-pinned',
withBottomShift && 'with-bottom-shift',
isSelectModeActive && 'select-mode-active', isSelectModeActive && 'select-mode-active',
isScrolled && 'scrolled', isScrolled && 'scrolled',
!isReady && 'is-animating', !isReady && 'is-animating',

2
src/components/middle/MessageSelectToolbar.scss
View File

@ -45,7 +45,7 @@
transform: scaleX(1) translateX(0); transform: scaleX(1) translateX(0);
} }
.no-composer .unpin-button-container + &, .no-composer .middle-column-footer-button-container + &,
.no-composer .messaging-disabled + & { .no-composer .messaging-disabled + & {
top: auto; top: auto;
} }

42
src/components/middle/MiddleColumn.scss
View File

@ -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%); 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 */ /* Common styles for message list fade-out shadow */
@ -310,6 +302,7 @@
.Composer, .Composer,
.MessageSelectToolbar, .MessageSelectToolbar,
.unpin-all-button, .unpin-all-button,
.join-subscribe-button,
.messaging-disabled { .messaging-disabled {
width: 100%; width: 100%;
display: flex; display: flex;
@ -319,6 +312,7 @@
.MessageSelectToolbar-inner, .MessageSelectToolbar-inner,
.unpin-all-button, .unpin-all-button,
.join-subscribe-button,
.messaging-disabled { .messaging-disabled {
.mask-image-disabled & { .mask-image-disabled & {
box-shadow: 0 .25rem .5rem .125rem var(--color-default-shadow); box-shadow: 0 .25rem .5rem .125rem var(--color-default-shadow);
@ -326,7 +320,7 @@
} }
} }
.unpin-button-container { .middle-column-footer-button-container {
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -336,10 +330,6 @@
.unpin-all-button { .unpin-all-button {
text-transform: capitalize; text-transform: capitalize;
color: var(--color-black); color: var(--color-black);
height: 3.5rem;
overflow: visible;
transform: scaleX(1);
transition: transform var(--select-transition), background-color .15s, color .15s;
&:hover { &:hover {
.icon-unpin { .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 { .icon-unpin {
margin-inline-start: -0.4375rem; margin-inline-start: -0.4375rem;
margin-inline-end: .75rem; 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) { @media (max-width: 600px) {
padding-bottom: 0.75rem; padding-bottom: 0.75rem;

75
src/components/middle/MiddleColumn.tsx
View File

@ -179,13 +179,14 @@ const MiddleColumn: FC<StateProps & DispatchProps> = ({
const renderingChatId = usePrevDuringAnimation(chatId, CLOSE_ANIMATION_DURATION); const renderingChatId = usePrevDuringAnimation(chatId, CLOSE_ANIMATION_DURATION);
const renderingThreadId = usePrevDuringAnimation(threadId, CLOSE_ANIMATION_DURATION); const renderingThreadId = usePrevDuringAnimation(threadId, CLOSE_ANIMATION_DURATION);
const renderingMessageListType = usePrevDuringAnimation(messageListType, 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 renderingCanSubscribe = usePrevDuringAnimation(canSubscribe, CLOSE_ANIMATION_DURATION);
const renderingCanStartBot = usePrevDuringAnimation(canStartBot, CLOSE_ANIMATION_DURATION); const renderingCanStartBot = usePrevDuringAnimation(canStartBot, CLOSE_ANIMATION_DURATION);
const renderingCanRestartBot = usePrevDuringAnimation(canRestartBot, 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 prevTransitionKey = usePrevious(currentTransitionKey);
const willSwitchMessageList = prevTransitionKey !== undefined && prevTransitionKey !== currentTransitionKey; const willSwitchMessageList = prevTransitionKey !== undefined && prevTransitionKey !== currentTransitionKey;
@ -349,10 +350,10 @@ const MiddleColumn: FC<StateProps & DispatchProps> = ({
useHistoryBack(isSelectModeActive, exitMessageSelectMode); useHistoryBack(isSelectModeActive, exitMessageSelectMode);
const isMessagingDisabled = Boolean(!isPinnedMessageList && !renderingCanPost && messageSendingRestrictionReason); const isMessagingDisabled = Boolean(!isPinnedMessageList && !renderingCanPost && messageSendingRestrictionReason);
const withExtraShift = Boolean( const withMessageListBottomShift = Boolean(
isMessagingDisabled || isSelectModeActive || isPinnedMessageList renderingCanRestartBot || renderingCanSubscribe || renderingCanStartBot || isPinnedMessageList,
|| renderingCanSubscribe || renderingCanStartBot || renderingCanRestartBot,
); );
const withExtraShift = Boolean(isMessagingDisabled || isSelectModeActive || withMessageListBottomShift);
return ( return (
<div <div
@ -408,6 +409,7 @@ const MiddleColumn: FC<StateProps & DispatchProps> = ({
onNotchToggle={setIsNotchShown} onNotchToggle={setIsNotchShown}
isReady={isReady && !willSwitchMessageList} isReady={isReady && !willSwitchMessageList}
isActive={isActive} isActive={isActive}
withBottomShift={withMessageListBottomShift}
/> />
<div className={footerClassName}> <div className={footerClassName}>
{renderingCanPost && ( {renderingCanPost && (
@ -421,7 +423,7 @@ const MiddleColumn: FC<StateProps & DispatchProps> = ({
/> />
)} )}
{isPinnedMessageList && ( {isPinnedMessageList && (
<div className="unpin-button-container" dir={lang.isRtl ? 'rtl' : undefined}> <div className="middle-column-footer-button-container" dir={lang.isRtl ? 'rtl' : undefined}>
<Button <Button
size="tiny" size="tiny"
fluid fluid
@ -444,34 +446,43 @@ const MiddleColumn: FC<StateProps & DispatchProps> = ({
</div> </div>
)} )}
{IS_SINGLE_COLUMN_LAYOUT && renderingCanSubscribe && ( {IS_SINGLE_COLUMN_LAYOUT && renderingCanSubscribe && (
<Button <div className="middle-column-footer-button-container" dir={lang.isRtl ? 'rtl' : undefined}>
size="smaller" <Button
ripple size="tiny"
className="join-subscribe-button" fluid
onClick={handleSubscribeClick} ripple
> className="join-subscribe-button"
{lang(renderingIsChannel ? 'ProfileJoinChannel' : 'ProfileJoinGroup')} onClick={handleSubscribeClick}
</Button> >
{lang(renderingIsChannel ? 'ProfileJoinChannel' : 'ProfileJoinGroup')}
</Button>
</div>
)} )}
{IS_SINGLE_COLUMN_LAYOUT && renderingCanStartBot && ( {IS_SINGLE_COLUMN_LAYOUT && renderingCanStartBot && (
<Button <div className="middle-column-footer-button-container" dir={lang.isRtl ? 'rtl' : undefined}>
size="smaller" <Button
ripple size="tiny"
className="join-subscribe-button" fluid
onClick={handleStartBot} ripple
> className="join-subscribe-button"
{lang('BotStart')} onClick={handleStartBot}
</Button> >
{lang('BotStart')}
</Button>
</div>
)} )}
{IS_SINGLE_COLUMN_LAYOUT && renderingCanRestartBot && ( {IS_SINGLE_COLUMN_LAYOUT && renderingCanRestartBot && (
<Button <div className="middle-column-footer-button-container" dir={lang.isRtl ? 'rtl' : undefined}>
size="smaller" <Button
ripple size="tiny"
className="join-subscribe-button" fluid
onClick={handleRestartBot} ripple
> className="join-subscribe-button"
{lang('BotRestart')} onClick={handleRestartBot}
</Button> >
{lang('BotRestart')}
</Button>
</div>
)} )}
<MessageSelectToolbar <MessageSelectToolbar
messageListType={renderingMessageListType} messageListType={renderingMessageListType}