diff --git a/src/components/buttonCorner.ts b/src/components/buttonCorner.ts new file mode 100644 index 00000000..a69c88ea --- /dev/null +++ b/src/components/buttonCorner.ts @@ -0,0 +1,14 @@ +/* + * https://github.com/morethanwords/tweb + * Copyright (C) 2019-2021 Eduard Kuzmenko + * https://github.com/morethanwords/tweb/blob/master/LICENSE + */ + +import Button from "./button"; + +const ButtonCorner = (options: Partial<{className: string, icon: string, noRipple: true, onlyMobile: true, asDiv: boolean}> = {}) => { + const button = Button('btn-circle btn-corner z-depth-1' + (options.className ? ' ' + options.className : ''), options); + return button; +}; + +export default ButtonCorner; diff --git a/src/components/chat/input.ts b/src/components/chat/input.ts index eea2941e..a20499ae 100644 --- a/src/components/chat/input.ts +++ b/src/components/chat/input.ts @@ -47,6 +47,7 @@ import { isMobile } from '../../helpers/userAgent'; import { i18n } from '../../lib/langPack'; import { generateTail } from './bubbles'; import findUpClassName from '../../helpers/dom/findUpClassName'; +import ButtonCorner from '../buttonCorner'; const RECORD_MIN_TIME = 500; const POSTING_MEDIA_NOT_ALLOWED = 'Posting media content isn\'t allowed in this group.'; @@ -156,7 +157,7 @@ export default class ChatInput { this.inputContainer.append(this.rowsWrapper, fakeRowsWrapper, fakeSelectionWrapper); this.chatInput.append(this.inputContainer); - this.goDownBtn = Button('bubbles-go-down btn-corner btn-circle z-depth-1 hide', {icon: 'arrow_down'}); + this.goDownBtn = ButtonCorner({icon: 'arrow_down', className: 'bubbles-go-down hide'}); this.inputContainer.append(this.goDownBtn); attachClickEvent(this.goDownBtn, (e) => { diff --git a/src/components/editPeer.ts b/src/components/editPeer.ts index c394b1a5..d96bc05c 100644 --- a/src/components/editPeer.ts +++ b/src/components/editPeer.ts @@ -9,8 +9,8 @@ import AvatarEdit from "./avatarEdit"; import AvatarElement from "./avatar"; import InputField from "./inputField"; import ListenerSetter from "../helpers/listenerSetter"; -import Button from "./button"; import { safeAssign } from "../helpers/object"; +import ButtonCorner from "./buttonCorner"; export default class EditPeer { public nextBtn: HTMLButtonElement; @@ -32,7 +32,7 @@ export default class EditPeer { }) { safeAssign(this, options); - this.nextBtn = Button('btn-circle btn-corner tgico-check'); + this.nextBtn = ButtonCorner({icon: 'check'}); this.avatarElem = document.createElement('avatar-element') as AvatarElement; this.avatarElem.classList.add('avatar-placeholder', 'avatar-120'); diff --git a/src/components/sidebarLeft/index.ts b/src/components/sidebarLeft/index.ts index 78122c99..c127a3de 100644 --- a/src/components/sidebarLeft/index.ts +++ b/src/components/sidebarLeft/index.ts @@ -208,7 +208,7 @@ export class AppSidebarLeft extends SidebarSlider { text: 'NewPrivateChat', onClick: onContactsClick }]); - this.newBtnMenu.className = 'btn-circle rp btn-corner btn-menu-toggle animated-button-icon'; + this.newBtnMenu.className = 'btn-circle rp btn-corner z-depth-1 btn-menu-toggle animated-button-icon'; this.newBtnMenu.insertAdjacentHTML('afterbegin', ` diff --git a/src/components/sidebarLeft/tabs/addMembers.ts b/src/components/sidebarLeft/tabs/addMembers.ts index d9ddec20..7b530906 100644 --- a/src/components/sidebarLeft/tabs/addMembers.ts +++ b/src/components/sidebarLeft/tabs/addMembers.ts @@ -7,8 +7,8 @@ import { SliderSuperTab } from "../../slider"; import AppSelectPeers from "../../appSelectPeers"; import { putPreloader } from "../../misc"; -import Button from "../../button"; import { LangPackKey, _i18n } from "../../../lib/langPack"; +import ButtonCorner from "../../buttonCorner"; export default class AppAddMembersTab extends SliderSuperTab { private nextBtn: HTMLButtonElement; @@ -18,7 +18,7 @@ export default class AppAddMembersTab extends SliderSuperTab { private skippable: boolean; protected init() { - this.nextBtn = Button('btn-corner btn-circle', {icon: 'arrow_next'}); + this.nextBtn = ButtonCorner({icon: 'arrow_next'}); this.content.append(this.nextBtn); this.nextBtn.addEventListener('click', () => { diff --git a/src/components/sidebarLeft/tabs/blockedUsers.ts b/src/components/sidebarLeft/tabs/blockedUsers.ts index 7d1f1244..098165fc 100644 --- a/src/components/sidebarLeft/tabs/blockedUsers.ts +++ b/src/components/sidebarLeft/tabs/blockedUsers.ts @@ -11,10 +11,10 @@ import { attachClickEvent } from "../../../helpers/dom"; import ButtonMenu from "../../buttonMenu"; import appDialogsManager from "../../../lib/appManagers/appDialogsManager"; import appUsersManager from "../../../lib/appManagers/appUsersManager"; -import Button from "../../button"; import PopupPickUser from "../../popups/pickUser"; import rootScope from "../../../lib/rootScope"; import findUpTag from "../../../helpers/dom/findUpTag"; +import ButtonCorner from "../../buttonCorner"; export default class AppBlockedUsersTab extends SliderSuperTab { public peerIds: number[]; @@ -32,7 +32,7 @@ export default class AppBlockedUsersTab extends SliderSuperTab { this.scrollable.append(section.container); } - const btnAdd = Button('btn-circle btn-corner tgico-add is-visible'); + const btnAdd = ButtonCorner({icon: 'add', className: 'is-visible'}); this.content.append(btnAdd); attachClickEvent(btnAdd, (e) => { diff --git a/src/components/sidebarLeft/tabs/newChannel.ts b/src/components/sidebarLeft/tabs/newChannel.ts index 2fe16bf1..2572f445 100644 --- a/src/components/sidebarLeft/tabs/newChannel.ts +++ b/src/components/sidebarLeft/tabs/newChannel.ts @@ -13,6 +13,7 @@ import { SliderSuperTab } from "../../slider"; import AvatarEdit from "../../avatarEdit"; import AppAddMembersTab from "./addMembers"; import { _i18n } from "../../../lib/langPack"; +import ButtonCorner from "../../buttonCorner"; export default class AppNewChannelTab extends SliderSuperTab { private uploadAvatar: () => Promise = null; @@ -58,7 +59,7 @@ export default class AppNewChannelTab extends SliderSuperTab { caption.classList.add('caption'); _i18n(caption, 'Channel.DescriptionHolderDescrpiton'); - this.nextBtn = Button('btn-corner btn-circle', {icon: 'arrow_next'}); + this.nextBtn = ButtonCorner({icon: 'arrow_next'}); this.nextBtn.addEventListener('click', () => { const title = this.channelNameInputField.value; diff --git a/src/components/sidebarLeft/tabs/newGroup.ts b/src/components/sidebarLeft/tabs/newGroup.ts index 3c38a68d..b1a9a907 100644 --- a/src/components/sidebarLeft/tabs/newGroup.ts +++ b/src/components/sidebarLeft/tabs/newGroup.ts @@ -15,6 +15,7 @@ import InputField from "../../inputField"; import { SliderSuperTab } from "../../slider"; import AvatarEdit from "../../avatarEdit"; import { i18n } from "../../../lib/langPack"; +import ButtonCorner from "../../buttonCorner"; export default class AppNewGroupTab extends SliderSuperTab { private searchGroup = new SearchGroup(' ', 'contacts', true, 'new-group-members disable-hover', false); @@ -47,7 +48,7 @@ export default class AppNewGroupTab extends SliderSuperTab { this.nextBtn.classList.toggle('is-visible', !!value.length && !this.groupNameInputField.input.classList.contains('error')); }); - this.nextBtn = Button('btn-corner btn-circle', {icon: 'arrow_next'}); + this.nextBtn = ButtonCorner({icon: 'arrow_next'}); this.nextBtn.addEventListener('click', () => { const title = this.groupNameInputField.value; diff --git a/src/components/sidebarRight/tabs/groupType.ts b/src/components/sidebarRight/tabs/groupType.ts index 844ebc7b..808adff6 100644 --- a/src/components/sidebarRight/tabs/groupType.ts +++ b/src/components/sidebarRight/tabs/groupType.ts @@ -20,6 +20,7 @@ import { UsernameInputField } from "../../usernameInputField"; import { SliderSuperTabEventable } from "../../sliderTab"; import I18n from "../../../lib/langPack"; import PopupPeer from "../../popups/peer"; +import ButtonCorner from "../../buttonCorner"; export default class AppGroupTypeTab extends SliderSuperTabEventable { public peerId: number; @@ -134,7 +135,7 @@ export default class AppGroupTypeTab extends SliderSuperTabEventable { inputWrapper.append(linkInputField.container) publicSection.content.append(inputWrapper); - const applyBtn = Button('btn-circle btn-corner tgico-check is-visible'); + const applyBtn = ButtonCorner({icon: 'check', className: 'is-visible'}); this.content.append(applyBtn); attachClickEvent(applyBtn, () => { diff --git a/src/components/sidebarRight/tabs/sharedMedia.ts b/src/components/sidebarRight/tabs/sharedMedia.ts index 543a6841..bc76348d 100644 --- a/src/components/sidebarRight/tabs/sharedMedia.ts +++ b/src/components/sidebarRight/tabs/sharedMedia.ts @@ -46,6 +46,7 @@ import Scrollable from "../../scrollable"; import { isTouchSupported } from "../../../helpers/touchSupport"; import { isFirefox } from "../../../helpers/userAgent"; import appDownloadManager from "../../../lib/appManagers/appDownloadManager"; +import ButtonCorner from "../../buttonCorner"; let setText = (text: string, row: Row) => { //fastRaf(() => { @@ -912,7 +913,7 @@ export default class AppSharedMediaTab extends SliderSuperTab { this.profile.element.append(this.searchSuper.container); - const btnAddMembers = Button('btn-corner btn-circle', {icon: 'addmember_filled'}); + const btnAddMembers = ButtonCorner({icon: 'addmember_filled'}); this.content.append(btnAddMembers); btnAddMembers.addEventListener('click', () => { diff --git a/src/lang.ts b/src/lang.ts index ada9f5c0..ba192daf 100644 --- a/src/lang.ts +++ b/src/lang.ts @@ -490,7 +490,8 @@ const lang = { "ChatList.Filter.List.Title": "Chat Folders", "ChatList.Filter.Include.AddChat": "Add Chats", "ChatList.Filter.Exclude.AddChat": "Add Chats", - "ChatList.Filter.All": "All", + //"ChatList.Filter.All": "All", + "ChatList.Filter.AllChats": "All Chats", "ChatList.Filter.Contacts": "Contacts", "ChatList.Filter.NonContacts": "Non-Contacts", "ChatList.Filter.Groups": "Groups", diff --git a/src/lib/appManagers/appDialogsManager.ts b/src/lib/appManagers/appDialogsManager.ts index f9351b45..889ce86a 100644 --- a/src/lib/appManagers/appDialogsManager.ts +++ b/src/lib/appManagers/appDialogsManager.ts @@ -281,7 +281,7 @@ export class AppDialogsManager { this.addFilter({ id: this.filterId, title: '', - titleEl: i18n('ChatList.Filter.All'), + titleEl: i18n('ChatList.Filter.AllChats'), orderIndex: 0 }); diff --git a/src/scss/partials/_button.scss b/src/scss/partials/_button.scss index 94920949..6b1e0502 100644 --- a/src/scss/partials/_button.scss +++ b/src/scss/partials/_button.scss @@ -305,7 +305,7 @@ height: 40px; align-items: center; margin: 15px auto 1rem; - border-radius: 30px; + border-radius: 20px; padding: 0 24px 0 12px; display: flex; diff --git a/src/scss/partials/_leftSidebar.scss b/src/scss/partials/_leftSidebar.scss index 280cb927..b79b77e4 100644 --- a/src/scss/partials/_leftSidebar.scss +++ b/src/scss/partials/_leftSidebar.scss @@ -73,41 +73,43 @@ } } + .item-main { + --menu-size: 3rem; + } + .menu-horizontal-scrollable { + --scrollable-size: var(--menu-size); z-index: 1; background-color: var(--surface-color); position: relative; - box-shadow: 0px 1px 5px -1px rgba(0, 0, 0, .16); top: unset; - height: 43px; + + @include respond-to(handhelds) { + box-shadow: 0px 1px 5px -1px rgba(0, 0, 0, .16); + } .scrollable { position: relative; } .menu-horizontal-div { - height: 43px; position: relative !important; - justify-content: flex-start; z-index: 0; &-item { - height: 43px; - padding: 0 1rem; - display: flex; - justify-content: center; - align-items: center; flex: 0 0 auto; min-width: 3rem; + border-top-left-radius: 6px; + border-top-right-radius: 6px; > span { overflow: visible; i { - bottom: calc(-.6875rem); - padding-right: 1rem !important; - margin-left: -.5rem !important; + bottom: calc(-.6875rem - 2px); + /* padding-right: 1rem !important; + margin-left: -.5rem !important; */ } } } @@ -123,8 +125,8 @@ } &:not(.hide) + .scrollable { - top: 43px; - height: calc(100% - 43px); + top: var(--menu-size); + height: calc(100% - var(--menu-size)); #folders-container { margin-top: .5rem; @@ -634,6 +636,7 @@ right: 1rem; top: 50%; transform: translateY(-50%); + border-radius: 15px; body.animation-level-0 & { transition: none; diff --git a/src/scss/partials/_rightSidebar.scss b/src/scss/partials/_rightSidebar.scss index d8c18888..9d552d55 100644 --- a/src/scss/partials/_rightSidebar.scss +++ b/src/scss/partials/_rightSidebar.scss @@ -166,24 +166,6 @@ } } */ } - - .search-super { - .menu-horizontal-div-item { - height: 3.5rem; - padding-top: 0; - padding-bottom: 0; - display: flex; - align-items: center; - justify-content: center; - font-size: 1rem; - line-height: var(--line-height); - border-radius: 0; - } - - .menu-horizontal-div i { - bottom: calc(-.625rem - 7px); - } - } } .search-super { @@ -239,7 +221,6 @@ top: 0px; z-index: 2; background-color: var(--surface-color); - height: 3.5rem; &:before { position: absolute; diff --git a/src/scss/partials/_slider.scss b/src/scss/partials/_slider.scss index 6b50d923..1227ab33 100644 --- a/src/scss/partials/_slider.scss +++ b/src/scss/partials/_slider.scss @@ -5,6 +5,9 @@ */ .menu-horizontal-scrollable { + --scrollable-size: 3.5rem; + height: var(--scrollable-size); + &:after { content: " "; position: absolute; @@ -22,34 +25,34 @@ } .menu-horizontal-div { + --size: var(--scrollable-size, 3.5rem); width: 100%; display: flex; justify-content: space-around; align-items: center; + flex-direction: row; position: relative; z-index: 2; - flex-direction: row; + user-select: none; color: var(--secondary-text-color); border-bottom: 1px solid var(--border-color); - position: relative; &-item { - display: inline-block; - padding: .75rem 1rem; + height: var(--size); + padding: 0 1rem; cursor: pointer; text-align: center; flex: 1 1 auto; - //flex: 0 0 auto; - //overflow: hidden; - user-select: none; - // font-size: 1rem; - font-size: 14px; + font-size: 1rem; font-weight: 500; position: relative; - border-top-left-radius: 6px; - border-top-right-radius: 6px; transition: none !important; + display: flex; + align-items: center; + justify-content: center; + line-height: var(--line-height); + border-radius: 0; @include hover-background-effect(); @@ -81,7 +84,7 @@ i { position: absolute; - bottom: calc(-.625rem - 3px); + bottom: calc(-.625rem - 7px); left: 0; opacity: 0; background-color: var(--primary-color);