Folder tabs changes

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;

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) => {

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');

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', `
     <span class="tgico tgico-newchat_filled"></span>
     <span class="tgico tgico-close"></span>

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', () => {

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) => {

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<InputFile> = 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;

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;

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, () => {

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', () => {

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",

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
     });
 

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;
 

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;

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;

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);