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

Middle Footer: Various issues (#1031)

Browse Source
This commit is contained in:
Alexander Zinchuk 2021-04-19 18:37:06 +03:00
parent 4df0f9477f
commit 60e26125fd
9 changed files with 33 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -62,7 +62,7 @@
&.select-mode-active {
.messages-container {
padding-bottom: 5.25rem;
padding-bottom: 4.75rem;
}
}

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

@ -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 {

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

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

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

@ -183,6 +183,7 @@ const MiddleColumn: FC<StateProps & DispatchProps> = ({
const {
composerHiddenScale, toolbarHiddenScale,
composerTranslateX, toolbarTranslateX,
unpinHiddenScale, toolbarForUnpinHiddenScale,
} = useMemo(
() => calculateMiddleFooterTransforms(windowWidth, renderingCanPost),
[renderingCanPost, windowWidth],
@ -198,6 +199,8 @@ const MiddleColumn: FC<StateProps & DispatchProps> = ({
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;
`}

2
src/components/middle/composer/Composer.scss
View File

@ -5,7 +5,7 @@
@media (min-width: 601px) {
position: absolute;
padding-right: 2rem;
margin-top: -.5rem;
bottom: 0;
}
@media (max-width: 600px) {

5
src/components/middle/helpers/calculateMiddleFooterTransforms.ts
View File

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

2
src/components/right/RightColumn.scss
View File

@ -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) {

2
src/components/ui/Menu.scss
View File

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

2
src/components/ui/Modal.scss
View File

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