Hide archived button

pagePassword: fix emoji on password's label
Fix broken navigation after 'Password Set' tab

src/components/buttonMenuToggle.ts

@@ -10,7 +10,7 @@ import ButtonIcon from "./buttonIcon";
 import ButtonMenu, { ButtonMenuItemOptions } from "./buttonMenu";
 import { closeBtnMenu, openBtnMenu } from "./misc";
 
-const ButtonMenuToggle = (options: Partial<{noRipple: true, onlyMobile: true, listenerSetter: ListenerSetter}> = {}, direction: 'bottom-left' | 'top-left', buttons: ButtonMenuItemOptions[], onOpen?: (e: Event) => void) => {
+const ButtonMenuToggle = (options: Partial<{noRipple: true, onlyMobile: true, listenerSetter: ListenerSetter}> = {}, direction: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right', buttons: ButtonMenuItemOptions[], onOpen?: (e: Event) => void) => {
   const button = ButtonIcon('more btn-menu-toggle', options);
 
   const btnMenu = ButtonMenu(buttons, options.listenerSetter);
@@ -24,8 +24,9 @@ const ButtonMenuToggle = (options: Partial<{noRipple: true, onlyMobile: true, li
 const ButtonMenuToggleHandler = (el: HTMLElement, onOpen?: (e: Event) => void, options?: AttachClickOptions) => {
   const add = options?.listenerSetter ? options.listenerSetter.add.bind(options.listenerSetter, el) : el.addEventListener.bind(el);
 
+  //console.trace('ButtonMenuToggleHandler attach', el, onOpen, options);
   add(CLICK_EVENT_NAME, (e: Event) => {
-    //console.log('click pageIm');
+    //console.log('ButtonMenuToggleHandler click', e);
     if(!el.classList.contains('btn-menu-toggle')) return false;
 
     //window.removeEventListener('mousemove', onMouseMove);

src/components/sidebarLeft/index.ts

@@ -37,6 +37,7 @@ import findUpTag from "../../helpers/dom/findUpTag";
 import PeerTitle from "../peerTitle";
 import { replaceContent } from "../../helpers/dom";
 import App from "../../config/app";
+import ButtonMenuToggle from "../buttonMenuToggle";
 
 export const LEFT_COLUMN_ACTIVE_CLASSNAME = 'is-left-column-shown';
 
@@ -84,18 +85,22 @@ export class AppSidebarLeft extends SidebarSlider {
       new AppContactsTab(this).open();
     };
 
-    this.toolsBtn = this.sidebarEl.querySelector('.sidebar-tools-button') as HTMLButtonElement;
+    //this.toolsBtn = this.sidebarEl.querySelector('.sidebar-tools-button') as HTMLButtonElement;
     this.backBtn = this.sidebarEl.querySelector('.sidebar-back-button') as HTMLButtonElement;
 
-    const btnArchive: ButtonMenuItemOptions = {
+    const btnArchive: ButtonMenuItemOptions & {verify?: () => boolean} = {
       icon: 'archive',
       text: 'ArchivedChats',
       onClick: () => {
         new AppArchivedTab(this).open();
+      },
+      verify: () => {
+        const folder = appMessagesManager.dialogsStorage.getFolder(1);
+        return !!folder.length;
       }
     };
 
-    const btnMenu = ButtonMenu([{
+    const menuButtons: (ButtonMenuItemOptions & {verify?: () => boolean})[] = [{
       icon: 'savedmessages',
       text: 'SavedMessages',
       onClick: () => {
@@ -153,7 +158,21 @@ export class AppSidebarLeft extends SidebarSlider {
           a.remove();
         }, 0);
       }
-    }]);
+    }];
+
+    this.toolsBtn = ButtonMenuToggle({}, 'bottom-right', menuButtons, (e) => {
+      menuButtons.forEach(button => {
+        if(button.verify) {
+          button.element.classList.toggle('hide', !button.verify());
+        }
+      });
+    });
+    this.toolsBtn.classList.remove('tgico-more');
+    this.toolsBtn.classList.add('sidebar-tools-button', 'is-visible');
+
+    this.backBtn.parentElement.insertBefore(this.toolsBtn, this.backBtn);
+
+    const btnMenu = this.toolsBtn.querySelector('.btn-menu') as HTMLElement;
 
     const btnMenuFooter = document.createElement('div');
     btnMenuFooter.classList.add('btn-menu-footer');
@@ -164,13 +183,7 @@ export class AppSidebarLeft extends SidebarSlider {
     btnMenu.classList.add('has-footer');
     btnMenu.append(btnMenuFooter);
 
-    btnMenu.classList.add('bottom-right');
-
-    this.toolsBtn.append(btnMenu);
-
-    this.newBtnMenu = this.sidebarEl.querySelector('#new-menu');
-
-    const _newBtnMenu = ButtonMenu([{
+    this.newBtnMenu = ButtonMenuToggle({}, 'top-left', [{
       icon: 'newchannel',
       text: 'NewChannel',
       onClick: () => {
@@ -185,8 +198,9 @@ export class AppSidebarLeft extends SidebarSlider {
       text: 'NewPrivateChat',
       onClick: onContactsClick
     }]);
-    _newBtnMenu.classList.add('top-left');
-    this.newBtnMenu.append(_newBtnMenu);
+    this.newBtnMenu.className = 'btn-circle rp btn-corner tgico-newchat_filled btn-menu-toggle';
+    this.newBtnMenu.id = 'new-menu';
+    sidebarHeader.nextElementSibling.append(this.newBtnMenu);
 
     this.inputSearch.input.addEventListener('focus', () => this.initSearch(), {once: true});
 

src/components/slider.ts

@@ -49,7 +49,12 @@ export default class SidebarSlider {
   }
 
   public onCloseBtnClick = () => {
-    appNavigationController.back(this.navigationType);
+    const item = appNavigationController.findItemByType(this.navigationType);
+    if(item) {
+      appNavigationController.back(this.navigationType);
+    } else if(this.historyTabIds.length) {
+      this.closeTab(this.historyTabIds[this.historyTabIds.length - 1]);
+    }
     // this.closeTab();
   };
 
@@ -118,7 +123,7 @@ export default class SidebarSlider {
       }
 
       this.removeTabFromHistory(tab);
-      appNavigationController.removeByType(this.navigationType, true);
+      //appNavigationController.removeByType(this.navigationType, true);
     }
   }
 

src/index.hbs

@@ -81,7 +81,6 @@
             <div class="sidebar-header">
               <div class="sidebar-header__btn-container">
                 <div class="animated-menu-icon"></div>
-                <div class="btn-icon btn-menu-toggle rp sidebar-tools-button is-visible"></div>
                 <div class="btn-icon sidebar-back-button"></div>
               </div>
             </div>
@@ -93,7 +92,6 @@
                 <div class="tabs-container" id="folders-container"></div>
               </div>
               <div class="transition-item sidebar-search" id="search-container"></div>
-              <button class="btn-circle rp btn-corner tgico-newchat_filled btn-menu-toggle" id="new-menu"></button>
             </div>
           </div>
         </div>

src/pages/pageIm.ts

@@ -49,11 +49,6 @@ let onFirstMount = () => {
         alert('global.WebAssembly:' + typeof(WebAssembly)); */
     
         //(Array.from(document.getElementsByClassName('rp')) as HTMLElement[]).forEach(el => ripple(el));
-    
-        const misc = await import("../components/buttonMenuToggle");
-        Array.from(document.getElementsByClassName('btn-menu-toggle')).forEach((el) => {
-          misc.ButtonMenuToggleHandler(el as HTMLElement);
-        });
       });
     });
   });

src/pages/pagePassword.ts

@@ -17,7 +17,7 @@ import PasswordMonkey from '../components/monkeys/password';
 import RichTextProcessor from '../lib/richtextprocessor';
 import I18n from '../lib/langPack';
 import LoginPage from './loginPage';
-import { replaceContent } from '../helpers/dom';
+import { htmlToSpan, replaceContent } from '../helpers/dom';
 
 const TEST = false;
 let passwordInput: HTMLInputElement;
@@ -56,7 +56,7 @@ let onFirstMount = (): Promise<any> => {
       state = _state;
 
       if(state.hint) {
-        replaceContent(passwordInputField.label, RichTextProcessor.wrapEmojiText(state.hint));
+        replaceContent(passwordInputField.label, htmlToSpan(RichTextProcessor.wrapEmojiText(state.hint)));
       } else {
         passwordInputField.setLabel();
       }

src/scss/partials/_leftSidebar.scss

@@ -256,24 +256,28 @@
     }
   }
 
-  .sidebar-tools-button .btn-menu {
-    width: 300px;
+  .sidebar-tools-button {
+    width: 100%;
     
-    .archived-count {
-      justify-self: flex-end;
-      margin-left: .625rem;
+    .btn-menu {
+      width: 300px;
   
-      @include respond-to(handhelds) {
-        font-weight: 600;
+      .archived-count {
+        justify-self: flex-end;
+        margin-left: .625rem;
+  
+        @include respond-to(handhelds) {
+          font-weight: 600;
+        }
       }
-    }
   
-    .btn-menu-item {
-      padding-right: 1rem;
-    }
+      .btn-menu-item {
+        padding-right: 1rem;
+      }
   
-    .archived-count:empty {
-      display: none;
+      .archived-count:empty {
+        display: none;
+      }
     }
   }