danog/telegram-tt
1
0
Fork 0
mirror of https://github.com/danog/telegram-tt.git synced 2024-11-27 04:45:08 +01:00
Code Issues 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) {
&.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));
}
}
}
}

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

@ -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<OwnProps & StateProps & DispatchProps> = ({
botDescription,
threadTopMessageId,
hasLinkedChat,
withBottomShift,
openHistoryCalendar,
}) => {
// eslint-disable-next-line no-null/no-null
@ -470,6 +472,7 @@ const MessageList: FC<OwnProps & StateProps & DispatchProps> = ({
noAvatars && 'no-avatars',
!canPost && 'no-composer',
type === 'pinned' && 'type-pinned',
withBottomShift && 'with-bottom-shift',
isSelectModeActive && 'select-mode-active',
isScrolled && 'scrolled',
!isReady && 'is-animating',

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

@ -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;
}

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%);
}
}
.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;

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 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<StateProps & DispatchProps> = ({
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 (
<div
@ -408,6 +409,7 @@ const MiddleColumn: FC<StateProps & DispatchProps> = ({
onNotchToggle={setIsNotchShown}
isReady={isReady && !willSwitchMessageList}
isActive={isActive}
withBottomShift={withMessageListBottomShift}
/>
<div className={footerClassName}>
{renderingCanPost && (
@ -421,7 +423,7 @@ const MiddleColumn: FC<StateProps & DispatchProps> = ({
/>
)}
{isPinnedMessageList && (
<div className="unpin-button-container" dir={lang.isRtl ? 'rtl' : undefined}>
<div className="middle-column-footer-button-container" dir={lang.isRtl ? 'rtl' : undefined}>
<Button
size="tiny"
fluid
@ -444,34 +446,43 @@ const MiddleColumn: FC<StateProps & DispatchProps> = ({
</div>
)}
{IS_SINGLE_COLUMN_LAYOUT && renderingCanSubscribe && (
<Button
size="smaller"
ripple
className="join-subscribe-button"
onClick={handleSubscribeClick}
>
{lang(renderingIsChannel ? 'ProfileJoinChannel' : 'ProfileJoinGroup')}
</Button>
<div className="middle-column-footer-button-container" dir={lang.isRtl ? 'rtl' : undefined}>
<Button
size="tiny"
fluid
ripple
className="join-subscribe-button"
onClick={handleSubscribeClick}
>
{lang(renderingIsChannel ? 'ProfileJoinChannel' : 'ProfileJoinGroup')}
</Button>
</div>
)}
{IS_SINGLE_COLUMN_LAYOUT && renderingCanStartBot && (
<Button
size="smaller"
ripple
className="join-subscribe-button"
onClick={handleStartBot}
>
{lang('BotStart')}
</Button>
<div className="middle-column-footer-button-container" dir={lang.isRtl ? 'rtl' : undefined}>
<Button
size="tiny"
fluid
ripple
className="join-subscribe-button"
onClick={handleStartBot}
>
{lang('BotStart')}
</Button>
</div>
)}
{IS_SINGLE_COLUMN_LAYOUT && renderingCanRestartBot && (
<Button
size="smaller"
ripple
className="join-subscribe-button"
onClick={handleRestartBot}
>
{lang('BotRestart')}
</Button>
<div className="middle-column-footer-button-container" dir={lang.isRtl ? 'rtl' : undefined}>
<Button
size="tiny"
fluid
ripple
className="join-subscribe-button"
onClick={handleRestartBot}
>
{lang('BotRestart')}
</Button>
</div>
)}
<MessageSelectToolbar
messageListType={renderingMessageListType}