r4sas/tweb-i2p
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix transitions

Browse Source
This commit is contained in:
Eduard Kuzmenko 2021-08-20 16:55:23 +03:00
parent 691eafd968
commit 43ad1c2a9d
12 changed files with 96 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/appSearchSuper..ts
View File

@ -166,7 +166,7 @@ export default class AppSearchSuper {
for(const mediaTab of this.mediaTabs) {
const container = document.createElement('div');
container.classList.add('search-super-container-' + mediaTab.type);
container.classList.add('search-super-container-' + mediaTab.type, 'tabs-tab');
const content = document.createElement('div');
content.classList.add('search-super-content-' + mediaTab.type);

2
src/components/chat/chat.ts
View File

@ -93,7 +93,7 @@ export default class Chat extends EventListenerBase<{
super();
this.container = document.createElement('div');
this.container.classList.add('chat');
this.container.classList.add('chat', 'tabs-tab');
this.backgroundEl = document.createElement('div');
this.backgroundEl.classList.add('chat-background');

2
src/components/sliderTab.ts
View File

@ -45,7 +45,7 @@ export default class SliderSuperTab implements SliderTab {
this.destroyable = destroyable;
this.container = document.createElement('div');
this.container.classList.add('sidebar-slider-item');
this.container.classList.add('tabs-tab', 'sidebar-slider-item');
// * Header
this.header = document.createElement('div');

24
src/index.hbs
View File

@ -39,7 +39,7 @@
<div class="whole" id="auth-pages" style="display: none;">
<div class="scrollable scrollable-y">
<div class="tabs-container auth-pages__container" data-animation="tabs">
<div class="page-sign">
<div class="tabs-tab page-sign">
<div class="container center-align">
<div class="auth-image">
<svg class="sign-logo" xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160">
@ -48,12 +48,12 @@
</div>
</div>
</div>
<div class="page-signQR">
<div class="tabs-tab page-signQR">
<div class="container center-align">
<div class="auth-image"></div>
</div>
</div>
<div class="page-authCode">
<div class="tabs-tab page-authCode">
<div class="container center-align">
<div class="auth-image"></div>
<div class="phone-wrapper">
@ -64,8 +64,8 @@
<div class="input-wrapper"></div>
</div>
</div>
<div class="page-password"></div>
<div class="page-signUp"></div>
<div class="tabs-tab page-password"></div>
<div class="tabs-tab page-signUp"></div>
</div>
</div>
</div>
@ -86,9 +86,9 @@
</defs>
</svg>
<div id="main-columns" class="tabs-container" data-animation="navigation">
<div class="chatlist-container sidebar sidebar-left main-column" id="column-left">
<div class="tabs-tab chatlist-container sidebar sidebar-left main-column" id="column-left">
<div class="sidebar-slider tabs-container">
<div class="sidebar-slider-item item-main">
<div class="tabs-tab sidebar-slider-item item-main">
<div class="sidebar-header">
<div class="sidebar-header__btn-container">
<div class="animated-menu-icon"></div>
@ -107,15 +107,15 @@
</div>
</div>
</div>
<div class="main-column" id="column-center"></div>
<div class="sidebar sidebar-right main-column" id="column-right">
<div class="tabs-tab main-column" id="column-center"></div>
<div class="tabs-tab sidebar sidebar-right main-column" id="column-right">
<div class="sidebar-content sidebar-slider tabs-container"></div>
</div>
</div>
<div class="emoji-dropdown" id="emoji-dropdown" style="display: none;">
<div class="emoji-container">
<div class="tabs-container">
<div class="emoji-padding">
<div class="tabs-tab emoji-padding">
<nav class="menu-horizontal-div no-stripe">
<button class="menu-horizontal-div-item active btn-icon tgico-recent rp"></button>
<button class="menu-horizontal-div-item btn-icon tgico-smile rp"></button>
@ -129,7 +129,7 @@
</nav>
<div class="emoticons-content" id="content-emoji"></div>
</div>
<div class="stickers-padding">
<div class="tabs-tab stickers-padding">
<div class="menu-wrapper">
<nav class="menu-horizontal-div no-stripe justify-start">
<button class="menu-horizontal-div-item btn-icon tgico-recent active"></button>
@ -137,7 +137,7 @@
</div>
<div class="emoticons-content" id="content-stickers"></div>
</div>
<div class="gifs-padding">
<div class="tabs-tab gifs-padding">
<div class="emoticons-content" id="content-gifs">
<div class="gifs-masonry"></div>
</div>

2
src/lib/appManagers/appDialogsManager.ts
View File

@ -629,7 +629,7 @@ export class AppDialogsManager {
const ul = this.createChatList();
const scrollable = this.generateScrollable(ul, filter.id);
scrollable.container.classList.add('chatlist-parts');
scrollable.container.classList.add('tabs-tab', 'chatlist-parts');
/* const parts = document.createElement('div');
parts.classList.add('chatlist-parts'); */

13
src/scss/partials/_audio.scss
View File

@ -24,12 +24,19 @@
&-toggle {
transform: rotate(-119deg);
transition: transform .25s;
@include animation-level(2) {
transition: transform .25s ease-in-out;
}
.part {
position: absolute;
background-color: white;
@include animation-level(2) {
transition: clip-path .25s ease-in-out;
}
@include respond-to(not-handhelds) {
height: 140px;
width: 140px;
@ -177,10 +184,6 @@
56.87342% 42.46916%
);
}
&.one, &.two {
transition: clip-path .25s;
}
}
}

30
src/scss/partials/_chat.scss
View File

@ -34,8 +34,8 @@ $chat-helper-size: 36px;
--bottom: var(--padding-bottom);
} */
body.animation-level-0 & {
transition: none;
@include animation-level(0) {
transition: none !important;
}
/* // * for no ESG top
@ -532,6 +532,7 @@ $chat-helper-size: 36px;
//overflow: hidden;
flex-direction: column;
//z-index: 1;
transition: transform var(--tabs-transition), filter var(--tabs-transition);
@include animation-level(0) {
transition: none !important;
@ -988,9 +989,9 @@ $chat-helper-size: 36px;
transform: translateY(var(--translateY));
transition: transform var(--transition-standard-out);
body.animation-level-0 & {
transition: none;
@include animation-level(0) {
transition: none !important;
}
/* html.is-safari & > .scrollable {
@ -1080,8 +1081,11 @@ $chat-helper-size: 36px;
cursor: pointer;
//--translateY: 0;
opacity: 1;
transition: opacity var(--layer-transition), visibility 0s 0s !important;
visibility: visible;
@include animation-level(2) {
transition: opacity var(--layer-transition), visibility 0s 0s !important;
}
/* &.is-broadcast {
--translateY: 79px !important;
@ -1108,14 +1112,13 @@ $chat-helper-size: 36px;
max-width: var(--messages-container-width);
//padding-top: 10000px;
transition: transform var(--transition-standard-out);
transform: translateY(0);
/* transition: margin-top var(--layer-transition);
transition-delay: .2s; */
body.animation-level-0 & {
transition: none;
@include animation-level(0) {
transition: none !important;
}
@include respond-to(medium-screens) {
@ -1171,8 +1174,11 @@ $chat-helper-size: 36px;
opacity: 0.99999 !important; // 0.99999 сделано для сафари, т.к. без этого будет прыжок при скролле в самом низу или верху
html.is-safari & {
transition: transform var(--transition-standard-in);
transform: translateY(calc(var(--translateY) * -1));
@include animation-level(2) {
transition: transform var(--transition-standard-in);
}
}
}
}
@ -1201,7 +1207,7 @@ $chat-helper-size: 36px;
//transition: opacity var(--layer-transition);
transform: none !important;
body.animation-level-0 & {
@include animation-level(0) {
transition: none !important;
}

16
src/scss/partials/_chatBubble.scss
View File

@ -324,6 +324,9 @@ $bubble-margin: .25rem;
html.no-touch & {
opacity: 0;
}
html.no-touch body.animation-level-2 & {
transition: opacity .2s ease-in-out;
}
}
@ -658,6 +661,10 @@ $bubble-margin: .25rem;
position: absolute;
overflow: hidden;
@include animation-level(0) {
transition: none !important;
}
/* .bubbles.is-selecting & {
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); // fix safari overflow
} */
@ -668,6 +675,10 @@ $bubble-margin: .25rem;
&-media { // * fix overflow for handhelds
border-radius: inherit;
@include animation-level(0) {
transition: none !important;
}
}
.bubble-select-checkbox {
@ -1968,8 +1979,11 @@ $bubble-margin: .25rem;
//@include respond-to(no-floating-left-sidebar) {
body.is-right-column-shown & {
transition: transform var(--transition-standard-in), opacity var(--transition-standard-in);
transform: scale(1) translateX(0);
@include animation-level(2) {
transition: transform var(--transition-standard-in), opacity var(--transition-standard-in);
}
&.zoom-fade {
transform: scale3d(.8, .8, 1) translateX(0);

24
src/scss/partials/_checkbox.scss
View File

@ -197,17 +197,16 @@
width: var(--size);
height: var(--size);
transform: translateY(-50%);
@include animation-level(0) {
transition: none;
}
}
&::before {
border: 2px solid var(--secondary-text-color);
border-radius: 50%;
opacity: 1;
transition: border-color .1s ease, opacity .1s ease;
@include animation-level(2) {
transition: border-color .1s ease, opacity .1s ease;
}
}
&::after {
@ -218,7 +217,10 @@
background: var(--primary-color);
transform: translateY(-50%) scale(0);
transform-origin: center;
transition: transform .1s ease;
@include animation-level(2) {
transition: transform .1s ease;
}
}
/* &-subtitle {
@ -329,19 +331,25 @@
position: relative;
display: flex;
align-items: center;
transition: background-color .1s;
margin: 0 var(--offset);
@include animation-level(2) {
transition: background-color .1s;
}
&:before {
width: 1.25rem;
height: 1.25rem;
border: 2px solid var(--secondary-color);
transition: border-color .1s, transform .1s;
background-color: var(--surface-color);
content: " ";
transform: translateX(calc(var(--offset) * -1));
border-radius: 50%;
position: absolute;
@include animation-level(2) {
transition: border-color .1s, transform .1s;
}
}
}

2
src/scss/partials/_emojiDropdown.scss
View File

@ -97,7 +97,7 @@
}
}
> div {
.tabs-tab {
min-height: 100%;
/* display: flex; */
flex-direction: column;

26
src/scss/partials/_slider.scss
View File

@ -120,7 +120,7 @@
// transition: .3s transform;
// }
> div {
.tabs-tab {
// * can't define these rules because of old firefox, though they don't work
//height: 100%;
//max-height: 100%;
@ -129,11 +129,9 @@
display: none;
flex-direction: column;
position: relative;
grid-row-start: 1;
grid-column-start: 1;
background-color: var(--background-color);
//z-index: 1;
body.animation-level-0 & {
transition: none !important;
@ -183,12 +181,30 @@
}
} */
&[data-animation="tabs"] > div {
&[data-animation="tabs"] .tabs-tab {
transition: transform var(--tabs-transition);
}
&[data-animation="navigation"] > div {
/* &[data-animation="navigation"] .tabs-tab {
transition: transform var(--tabs-transition), filter var(--tabs-transition);
} */
&[data-animation="navigation"] {
/* .tabs-tab {
transition: transform var(--tabs-transition), filter var(--tabs-transition);
} */
&.animating {
.tabs-tab {
transition: transform var(--transition-standard-in), filter var(--transition-standard-in);
}
&.backwards {
.tabs-tab {
transition: transform var(--transition-standard-out), filter var(--transition-standard-out);
}
}
}
}
}

2
src/scss/partials/pages/_pages.scss
View File

@ -85,7 +85,7 @@
}
}
> div {
.tabs-tab {
/* justify-content: center; */
/* &.active {
flex-direction: row;