diff --git a/src/components/buttonMenuToggle.ts b/src/components/buttonMenuToggle.ts
index 49177881..37066357 100644
--- a/src/components/buttonMenuToggle.ts
+++ b/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);
diff --git a/src/components/sidebarLeft/index.ts b/src/components/sidebarLeft/index.ts
index 6ebfc6a2..06e66291 100644
--- a/src/components/sidebarLeft/index.ts
+++ b/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});
diff --git a/src/components/slider.ts b/src/components/slider.ts
index 4814b86e..087afd4b 100644
--- a/src/components/slider.ts
+++ b/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);
}
}
diff --git a/src/index.hbs b/src/index.hbs
index 16fdc1cb..3d600568 100644
--- a/src/index.hbs
+++ b/src/index.hbs
@@ -81,7 +81,6 @@
@@ -93,7 +92,6 @@
-
diff --git a/src/pages/pageIm.ts b/src/pages/pageIm.ts
index 3d694f29..1dbdcdff 100644
--- a/src/pages/pageIm.ts
+++ b/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);
- });
});
});
});
diff --git a/src/pages/pagePassword.ts b/src/pages/pagePassword.ts
index c5871760..942f84b5 100644
--- a/src/pages/pagePassword.ts
+++ b/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 => {
state = _state;
if(state.hint) {
- replaceContent(passwordInputField.label, RichTextProcessor.wrapEmojiText(state.hint));
+ replaceContent(passwordInputField.label, htmlToSpan(RichTextProcessor.wrapEmojiText(state.hint)));
} else {
passwordInputField.setLabel();
}
diff --git a/src/scss/partials/_leftSidebar.scss b/src/scss/partials/_leftSidebar.scss
index 3e960c1d..b5971d5e 100644
--- a/src/scss/partials/_leftSidebar.scss
+++ b/src/scss/partials/_leftSidebar.scss
@@ -256,24 +256,28 @@
}
}
- .sidebar-tools-button .btn-menu {
- width: 300px;
-
- .archived-count {
- justify-self: flex-end;
- margin-left: .625rem;
-
- @include respond-to(handhelds) {
- font-weight: 600;
+ .sidebar-tools-button {
+ width: 100%;
+
+ .btn-menu {
+ width: 300px;
+
+ .archived-count {
+ justify-self: flex-end;
+ margin-left: .625rem;
+
+ @include respond-to(handhelds) {
+ font-weight: 600;
+ }
+ }
+
+ .btn-menu-item {
+ padding-right: 1rem;
+ }
+
+ .archived-count:empty {
+ display: none;
}
- }
-
- .btn-menu-item {
- padding-right: 1rem;
- }
-
- .archived-count:empty {
- display: none;
}
}