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
commit
4ab2c8036d
  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

@ -2912,6 +2912,7 @@ export default class ChatBubbles { @@ -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 { @@ -2979,6 +2980,8 @@ export default class ChatBubbles {
setBubbles.forEach(contentWrapper => {
contentWrapper.style.transitionDelay = '';
});
this.chatInner.classList.remove('zoom-fading');
});
// ! в хроме, каким-то образом из-за zoom-fade класса начинает прыгать скролл при подгрузке сообщений вверх,

2
src/components/chat/contextMenu.ts

@ -239,7 +239,7 @@ export default class ChatContextMenu { @@ -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: () => {

6
src/components/chat/input.ts

@ -288,7 +288,7 @@ export default class ChatInput { @@ -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 { @@ -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', `
<span class="tgico tgico-send"></span>
<span class="tgico tgico-schedule"></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);

2
src/components/chat/markupTooltip.ts

@ -69,7 +69,7 @@ export default class MarkupTooltip { @@ -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');

2
src/components/chat/search.ts

@ -39,7 +39,7 @@ export default class ChatSearch { @@ -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', () => {

2
src/components/chat/topbar.ts

@ -68,7 +68,7 @@ export default class ChatTopbar { @@ -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');

6
src/components/sidebarLeft/index.ts

@ -198,7 +198,11 @@ export class AppSidebarLeft extends SidebarSlider { @@ -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', `
<span class="tgico tgico-newchat_filled"></span>
<span class="tgico tgico-close"></span>
`);
this.newBtnMenu.id = 'new-menu';
sidebarHeader.nextElementSibling.append(this.newBtnMenu);

50
src/components/sidebarLeft/tabs/editFolder.ts

@ -20,6 +20,7 @@ import { ButtonMenuItemOptions } from "../../buttonMenu"; @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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;

2
src/components/sidebarLeft/tabs/generalSettings.ts

@ -74,7 +74,7 @@ export default class AppGeneralSettingsTab extends SliderSuperTab { @@ -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();

33
src/components/sidebarLeft/tabs/includedChats.ts

@ -17,6 +17,7 @@ import AppEditFolderTab from "./editFolder"; @@ -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 { @@ -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 { @@ -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 { @@ -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();
}
}
}

2
src/components/sliderTab.ts

@ -51,7 +51,7 @@ export default class SliderSuperTab implements SliderTab { @@ -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);

2
src/index.hbs

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

6
src/lib/appManagers/appProfileManager.ts

@ -557,7 +557,7 @@ export class AppProfileManager { @@ -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 { @@ -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 { @@ -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;

17
src/scss/partials/_animatedIcon.scss

@ -95,3 +95,20 @@ @@ -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

@ -69,11 +69,11 @@ avatar-element { @@ -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));
}

4
src/scss/partials/_button.scss

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

47
src/scss/partials/_chat.scss

@ -23,25 +23,20 @@ $chat-helper-size: 39px; @@ -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; @@ -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; @@ -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; @@ -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; @@ -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; @@ -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; @@ -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; @@ -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; @@ -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; @@ -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; @@ -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; @@ -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);
}
}
}

37
src/scss/partials/_chatBubble.scss

@ -672,15 +672,18 @@ $bubble-margin: .25rem; @@ -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; @@ -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; @@ -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; @@ -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; @@ -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));
}
//}
}
}
}

3
src/scss/partials/_chatTopbar.scss

@ -157,10 +157,11 @@ @@ -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 & {

6
src/scss/partials/_checkbox.scss

@ -95,7 +95,7 @@ @@ -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 @@ @@ -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));

46
src/scss/partials/_fonts.scss

@ -9,9 +9,9 @@ @@ -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 @@ @@ -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 @@ @@ -257,6 +252,11 @@
content: $tgico-delete_filled;
}
}
.tgico-deletedaccount {
&:before {
content: $tgico-deletedaccount;
}
}
.tgico-deleteleft {
&:before {
content: $tgico-deleteleft;
@ -482,11 +482,6 @@ @@ -482,11 +482,6 @@
content: $tgico-microphone;
}
}
.tgico-microphone2 {
&:before {
content: $tgico-microphone2;
}
}
.tgico-minus {
&:before {
content: $tgico-minus;
@ -547,16 +542,6 @@ @@ -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 @@ @@ -577,11 +562,6 @@
content: $tgico-phone;
}
}
.tgico-photo {
&:before {
content: $tgico-photo;
}
}
.tgico-pin {
&:before {
content: $tgico-pin;
@ -652,11 +632,6 @@ @@ -652,11 +632,6 @@
content: $tgico-reply;
}
}
.tgico-revote {
&:before {
content: $tgico-revote;
}
}
.tgico-saved {
&:before {
content: $tgico-saved;
@ -797,11 +772,6 @@ @@ -797,11 +772,6 @@
content: $tgico-username;
}
}
.tgico-write {
&:before {
content: $tgico-write;
}
}
.tgico-zoomin {
&:before {
content: $tgico-zoomin;

194
src/scss/partials/_ico.scss

@ -29,40 +29,40 @@ $tgico-admin: "\e906"; @@ -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"; @@ -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";

103
src/scss/partials/_leftSidebar.scss

@ -350,8 +350,10 @@ @@ -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 @@ @@ -486,6 +488,12 @@
}
}
.language-container {
.sidebar-left-section {
padding-bottom: .5rem;
}
}
.new-group-container {
.search-group {
margin-top: .5rem;
@ -493,8 +501,16 @@ @@ -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 @@ @@ -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 @@ @@ -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 @@ @@ -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 @@ @@ -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 @@ @@ -742,10 +741,6 @@
}
}
}
.folder-category-button {
cursor: pointer;
}
}
.search-group-recent {
@ -875,7 +870,7 @@ @@ -875,7 +870,7 @@
display: flex;
align-items: center;
height: 3.5rem;
padding: 0 1.1875rem;
padding: 0 1.125rem;
}
&-disabled {

5
src/scss/partials/_rightSidebar.scss

@ -20,7 +20,7 @@ @@ -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 @@ @@ -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 @@ @@ -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;

2
src/scss/partials/_selector.scss

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

8
src/scss/style.scss

@ -41,8 +41,14 @@ $chat-padding-handhelds: .5rem; @@ -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);

Loading…
Cancel
Save