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

Replaced rest of icons 

Layout fixes in left sidebar
Added animation to chatlist menu button
Changed chat layer transition
master
Eduard Kuzmenko 4 years ago
parent
5c522c034e
commit
4ab2c8036d
26 changed files with 289 additions and 307 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      src/components/chat/bubbles.ts
  2. 2
      src/components/chat/contextMenu.ts
  3. 6
      src/components/chat/input.ts
  4. 2
      src/components/chat/markupTooltip.ts
  5. 2
      src/components/chat/search.ts
  6. 2
      src/components/chat/topbar.ts
  7. 6
      src/components/sidebarLeft/index.ts
  8. 50
      src/components/sidebarLeft/tabs/editFolder.ts
  9. 2
      src/components/sidebarLeft/tabs/generalSettings.ts
  10. 33
      src/components/sidebarLeft/tabs/includedChats.ts
  11. 2
      src/components/sliderTab.ts
  12. 2
      src/index.hbs
  13. 6
      src/lib/appManagers/appProfileManager.ts
  14. 17
      src/scss/partials/_animatedIcon.scss
  15. 6
      src/scss/partials/_avatar.scss
  16. 4
      src/scss/partials/_button.scss
  17. 47
      src/scss/partials/_chat.scss
  18. 37
      src/scss/partials/_chatBubble.scss
  19. 3
      src/scss/partials/_chatTopbar.scss
  20. 6
      src/scss/partials/_checkbox.scss
  21. 46
      src/scss/partials/_fonts.scss
  22. 194
      src/scss/partials/_ico.scss
  23. 103
      src/scss/partials/_leftSidebar.scss
  24. 5
      src/scss/partials/_rightSidebar.scss
  25. 2
      src/scss/partials/_selector.scss
  26. 8
      src/scss/style.scss

3
src/components/chat/bubbles.ts
Unescape View File

@ -2912,6 +2912,7 @@ export default class ChatBubbles {
const setBubbles: HTMLElement[] = []; const setBubbles: HTMLElement[] = [];
this.chatInner.classList.add('zoom-fading');
const delay = isAdditionRender ? 10 : 40; const delay = isAdditionRender ? 10 : 40;
const offsetIndex = isAdditionRender ? 0 : 1; const offsetIndex = isAdditionRender ? 0 : 1;
const animateAsLadder = (mids: number[], offsetIndex = 0) => { const animateAsLadder = (mids: number[], offsetIndex = 0) => {
@ -2979,6 +2980,8 @@ export default class ChatBubbles {
setBubbles.forEach(contentWrapper => { setBubbles.forEach(contentWrapper => {
contentWrapper.style.transitionDelay = ''; contentWrapper.style.transitionDelay = '';
}); });
this.chatInner.classList.remove('zoom-fading');
}); });
// ! в хроме, каким-то образом из-за zoom-fade класса начинает прыгать скролл при подгрузке сообщений вверх, // ! в хроме, каким-то образом из-за zoom-fade класса начинает прыгать скролл при подгрузке сообщений вверх,

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

@ -239,7 +239,7 @@ export default class ChatContextMenu {
onClick: this.onUnpinClick, onClick: this.onUnpinClick,
verify: () => this.message.pFlags.pinned && this.appPeersManager.canPinMessage(this.peerId), verify: () => this.message.pFlags.pinned && this.appPeersManager.canPinMessage(this.peerId),
}, { }, {
icon: 'revote', icon: 'checkretract',
text: 'Chat.Poll.Unvote', text: 'Chat.Poll.Unvote',
onClick: this.onRetractVote, onClick: this.onRetractVote,
verify: () => { verify: () => {

6
src/components/chat/input.ts
Unescape View File

@ -288,7 +288,7 @@ export default class ChatInput {
} }
this.attachMenuButtons = [{ this.attachMenuButtons = [{
icon: 'photo', icon: 'image',
text: 'Chat.Input.Attach.PhotoOrVideo', text: 'Chat.Input.Attach.PhotoOrVideo',
onClick: () => { onClick: () => {
this.fileInput.value = ''; this.fileInput.value = '';
@ -344,12 +344,12 @@ export default class ChatInput {
this.recordRippleEl = document.createElement('div'); this.recordRippleEl = document.createElement('div');
this.recordRippleEl.classList.add('record-ripple'); this.recordRippleEl.classList.add('record-ripple');
this.btnSend = ButtonIcon('none btn-circle z-depth-1 btn-send'); this.btnSend = ButtonIcon('none btn-circle z-depth-1 btn-send animated-button-icon');
this.btnSend.insertAdjacentHTML('afterbegin', ` this.btnSend.insertAdjacentHTML('afterbegin', `
<span class="tgico tgico-send"></span> <span class="tgico tgico-send"></span>
<span class="tgico tgico-schedule"></span> <span class="tgico tgico-schedule"></span>
<span class="tgico tgico-check"></span> <span class="tgico tgico-check"></span>
<span class="tgico tgico-microphone2"></span> <span class="tgico tgico-microphone"></span>
`); `);
this.btnSendContainer.append(this.recordRippleEl, this.btnSend); this.btnSendContainer.append(this.recordRippleEl, this.btnSend);

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

@ -69,7 +69,7 @@ export default class MarkupTooltip {
} }
}); });
this.linkBackButton = ButtonIcon('arrow_back', {noRipple: true}); this.linkBackButton = ButtonIcon('left', {noRipple: true});
this.linkInput = document.createElement('input'); this.linkInput = document.createElement('input');
_i18n(this.linkInput, 'MarkupTooltip.LinkPlaceholder', undefined, 'placeholder'); _i18n(this.linkInput, 'MarkupTooltip.LinkPlaceholder', undefined, 'placeholder');
this.linkInput.classList.add('input-clear'); this.linkInput.classList.add('input-clear');

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

@ -39,7 +39,7 @@ export default class ChatSearch {
this.element.classList.add('sidebar-header', 'chat-search', 'chatlist-container'); this.element.classList.add('sidebar-header', 'chat-search', 'chatlist-container');
this.backBtn = document.createElement('button'); this.backBtn = document.createElement('button');
this.backBtn.classList.add('btn-icon', 'tgico-arrow_back', 'sidebar-close-button'); this.backBtn.classList.add('btn-icon', 'tgico-left', 'sidebar-close-button');
ripple(this.backBtn); ripple(this.backBtn);
this.backBtn.addEventListener('click', () => { this.backBtn.addEventListener('click', () => {

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

@ -68,7 +68,7 @@ export default class ChatTopbar {
this.container = document.createElement('div'); this.container = document.createElement('div');
this.container.classList.add('sidebar-header', 'topbar'); this.container.classList.add('sidebar-header', 'topbar');
this.btnBack = ButtonIcon('arrow_back sidebar-close-button', {noRipple: true}); this.btnBack = ButtonIcon('left sidebar-close-button', {noRipple: true});
// * chat info section // * chat info section
this.chatInfo = document.createElement('div'); this.chatInfo = document.createElement('div');

6
src/components/sidebarLeft/index.ts
Unescape View File

@ -198,7 +198,11 @@ export class AppSidebarLeft extends SidebarSlider {
text: 'NewPrivateChat', text: 'NewPrivateChat',
onClick: onContactsClick onClick: onContactsClick
}]); }]);
this.newBtnMenu.className = 'btn-circle rp btn-corner tgico-newchat_filled btn-menu-toggle'; this.newBtnMenu.className = 'btn-circle rp btn-corner btn-menu-toggle animated-button-icon';
this.newBtnMenu.insertAdjacentHTML('afterbegin', `
<span class="tgico tgico-newchat_filled"></span>
<span class="tgico tgico-close"></span>
`);
this.newBtnMenu.id = 'new-menu'; this.newBtnMenu.id = 'new-menu';
sidebarHeader.nextElementSibling.append(this.newBtnMenu); sidebarHeader.nextElementSibling.append(this.newBtnMenu);

50
src/components/sidebarLeft/tabs/editFolder.ts
Unescape View File

@ -20,6 +20,7 @@ import { ButtonMenuItemOptions } from "../../buttonMenu";
import Button from "../../button"; import Button from "../../button";
import AppIncludedChatsTab from "./includedChats"; import AppIncludedChatsTab from "./includedChats";
import { i18n, i18n_, LangPackKey } from "../../../lib/langPack"; import { i18n, i18n_, LangPackKey } from "../../../lib/langPack";
import { SettingSection } from "..";
const MAX_FOLDER_NAME_LENGTH = 12; const MAX_FOLDER_NAME_LENGTH = 12;
@ -31,8 +32,8 @@ export default class AppEditFolderTab extends SliderSuperTab {
private menuBtn: HTMLElement; private menuBtn: HTMLElement;
private nameInputField: InputField; private nameInputField: InputField;
private include_peers: HTMLElement; private include_peers: SettingSection;
private exclude_peers: HTMLElement; private exclude_peers: SettingSection;
private flags: {[k in 'contacts' | 'non_contacts' | 'groups' | 'broadcasts' | 'bots' | 'exclude_muted' | 'exclude_archived' | 'exclude_read']: HTMLElement} = {} as any; private flags: {[k in 'contacts' | 'non_contacts' | 'groups' | 'broadcasts' | 'bots' | 'exclude_muted' | 'exclude_archived' | 'exclude_read']: HTMLElement} = {} as any;
private animation: RLottiePlayer; private animation: RLottiePlayer;
@ -81,14 +82,14 @@ export default class AppEditFolderTab extends SliderSuperTab {
inputWrapper.append(this.nameInputField.container); inputWrapper.append(this.nameInputField.container);
const generateList = (className: string, h2Text: LangPackKey, buttons: {icon: string, name?: string, withRipple?: true, text: LangPackKey}[], to: any) => { const generateList = (className: string, h2Text: LangPackKey, buttons: {icon: string, name?: string, withRipple?: true, text: LangPackKey}[], to: any) => {
const container = document.createElement('div'); const section = new SettingSection({
container.classList.add('folder-list', className); name: h2Text,
noDelimiter: true
});
const h2 = document.createElement('div'); section.container.classList.add('folder-list', className);
h2.classList.add('sidebar-left-h2');
i18n_({element: h2, key: h2Text});
const categories = document.createElement('div'); const categories = section.generateContentElement();
categories.classList.add('folder-categories'); categories.classList.add('folder-categories');
buttons.forEach(o => { buttons.forEach(o => {
@ -105,9 +106,7 @@ export default class AppEditFolderTab extends SliderSuperTab {
categories.append(button); categories.append(button);
}); });
container.append(h2, categories); return section;
return container;
}; };
this.include_peers = generateList('folder-list-included', 'FilterInclude', [{ this.include_peers = generateList('folder-list-included', 'FilterInclude', [{
@ -154,16 +153,16 @@ export default class AppEditFolderTab extends SliderSuperTab {
name: 'exclude_read' name: 'exclude_read'
}], this.flags); }], this.flags);
this.scrollable.append(this.stickerContainer, this.caption, inputWrapper, this.include_peers, this.exclude_peers); this.scrollable.append(this.stickerContainer, this.caption, inputWrapper, this.include_peers.container, this.exclude_peers.container);
const includedFlagsContainer = this.include_peers.querySelector('.folder-categories'); const includedFlagsContainer = this.include_peers.container.querySelector('.folder-categories');
const excludedFlagsContainer = this.exclude_peers.querySelector('.folder-categories'); const excludedFlagsContainer = this.exclude_peers.container.querySelector('.folder-categories');
includedFlagsContainer.firstElementChild.addEventListener('click', () => { includedFlagsContainer.querySelector('.btn').addEventListener('click', () => {
new AppIncludedChatsTab(this.slider).open(this.filter, 'included', this); new AppIncludedChatsTab(this.slider).open(this.filter, 'included', this);
}); });
excludedFlagsContainer.firstElementChild.addEventListener('click', () => { excludedFlagsContainer.querySelector('.btn').addEventListener('click', () => {
new AppIncludedChatsTab(this.slider).open(this.filter, 'excluded', this); new AppIncludedChatsTab(this.slider).open(this.filter, 'excluded', this);
}); });
@ -264,7 +263,7 @@ export default class AppEditFolderTab extends SliderSuperTab {
} }
(['include_peers', 'exclude_peers'] as ['include_peers', 'exclude_peers']).forEach(key => { (['include_peers', 'exclude_peers'] as ['include_peers', 'exclude_peers']).forEach(key => {
const container = this[key]; const section = this[key];
const ul = appDialogsManager.createChatList(); const ul = appDialogsManager.createChatList();
const peers = filter[key].slice(); const peers = filter[key].slice();
@ -291,20 +290,17 @@ export default class AppEditFolderTab extends SliderSuperTab {
} }
}; };
container.append(ul); section.generateContentElement().append(ul);
let showMore: HTMLElement; let showMore: HTMLElement;
if(peers.length) { if(peers.length) {
showMore = document.createElement('div'); const content = section.generateContentElement();
showMore.classList.add('show-more', 'rp-overflow'); showMore = Button('folder-category-button btn btn-primary btn-transparent', {icon: 'down'});
showMore.classList.add('load-more', 'rp-overflow');
showMore.addEventListener('click', () => renderMore(20)); showMore.addEventListener('click', () => renderMore(20));
showMore.append(i18n('FilterShowMoreChats', [peers.length]));
ripple(showMore); content.append(showMore);
const down = document.createElement('div');
down.classList.add('tgico-down');
showMore.append(down, i18n('FilterShowMoreChats', [peers.length]));
container.append(showMore);
} }
renderMore(4); renderMore(4);
@ -321,7 +317,7 @@ export default class AppEditFolderTab extends SliderSuperTab {
setFilter(filter: DialogFilter, firstTime: boolean) { setFilter(filter: DialogFilter, firstTime: boolean) {
// cleanup // cleanup
Array.from(this.container.querySelectorAll('ul, .show-more')).forEach(el => el.remove()); Array.from(this.container.querySelectorAll('ul, .load-more')).forEach(el => el.remove());
if(firstTime) { if(firstTime) {
this.originalFilter = filter; this.originalFilter = filter;

2
src/components/sidebarLeft/tabs/generalSettings.ts
Unescape View File

@ -74,7 +74,7 @@ export default class AppGeneralSettingsTab extends SliderSuperTab {
appStateManager.setByKey('settings.messagesTextSize', value); appStateManager.setByKey('settings.messagesTextSize', value);
}; };
const chatBackgroundButton = Button('btn-primary btn-transparent', {icon: 'photo', text: 'ChatBackground'}); const chatBackgroundButton = Button('btn-primary btn-transparent', {icon: 'image', text: 'ChatBackground'});
attachClickEvent(chatBackgroundButton, () => { attachClickEvent(chatBackgroundButton, () => {
new AppBackgroundTab(this.slider).open(); new AppBackgroundTab(this.slider).open();

33
src/components/sidebarLeft/tabs/includedChats.ts
Unescape View File

@ -17,6 +17,7 @@ import AppEditFolderTab from "./editFolder";
import { i18n, LangPackKey, _i18n, join } from "../../../lib/langPack"; import { i18n, LangPackKey, _i18n, join } from "../../../lib/langPack";
import appMessagesManager from "../../../lib/appManagers/appMessagesManager"; import appMessagesManager from "../../../lib/appManagers/appMessagesManager";
import RichTextProcessor from "../../../lib/richtextprocessor"; import RichTextProcessor from "../../../lib/richtextprocessor";
import { SettingSection } from "..";
export default class AppIncludedChatsTab extends SliderSuperTab { export default class AppIncludedChatsTab extends SliderSuperTab {
private editFolderTab: AppEditFolderTab; private editFolderTab: AppEditFolderTab;
@ -167,12 +168,13 @@ export default class AppIncludedChatsTab extends SliderSuperTab {
const filter = this.filter; const filter = this.filter;
const fragment = document.createDocumentFragment(); const fragment = document.createDocumentFragment();
const dd = document.createElement('div');
dd.classList.add('sidebar-left-h2'); const categoriesSection = new SettingSection({
_i18n(dd, 'FilterChatTypes'); noDelimiter: true,
name: 'FilterChatTypes'
const categories = document.createElement('div'); });
categories.classList.add('folder-categories');
categoriesSection.container.classList.add('folder-categories');
let details: {[flag: string]: {ico: string, text: LangPackKey}}; let details: {[flag: string]: {ico: string, text: LangPackKey}};
if(this.type === 'excluded') { if(this.type === 'excluded') {
@ -198,16 +200,13 @@ export default class AppIncludedChatsTab extends SliderSuperTab {
button.append(this.checkbox()); button.append(this.checkbox());
f.append(button); f.append(button);
} }
categories.append(f); categoriesSection.content.append(f);
const hr = document.createElement('hr');
hr.style.margin = '7px 0 9px';
const d = document.createElement('div'); const chatsSection = new SettingSection({
d.classList.add('sidebar-left-h2'); name: 'FilterChats'
_i18n(d, 'FilterChats'); });
fragment.append(dd, categories, hr, d); fragment.append(categoriesSection.container, chatsSection.container);
///////////////// /////////////////
@ -231,14 +230,16 @@ export default class AppIncludedChatsTab extends SliderSuperTab {
return div; return div;
}; };
this.selector.list.parentElement.insertBefore(fragment, this.selector.list); const parent = this.selector.list.parentElement;
chatsSection.content.append(this.selector.list);
parent.append(fragment);
this.selector.addInitial(selectedPeers); this.selector.addInitial(selectedPeers);
for(const flag in filter.pFlags) { for(const flag in filter.pFlags) {
// @ts-ignore // @ts-ignore
if(details.hasOwnProperty(flag) && !!filter.pFlags[flag]) { if(details.hasOwnProperty(flag) && !!filter.pFlags[flag]) {
(categories.querySelector(`[data-peer-id="${flag}"]`) as HTMLElement).click(); (categoriesSection.content.querySelector(`[data-peer-id="${flag}"]`) as HTMLElement).click();
} }
} }
} }

2
src/components/sliderTab.ts
Unescape View File

@ -51,7 +51,7 @@ export default class SliderSuperTab implements SliderTab {
this.header = document.createElement('div'); this.header = document.createElement('div');
this.header.classList.add('sidebar-header'); this.header.classList.add('sidebar-header');
this.closeBtn = ButtonIcon('arrow_back sidebar-close-button', {noRipple: true}); this.closeBtn = ButtonIcon('left sidebar-close-button', {noRipple: true});
this.title = document.createElement('div'); this.title = document.createElement('div');
this.title.classList.add('sidebar-header__title'); this.title.classList.add('sidebar-header__title');
this.header.append(this.closeBtn, this.title); this.header.append(this.closeBtn, this.title);

2
src/index.hbs
Unescape View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" class="nights"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">

6
src/lib/appManagers/appProfileManager.ts
Unescape View File

@ -557,7 +557,7 @@ export class AppProfileManager {
div.innerHTML = ''; div.innerHTML = '';
div.dataset.color = ''; div.dataset.color = '';
div.classList.add('tgico-saved'); div.classList.add('tgico-saved');
div.classList.remove('tgico-avatar_deletedaccount'); div.classList.remove('tgico-deletedaccount');
return; return;
} }
@ -566,7 +566,7 @@ export class AppProfileManager {
if(user && user.pFlags && user.pFlags.deleted) { if(user && user.pFlags && user.pFlags.deleted) {
div.innerHTML = ''; div.innerHTML = '';
div.dataset.color = appPeersManager.getPeerColorById(peerId); div.dataset.color = appPeersManager.getPeerColorById(peerId);
div.classList.add('tgico-avatar_deletedaccount'); div.classList.add('tgico-deletedaccount');
div.classList.remove('tgico-saved'); div.classList.remove('tgico-saved');
return; return;
} }
@ -579,7 +579,7 @@ export class AppProfileManager {
} }
div.innerHTML = ''; div.innerHTML = '';
div.classList.remove('tgico-saved', 'tgico-avatar_deletedaccount'); div.classList.remove('tgico-saved', 'tgico-deletedaccount');
div.dataset.color = color; div.dataset.color = color;
let abbr: string; let abbr: string;

17
src/scss/partials/_animatedIcon.scss
Unescape View File

@ -95,3 +95,20 @@
} }
} }
} }
.animated-button-icon {
> .tgico {
position: absolute;
height: 24px;
line-height: 24px;
body:not(.animation-level-0) & {
animation: hide-icon .4s forwards ease-in-out;
}
@include animation-level(0) {
visibility: hidden;
animation: none !important;
}
}
}

6
src/scss/partials/_avatar.scss
Unescape View File

@ -69,11 +69,11 @@ avatar-element {
font-size: calc(21px / var(--multiplier)) !important; // ! IMPORTANT IS TEMPORARY font-size: calc(21px / var(--multiplier)) !important; // ! IMPORTANT IS TEMPORARY
} }
&.tgico-savedmessages:before { /* &.tgico-savedmessages:before {
font-size: calc(25px / var(--multiplier)); font-size: calc(25px / var(--multiplier));
} } */
&.tgico-avatar_deletedaccount:before { &.tgico-deletedaccount:before {
font-size: calc(54px / var(--multiplier)); font-size: calc(54px / var(--multiplier));
} }

4
src/scss/partials/_button.scss
Unescape View File

@ -243,9 +243,9 @@
font-size: .875rem; font-size: .875rem;
cursor: default; cursor: default;
&-text { /* &-text {
margin-top: -.125rem; margin-top: -.125rem;
} } */
} }
} }

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

@ -23,25 +23,20 @@ $chat-helper-size: 39px;
max-width: 100%; max-width: 100%;
padding-top: .25rem; padding-top: .25rem;
flex-direction: column; flex-direction: column;
flex: 0 0 auto; /* Forces side columns to stay same width */ flex: 0 0 auto;
position: relative; position: relative;
//overflow: hidden; transition: transform var(--transition-standard-out);
transition: transform var(--layer-transition);
transform: translateY(var(--translateY)); transform: translateY(var(--translateY));
body.animation-level-0 & { body.animation-level-0 & {
transition: none; transition: none;
} }
//display: none !important;
/* // * for no ESG top /* // * for no ESG top
flex: 1 1 auto; flex: 1 1 auto;
height: calc(100% - 56px); */ height: calc(100% - 56px); */
@include respond-to(esg-top) { @include respond-to(esg-top) {
/* flex: 0 0 auto;
height: auto; */
max-width: var(--messages-container-width) !important; max-width: var(--messages-container-width) !important;
} }
@ -55,15 +50,16 @@ $chat-helper-size: 39px;
@include respond-to(medium-screens) { @include respond-to(medium-screens) {
width: calc(100% - var(--right-column-width)) !important; width: calc(100% - var(--right-column-width)) !important;
//transition: transform var(--layer-transition);
body.is-right-column-shown & { body.is-right-column-shown & {
transition: transform var(--transition-standard-in);
transform: translate3d(calc(var(--right-column-width) / -2), var(--translateY), 0) !important; transform: translate3d(calc(var(--right-column-width) / -2), var(--translateY), 0) !important;
} }
} }
&.is-hidden { &.is-hidden {
--translateY: 100%; --translateY: 100%;
transition: transform var(--transition-standard-in);
transform: translate3d(0, var(--translateY), 0) !important; transform: translate3d(0, var(--translateY), 0) !important;
position: absolute !important; position: absolute !important;
bottom: 0; bottom: 0;
@ -227,20 +223,6 @@ $chat-helper-size: 39px;
color: var(--secondary-text-color); color: var(--secondary-text-color);
z-index: 3; z-index: 3;
> .tgico {
position: absolute;
height: 24px;
body:not(.animation-level-0) & {
animation: hide-icon .4s forwards ease-in-out;
}
@include animation-level(0) {
visibility: hidden;
animation: none !important;
}
}
.tgico-send { .tgico-send {
color: var(--primary-color) !important; color: var(--primary-color) !important;
} }
@ -267,7 +249,7 @@ $chat-helper-size: 39px;
} }
&.send .tgico-send, &.send .tgico-send,
&.record .tgico-microphone2, &.record .tgico-microphone,
&.edit .tgico-check, &.edit .tgico-check,
&.schedule .tgico-schedule { &.schedule .tgico-schedule {
animation: grow-icon .4s forwards ease-in-out !important; animation: grow-icon .4s forwards ease-in-out !important;
@ -600,10 +582,11 @@ $chat-helper-size: 39px;
background-color: inherit; background-color: inherit;
@include animation-level(2) { @include animation-level(2) {
transition: opacity var(--layer-transition); transition: opacity var(--transition-standard-out);
opacity: 0; opacity: 0;
&.is-visible:not(.backwards) { &.is-visible:not(.backwards) {
transition: opacity var(--transition-standard-in);
opacity: 1; opacity: 1;
} }
} }
@ -614,11 +597,12 @@ $chat-helper-size: 39px;
margin: -16.5rem 0 -20rem 0; margin: -16.5rem 0 -20rem 0;
transform: scale(1); transform: scale(1);
transform-origin: left center; transform-origin: left center;
transition: transform var(--layer-transition), opacity var(--layer-transition); transition: transform var(--transition-standard-out), opacity var(--transition-standard-out) !important;
} }
body.animation-level-2.is-right-column-shown & { body.animation-level-2.is-right-column-shown & {
transform: scale(.666666667); transform: scale(.666666667);
transition: transform var(--transition-standard-in), opacity var(--transition-standard-in) !important;
} }
} }
} }
@ -955,7 +939,7 @@ $chat-helper-size: 39px;
position: relative; position: relative;
transform: translateY(var(--translateY)); transform: translateY(var(--translateY));
transition: transform var(--layer-transition); transition: transform var(--transition-standard-out);
body.animation-level-0 & { body.animation-level-0 & {
transition: none; transition: none;
@ -981,6 +965,7 @@ $chat-helper-size: 39px;
// } // }
.chat.type-chat &.is-chat-input-hidden.is-selecting:not(.backwards) { .chat.type-chat &.is-chat-input-hidden.is-selecting:not(.backwards) {
transition: transform var(--transition-standard-in);
--translateY: -78px; --translateY: -78px;
@include respond-to(handhelds) { @include respond-to(handhelds) {
@ -988,6 +973,7 @@ $chat-helper-size: 39px;
} }
.bubbles-inner { .bubbles-inner {
transition: transform var(--transition-standard-in);
transform: translateY(calc(var(--translateY) * -1)); transform: translateY(calc(var(--translateY) * -1));
//margin-top: $chat-helper-size; //margin-top: $chat-helper-size;
//transition: none; //transition: none;
@ -1005,14 +991,13 @@ $chat-helper-size: 39px;
> .scrollable { > .scrollable {
height: auto; height: auto;
display: block; display: block;
/* margin-bottom: 0;
transition: margin-bottom var(--layer-transition) */
} }
//} //}
// ! WARNING, НЕЛЬЗЯ СТАВИТЬ ТРАНСФОРМ КРОМЕ TRANSLATEZ(0) НА БЛОК С OVERFLOW, ОН БУДЕТ ПРЫГАТЬ ВВЕРХ ПРИ ВКЛЮЧЕННОМ ПРАВИЛЕ И ЭТО НЕ ИСПРАВИТЬ JS'ОМ! // ! WARNING, НЕЛЬЗЯ СТАВИТЬ ТРАНСФОРМ КРОМЕ TRANSLATEZ(0) НА БЛОК С OVERFLOW, ОН БУДЕТ ПРЫГАТЬ ВВЕРХ ПРИ ВКЛЮЧЕННОМ ПРАВИЛЕ И ЭТО НЕ ИСПРАВИТЬ JS'ОМ!
@include respond-to(medium-screens) { @include respond-to(medium-screens) {
body.is-right-column-shown & { body.is-right-column-shown & {
transition: transform var(--transition-standard-in);
transform: translate3d(calc(var(--right-column-width) / -2), var(--translateY), 0); transform: translate3d(calc(var(--right-column-width) / -2), var(--translateY), 0);
} }
} }
@ -1082,7 +1067,7 @@ $chat-helper-size: 39px;
//padding-top: 10000px; //padding-top: 10000px;
transition: transform var(--layer-transition); transition: transform var(--transition-standard-out);
transform: translateY(0); transform: translateY(0);
/* transition: margin-top var(--layer-transition); /* transition: margin-top var(--layer-transition);
transition-delay: .2s; */ transition-delay: .2s; */
@ -1144,8 +1129,8 @@ $chat-helper-size: 39px;
opacity: 0.99999 !important; // 0.99999 сделано для сафари, т.к. без этого будет прыжок при скролле в самом низу или верху opacity: 0.99999 !important; // 0.99999 сделано для сафари, т.к. без этого будет прыжок при скролле в самом низу или верху
html.is-safari & { html.is-safari & {
transition: transform var(--transition-standard-in);
transform: translateY(calc(var(--translateY) * -1)); transform: translateY(calc(var(--translateY) * -1));
//transition: transform var(--layer-transition);
} }
} }
} }

37
src/scss/partials/_chatBubble.scss
Unescape View File

@ -672,15 +672,18 @@ $bubble-margin: .25rem;
} }
&.animating { &.animating {
transition: border-radius var(--layer-transition); transition: border-radius var(--transition-standard-out);
.album-item-media { .album-item-media {
transition: transform var(--layer-transition), border-radius var(--layer-transition); transition: transform var(--transition-standard-out), border-radius var(--transition-standard-out);
} }
} }
&:not(.backwards) { &:not(.backwards) {
transition: border-radius var(--transition-standard-in);
.album-item-media { .album-item-media {
transition: transform var(--transition-standard-in), border-radius var(--transition-standard-in);
transform: scale(.883333); transform: scale(.883333);
} }
@ -1566,11 +1569,15 @@ $bubble-margin: .25rem;
opacity: 1; opacity: 1;
@include animation-level(2) { @include animation-level(2) {
transition: transform var(--layer-transition), opacity var(--layer-transition); transition: transform var(--transition-standard-out), opacity var(--transition-standard-out);
}
.bubbles-inner.zoom-fading & {
transition: transform var(--transition-standard-in), opacity var(--transition-standard-in);
//transition: transform 10s ease-in-out, opacity 10s ease-in-out;
} }
&.zoom-fade /* .bubble-content */ { &.zoom-fade /* .bubble-content */ {
//transform: scale(.8) translateZ(0);
transform: scale3d(.8, .8, 1) translateX(0); transform: scale3d(.8, .8, 1) translateX(0);
//transform: scale(.8) translateX(0); //transform: scale(.8) translateX(0);
opacity: 0; opacity: 0;
@ -1594,7 +1601,7 @@ $bubble-margin: .25rem;
.bubbles.is-selecting & { .bubbles.is-selecting & {
transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);
transform-origin: bottom; transform-origin: bottom;
transition: transform var(--layer-transition); transition: transform var(--transition-standard-out);
body.animation-level-0 & { body.animation-level-0 & {
transition: none; transition: none;
@ -1603,6 +1610,7 @@ $bubble-margin: .25rem;
.bubbles.is-selecting:not(.backwards) & { .bubbles.is-selecting:not(.backwards) & {
transform: scale3d(.76, .76, 1); transform: scale3d(.76, .76, 1);
transition: transform var(--transition-standard-in);
} }
// @include respond-to(handhelds) { // @include respond-to(handhelds) {
@ -1789,22 +1797,23 @@ $bubble-margin: .25rem;
} }
&-wrapper { &-wrapper {
@include respond-to(not-handhelds) { @include respond-to(medium-screens) {
transform: translateX(calc((var(--chat-input-size) + #{$btn-send-margin}) * -1)); transform: scale(1) translateX(calc((var(--chat-input-size) + #{$btn-send-margin}) * -1));
&.zoom-fade {
transform: scale3d(.8, .8, 1) translateX(calc((var(--chat-input-size) + #{$btn-send-margin}) * -1));
}
@include respond-to(no-floating-left-sidebar) { //@include respond-to(no-floating-left-sidebar) {
body.is-right-column-shown & { body.is-right-column-shown & {
transform: translateX(0); transition: transform var(--transition-standard-in), opacity var(--transition-standard-in);
transform: scale(1) translateX(0);
&.zoom-fade { &.zoom-fade {
transform: scale3d(.8, .8, 1) translateX(0); transform: scale3d(.8, .8, 1) translateX(0);
} }
} }
} //}
&.zoom-fade {
transform: scale3d(.8, .8, 1) translateX(calc((var(--chat-input-size) + #{$btn-send-margin}) * -1));
}
} }
} }
} }

3
src/scss/partials/_chatTopbar.scss
Unescape View File

@ -157,10 +157,11 @@
padding-right: inherit; */ padding-right: inherit; */
@include respond-to(medium-screens) { @include respond-to(medium-screens) {
transition: transform var(--layer-transition); transition: transform var(--transition-standard-out);
body.is-right-column-shown & { body.is-right-column-shown & {
transform: translate3d(calc(var(--right-column-width) * -1), 0, 0); transform: translate3d(calc(var(--right-column-width) * -1), 0, 0);
transition: transform var(--transition-standard-in);
} }
body.animation-level-0 & { body.animation-level-0 & {

6
src/scss/partials/_checkbox.scss
Unescape View File

@ -95,7 +95,7 @@
.checkbox-caption { .checkbox-caption {
position: relative; position: relative;
padding-left: 3.3125rem; padding-left: 3.375rem;
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
min-height: 24px; min-height: 24px;
@ -329,14 +329,14 @@
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
transition: background-color .2s; transition: background-color .1s;
margin: 0 var(--offset); margin: 0 var(--offset);
&:before { &:before {
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
border: 2px solid var(--secondary-color); border: 2px solid var(--secondary-color);
transition: border-color .2s, transform .2s; transition: border-color .1s, transform .1s;
background-color: var(--surface-color); background-color: var(--surface-color);
content: " "; content: " ";
transform: translateX(calc(var(--offset) * -1)); transform: translateX(calc(var(--offset) * -1));

46
src/scss/partials/_fonts.scss
Unescape View File

@ -9,9 +9,9 @@
@font-face { @font-face {
font-family: "#{$tgico-font-family}"; font-family: "#{$tgico-font-family}";
src: src:
url('#{$tgico-font-path}/#{$tgico-font-family}.ttf?xc1ll') format('truetype'), url('#{$tgico-font-path}/#{$tgico-font-family}.ttf?cbcfst') format('truetype'),
url('#{$tgico-font-path}/#{$tgico-font-family}.woff?xc1ll') format('woff'), url('#{$tgico-font-path}/#{$tgico-font-family}.woff?cbcfst') format('woff'),
url('#{$tgico-font-path}/#{$tgico-font-family}.svg?xc1ll#tgico') format('svg'); url('#{$tgico-font-path}/#{$tgico-font-family}.svg?cbcfst#tgico') format('svg');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
font-display: block; font-display: block;
@ -87,11 +87,6 @@
content: $tgico-archive; content: $tgico-archive;
} }
} }
.tgico-arrow_back {
&:before {
content: $tgico-arrow_back;
}
}
.tgico-arrow_down { .tgico-arrow_down {
&:before { &:before {
content: $tgico-arrow_down; content: $tgico-arrow_down;
@ -257,6 +252,11 @@
content: $tgico-delete_filled; content: $tgico-delete_filled;
} }
} }
.tgico-deletedaccount {
&:before {
content: $tgico-deletedaccount;
}
}
.tgico-deleteleft { .tgico-deleteleft {
&:before { &:before {
content: $tgico-deleteleft; content: $tgico-deleteleft;
@ -482,11 +482,6 @@
content: $tgico-microphone; content: $tgico-microphone;
} }
} }
.tgico-microphone2 {
&:before {
content: $tgico-microphone2;
}
}
.tgico-minus { .tgico-minus {
&:before { &:before {
content: $tgico-minus; content: $tgico-minus;
@ -547,16 +542,6 @@
content: $tgico-nosound; content: $tgico-nosound;
} }
} }
.tgico-notificationsoff {
&:before {
content: $tgico-notificationsoff;
}
}
.tgico-notificationson {
&:before {
content: $tgico-notificationson;
}
}
.tgico-passwordoff { .tgico-passwordoff {
&:before { &:before {
content: $tgico-passwordoff; content: $tgico-passwordoff;
@ -577,11 +562,6 @@
content: $tgico-phone; content: $tgico-phone;
} }
} }
.tgico-photo {
&:before {
content: $tgico-photo;
}
}
.tgico-pin { .tgico-pin {
&:before { &:before {
content: $tgico-pin; content: $tgico-pin;
@ -652,11 +632,6 @@
content: $tgico-reply; content: $tgico-reply;
} }
} }
.tgico-revote {
&:before {
content: $tgico-revote;
}
}
.tgico-saved { .tgico-saved {
&:before { &:before {
content: $tgico-saved; content: $tgico-saved;
@ -797,11 +772,6 @@
content: $tgico-username; content: $tgico-username;
} }
} }
.tgico-write {
&:before {
content: $tgico-write;
}
}
.tgico-zoomin { .tgico-zoomin {
&:before { &:before {
content: $tgico-zoomin; content: $tgico-zoomin;

194
src/scss/partials/_ico.scss
Unescape View File

@ -29,40 +29,40 @@ $tgico-admin: "\e906";
$tgico-animals: "\e907"; $tgico-animals: "\e907";
$tgico-animations: "\e908"; $tgico-animations: "\e908";
$tgico-archive: "\e909"; $tgico-archive: "\e909";
$tgico-arrow_back: "\e90a"; $tgico-arrow_down: "\e90a";
$tgico-arrow_down: "\e90b"; $tgico-arrow_next: "\e90b";
$tgico-arrow_next: "\e90c"; $tgico-attach: "\e90c";
$tgico-attach: "\e90d"; $tgico-bold: "\e90d";
$tgico-bold: "\e90e"; $tgico-botcom: "\e90e";
$tgico-botcom: "\e90f"; $tgico-bots: "\e90f";
$tgico-bots: "\e910"; $tgico-bug: "\e910";
$tgico-bug: "\e911"; $tgico-calendar: "\e911";
$tgico-calendar: "\e912"; $tgico-calendarfilter: "\e912";
$tgico-calendarfilter: "\e913"; $tgico-camera: "\e913";
$tgico-camera: "\e914"; $tgico-cameraadd: "\e914";
$tgico-cameraadd: "\e915"; $tgico-car: "\e915";
$tgico-car: "\e916"; $tgico-channel: "\e916";
$tgico-channel: "\e917"; $tgico-channelviews: "\e917";
$tgico-channelviews: "\e918"; $tgico-chatspinned: "\e918";
$tgico-chatspinned: "\e919"; $tgico-chatsplaceholder: "\e919";
$tgico-chatsplaceholder: "\e91a"; $tgico-check1: "\e91a";
$tgico-check1: "\e91b"; $tgico-checkbox: "\e91b";
$tgico-checkbox: "\e91c"; $tgico-checkboxblock: "\e91c";
$tgico-checkboxblock: "\e91d"; $tgico-checkboxempty: "\e91d";
$tgico-checkboxempty: "\e91e"; $tgico-checkboxon: "\e91e";
$tgico-checkboxon: "\e91f"; $tgico-checkretract: "\e91f";
$tgico-checkretract: "\e920"; $tgico-checkround: "\e920";
$tgico-checkround: "\e921"; $tgico-close: "\e921";
$tgico-close: "\e922"; $tgico-clouddownload: "\e922";
$tgico-clouddownload: "\e923"; $tgico-colorize: "\e923";
$tgico-colorize: "\e924"; $tgico-comments: "\e924";
$tgico-comments: "\e925"; $tgico-commentssticker: "\e925";
$tgico-commentssticker: "\e926"; $tgico-copy: "\e926";
$tgico-copy: "\e927"; $tgico-darkmode: "\e927";
$tgico-darkmode: "\e928"; $tgico-data: "\e928";
$tgico-data: "\e929"; $tgico-delete: "\e929";
$tgico-delete: "\e92a"; $tgico-delete_filled: "\e92a";
$tgico-delete_filled: "\e92b"; $tgico-deletedaccount: "\e92b";
$tgico-deleteleft: "\e92c"; $tgico-deleteleft: "\e92c";
$tgico-deleteuser: "\e92d"; $tgico-deleteuser: "\e92d";
$tgico-devices: "\e92e"; $tgico-devices: "\e92e";
@ -108,69 +108,63 @@ $tgico-menu: "\e955";
$tgico-message: "\e956"; $tgico-message: "\e956";
$tgico-messageunread: "\e957"; $tgico-messageunread: "\e957";
$tgico-microphone: "\e958"; $tgico-microphone: "\e958";
$tgico-microphone2: "\e959"; $tgico-minus: "\e959";
$tgico-minus: "\e95a"; $tgico-monospace: "\e95a";
$tgico-monospace: "\e95b"; $tgico-more: "\e95b";
$tgico-more: "\e95c"; $tgico-mute: "\e95c";
$tgico-mute: "\e95d"; $tgico-muted: "\e95d";
$tgico-muted: "\e95e"; $tgico-newchannel: "\e95e";
$tgico-newchannel: "\e95f"; $tgico-newchat_filled: "\e95f";
$tgico-newchat_filled: "\e960"; $tgico-newgroup: "\e960";
$tgico-newgroup: "\e961"; $tgico-newprivate: "\e961";
$tgico-newprivate: "\e962"; $tgico-next: "\e962";
$tgico-next: "\e963"; $tgico-noncontacts: "\e963";
$tgico-noncontacts: "\e964"; $tgico-nosound: "\e964";
$tgico-nosound: "\e965"; $tgico-passwordoff: "\e965";
$tgico-notificationsoff: "\e966"; $tgico-pause: "\e966";
$tgico-notificationson: "\e967"; $tgico-permissions: "\e967";
$tgico-passwordoff: "\e968"; $tgico-phone: "\e968";
$tgico-pause: "\e969"; $tgico-pin: "\e969";
$tgico-permissions: "\e96a"; $tgico-pinlist: "\e96a";
$tgico-phone: "\e96b"; $tgico-pinned_filled: "\e96b";
$tgico-photo: "\e96c"; $tgico-pinnedchat: "\e96c";
$tgico-pin: "\e96d"; $tgico-play: "\e96d";
$tgico-pinlist: "\e96e"; $tgico-plus: "\e96e";
$tgico-pinned_filled: "\e96f"; $tgico-poll: "\e96f";
$tgico-pinnedchat: "\e970"; $tgico-previous: "\e970";
$tgico-play: "\e971"; $tgico-radiooff: "\e971";
$tgico-plus: "\e972"; $tgico-radioon: "\e972";
$tgico-poll: "\e973"; $tgico-readchats: "\e973";
$tgico-previous: "\e974"; $tgico-recent: "\e974";
$tgico-radiooff: "\e975"; $tgico-replace: "\e975";
$tgico-radioon: "\e976"; $tgico-reply: "\e976";
$tgico-readchats: "\e977"; $tgico-saved: "\e977";
$tgico-recent: "\e978"; $tgico-savedmessages: "\e978";
$tgico-replace: "\e979"; $tgico-schedule: "\e979";
$tgico-reply: "\e97a"; $tgico-scheduled: "\e97a";
$tgico-revote: "\e97b"; $tgico-search: "\e97b";
$tgico-saved: "\e97c"; $tgico-select: "\e97c";
$tgico-savedmessages: "\e97d"; $tgico-send: "\e97d";
$tgico-schedule: "\e97e"; $tgico-send2: "\e97e";
$tgico-scheduled: "\e97f"; $tgico-sending: "\e97f";
$tgico-search: "\e980"; $tgico-sendingerror: "\e980";
$tgico-select: "\e981"; $tgico-settings: "\e981";
$tgico-send: "\e982"; $tgico-smallscreen: "\e982";
$tgico-send2: "\e983"; $tgico-smile: "\e983";
$tgico-sending: "\e984"; $tgico-sport: "\e984";
$tgico-sendingerror: "\e985"; $tgico-stickers: "\e985";
$tgico-settings: "\e986"; $tgico-stop: "\e986";
$tgico-smallscreen: "\e987"; $tgico-strikethrough: "\e987";
$tgico-smile: "\e988"; $tgico-textedit: "\e988";
$tgico-sport: "\e989"; $tgico-tip: "\e989";
$tgico-stickers: "\e98a"; $tgico-unarchive: "\e98a";
$tgico-stop: "\e98b"; $tgico-underline: "\e98b";
$tgico-strikethrough: "\e98c"; $tgico-unlock: "\e98c";
$tgico-textedit: "\e98d"; $tgico-unmute: "\e98d";
$tgico-tip: "\e98e"; $tgico-unpin: "\e98e";
$tgico-unarchive: "\e98f"; $tgico-unread: "\e98f";
$tgico-underline: "\e990"; $tgico-up: "\e990";
$tgico-unlock: "\e991"; $tgico-user: "\e991";
$tgico-unmute: "\e992"; $tgico-username: "\e992";
$tgico-unpin: "\e993"; $tgico-zoomin: "\e993";
$tgico-unread: "\e994"; $tgico-zoomout: "\e994";
$tgico-up: "\e995";
$tgico-user: "\e996";
$tgico-username: "\e997";
$tgico-write: "\e998";
$tgico-zoomin: "\e999";
$tgico-zoomout: "\e99a";

103
src/scss/partials/_leftSidebar.scss
Unescape View File

@ -350,8 +350,10 @@
} }
.btn-corner { .btn-corner {
&.menu-open:before { &:not(.menu-open) .tgico-newchat_filled,
content: $tgico-close; &.menu-open .tgico-close {
animation: grow-icon .4s forwards ease-in-out !important;
visibility: visible !important;
} }
@include respond-to(handhelds) { @include respond-to(handhelds) {
@ -486,6 +488,12 @@
} }
} }
.language-container {
.sidebar-left-section {
padding-bottom: .5rem;
}
}
.new-group-container { .new-group-container {
.search-group { .search-group {
margin-top: .5rem; margin-top: .5rem;
@ -493,8 +501,16 @@
} }
.edit-folder-container { .edit-folder-container {
.folder-category-button:nth-child(n+2) { .chatlist {
pointer-events: none; padding: 0;
}
.folder-categories {
.folder-category-button {
&:nth-child(n+2) {
pointer-events: none;
}
}
} }
} }
@ -574,22 +590,16 @@
} }
} }
.edit-folder-container {
.sidebar-left-h2 {
padding: 7px 24px 15px 24px;
@include respond-to(handhelds) {
padding: 7px 16px 15px 16px;
}
}
}
.chat-folders-container { .chat-folders-container {
.sidebar-left-section { .sidebar-left-section {
&:not(:last-child) { &:not(:last-child) {
padding-bottom: 0; padding-bottom: 0;
} }
&:last-child {
padding-bottom: .5rem;
}
/* &-name { /* &-name {
padding-top: .5rem; padding-top: .5rem;
padding-bottom: .5rem; padding-bottom: .5rem;
@ -643,28 +653,27 @@
} }
} }
.sidebar-left-h2 { .input-wrapper {
padding: 21px 24px 8px; margin-bottom: .125rem !important;
@include respond-to(handhelds) {
width: 100%;
padding: 21px 16px 8px;
}
} }
.input-wrapper { .sidebar-left-section {
margin-bottom: 10px !important; padding-bottom: 0rem;
&:last-child {
padding-bottom: .5rem;
}
} }
} }
.folder-list { .folder-list {
li { li {
padding: 9px 11px; padding: 9px 12px;
height: 50px; height: 50px;
} }
.user-caption { .user-caption {
padding: 3px 28px 6px; padding: 3px 28px 6px 27px;
} }
p span { p span {
@ -673,32 +682,14 @@
} }
.folder-categories { .folder-categories {
width: 100%;
.checkbox-field { .checkbox-field {
position: absolute; position: absolute;
right: 1.625rem !important; right: 1.125rem !important;
@include respond-to(handhelds) {
right: 1rem !important;
}
} }
} }
.folder-category-button { .folder-category-button {
display: flex;
padding: 0 1.5rem;
overflow: hidden;
height: 50px; height: 50px;
border-radius: 0;
@include respond-to(handhelds) {
padding: 0 1.125rem;
}
&:before {
color: #797d82;
}
} }
.popup-forward, .included-chatlist-container { .popup-forward, .included-chatlist-container {
@ -723,16 +714,24 @@
} }
.included-chatlist-container { .included-chatlist-container {
.sidebar-left-h2 { .sidebar-left-section {
padding: 6px 24px 8px 24px; padding-bottom: 0;
@include respond-to(handhelds) { &:first-child {
padding: 6px 16px 8px 16px; padding-top: 0;
}
&:last-child {
padding-bottom: .5rem;
}
.chatlist {
padding: 0;
} }
} }
.selector { .selector {
ul { .chatlist {
.checkbox { .checkbox {
margin-top: 10px; margin-top: 10px;
} }
@ -742,10 +741,6 @@
} }
} }
} }
.folder-category-button {
cursor: pointer;
}
} }
.search-group-recent { .search-group-recent {
@ -875,7 +870,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
height: 3.5rem; height: 3.5rem;
padding: 0 1.1875rem; padding: 0 1.125rem;
} }
&-disabled { &-disabled {

5
src/scss/partials/_rightSidebar.scss
Unescape View File

@ -20,7 +20,7 @@
@include respond-to(not-handhelds) { @include respond-to(not-handhelds) {
width: var(--right-column-width); width: var(--right-column-width);
transition: transform var(--layer-transition); transition: transform var(--transition-standard-out);
position: absolute; position: absolute;
right: 0; right: 0;
z-index: 3; z-index: 3;
@ -35,6 +35,7 @@
} */ } */
body.is-right-column-shown:not(.is-left-column-shown) & { body.is-right-column-shown:not(.is-left-column-shown) & {
transition: transform var(--transition-standard-in);
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
} }
@ -66,7 +67,7 @@
flex: 0 0 auto; flex: 0 0 auto;
.sidebar-close-button.tgico:before { .sidebar-close-button.tgico:before {
content: $tgico-arrow_back; content: $tgico-left;
@include respond-to(not-handhelds) { @include respond-to(not-handhelds) {
content: $tgico-close; content: $tgico-close;

2
src/scss/partials/_selector.scss
Unescape View File

@ -160,7 +160,7 @@
} }
} }
hr { > hr {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }

8
src/scss/style.scss
Unescape View File

@ -41,8 +41,14 @@ $chat-padding-handhelds: .5rem;
--z-below: -1; --z-below: -1;
--hover-alpha: #{$hover-alpha}; --hover-alpha: #{$hover-alpha};
--transition-standard-easing: cubic-bezier(.4, .0, .2, 1);
--transition-standard-in-time: .25s;
--transition-standard-out-time: .2s;
--transition-standard-in: var(--transition-standard-in-time) var(--transition-standard-easing);
--transition-standard-out: var(--transition-standard-out-time) var(--transition-standard-easing);
--pm-transition: .2s ease-in-out; --pm-transition: .2s ease-in-out;
--layer-transition: .2s ease-in-out; --layer-transition: .2s cubic-bezier(.4, .0, .2, 1);
--slide-header-transition: .4s ease-in-out; --slide-header-transition: .4s ease-in-out;
--tabs-transition: .25s ease-in-out; --tabs-transition: .25s ease-in-out;
--btn-menu-transition: .2s cubic-bezier(.4, 0, .2, 1); --btn-menu-transition: .2s cubic-bezier(.4, 0, .2, 1);

Write Preview
Loading…
Cancel
Save