diff --git a/src/components/appNavigationController.ts b/src/components/appNavigationController.ts index d0ee48be..c2b7c0fd 100644 --- a/src/components/appNavigationController.ts +++ b/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 = []; 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(); diff --git a/src/components/chat/topbar.ts b/src/components/chat/topbar.ts index ce6146e7..60a2a0c6 100644 --- a/src/components/chat/topbar.ts +++ b/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}); } diff --git a/src/components/misc.ts b/src/components/misc.ts index a727ae29..5c3cf6a7 100644 --- a/src/components/misc.ts +++ b/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}); } diff --git a/src/components/popups/datePicker.ts b/src/components/popups/datePicker.ts index a9ca1bfa..dcf6a08e 100644 --- a/src/components/popups/datePicker.ts +++ b/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'); diff --git a/src/components/popups/index.ts b/src/components/popups/index.ts index ebe122cc..512079de 100644 --- a/src/components/popups/index.ts +++ b/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 = () => { diff --git a/src/components/ripple.ts b/src/components/ripple.ts index 235e0cfa..55f65926 100644 --- a/src/components/ripple.ts +++ b/src/components/ripple.ts @@ -168,6 +168,10 @@ export function ripple(elem: HTMLElement, callback: (id: number) => Promise { + if(![0, 2].includes(e.button)) { // only left and right buttons + return; + } + if(!rootScope.settings.animationsEnabled) { return; } diff --git a/src/components/sidebarLeft/index.ts b/src/components/sidebarLeft/index.ts index 4dca30ab..9d7f9b51 100644 --- a/src/components/sidebarLeft/index.ts +++ b/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); diff --git a/src/components/sidebarLeft/tabs/editFolder.ts b/src/components/sidebarLeft/tabs/editFolder.ts index 5f16cad3..aee48fbd 100644 --- a/src/components/sidebarLeft/tabs/editFolder.ts +++ b/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 }, { diff --git a/src/components/slider.ts b/src/components/slider.ts index 432e1e3f..03cfa23b 100644 --- a/src/components/slider.ts +++ b/src/components/slider.ts @@ -114,7 +114,7 @@ export default class SidebarSlider { } private onCloseBtnClick = () => { - appNavigationController.back(); + appNavigationController.back(this.navigationType); // this.closeTab(); }; diff --git a/src/helpers/dom.ts b/src/helpers/dom.ts index a6f569bf..4a805c11 100644 --- a/src/helpers/dom.ts +++ b/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')); }); } diff --git a/src/helpers/schedulers.ts b/src/helpers/schedulers.ts index 0edc5d7b..b3c75731 100644 --- a/src/helpers/schedulers.ts +++ b/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); diff --git a/src/index.hbs b/src/index.hbs index 07321ac7..e4c655e1 100644 --- a/src/index.hbs +++ b/src/index.hbs @@ -99,7 +99,7 @@
-
+
New Group
Contacts
diff --git a/src/lib/appManagers/appImManager.ts b/src/lib/appManagers/appImManager.ts index 3394b868..d30d16dd 100644 --- a/src/lib/appManagers/appImManager.ts +++ b/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 = superRaf(); + let animationPromise: Promise = 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); diff --git a/src/scss/mixins/_hover.scss b/src/scss/mixins/_hover.scss index 28a8f317..fd577f45 100644 --- a/src/scss/mixins/_hover.scss +++ b/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; } -} \ No newline at end of file +} + +@mixin btn-hoverable { + @include hover-background-effect(); + + &.primary, &.blue, &.active { + @include hover-background-effect(primary); + } + + &.danger { + @include hover-background-effect(red); + } +} diff --git a/src/scss/partials/_button.scss b/src/scss/partials/_button.scss index 0295b02c..b47c8427 100644 --- a/src/scss/partials/_button.scss +++ b/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; } -} \ No newline at end of file +} + +.btn, .btn-icon { + background: none; + outline: none; + border: none; + cursor: pointer; + + body.animation-level-0 & { + transition: none; + } + + @include btn-hoverable(); +} diff --git a/src/scss/partials/_chat.scss b/src/scss/partials/_chat.scss index 700cb3dc..b5396cd8 100644 --- a/src/scss/partials/_chat.scss +++ b/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 { diff --git a/src/scss/partials/_leftSidebar.scss b/src/scss/partials/_leftSidebar.scss index 4cadac1f..c5209b6d 100644 --- a/src/scss/partials/_leftSidebar.scss +++ b/src/scss/partials/_leftSidebar.scss @@ -223,7 +223,7 @@ transition: none; } - &.active { + &.is-visible { //margin-top: 1px; opacity: 1; visibility: visible; diff --git a/src/scss/partials/_ripple.scss b/src/scss/partials/_ripple.scss index f2b4300d..ef5ebbf1 100644 --- a/src/scss/partials/_ripple.scss +++ b/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 & { diff --git a/src/scss/partials/_slider.scss b/src/scss/partials/_slider.scss index 664227f0..d5413ed4 100644 --- a/src/scss/partials/_slider.scss +++ b/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; diff --git a/src/scss/partials/popups/_datePicker.scss b/src/scss/partials/popups/_datePicker.scss index dc09038c..7b5269b8 100644 --- a/src/scss/partials/popups/_datePicker.scss +++ b/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; } } } diff --git a/src/scss/partials/popups/_popup.scss b/src/scss/partials/popups/_popup.scss index 6427277d..eacfd9d2 100644 --- a/src/scss/partials/popups/_popup.scss +++ b/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); - } } } diff --git a/src/scss/style.scss b/src/scss/style.scss index d3346d20..2de3bccc 100644 --- a/src/scss/style.scss +++ b/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 {