From 4ab2c8036d0a19ada983700141a6c40409e708f4 Mon Sep 17 00:00:00 2001 From: Eduard Kuzmenko Date: Thu, 15 Apr 2021 03:45:29 +0400 Subject: [PATCH] Replaced rest of icons Layout fixes in left sidebar Added animation to chatlist menu button Changed chat layer transition --- src/components/chat/bubbles.ts | 3 + src/components/chat/contextMenu.ts | 2 +- src/components/chat/input.ts | 6 +- src/components/chat/markupTooltip.ts | 2 +- src/components/chat/search.ts | 2 +- src/components/chat/topbar.ts | 2 +- src/components/sidebarLeft/index.ts | 6 +- src/components/sidebarLeft/tabs/editFolder.ts | 50 +++-- .../sidebarLeft/tabs/generalSettings.ts | 2 +- .../sidebarLeft/tabs/includedChats.ts | 33 +-- src/components/sliderTab.ts | 2 +- src/index.hbs | 2 +- src/lib/appManagers/appProfileManager.ts | 6 +- src/scss/partials/_animatedIcon.scss | 17 ++ src/scss/partials/_avatar.scss | 6 +- src/scss/partials/_button.scss | 4 +- src/scss/partials/_chat.scss | 47 ++--- src/scss/partials/_chatBubble.scss | 37 ++-- src/scss/partials/_chatTopbar.scss | 3 +- src/scss/partials/_checkbox.scss | 6 +- src/scss/partials/_fonts.scss | 46 +---- src/scss/partials/_ico.scss | 194 +++++++++--------- src/scss/partials/_leftSidebar.scss | 103 +++++----- src/scss/partials/_rightSidebar.scss | 5 +- src/scss/partials/_selector.scss | 2 +- src/scss/style.scss | 8 +- 26 files changed, 289 insertions(+), 307 deletions(-) diff --git a/src/components/chat/bubbles.ts b/src/components/chat/bubbles.ts index 85d60190..f7fff48e 100644 --- a/src/components/chat/bubbles.ts +++ b/src/components/chat/bubbles.ts @@ -2912,6 +2912,7 @@ export default class ChatBubbles { const setBubbles: HTMLElement[] = []; + this.chatInner.classList.add('zoom-fading'); const delay = isAdditionRender ? 10 : 40; const offsetIndex = isAdditionRender ? 0 : 1; const animateAsLadder = (mids: number[], offsetIndex = 0) => { @@ -2979,6 +2980,8 @@ export default class ChatBubbles { setBubbles.forEach(contentWrapper => { contentWrapper.style.transitionDelay = ''; }); + + this.chatInner.classList.remove('zoom-fading'); }); // ! в хроме, каким-то образом из-за zoom-fade класса начинает прыгать скролл при подгрузке сообщений вверх, diff --git a/src/components/chat/contextMenu.ts b/src/components/chat/contextMenu.ts index 550c8b27..9bdc91d7 100644 --- a/src/components/chat/contextMenu.ts +++ b/src/components/chat/contextMenu.ts @@ -239,7 +239,7 @@ export default class ChatContextMenu { onClick: this.onUnpinClick, verify: () => this.message.pFlags.pinned && this.appPeersManager.canPinMessage(this.peerId), }, { - icon: 'revote', + icon: 'checkretract', text: 'Chat.Poll.Unvote', onClick: this.onRetractVote, verify: () => { diff --git a/src/components/chat/input.ts b/src/components/chat/input.ts index 75942dba..daede8c8 100644 --- a/src/components/chat/input.ts +++ b/src/components/chat/input.ts @@ -288,7 +288,7 @@ export default class ChatInput { } this.attachMenuButtons = [{ - icon: 'photo', + icon: 'image', text: 'Chat.Input.Attach.PhotoOrVideo', onClick: () => { this.fileInput.value = ''; @@ -344,12 +344,12 @@ export default class ChatInput { this.recordRippleEl = document.createElement('div'); 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.btnSendContainer.append(this.recordRippleEl, this.btnSend); diff --git a/src/components/chat/markupTooltip.ts b/src/components/chat/markupTooltip.ts index 191484c7..0f541866 100644 --- a/src/components/chat/markupTooltip.ts +++ b/src/components/chat/markupTooltip.ts @@ -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'); _i18n(this.linkInput, 'MarkupTooltip.LinkPlaceholder', undefined, 'placeholder'); this.linkInput.classList.add('input-clear'); diff --git a/src/components/chat/search.ts b/src/components/chat/search.ts index f3a53e2a..b2155d54 100644 --- a/src/components/chat/search.ts +++ b/src/components/chat/search.ts @@ -39,7 +39,7 @@ export default class ChatSearch { this.element.classList.add('sidebar-header', 'chat-search', 'chatlist-container'); 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); this.backBtn.addEventListener('click', () => { diff --git a/src/components/chat/topbar.ts b/src/components/chat/topbar.ts index 6d4fdb37..23704b99 100644 --- a/src/components/chat/topbar.ts +++ b/src/components/chat/topbar.ts @@ -68,7 +68,7 @@ export default class ChatTopbar { this.container = document.createElement('div'); 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 this.chatInfo = document.createElement('div'); diff --git a/src/components/sidebarLeft/index.ts b/src/components/sidebarLeft/index.ts index 28bf544a..b6d0bd66 100644 --- a/src/components/sidebarLeft/index.ts +++ b/src/components/sidebarLeft/index.ts @@ -198,7 +198,11 @@ export class AppSidebarLeft extends SidebarSlider { text: 'NewPrivateChat', 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', ` + + + `); this.newBtnMenu.id = 'new-menu'; sidebarHeader.nextElementSibling.append(this.newBtnMenu); diff --git a/src/components/sidebarLeft/tabs/editFolder.ts b/src/components/sidebarLeft/tabs/editFolder.ts index 8f85932e..95e25de6 100644 --- a/src/components/sidebarLeft/tabs/editFolder.ts +++ b/src/components/sidebarLeft/tabs/editFolder.ts @@ -20,6 +20,7 @@ import { ButtonMenuItemOptions } from "../../buttonMenu"; import Button from "../../button"; import AppIncludedChatsTab from "./includedChats"; import { i18n, i18n_, LangPackKey } from "../../../lib/langPack"; +import { SettingSection } from ".."; const MAX_FOLDER_NAME_LENGTH = 12; @@ -31,8 +32,8 @@ export default class AppEditFolderTab extends SliderSuperTab { private menuBtn: HTMLElement; private nameInputField: InputField; - private include_peers: HTMLElement; - private exclude_peers: HTMLElement; + private include_peers: SettingSection; + private exclude_peers: SettingSection; private flags: {[k in 'contacts' | 'non_contacts' | 'groups' | 'broadcasts' | 'bots' | 'exclude_muted' | 'exclude_archived' | 'exclude_read']: HTMLElement} = {} as any; private animation: RLottiePlayer; @@ -81,14 +82,14 @@ export default class AppEditFolderTab extends SliderSuperTab { inputWrapper.append(this.nameInputField.container); const generateList = (className: string, h2Text: LangPackKey, buttons: {icon: string, name?: string, withRipple?: true, text: LangPackKey}[], to: any) => { - const container = document.createElement('div'); - container.classList.add('folder-list', className); + const section = new SettingSection({ + name: h2Text, + noDelimiter: true + }); - const h2 = document.createElement('div'); - h2.classList.add('sidebar-left-h2'); - i18n_({element: h2, key: h2Text}); + section.container.classList.add('folder-list', className); - const categories = document.createElement('div'); + const categories = section.generateContentElement(); categories.classList.add('folder-categories'); buttons.forEach(o => { @@ -105,9 +106,7 @@ export default class AppEditFolderTab extends SliderSuperTab { categories.append(button); }); - container.append(h2, categories); - - return container; + return section; }; this.include_peers = generateList('folder-list-included', 'FilterInclude', [{ @@ -154,16 +153,16 @@ export default class AppEditFolderTab extends SliderSuperTab { name: 'exclude_read' }], 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 excludedFlagsContainer = this.exclude_peers.querySelector('.folder-categories'); + const includedFlagsContainer = this.include_peers.container.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); }); - excludedFlagsContainer.firstElementChild.addEventListener('click', () => { + excludedFlagsContainer.querySelector('.btn').addEventListener('click', () => { 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 => { - const container = this[key]; + const section = this[key]; const ul = appDialogsManager.createChatList(); 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; if(peers.length) { - showMore = document.createElement('div'); - showMore.classList.add('show-more', 'rp-overflow'); + const content = section.generateContentElement(); + 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.append(i18n('FilterShowMoreChats', [peers.length])); - ripple(showMore); - const down = document.createElement('div'); - down.classList.add('tgico-down'); - showMore.append(down, i18n('FilterShowMoreChats', [peers.length])); - - container.append(showMore); + content.append(showMore); } renderMore(4); @@ -321,7 +317,7 @@ export default class AppEditFolderTab extends SliderSuperTab { setFilter(filter: DialogFilter, firstTime: boolean) { // 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) { this.originalFilter = filter; diff --git a/src/components/sidebarLeft/tabs/generalSettings.ts b/src/components/sidebarLeft/tabs/generalSettings.ts index 14876711..8982c031 100644 --- a/src/components/sidebarLeft/tabs/generalSettings.ts +++ b/src/components/sidebarLeft/tabs/generalSettings.ts @@ -74,7 +74,7 @@ export default class AppGeneralSettingsTab extends SliderSuperTab { 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, () => { new AppBackgroundTab(this.slider).open(); diff --git a/src/components/sidebarLeft/tabs/includedChats.ts b/src/components/sidebarLeft/tabs/includedChats.ts index 6fcb82a9..fe28184d 100644 --- a/src/components/sidebarLeft/tabs/includedChats.ts +++ b/src/components/sidebarLeft/tabs/includedChats.ts @@ -17,6 +17,7 @@ import AppEditFolderTab from "./editFolder"; import { i18n, LangPackKey, _i18n, join } from "../../../lib/langPack"; import appMessagesManager from "../../../lib/appManagers/appMessagesManager"; import RichTextProcessor from "../../../lib/richtextprocessor"; +import { SettingSection } from ".."; export default class AppIncludedChatsTab extends SliderSuperTab { private editFolderTab: AppEditFolderTab; @@ -167,12 +168,13 @@ export default class AppIncludedChatsTab extends SliderSuperTab { const filter = this.filter; const fragment = document.createDocumentFragment(); - const dd = document.createElement('div'); - dd.classList.add('sidebar-left-h2'); - _i18n(dd, 'FilterChatTypes'); - - const categories = document.createElement('div'); - categories.classList.add('folder-categories'); + + const categoriesSection = new SettingSection({ + noDelimiter: true, + name: 'FilterChatTypes' + }); + + categoriesSection.container.classList.add('folder-categories'); let details: {[flag: string]: {ico: string, text: LangPackKey}}; if(this.type === 'excluded') { @@ -198,16 +200,13 @@ export default class AppIncludedChatsTab extends SliderSuperTab { button.append(this.checkbox()); f.append(button); } - categories.append(f); - - const hr = document.createElement('hr'); - hr.style.margin = '7px 0 9px'; + categoriesSection.content.append(f); - const d = document.createElement('div'); - d.classList.add('sidebar-left-h2'); - _i18n(d, 'FilterChats'); + const chatsSection = new SettingSection({ + name: '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; }; - 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); for(const flag in filter.pFlags) { // @ts-ignore 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(); } } } diff --git a/src/components/sliderTab.ts b/src/components/sliderTab.ts index b73659aa..efa93aa5 100644 --- a/src/components/sliderTab.ts +++ b/src/components/sliderTab.ts @@ -51,7 +51,7 @@ export default class SliderSuperTab implements SliderTab { this.header = document.createElement('div'); 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.classList.add('sidebar-header__title'); this.header.append(this.closeBtn, this.title); diff --git a/src/index.hbs b/src/index.hbs index 3d600568..7f17bf2a 100644 --- a/src/index.hbs +++ b/src/index.hbs @@ -1,5 +1,5 @@ - + diff --git a/src/lib/appManagers/appProfileManager.ts b/src/lib/appManagers/appProfileManager.ts index 5cf8d511..59c3e03b 100644 --- a/src/lib/appManagers/appProfileManager.ts +++ b/src/lib/appManagers/appProfileManager.ts @@ -557,7 +557,7 @@ export class AppProfileManager { div.innerHTML = ''; div.dataset.color = ''; div.classList.add('tgico-saved'); - div.classList.remove('tgico-avatar_deletedaccount'); + div.classList.remove('tgico-deletedaccount'); return; } @@ -566,7 +566,7 @@ export class AppProfileManager { if(user && user.pFlags && user.pFlags.deleted) { div.innerHTML = ''; div.dataset.color = appPeersManager.getPeerColorById(peerId); - div.classList.add('tgico-avatar_deletedaccount'); + div.classList.add('tgico-deletedaccount'); div.classList.remove('tgico-saved'); return; } @@ -579,7 +579,7 @@ export class AppProfileManager { } div.innerHTML = ''; - div.classList.remove('tgico-saved', 'tgico-avatar_deletedaccount'); + div.classList.remove('tgico-saved', 'tgico-deletedaccount'); div.dataset.color = color; let abbr: string; diff --git a/src/scss/partials/_animatedIcon.scss b/src/scss/partials/_animatedIcon.scss index c3d875fe..846a06aa 100644 --- a/src/scss/partials/_animatedIcon.scss +++ b/src/scss/partials/_animatedIcon.scss @@ -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; + } + } +} diff --git a/src/scss/partials/_avatar.scss b/src/scss/partials/_avatar.scss index c1540f5f..360166e7 100644 --- a/src/scss/partials/_avatar.scss +++ b/src/scss/partials/_avatar.scss @@ -69,11 +69,11 @@ avatar-element { font-size: calc(21px / var(--multiplier)) !important; // ! IMPORTANT IS TEMPORARY } - &.tgico-savedmessages:before { + /* &.tgico-savedmessages:before { font-size: calc(25px / var(--multiplier)); - } + } */ - &.tgico-avatar_deletedaccount:before { + &.tgico-deletedaccount:before { font-size: calc(54px / var(--multiplier)); } diff --git a/src/scss/partials/_button.scss b/src/scss/partials/_button.scss index d2650ea4..017b6ba2 100644 --- a/src/scss/partials/_button.scss +++ b/src/scss/partials/_button.scss @@ -243,9 +243,9 @@ font-size: .875rem; cursor: default; - &-text { + /* &-text { margin-top: -.125rem; - } + } */ } } diff --git a/src/scss/partials/_chat.scss b/src/scss/partials/_chat.scss index 06c42dc0..61a1ce3d 100644 --- a/src/scss/partials/_chat.scss +++ b/src/scss/partials/_chat.scss @@ -23,25 +23,20 @@ $chat-helper-size: 39px; max-width: 100%; padding-top: .25rem; flex-direction: column; - flex: 0 0 auto; /* Forces side columns to stay same width */ + flex: 0 0 auto; position: relative; - //overflow: hidden; - transition: transform var(--layer-transition); + transition: transform var(--transition-standard-out); transform: translateY(var(--translateY)); body.animation-level-0 & { transition: none; } - //display: none !important; - /* // * for no ESG top flex: 1 1 auto; height: calc(100% - 56px); */ @include respond-to(esg-top) { - /* flex: 0 0 auto; - height: auto; */ max-width: var(--messages-container-width) !important; } @@ -55,15 +50,16 @@ $chat-helper-size: 39px; @include respond-to(medium-screens) { width: calc(100% - var(--right-column-width)) !important; - //transition: transform var(--layer-transition); body.is-right-column-shown & { + transition: transform var(--transition-standard-in); transform: translate3d(calc(var(--right-column-width) / -2), var(--translateY), 0) !important; } } &.is-hidden { --translateY: 100%; + transition: transform var(--transition-standard-in); transform: translate3d(0, var(--translateY), 0) !important; position: absolute !important; bottom: 0; @@ -227,20 +223,6 @@ $chat-helper-size: 39px; color: var(--secondary-text-color); 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 { color: var(--primary-color) !important; } @@ -267,7 +249,7 @@ $chat-helper-size: 39px; } &.send .tgico-send, - &.record .tgico-microphone2, + &.record .tgico-microphone, &.edit .tgico-check, &.schedule .tgico-schedule { animation: grow-icon .4s forwards ease-in-out !important; @@ -600,10 +582,11 @@ $chat-helper-size: 39px; background-color: inherit; @include animation-level(2) { - transition: opacity var(--layer-transition); + transition: opacity var(--transition-standard-out); opacity: 0; - + &.is-visible:not(.backwards) { + transition: opacity var(--transition-standard-in); opacity: 1; } } @@ -614,11 +597,12 @@ $chat-helper-size: 39px; margin: -16.5rem 0 -20rem 0; transform: scale(1); 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 & { 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; transform: translateY(var(--translateY)); - transition: transform var(--layer-transition); + transition: transform var(--transition-standard-out); body.animation-level-0 & { transition: none; @@ -981,6 +965,7 @@ $chat-helper-size: 39px; // } .chat.type-chat &.is-chat-input-hidden.is-selecting:not(.backwards) { + transition: transform var(--transition-standard-in); --translateY: -78px; @include respond-to(handhelds) { @@ -988,6 +973,7 @@ $chat-helper-size: 39px; } .bubbles-inner { + transition: transform var(--transition-standard-in); transform: translateY(calc(var(--translateY) * -1)); //margin-top: $chat-helper-size; //transition: none; @@ -1005,14 +991,13 @@ $chat-helper-size: 39px; > .scrollable { height: auto; display: block; - /* margin-bottom: 0; - transition: margin-bottom var(--layer-transition) */ } //} // ! WARNING, НЕЛЬЗЯ СТАВИТЬ ТРАНСФОРМ КРОМЕ TRANSLATEZ(0) НА БЛОК С OVERFLOW, ОН БУДЕТ ПРЫГАТЬ ВВЕРХ ПРИ ВКЛЮЧЕННОМ ПРАВИЛЕ И ЭТО НЕ ИСПРАВИТЬ JS'ОМ! @include respond-to(medium-screens) { body.is-right-column-shown & { + transition: transform var(--transition-standard-in); transform: translate3d(calc(var(--right-column-width) / -2), var(--translateY), 0); } } @@ -1082,7 +1067,7 @@ $chat-helper-size: 39px; //padding-top: 10000px; - transition: transform var(--layer-transition); + transition: transform var(--transition-standard-out); transform: translateY(0); /* transition: margin-top var(--layer-transition); transition-delay: .2s; */ @@ -1144,8 +1129,8 @@ $chat-helper-size: 39px; opacity: 0.99999 !important; // 0.99999 сделано для сафари, т.к. без этого будет прыжок при скролле в самом низу или верху html.is-safari & { + transition: transform var(--transition-standard-in); transform: translateY(calc(var(--translateY) * -1)); - //transition: transform var(--layer-transition); } } } diff --git a/src/scss/partials/_chatBubble.scss b/src/scss/partials/_chatBubble.scss index f4249552..f70e67c9 100644 --- a/src/scss/partials/_chatBubble.scss +++ b/src/scss/partials/_chatBubble.scss @@ -672,15 +672,18 @@ $bubble-margin: .25rem; } &.animating { - transition: border-radius var(--layer-transition); + transition: border-radius var(--transition-standard-out); .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) { + transition: border-radius var(--transition-standard-in); + .album-item-media { + transition: transform var(--transition-standard-in), border-radius var(--transition-standard-in); transform: scale(.883333); } @@ -1566,11 +1569,15 @@ $bubble-margin: .25rem; opacity: 1; @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 */ { - //transform: scale(.8) translateZ(0); transform: scale3d(.8, .8, 1) translateX(0); //transform: scale(.8) translateX(0); opacity: 0; @@ -1594,7 +1601,7 @@ $bubble-margin: .25rem; .bubbles.is-selecting & { transform: scale3d(1, 1, 1); transform-origin: bottom; - transition: transform var(--layer-transition); + transition: transform var(--transition-standard-out); body.animation-level-0 & { transition: none; @@ -1603,6 +1610,7 @@ $bubble-margin: .25rem; .bubbles.is-selecting:not(.backwards) & { transform: scale3d(.76, .76, 1); + transition: transform var(--transition-standard-in); } // @include respond-to(handhelds) { @@ -1789,22 +1797,23 @@ $bubble-margin: .25rem; } &-wrapper { - @include respond-to(not-handhelds) { - transform: translateX(calc((var(--chat-input-size) + #{$btn-send-margin}) * -1)); + @include respond-to(medium-screens) { + 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 & { - transform: translateX(0); + transition: transform var(--transition-standard-in), opacity var(--transition-standard-in); + transform: scale(1) translateX(0); &.zoom-fade { transform: scale3d(.8, .8, 1) translateX(0); } } - } - - &.zoom-fade { - transform: scale3d(.8, .8, 1) translateX(calc((var(--chat-input-size) + #{$btn-send-margin}) * -1)); - } + //} } } } diff --git a/src/scss/partials/_chatTopbar.scss b/src/scss/partials/_chatTopbar.scss index 47d8997a..e82a47f8 100644 --- a/src/scss/partials/_chatTopbar.scss +++ b/src/scss/partials/_chatTopbar.scss @@ -157,10 +157,11 @@ padding-right: inherit; */ @include respond-to(medium-screens) { - transition: transform var(--layer-transition); + transition: transform var(--transition-standard-out); body.is-right-column-shown & { transform: translate3d(calc(var(--right-column-width) * -1), 0, 0); + transition: transform var(--transition-standard-in); } body.animation-level-0 & { diff --git a/src/scss/partials/_checkbox.scss b/src/scss/partials/_checkbox.scss index 7aeccd16..354d2375 100644 --- a/src/scss/partials/_checkbox.scss +++ b/src/scss/partials/_checkbox.scss @@ -95,7 +95,7 @@ .checkbox-caption { position: relative; - padding-left: 3.3125rem; + padding-left: 3.375rem; cursor: pointer; display: inline-block; min-height: 24px; @@ -329,14 +329,14 @@ position: relative; display: flex; align-items: center; - transition: background-color .2s; + transition: background-color .1s; margin: 0 var(--offset); &:before { width: 1.25rem; height: 1.25rem; border: 2px solid var(--secondary-color); - transition: border-color .2s, transform .2s; + transition: border-color .1s, transform .1s; background-color: var(--surface-color); content: " "; transform: translateX(calc(var(--offset) * -1)); diff --git a/src/scss/partials/_fonts.scss b/src/scss/partials/_fonts.scss index 03f28fcf..5b30356e 100644 --- a/src/scss/partials/_fonts.scss +++ b/src/scss/partials/_fonts.scss @@ -9,9 +9,9 @@ @font-face { font-family: "#{$tgico-font-family}"; src: - url('#{$tgico-font-path}/#{$tgico-font-family}.ttf?xc1ll') format('truetype'), - url('#{$tgico-font-path}/#{$tgico-font-family}.woff?xc1ll') format('woff'), - url('#{$tgico-font-path}/#{$tgico-font-family}.svg?xc1ll#tgico') format('svg'); + url('#{$tgico-font-path}/#{$tgico-font-family}.ttf?cbcfst') format('truetype'), + url('#{$tgico-font-path}/#{$tgico-font-family}.woff?cbcfst') format('woff'), + url('#{$tgico-font-path}/#{$tgico-font-family}.svg?cbcfst#tgico') format('svg'); font-weight: normal; font-style: normal; font-display: block; @@ -87,11 +87,6 @@ content: $tgico-archive; } } -.tgico-arrow_back { - &:before { - content: $tgico-arrow_back; - } -} .tgico-arrow_down { &:before { content: $tgico-arrow_down; @@ -257,6 +252,11 @@ content: $tgico-delete_filled; } } +.tgico-deletedaccount { + &:before { + content: $tgico-deletedaccount; + } +} .tgico-deleteleft { &:before { content: $tgico-deleteleft; @@ -482,11 +482,6 @@ content: $tgico-microphone; } } -.tgico-microphone2 { - &:before { - content: $tgico-microphone2; - } -} .tgico-minus { &:before { content: $tgico-minus; @@ -547,16 +542,6 @@ content: $tgico-nosound; } } -.tgico-notificationsoff { - &:before { - content: $tgico-notificationsoff; - } -} -.tgico-notificationson { - &:before { - content: $tgico-notificationson; - } -} .tgico-passwordoff { &:before { content: $tgico-passwordoff; @@ -577,11 +562,6 @@ content: $tgico-phone; } } -.tgico-photo { - &:before { - content: $tgico-photo; - } -} .tgico-pin { &:before { content: $tgico-pin; @@ -652,11 +632,6 @@ content: $tgico-reply; } } -.tgico-revote { - &:before { - content: $tgico-revote; - } -} .tgico-saved { &:before { content: $tgico-saved; @@ -797,11 +772,6 @@ content: $tgico-username; } } -.tgico-write { - &:before { - content: $tgico-write; - } -} .tgico-zoomin { &:before { content: $tgico-zoomin; diff --git a/src/scss/partials/_ico.scss b/src/scss/partials/_ico.scss index 09ac3f5c..a6d88caf 100644 --- a/src/scss/partials/_ico.scss +++ b/src/scss/partials/_ico.scss @@ -29,40 +29,40 @@ $tgico-admin: "\e906"; $tgico-animals: "\e907"; $tgico-animations: "\e908"; $tgico-archive: "\e909"; -$tgico-arrow_back: "\e90a"; -$tgico-arrow_down: "\e90b"; -$tgico-arrow_next: "\e90c"; -$tgico-attach: "\e90d"; -$tgico-bold: "\e90e"; -$tgico-botcom: "\e90f"; -$tgico-bots: "\e910"; -$tgico-bug: "\e911"; -$tgico-calendar: "\e912"; -$tgico-calendarfilter: "\e913"; -$tgico-camera: "\e914"; -$tgico-cameraadd: "\e915"; -$tgico-car: "\e916"; -$tgico-channel: "\e917"; -$tgico-channelviews: "\e918"; -$tgico-chatspinned: "\e919"; -$tgico-chatsplaceholder: "\e91a"; -$tgico-check1: "\e91b"; -$tgico-checkbox: "\e91c"; -$tgico-checkboxblock: "\e91d"; -$tgico-checkboxempty: "\e91e"; -$tgico-checkboxon: "\e91f"; -$tgico-checkretract: "\e920"; -$tgico-checkround: "\e921"; -$tgico-close: "\e922"; -$tgico-clouddownload: "\e923"; -$tgico-colorize: "\e924"; -$tgico-comments: "\e925"; -$tgico-commentssticker: "\e926"; -$tgico-copy: "\e927"; -$tgico-darkmode: "\e928"; -$tgico-data: "\e929"; -$tgico-delete: "\e92a"; -$tgico-delete_filled: "\e92b"; +$tgico-arrow_down: "\e90a"; +$tgico-arrow_next: "\e90b"; +$tgico-attach: "\e90c"; +$tgico-bold: "\e90d"; +$tgico-botcom: "\e90e"; +$tgico-bots: "\e90f"; +$tgico-bug: "\e910"; +$tgico-calendar: "\e911"; +$tgico-calendarfilter: "\e912"; +$tgico-camera: "\e913"; +$tgico-cameraadd: "\e914"; +$tgico-car: "\e915"; +$tgico-channel: "\e916"; +$tgico-channelviews: "\e917"; +$tgico-chatspinned: "\e918"; +$tgico-chatsplaceholder: "\e919"; +$tgico-check1: "\e91a"; +$tgico-checkbox: "\e91b"; +$tgico-checkboxblock: "\e91c"; +$tgico-checkboxempty: "\e91d"; +$tgico-checkboxon: "\e91e"; +$tgico-checkretract: "\e91f"; +$tgico-checkround: "\e920"; +$tgico-close: "\e921"; +$tgico-clouddownload: "\e922"; +$tgico-colorize: "\e923"; +$tgico-comments: "\e924"; +$tgico-commentssticker: "\e925"; +$tgico-copy: "\e926"; +$tgico-darkmode: "\e927"; +$tgico-data: "\e928"; +$tgico-delete: "\e929"; +$tgico-delete_filled: "\e92a"; +$tgico-deletedaccount: "\e92b"; $tgico-deleteleft: "\e92c"; $tgico-deleteuser: "\e92d"; $tgico-devices: "\e92e"; @@ -108,69 +108,63 @@ $tgico-menu: "\e955"; $tgico-message: "\e956"; $tgico-messageunread: "\e957"; $tgico-microphone: "\e958"; -$tgico-microphone2: "\e959"; -$tgico-minus: "\e95a"; -$tgico-monospace: "\e95b"; -$tgico-more: "\e95c"; -$tgico-mute: "\e95d"; -$tgico-muted: "\e95e"; -$tgico-newchannel: "\e95f"; -$tgico-newchat_filled: "\e960"; -$tgico-newgroup: "\e961"; -$tgico-newprivate: "\e962"; -$tgico-next: "\e963"; -$tgico-noncontacts: "\e964"; -$tgico-nosound: "\e965"; -$tgico-notificationsoff: "\e966"; -$tgico-notificationson: "\e967"; -$tgico-passwordoff: "\e968"; -$tgico-pause: "\e969"; -$tgico-permissions: "\e96a"; -$tgico-phone: "\e96b"; -$tgico-photo: "\e96c"; -$tgico-pin: "\e96d"; -$tgico-pinlist: "\e96e"; -$tgico-pinned_filled: "\e96f"; -$tgico-pinnedchat: "\e970"; -$tgico-play: "\e971"; -$tgico-plus: "\e972"; -$tgico-poll: "\e973"; -$tgico-previous: "\e974"; -$tgico-radiooff: "\e975"; -$tgico-radioon: "\e976"; -$tgico-readchats: "\e977"; -$tgico-recent: "\e978"; -$tgico-replace: "\e979"; -$tgico-reply: "\e97a"; -$tgico-revote: "\e97b"; -$tgico-saved: "\e97c"; -$tgico-savedmessages: "\e97d"; -$tgico-schedule: "\e97e"; -$tgico-scheduled: "\e97f"; -$tgico-search: "\e980"; -$tgico-select: "\e981"; -$tgico-send: "\e982"; -$tgico-send2: "\e983"; -$tgico-sending: "\e984"; -$tgico-sendingerror: "\e985"; -$tgico-settings: "\e986"; -$tgico-smallscreen: "\e987"; -$tgico-smile: "\e988"; -$tgico-sport: "\e989"; -$tgico-stickers: "\e98a"; -$tgico-stop: "\e98b"; -$tgico-strikethrough: "\e98c"; -$tgico-textedit: "\e98d"; -$tgico-tip: "\e98e"; -$tgico-unarchive: "\e98f"; -$tgico-underline: "\e990"; -$tgico-unlock: "\e991"; -$tgico-unmute: "\e992"; -$tgico-unpin: "\e993"; -$tgico-unread: "\e994"; -$tgico-up: "\e995"; -$tgico-user: "\e996"; -$tgico-username: "\e997"; -$tgico-write: "\e998"; -$tgico-zoomin: "\e999"; -$tgico-zoomout: "\e99a"; +$tgico-minus: "\e959"; +$tgico-monospace: "\e95a"; +$tgico-more: "\e95b"; +$tgico-mute: "\e95c"; +$tgico-muted: "\e95d"; +$tgico-newchannel: "\e95e"; +$tgico-newchat_filled: "\e95f"; +$tgico-newgroup: "\e960"; +$tgico-newprivate: "\e961"; +$tgico-next: "\e962"; +$tgico-noncontacts: "\e963"; +$tgico-nosound: "\e964"; +$tgico-passwordoff: "\e965"; +$tgico-pause: "\e966"; +$tgico-permissions: "\e967"; +$tgico-phone: "\e968"; +$tgico-pin: "\e969"; +$tgico-pinlist: "\e96a"; +$tgico-pinned_filled: "\e96b"; +$tgico-pinnedchat: "\e96c"; +$tgico-play: "\e96d"; +$tgico-plus: "\e96e"; +$tgico-poll: "\e96f"; +$tgico-previous: "\e970"; +$tgico-radiooff: "\e971"; +$tgico-radioon: "\e972"; +$tgico-readchats: "\e973"; +$tgico-recent: "\e974"; +$tgico-replace: "\e975"; +$tgico-reply: "\e976"; +$tgico-saved: "\e977"; +$tgico-savedmessages: "\e978"; +$tgico-schedule: "\e979"; +$tgico-scheduled: "\e97a"; +$tgico-search: "\e97b"; +$tgico-select: "\e97c"; +$tgico-send: "\e97d"; +$tgico-send2: "\e97e"; +$tgico-sending: "\e97f"; +$tgico-sendingerror: "\e980"; +$tgico-settings: "\e981"; +$tgico-smallscreen: "\e982"; +$tgico-smile: "\e983"; +$tgico-sport: "\e984"; +$tgico-stickers: "\e985"; +$tgico-stop: "\e986"; +$tgico-strikethrough: "\e987"; +$tgico-textedit: "\e988"; +$tgico-tip: "\e989"; +$tgico-unarchive: "\e98a"; +$tgico-underline: "\e98b"; +$tgico-unlock: "\e98c"; +$tgico-unmute: "\e98d"; +$tgico-unpin: "\e98e"; +$tgico-unread: "\e98f"; +$tgico-up: "\e990"; +$tgico-user: "\e991"; +$tgico-username: "\e992"; +$tgico-zoomin: "\e993"; +$tgico-zoomout: "\e994"; diff --git a/src/scss/partials/_leftSidebar.scss b/src/scss/partials/_leftSidebar.scss index 53a6d21d..dfca8c4f 100644 --- a/src/scss/partials/_leftSidebar.scss +++ b/src/scss/partials/_leftSidebar.scss @@ -350,8 +350,10 @@ } .btn-corner { - &.menu-open:before { - content: $tgico-close; + &:not(.menu-open) .tgico-newchat_filled, + &.menu-open .tgico-close { + animation: grow-icon .4s forwards ease-in-out !important; + visibility: visible !important; } @include respond-to(handhelds) { @@ -486,6 +488,12 @@ } } +.language-container { + .sidebar-left-section { + padding-bottom: .5rem; + } +} + .new-group-container { .search-group { margin-top: .5rem; @@ -493,8 +501,16 @@ } .edit-folder-container { - .folder-category-button:nth-child(n+2) { - pointer-events: none; + .chatlist { + 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 { .sidebar-left-section { &:not(:last-child) { padding-bottom: 0; } + &:last-child { + padding-bottom: .5rem; + } + /* &-name { padding-top: .5rem; padding-bottom: .5rem; @@ -643,28 +653,27 @@ } } - .sidebar-left-h2 { - padding: 21px 24px 8px; - - @include respond-to(handhelds) { - width: 100%; - padding: 21px 16px 8px; - } + .input-wrapper { + margin-bottom: .125rem !important; } - .input-wrapper { - margin-bottom: 10px !important; + .sidebar-left-section { + padding-bottom: 0rem; + + &:last-child { + padding-bottom: .5rem; + } } } .folder-list { li { - padding: 9px 11px; + padding: 9px 12px; height: 50px; } .user-caption { - padding: 3px 28px 6px; + padding: 3px 28px 6px 27px; } p span { @@ -673,32 +682,14 @@ } .folder-categories { - width: 100%; - .checkbox-field { position: absolute; - right: 1.625rem !important; - - @include respond-to(handhelds) { - right: 1rem !important; - } + right: 1.125rem !important; } } .folder-category-button { - display: flex; - padding: 0 1.5rem; - overflow: hidden; height: 50px; - border-radius: 0; - - @include respond-to(handhelds) { - padding: 0 1.125rem; - } - - &:before { - color: #797d82; - } } .popup-forward, .included-chatlist-container { @@ -723,16 +714,24 @@ } .included-chatlist-container { - .sidebar-left-h2 { - padding: 6px 24px 8px 24px; + .sidebar-left-section { + padding-bottom: 0; - @include respond-to(handhelds) { - padding: 6px 16px 8px 16px; + &:first-child { + padding-top: 0; + } + + &:last-child { + padding-bottom: .5rem; + } + + .chatlist { + padding: 0; } } .selector { - ul { + .chatlist { .checkbox { margin-top: 10px; } @@ -742,10 +741,6 @@ } } } - - .folder-category-button { - cursor: pointer; - } } .search-group-recent { @@ -875,7 +870,7 @@ display: flex; align-items: center; height: 3.5rem; - padding: 0 1.1875rem; + padding: 0 1.125rem; } &-disabled { diff --git a/src/scss/partials/_rightSidebar.scss b/src/scss/partials/_rightSidebar.scss index 342bb79c..04a62d80 100644 --- a/src/scss/partials/_rightSidebar.scss +++ b/src/scss/partials/_rightSidebar.scss @@ -20,7 +20,7 @@ @include respond-to(not-handhelds) { width: var(--right-column-width); - transition: transform var(--layer-transition); + transition: transform var(--transition-standard-out); position: absolute; right: 0; z-index: 3; @@ -35,6 +35,7 @@ } */ body.is-right-column-shown:not(.is-left-column-shown) & { + transition: transform var(--transition-standard-in); transform: translate3d(0, 0, 0); } @@ -66,7 +67,7 @@ flex: 0 0 auto; .sidebar-close-button.tgico:before { - content: $tgico-arrow_back; + content: $tgico-left; @include respond-to(not-handhelds) { content: $tgico-close; diff --git a/src/scss/partials/_selector.scss b/src/scss/partials/_selector.scss index ef5cbdd0..c6186d21 100644 --- a/src/scss/partials/_selector.scss +++ b/src/scss/partials/_selector.scss @@ -160,7 +160,7 @@ } } - hr { + > hr { margin: 0; padding: 0; } diff --git a/src/scss/style.scss b/src/scss/style.scss index 7d5531db..1de377ef 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -41,8 +41,14 @@ $chat-padding-handhelds: .5rem; --z-below: -1; --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; - --layer-transition: .2s ease-in-out; + --layer-transition: .2s cubic-bezier(.4, .0, .2, 1); --slide-header-transition: .4s ease-in-out; --tabs-transition: .25s ease-in-out; --btn-menu-transition: .2s cubic-bezier(.4, 0, .2, 1);