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

Fix transitions

master
Eduard Kuzmenko 3 years ago
parent
691eafd968
commit
43ad1c2a9d
12 changed files with 96 additions and 49 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/components/appSearchSuper..ts
  2. 2
      src/components/chat/chat.ts
  3. 2
      src/components/sliderTab.ts
  4. 24
      src/index.hbs
  5. 2
      src/lib/appManagers/appDialogsManager.ts
  6. 13
      src/scss/partials/_audio.scss
  7. 30
      src/scss/partials/_chat.scss
  8. 16
      src/scss/partials/_chatBubble.scss
  9. 24
      src/scss/partials/_checkbox.scss
  10. 2
      src/scss/partials/_emojiDropdown.scss
  11. 26
      src/scss/partials/_slider.scss
  12. 2
      src/scss/partials/pages/_pages.scss

2
src/components/appSearchSuper..ts
Unescape View File

@ -166,7 +166,7 @@ export default class AppSearchSuper { @@ -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
Unescape View File

@ -93,7 +93,7 @@ export default class Chat extends EventListenerBase<{ @@ -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
Unescape View File

@ -45,7 +45,7 @@ export default class SliderSuperTab implements SliderTab { @@ -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
Unescape View File

@ -39,7 +39,7 @@ @@ -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 @@ @@ -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 @@ @@ -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 @@ @@ -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 @@ @@ -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 @@ @@ -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 @@ @@ -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
Unescape View File

@ -629,7 +629,7 @@ export class AppDialogsManager { @@ -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
Unescape View File

@ -24,12 +24,19 @@ @@ -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 @@ @@ -177,10 +184,6 @@
56.87342% 42.46916%
);
}
&.one, &.two {
transition: clip-path .25s;
}
}
}

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

@ -34,8 +34,8 @@ $chat-helper-size: 36px; @@ -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; @@ -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; @@ -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; @@ -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; @@ -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; @@ -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; @@ -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
Unescape View File

@ -324,6 +324,9 @@ $bubble-margin: .25rem; @@ -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; @@ -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; @@ -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; @@ -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
Unescape View File

@ -197,17 +197,16 @@ @@ -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 @@ @@ -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 @@ @@ -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
Unescape View File

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

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

@ -120,7 +120,7 @@ @@ -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 @@ @@ -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 @@ @@ -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
Unescape View File

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

Write Preview
Loading…
Cancel
Save