Improve navigation controller

Change gray hovers on blue buttons

src/components/appNavigationController.ts

@@ -1,6 +1,8 @@
 import { MOUNT_CLASS_TO } from "../config/debug";
-import { isSafari, isAppleMobile } from "../helpers/userAgent";
+import { isMobileSafari } from "../helpers/userAgent";
 import { cancelEvent } from "../helpers/dom";
+import { logger } from "../lib/logger";
+import { doubleRaf } from "../helpers/schedulers";
 
 export type NavigationItem = {
   type: 'left' | 'right' | 'im' | 'chat' | 'popup' | 'media' | 'menu' | 'esg',
@@ -12,10 +14,14 @@ export type NavigationItem = {
 export class AppNavigationController {
   private navigations: Array<NavigationItem> = [];
   private id = Date.now();
+  private manual = false;
+  private log = logger('NC');
+  private debug = true;
 
   constructor() {
+    let isPossibleSwipe = false;
     window.addEventListener('popstate', (e) => {
-      console.log('popstate', e);
+      this.debug && this.log('popstate', e, isPossibleSwipe);
 
       const id: number = e.state;
       if(id !== this.id) {
@@ -29,12 +35,8 @@ export class AppNavigationController {
         return;
       }
 
-      const good = item.onPop(isSafari && isAppleMobile ? false : undefined);
-      console.log('[NC]: popstate, navigation:', item, this.navigations);
-      if(good === false) {
-        this.pushItem(item);
-      }
-
+      this.manual = !isPossibleSwipe;
+      this.handleItem(item);
       //this.pushState(); // * prevent adding forward arrow
     });
 
@@ -47,16 +49,62 @@ export class AppNavigationController {
       }
     }, {capture: true});
 
+    if(isMobileSafari) {
+      /* window.addEventListener('touchstart', (e) => {
+        this.debug && this.log('touchstart');
+      }, {passive: true}); */
+  
+      window.addEventListener('touchend', (e) => {
+        this.debug && this.log('touchend');
+        if(e.touches.length > 1) return;
+        isPossibleSwipe = true;
+        doubleRaf().then(() => {
+          isPossibleSwipe = false;
+        });
+      }, {passive: true});
+    }
+
     this.pushState(); // * push init state
   }
 
-  public back() {
+  private handleItem(item: NavigationItem) {
+    const good = item.onPop(!this.manual ? false : undefined);
+    this.debug && this.log('popstate, navigation:', item, this.navigations);
+    if(good === false) {
+      this.pushItem(item);
+    }
+
+    this.manual = false;
+  }
+
+  public back(type?: NavigationItem['type']) {
+    if(type) {
+      let item: NavigationItem;
+      let i = this.navigations.length - 1;
+      for(; i >= 0; --i) {
+        const _item = this.navigations[i];
+        if(_item.type === type) {
+          item = _item;
+          break;
+        }
+      }
+
+      if(item) {
+        this.manual = true;
+        if(i !== (this.navigations.length - 1)) {
+          this.navigations.splice(i, 1);
+          this.handleItem(item);
+          return;
+        }
+      }
+    }
+
     history.back();
   }
 
   public pushItem(item: NavigationItem) {
     this.navigations.push(item);
-    console.log('[NC]: pushstate', item, this.navigations);
+    this.debug && this.log('pushstate', item, this.navigations);
 
     if(!item.noHistory) {
       this.pushState();
@@ -64,6 +112,7 @@ export class AppNavigationController {
   }
 
   private pushState() {
+    this.manual = false;
     history.pushState(this.id, '');
   }
 
@@ -74,6 +123,19 @@ export class AppNavigationController {
   public removeItem(item: NavigationItem) {
     this.navigations.findAndSplice(i => i === item);
   }
+
+  public removeByType(type: NavigationItem['type'], single = false) {
+    for(let i = this.navigations.length - 1; i >= 0; --i) {
+      const item = this.navigations[i];
+      if(item.type === type) {
+        this.navigations.splice(i, 1);
+
+        if(single) {
+          break;
+        }
+      }
+    }
+  }
 }
 
 const appNavigationController = new AppNavigationController();

src/components/chat/topbar.ts

@@ -144,7 +144,7 @@ export default class ChatTopbar {
       cancelEvent(e);
       /* this.chat.appImManager.setPeer(0);
       blurActiveElement(); */
-      appNavigationController.back();
+      appNavigationController.back('chat');
     }, {listenerSetter: this.listenerSetter});
   }
 

src/components/misc.ts

@@ -4,7 +4,8 @@ import { cancelEvent, CLICK_EVENT_NAME } from "../helpers/dom";
 import ListenerSetter from "../helpers/listenerSetter";
 import mediaSizes from "../helpers/mediaSizes";
 import { isTouchSupported } from "../helpers/touchSupport";
-import { isApple } from "../helpers/userAgent";
+import { isApple, isMobileSafari } from "../helpers/userAgent";
+import appNavigationController from "./appNavigationController";
 
 export const loadedURLs: {[url: string]: boolean} = {};
 const set = (elem: HTMLElement | HTMLImageElement | SVGImageElement | HTMLVideoElement, url: string) => {
@@ -136,12 +137,13 @@ const onClick = (e: MouseEvent | TouchEvent) => {
   closeBtnMenu();
 };
 
-const onKeyDown = (e: KeyboardEvent) => {
+// ! no need in this due to the same handler in appNavigationController
+/* const onKeyDown = (e: KeyboardEvent) => {
   if(e.key === 'Escape') {
     closeBtnMenu();
     cancelEvent(e);
   }
-};
+}; */
 
 export const closeBtnMenu = () => {
   if(openedMenu) {
@@ -159,11 +161,15 @@ export const closeBtnMenu = () => {
 
   if(!isTouchSupported) {
     window.removeEventListener('mousemove', onMouseMove);
-    window.removeEventListener('keydown', onKeyDown, {capture: true});
+    //window.removeEventListener('keydown', onKeyDown, {capture: true});
     window.removeEventListener('contextmenu', onClick);
   }
 
   document.removeEventListener(CLICK_EVENT_NAME, onClick);
+
+  if(!isMobileSafari) {
+    appNavigationController.removeByType('menu');
+  }
 };
 
 window.addEventListener('resize', () => {
@@ -182,6 +188,15 @@ window.addEventListener('resize', () => {
 let openedMenu: HTMLElement = null, openedMenuOnClose: () => void = null, menuOverlay: HTMLElement = null;
 export function openBtnMenu(menuElement: HTMLElement, onClose?: () => void) {
   closeBtnMenu();
+
+  if(!isMobileSafari) {
+    appNavigationController.pushItem({
+      type: 'menu',
+      onPop: (canAnimate) => {
+        closeBtnMenu();
+      }
+    });
+  }
   
   openedMenu = menuElement;
   openedMenu.classList.add('active');
@@ -206,7 +221,7 @@ export function openBtnMenu(menuElement: HTMLElement, onClose?: () => void) {
 
   if(!isTouchSupported) {
     window.addEventListener('mousemove', onMouseMove);
-    window.addEventListener('keydown', onKeyDown, {capture: true});
+    //window.addEventListener('keydown', onKeyDown, {capture: true});
     window.addEventListener('contextmenu', onClick, {once: true});
   }
 

src/components/popups/datePicker.ts

@@ -145,6 +145,9 @@ export default class PopupDatePicker extends PopupElement {
       }, {once: true});
 
       this.body.append(this.timeDiv);
+
+      this.prevBtn.classList.add('primary');
+      this.nextBtn.classList.add('primary');
     }
 
     const popupCenterer = document.createElement('div');

src/components/popups/index.ts

@@ -75,9 +75,9 @@ export default class PopupElement {
   
       const buttonsElements = buttons.map(b => {
         const button = document.createElement('button');
-        button.className = 'btn' + (b.isDanger ? ' danger' : '');
+        button.className = 'btn' + (b.isDanger ? ' danger' : ' primary');
         button.innerHTML =  b.text;
-        //ripple(button);
+        ripple(button);
   
         if(b.callback) {
           button.addEventListener('click', () => {
@@ -118,7 +118,7 @@ export default class PopupElement {
   }
 
   public hide = () => {
-    appNavigationController.back();
+    appNavigationController.back('popup');
   };
 
   private destroy = () => {

src/components/ripple.ts

@@ -168,6 +168,10 @@ export function ripple(elem: HTMLElement, callback: (id: number) => Promise<bool
     }, {passive: true});
   } else {
     elem.addEventListener('mousedown', (e) => {
+      if(![0, 2].includes(e.button)) { // only left and right buttons
+        return;
+      }
+
       if(!rootScope.settings.animationsEnabled) {
         return;
       }

src/components/sidebarLeft/index.ts

@@ -417,9 +417,10 @@ export class AppSidebarLeft extends SidebarSlider {
 
     transition(0);
 
+    const activeClassName = 'is-visible';
     const onFocus = () => {
-      this.toolsBtn.classList.remove('active');
-      this.backBtn.classList.add('active');
+      this.toolsBtn.classList.remove(activeClassName);
+      this.backBtn.classList.add(activeClassName);
       this.newBtnMenu.classList.add('is-hidden');
       this.toolsBtn.parentElement.firstElementChild.classList.toggle('state-back', true);
 
@@ -430,8 +431,8 @@ export class AppSidebarLeft extends SidebarSlider {
     onFocus();
 
     this.backBtn.addEventListener('click', (e) => {
-      this.toolsBtn.classList.add('active');
-      this.backBtn.classList.remove('active');
+      this.toolsBtn.classList.add(activeClassName);
+      this.backBtn.classList.remove(activeClassName);
       this.toolsBtn.parentElement.firstElementChild.classList.toggle('state-back', false);
 
       transition(0);

src/components/sidebarLeft/tabs/editFolder.ts

@@ -90,7 +90,7 @@ export default class AppEditFolderTab extends SliderSuperTab {
       categories.classList.add('folder-categories');
 
       buttons.forEach(o => {
-        const button = Button('folder-category-button btn-primary btn-transparent', {
+        const button = Button('folder-category-button btn btn-primary btn-transparent', {
           icon: o.icon,
           text: o.text,
           noRipple: o.withRipple ? undefined : true,
@@ -110,7 +110,7 @@ export default class AppEditFolderTab extends SliderSuperTab {
     };
 
     this.include_peers = generateList('folder-list-included', 'Included chats', [{
-      icon: 'add blue',
+      icon: 'add primary',
       text: 'Add Chats',
       withRipple: true
     }, {
@@ -136,7 +136,7 @@ export default class AppEditFolderTab extends SliderSuperTab {
     }], this.flags);
 
     this.exclude_peers = generateList('folder-list-excluded', 'Excluded chats', [{
-      icon: 'minus blue',
+      icon: 'minus primary',
       text: 'Remove Chats',
       withRipple: true
     }, {

src/components/slider.ts

@@ -114,7 +114,7 @@ export default class SidebarSlider {
   }
 
   private onCloseBtnClick = () => {
-    appNavigationController.back();
+    appNavigationController.back(this.navigationType);
     // this.closeTab();
   };
 

src/helpers/dom.ts

@@ -5,7 +5,7 @@ import { isTouchSupported } from "./touchSupport";
 import { isApple } from "./userAgent";
 import rootScope from "../lib/rootScope";
 import { MOUNT_CLASS_TO } from "../config/debug";
-import { superRaf } from "./schedulers";
+import { doubleRaf } from "./schedulers";
 
 /* export function isInDOM(element: Element, parentNode?: HTMLElement): boolean {
   if(!element) {
@@ -780,7 +780,7 @@ export function isSelectionEmpty(selection = window.getSelection()) {
 export function disableTransition(elements: HTMLElement[]) {
   elements.forEach(el => el.classList.add('no-transition'));
 
-  superRaf().then(() => {
+  doubleRaf().then(() => {
     elements.forEach(el => el.classList.remove('no-transition'));
   });
 }

src/helpers/schedulers.ts

@@ -124,7 +124,7 @@ export function fastRaf(callback: NoneToVoidFunction) {
   }
 }
 
-export function superRaf() {
+export function doubleRaf() {
   return new Promise((resolve) => {
     window.requestAnimationFrame(() => {
       window.requestAnimationFrame(resolve);

src/index.hbs

@@ -99,7 +99,7 @@
             <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 active">
+                <div class="btn-icon btn-menu-toggle rp sidebar-tools-button is-visible">
                   <div class="btn-menu bottom-right">
                     <div class="btn-menu-item menu-newGroup tgico-newgroup rp">New Group</div>
                     <div class="btn-menu-item menu-contacts tgico-user rp">Contacts</div>

src/lib/appManagers/appImManager.ts

@@ -26,7 +26,7 @@ import { isTouchSupported } from '../../helpers/touchSupport';
 import appPollsManager from './appPollsManager';
 import SetTransition from '../../components/singleTransition';
 import ChatDragAndDrop from '../../components/chat/dragAndDrop';
-import { debounce, pause, superRaf } from '../../helpers/schedulers';
+import { debounce, pause, doubleRaf } from '../../helpers/schedulers';
 import lottieLoader from '../lottieLoader';
 import useHeavyAnimationCheck, { dispatchHeavyAnimationEvent } from '../../hooks/useHeavyAnimationCheck';
 import appDraftsManager from './appDraftsManager';
@@ -545,7 +545,7 @@ export class AppImManager {
 
     this.log('selectTab', id, prevTabId);
 
-    let animationPromise: Promise<any> = superRaf();
+    let animationPromise: Promise<any> = doubleRaf();
     if(prevTabId !== -1 && prevTabId !== id && rootScope.settings.animationsEnabled && animate !== false) {
       const transitionTime = (mediaSizes.isMobile ? 250 : 200) + 100; // * cause transition time could be > 250ms
       animationPromise = pause(transitionTime);

src/scss/mixins/_hover.scss

@@ -2,7 +2,7 @@
   @if $color {
     @if $color == gray {
       $color: var(--color-gray-hover);
-    } @else if $color == blue {
+    } @else if $color == blue or $color == primary {
       $color: var(--color-blue-hover);
     } @else if $color == red {
       $color: var(--color-red-hover);
@@ -33,4 +33,16 @@
   @include hover($color, background-color, $use-transition) {
     @content;
   }
-}
+}
+
+@mixin btn-hoverable {
+  @include hover-background-effect();
+  
+  &.primary, &.blue, &.active {
+    @include hover-background-effect(primary);
+  }
+  
+  &.danger {
+    @include hover-background-effect(red);
+  }
+}

src/scss/partials/_button.scss

@@ -3,29 +3,22 @@
   font-size: 1.5rem;
   line-height: 1;
   border-radius: 50% !important;
-  transition: background-color .15s ease-in-out, opacity .15s ease-in-out;
   color: $color-gray;
-  cursor: pointer;
   background-color: transparent;
   border: none;
   padding: .5rem;
   position: relative;
   overflow: hidden;
+  transition: color .15s ease-in-out, opacity .15s ease-in-out, background-color .15s ease-in-out;
   
   /* kostil */
   display: flex;
   align-items: center;
   justify-content: center;
 
-  body.animation-level-0 & {
-    transition: none;
-  }
-
   &.active {
     color: $color-blue;
   }
-  
-  @include hover-background-effect();
 
   &:disabled {
     color: #cacaca;
@@ -164,6 +157,10 @@
 
     @include hover-background-effect();
 
+    &.danger {
+      @include hover-background-effect(red);
+    }
+
     &:before {
       color: $color-gray;
       font-size: 1.5rem;
@@ -323,4 +320,17 @@
   &:before {
     color: inherit !important;
   }
-}
+}
+
+.btn, .btn-icon {
+  background: none;
+	outline: none;
+  border: none;
+  cursor: pointer;
+
+  body.animation-level-0 & {
+    transition: none;
+  }
+
+  @include btn-hoverable();
+}

src/scss/partials/_chat.scss

@@ -749,7 +749,7 @@ $chat-helper-size: 39px;
 	.attach-file {
 		&.menu-open {
 			color: $color-blue;
-			background-color: transparent;
+			background-color: hover-color($color-blue) !important;
 		}
 
 		.btn-menu {

src/scss/partials/_leftSidebar.scss

@@ -223,7 +223,7 @@
         transition: none;
       }
 
-      &.active {
+      &.is-visible {
         //margin-top: 1px;
         opacity: 1;
         visibility: visible;

src/scss/partials/_ripple.scss

@@ -49,7 +49,7 @@
     border-radius: 50%;
     animation: ripple-effect .7s forwards;
     //animation-timing-function: ease-out;
-    transition: .35s opacity;
+    transition: .35s opacity, .35s background-color;
     //overflow: hidden;
 
     .btn-menu &, .c-ripple.is-square & {

src/scss/partials/_slider.scss

@@ -28,18 +28,16 @@
     border-top-right-radius: 6px;
     transition: none !important;
 
-    @include hover() {
-      background-color: transparent;
+    @include hover-background-effect();
 
-      &:hover {
-        background-color: var(--color-gray-hover);
+    &.active {
+      .c-ripple__circle {
+        background-color: var(--color-blue-hover);
       }
+  
+      @include hover-background-effect(primary);
     }
 
-    /* html.no-touch body:not(.animation-level-0) & {
-      transition: background-color .15s ease-in-out;
-    } */
-    
     > span {
       position: relative;
       display: inline-flex;

src/scss/partials/popups/_datePicker.scss

@@ -109,7 +109,7 @@
       .btn-icon.active {
         color: #fff;
         border-radius: 50%;
-        background-color: $color-blue;
+        background-color: $color-blue !important;
       }
     }
   }

src/scss/partials/popups/_popup.scss

@@ -115,27 +115,16 @@
     }
 		
 		.btn {
-			background: none;
-			outline: none;
-      border: none;
       font-weight: 500;
 			padding: .5rem;
 			text-transform: uppercase;
 			border-radius: $border-radius;
-			cursor: pointer;
-      color: $color-blue;
       position: relative;
       overflow: hidden;
       max-width: 100%;
       white-space: nowrap;
       text-overflow: ellipsis;
 
-      body.animation-level-0 & {
-        transition: none;
-      }
-			
-      @include hover-background-effect(blue);
-			
 			& + .btn {
         margin-top: .5rem;
         text-overflow: ellipsis;
@@ -143,10 +132,6 @@
         max-width: 286px;
         overflow: hidden;
 			}
-
-      &.danger {
-        @include hover-background-effect(red);
-      }
 		}
   }
   

src/scss/style.scss

@@ -356,12 +356,24 @@ input, textarea {
   line-height: 1.35;
 }
 
-.danger, .danger:before {
+.danger {
   color: $color-error!important;
+
+  .c-ripple__circle {
+    background-color: var(--color-red-hover);
+  }
 }
 
-.blue, .blue:before {
+.blue, .primary {
   color: $color-blue!important;
+
+  .c-ripple__circle {
+    background-color: var(--color-blue-hover);
+  }
+}
+
+.blue:before, .primary:before, .danger:before {
+  color: inherit !important;
 }
 
 .bg-warning {