Browse Source

Hide archived button

pagePassword: fix emoji on password's label
Fix broken navigation after 'Password Set' tab
master
Eduard Kuzmenko 4 years ago
parent
commit
a29de3598a
  1. 5
      src/components/buttonMenuToggle.ts
  2. 40
      src/components/sidebarLeft/index.ts
  3. 7
      src/components/slider.ts
  4. 2
      src/index.hbs
  5. 5
      src/pages/pageIm.ts
  6. 4
      src/pages/pagePassword.ts
  7. 6
      src/scss/partials/_leftSidebar.scss

5
src/components/buttonMenuToggle.ts

@ -10,7 +10,7 @@ import ButtonIcon from "./buttonIcon";
import ButtonMenu, { ButtonMenuItemOptions } from "./buttonMenu"; import ButtonMenu, { ButtonMenuItemOptions } from "./buttonMenu";
import { closeBtnMenu, openBtnMenu } from "./misc"; 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 button = ButtonIcon('more btn-menu-toggle', options);
const btnMenu = ButtonMenu(buttons, options.listenerSetter); 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 ButtonMenuToggleHandler = (el: HTMLElement, onOpen?: (e: Event) => void, options?: AttachClickOptions) => {
const add = options?.listenerSetter ? options.listenerSetter.add.bind(options.listenerSetter, el) : el.addEventListener.bind(el); 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) => { add(CLICK_EVENT_NAME, (e: Event) => {
//console.log('click pageIm'); //console.log('ButtonMenuToggleHandler click', e);
if(!el.classList.contains('btn-menu-toggle')) return false; if(!el.classList.contains('btn-menu-toggle')) return false;
//window.removeEventListener('mousemove', onMouseMove); //window.removeEventListener('mousemove', onMouseMove);

40
src/components/sidebarLeft/index.ts

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

7
src/components/slider.ts

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

2
src/index.hbs

@ -81,7 +81,6 @@
<div class="sidebar-header"> <div class="sidebar-header">
<div class="sidebar-header__btn-container"> <div class="sidebar-header__btn-container">
<div class="animated-menu-icon"></div> <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 class="btn-icon sidebar-back-button"></div>
</div> </div>
</div> </div>
@ -93,7 +92,6 @@
<div class="tabs-container" id="folders-container"></div> <div class="tabs-container" id="folders-container"></div>
</div> </div>
<div class="transition-item sidebar-search" id="search-container"></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> </div>
</div> </div>

5
src/pages/pageIm.ts

@ -49,11 +49,6 @@ let onFirstMount = () => {
alert('global.WebAssembly:' + typeof(WebAssembly)); */ alert('global.WebAssembly:' + typeof(WebAssembly)); */
//(Array.from(document.getElementsByClassName('rp')) as HTMLElement[]).forEach(el => ripple(el)); //(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);
});
}); });
}); });
}); });

4
src/pages/pagePassword.ts

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

6
src/scss/partials/_leftSidebar.scss

@ -256,7 +256,10 @@
} }
} }
.sidebar-tools-button .btn-menu { .sidebar-tools-button {
width: 100%;
.btn-menu {
width: 300px; width: 300px;
.archived-count { .archived-count {
@ -276,6 +279,7 @@
display: none; display: none;
} }
} }
}
.search-group-people { .search-group-people {
.chatlist { .chatlist {

Loading…
Cancel
Save