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

Middle Column: Fix Scroll Down Button positioning (#1419)

Browse Source
This commit is contained in:
Alexander Zinchuk 2021-09-03 18:31:18 +03:00
parent 663dffe18b
commit e88de90ac7
4 changed files with 9 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -302,6 +302,7 @@
.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);
border-radius: var(--border-radius-messages);
} }
} }

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

@ -270,6 +270,8 @@ const MiddleColumn: FC<StateProps & DispatchProps> = ({
useHistoryBack(isMobileSearchActive, closeLocalTextSearch); useHistoryBack(isMobileSearchActive, closeLocalTextSearch);
useHistoryBack(isSelectModeActive, exitMessageSelectMode); useHistoryBack(isSelectModeActive, exitMessageSelectMode);
const isMessagingDisabled = Boolean(!isPinnedMessageList && !renderingCanPost && messageSendingRestrictionReason);
return ( return (
<div <div
id="MiddleColumn" id="MiddleColumn"
@ -348,7 +350,7 @@ const MiddleColumn: FC<StateProps & DispatchProps> = ({
</Button> </Button>
</div> </div>
)} )}
{!isPinnedMessageList && !renderingCanPost && messageSendingRestrictionReason && ( {isMessagingDisabled && (
<div className={messagingDisabledClassName}> <div className={messagingDisabledClassName}>
<div className="messaging-disabled-inner"> <div className="messaging-disabled-inner">
<span> <span>
@ -370,6 +372,7 @@ const MiddleColumn: FC<StateProps & DispatchProps> = ({
<ScrollDownButton <ScrollDownButton
isShown={renderingIsFabShown} isShown={renderingIsFabShown}
canPost={renderingCanPost} canPost={renderingCanPost}
withExtraShift={isMessagingDisabled || isSelectModeActive || isPinnedMessageList}
/> />
</div> </div>
{IS_SINGLE_COLUMN_LAYOUT && <MobileSearch isActive={Boolean(isMobileSearchActive)} />} {IS_SINGLE_COLUMN_LAYOUT && <MobileSearch isActive={Boolean(isMobileSearchActive)} />}

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

@ -61,7 +61,7 @@
opacity: 1; opacity: 1;
pointer-events: all; pointer-events: all;
&.no-composer { &.no-composer:not(.with-extra-shift) {
transform: translateY(4rem); transform: translateY(4rem);
} }
} }

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

@ -20,6 +20,7 @@ import './ScrollDownButton.scss';
type OwnProps = { type OwnProps = {
isShown: boolean; isShown: boolean;
canPost?: boolean; canPost?: boolean;
withExtraShift?: boolean;
}; };
type StateProps = { type StateProps = {
@ -36,6 +37,7 @@ const ScrollDownButton: FC<OwnProps & StateProps & DispatchProps> = ({
canPost, canPost,
messageListType, messageListType,
unreadCount, unreadCount,
withExtraShift,
focusNextReply, focusNextReply,
}) => { }) => {
const lang = useLang(); const lang = useLang();
@ -65,6 +67,7 @@ const ScrollDownButton: FC<OwnProps & StateProps & DispatchProps> = ({
'ScrollDownButton', 'ScrollDownButton',
isShown && 'revealed', isShown && 'revealed',
!canPost && 'no-composer', !canPost && 'no-composer',
withExtraShift && 'with-extra-shift',
); );
return ( return (