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

UI: Do not use deprecated overflow: overlay (#3185)

Browse Source
This commit is contained in:
Alexander Zinchuk 2023-06-12 11:55:53 +02:00
parent d6b919e6ae
commit a8d742aa18
22 changed files with 44 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/left/main/LeftMainHeader.scss
View File

@ -96,7 +96,6 @@
max-height: calc(100 * var(--vh) - 3.75rem);
overflow-y: auto;
@include overflow-y-overlay();
}
.extra-spacing {

6
src/components/left/main/StatusPickerMenu.module.scss
View File

@ -6,7 +6,7 @@
left: 0.5rem;
width: 100%;
max-width: calc(var(--symbol-menu-width) + 0.25rem); // Reserve width for scrollbar
max-width: calc(var(--symbol-menu-width) + var(--scrollbar-width));
height: var(--symbol-menu-height);
padding: 0 !important;
@ -16,10 +16,6 @@
backdrop-filter: blur(10px);
}
@supports (overflow: overlay) {
width: var(--symbol-menu-width);
}
@media (max-width: 26rem) {
left: 0.5rem !important;
right: 0.5rem !important;

8
src/components/left/settings/Settings.scss
View File

@ -1,5 +1,3 @@
@import "../../../styles/mixins";
#Settings {
height: 100%;
@ -34,11 +32,9 @@
.settings-content {
border-top: 1px solid var(--color-borders);
background-color: var(--color-background-secondary);
height: calc(100% - var(--header-height));
overflow-y: auto;
@include overflow-y-overlay();
overflow-y: scroll;
&.no-border, &.two-fa, &.local-passcode, &.password-form {
border-top: none;
@ -129,7 +125,7 @@
background-color: var(--color-background);
padding: 1.5rem 1.5rem 1rem;
box-shadow: inset 0 -0.0625rem 0 0 var(--color-background-secondary-accent);
margin-bottom: 0.625rem;
border-bottom: 0.625rem solid var(--color-background-secondary);
}
.settings-item {

3
src/components/left/settings/SettingsDoNotTranslate.module.scss
View File

@ -1,5 +1,3 @@
@import "../../../styles/mixins";
.root, .item {
display: flex;
flex-direction: column;
@ -16,5 +14,4 @@
.languages {
overflow-y: auto;
@include overflow-y-overlay();
}

3
src/components/middle/MessageLanguageModal.module.scss
View File

@ -1,5 +1,3 @@
@import "../../styles/mixins";
.root {
:global(.modal-content) {
min-height: min(75vh, 32rem);
@ -26,5 +24,4 @@
.languages {
overflow-y: auto;
@include overflow-y-overlay();
}

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

@ -1,16 +1,13 @@
@import "../../styles/mixins";
.MessageList {
flex: 1;
width: 100%;
margin-bottom: 0.5rem;
overflow: scroll;
overflow-y: scroll;
overflow-x: hidden;
overflow-y: auto;
@include overflow-y-overlay();
transition: transform var(--layer-transition);
/* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
transition: bottom 150ms ease-out, transform var(--layer-transition);
body.no-page-transitions & {
transition: none !important;
@ -30,9 +27,6 @@
}
}
/* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
transition: bottom 150ms ease-out, transform var(--layer-transition);
body.keyboard-visible & {
position: relative;
bottom: calc(0px - env(safe-area-inset-bottom));
@ -379,10 +373,6 @@
top: 0.625rem;
}
&.is-animating {
overflow: hidden;
}
&.is-animating .message-select-control {
display: none !important;
}
@ -464,14 +454,11 @@
.Transition_slide-from > &,
.Transition_slide-to > & {
padding-inline-end: var(--scrollbar-width) !important;
scrollbar-width: none !important;
&::-webkit-scrollbar {
width: 0 !important;
}
/* Styles for Firefox */
@supports (scrollbar-width: none) {
padding-right: 0.6875rem !important;
scrollbar-width: none !important;
}
}
}

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

@ -1,5 +1,3 @@
@import "../../../styles/mixins";
.Composer {
align-items: flex-end;
@ -666,7 +664,6 @@
overflow-x: hidden;
overflow-y: auto;
@include overflow-y-overlay();
box-shadow: 0 1px 2px var(--color-default-shadow);

5
src/components/middle/composer/CustomEmojiTooltip.module.scss
View File

@ -3,11 +3,8 @@
padding: 0;
z-index: 1;
overflow-x: scroll;
overflow-y: hidden;
overflow-x: auto;
@supports (overflow-x: overlay) {
overflow-x: overlay;
}
.emojiButton {
flex: 0 0 2rem;

4
src/components/middle/composer/EmojiPicker.scss
View File

@ -10,12 +10,12 @@
height: calc(100% - 3rem);
overflow-y: auto;
padding: 0.5rem 0.75rem;
@include adapt-padding-to-scrollbar(0.75rem);
@media (max-width: 600px) {
padding: 0.5rem 0.25rem;
@include adapt-padding-to-scrollbar(0.25rem);
}
@include overflow-y-overlay();
}
&-header {

5
src/components/middle/composer/EmojiTooltip.scss
View File

@ -2,10 +2,7 @@
display: flex;
padding: 0;
overflow-x: auto;
@supports (overflow-x: overlay) {
overflow-x: overlay;
}
overflow-x: scroll;
overflow-y: hidden;
.EmojiButton {

4
src/components/middle/composer/GifPicker.scss
View File

@ -1,5 +1,3 @@
@import "../../../styles/mixins";
.GifPicker {
display: grid;
grid-template-columns: repeat(6, 1fr);
@ -14,8 +12,6 @@
position: relative;
top: 0.1875rem;
@include overflow-y-overlay();
.Loading, .picker-disabled {
position: absolute;
top: 0;

9
src/components/middle/composer/StickerPicker.module.scss
View File

@ -11,13 +11,16 @@
position: relative;
height: calc(100% - 3rem);
overflow-y: auto;
padding: 0.5rem 0.25rem;
@include overflow-y-overlay();
overflow-y: auto;
overflow-x: hidden;
padding: 0.5rem 0.25rem;
@include adapt-padding-to-scrollbar(0.25rem);
&_customEmoji {
padding: 0.5rem 0.75rem;
@include adapt-padding-to-scrollbar(0.75rem);
}
:global(.bubble) {

6
src/components/middle/composer/SymbolMenu.scss
View File

@ -141,7 +141,7 @@
--offset-y: 4rem;
border-radius: 1.25rem;
width: calc(var(--symbol-menu-width) + 0.25rem); // Reserve width for scrollbar
width: calc(var(--symbol-menu-width) + var(--scrollbar-width));
padding: 0;
overflow: hidden;
@ -155,10 +155,6 @@
}
transition-duration: 200ms !important;
@supports (overflow: overlay) {
width: var(--symbol-menu-width);
}
}
.StickerButton.custom-emoji, .sticker-set-cover {

1
src/components/middle/message/MessageContextMenu.scss
View File

@ -4,7 +4,6 @@
&_items {
overflow: auto;
overflow: overlay;
padding: 0.5rem 0;
overscroll-behavior: contain;

6
src/components/middle/message/ReactionPicker.module.scss
View File

@ -18,15 +18,11 @@
backdrop-filter: blur(10px);
}
width: calc(var(--symbol-menu-width) + 0.25rem); // Reserve width for scrollbar
width: calc(var(--symbol-menu-width) + var(--scrollbar-width));
height: var(--symbol-menu-height);
padding: 0 !important;
transform-origin: 9rem 4.625rem !important;
@supports (overflow: overlay) {
width: var(--symbol-menu-width);
}
&:global(.bubble) {
transform: scale(0.8) !important;
transition: opacity 150ms cubic-bezier(0.2, 0, 0.2, 1), transform 150ms cubic-bezier(0.2, 0, 0.2, 1) !important;

3
src/components/right/Profile.scss
View File

@ -1,5 +1,3 @@
@import "../../styles/mixins";
.Profile {
height: 100%;
display: flex;
@ -7,7 +5,6 @@
overflow-x: hidden;
overflow-y: scroll;
@include overflow-y-overlay();
> .profile-info > .ChatInfo {
grid-area: chat_info;

8
src/components/right/StickerSearch.scss
View File

@ -2,13 +2,9 @@
container: stickers / inline-size;
height: 100%;
padding: 0 0.5rem;
overflow-y: auto;
overflow-y: scroll;
overflow-x: hidden;
@supports (overflow-y: overlay) {
overflow-y: overlay;
}
.helper-text {
padding: 1rem;
margin-bottom: 0.125rem;
@ -77,7 +73,7 @@
.StickerButton {
margin: 0.125rem;
@media (max-width: 380px) {
&:last-child {
display: none;

3
src/components/right/management/Management.scss
View File

@ -1,7 +1,6 @@
.Management {
position: relative;
height: 100%;
background-color: var(--color-background-secondary);
& > .custom-scroll {
height: 100%;
@ -18,7 +17,7 @@
padding: 1rem 1.5rem;
background-color: var(--color-background);
box-shadow: inset 0 -0.0625rem 0 0 var(--color-background-secondary-accent);
margin-bottom: 0.625rem;
border-bottom: 0.625rem solid var(--color-background-secondary);
&.wide {
padding: 1.5rem;

7
src/styles/_common.scss
View File

@ -1,5 +1,3 @@
@import "./mixins";
// Common styles for all media-type components across the app.
.media-inner {
position: relative;
@ -97,9 +95,10 @@
background: var(--color-background);
height: 100%;
padding: 0.5rem 0.4375rem 0.5rem 0.4375rem;
@include adapt-padding-to-scrollbar(0.4375rem);
overflow-y: auto;
@include overflow-y-overlay();
overflow-x: hidden;
overflow-y: scroll;
&.forum-panel-open {
.info {

9
src/styles/_mixins.scss
View File

@ -5,13 +5,8 @@
}
}
@mixin overflow-y-overlay() {
@supports (overflow-y: overlay) {
overflow-y: overlay;
//Workaround for Android <= 9
overflow-x: hidden;
}
@mixin adapt-padding-to-scrollbar($padding) {
padding-inline-end: calc($padding - var(--scrollbar-width));
}
@mixin reset-range() {

2
src/styles/_variables.scss
View File

@ -202,6 +202,8 @@ $color-message-reaction-own-hover: #b5e0a4;
--symbol-menu-height: 22.375rem;
--symbol-menu-footer-height: 3rem;
--scrollbar-width: 0;
@media (min-width: 1276px) and (max-width: 1920px) {
--right-column-width: 25vw;
}

13
src/util/windowEnvironment.ts
View File

@ -123,6 +123,19 @@ export const IS_TRANSLATION_SUPPORTED = Boolean(Intl.DisplayNames);
export const MESSAGE_LIST_SENSITIVE_AREA = 750;
export const SCROLLBAR_WIDTH = (() => {
const el = document.createElement('div');
el.style.cssText = 'overflow:scroll; visibility:hidden; position:absolute;';
el.classList.add('custom-scroll');
document.body.appendChild(el);
const width = el.offsetWidth - el.clientWidth;
el.remove();
document.documentElement.style.setProperty('--scrollbar-width', `${width}px`);
return width;
})();
export const MAX_BUFFER_SIZE = (IS_MOBILE ? 512 : 2000) * 1024 ** 2; // 512 OR 2000 MB
function isLastEmojiVersionSupported() {