From d9ed7ced22d2c72759cc23c95b1f1547ef139d38 Mon Sep 17 00:00:00 2001 From: antelle Date: Tue, 1 Jun 2021 20:35:34 +0200 Subject: [PATCH] settings menu --- app/scripts/models/menu/menu-item.ts | 2 +- app/scripts/models/menu/menu.ts | 57 ++++++++++++-------- app/scripts/models/workspace.ts | 19 +++---- app/scripts/ui/footer.ts | 2 +- app/scripts/ui/menu/app-menu-item.ts | 4 +- app/scripts/ui/settings/settings.ts | 14 ++++- app/scripts/views/settings/settings-view.tsx | 22 +++++++- app/templates/settings/settings.hbs | 8 --- 8 files changed, 80 insertions(+), 48 deletions(-) delete mode 100644 app/templates/settings/settings.hbs diff --git a/app/scripts/models/menu/menu-item.ts b/app/scripts/models/menu/menu-item.ts index 05baa344..82f2ec46 100644 --- a/app/scripts/models/menu/menu-item.ts +++ b/app/scripts/models/menu/menu-item.ts @@ -34,7 +34,7 @@ class MenuItem extends Model { page?: SettingsPage; editable = false; file?: File; - section?: string; + anchor?: string; constructor(values?: InitWithFieldsOf) { super(); diff --git a/app/scripts/models/menu/menu.ts b/app/scripts/models/menu/menu.ts index f3667d1f..cb3ab01a 100644 --- a/app/scripts/models/menu/menu.ts +++ b/app/scripts/models/menu/menu.ts @@ -11,12 +11,13 @@ import { MenuItem } from './menu-item'; import { MenuOption } from './menu-option'; import { AppSettings } from 'models/app-settings'; import { KeyHandler } from 'comp/browser/key-handler'; -import { Workspace } from 'models/workspace'; +import { SettingsPage } from 'models/workspace'; type MenuType = 'app' | 'settings'; class Menu extends Model { private readonly _menus = {} as Record; + selectedItem: MenuItem; sections: MenuSection[]; @@ -50,6 +51,7 @@ class Menu extends Model { // filterKey: '*' }); this.allItemsSection = new MenuSection(this.allItemsItem); + this.selectedItem = this.allItemsItem; this.groupsSection = new MenuSection(); this.groupsSection.scrollable = true; @@ -65,7 +67,7 @@ class Menu extends Model { }); this.colorsSection = new MenuSection(this.colorsItem); - const defTagItem = this.getDefaultTagItem(); + const defTagItem = Menu.getDefaultTagItem(); this.tagsSection = new MenuSection(defTagItem); this.tagsSection.setDefaultItems(defTagItem); this.tagsSection.scrollable = true; @@ -106,44 +108,44 @@ class Menu extends Model { locTitle: 'menuSetGeneral', icon: 'cog', page: 'general', - section: 'top', + anchor: undefined, active: true }), new MenuItem({ locTitle: 'setGenAppearance', icon: '0', page: 'general', - section: 'appearance' + anchor: 'appearance' }), new MenuItem({ locTitle: 'setGenFunction', icon: '0', page: 'general', - section: 'function' + anchor: 'function' }), new MenuItem({ locTitle: 'setGenAudit', icon: '0', page: 'general', - section: 'audit' + anchor: 'audit' }), new MenuItem({ locTitle: 'setGenLock', icon: '0', page: 'general', - section: 'lock' + anchor: 'lock' }), new MenuItem({ locTitle: 'setGenStorage', icon: '0', page: 'general', - section: 'storage' + anchor: 'storage' }), new MenuItem({ locTitle: 'advanced', icon: '0', page: 'general', - section: 'advanced' + anchor: 'advanced' }) ); @@ -210,27 +212,40 @@ class Menu extends Model { this.setLocale(); } - select(sel: { item: MenuItem; option?: MenuOption }): void { + select(item: MenuItem, option?: MenuOption): void { const sections = this.sections; for (const it of this.allItems()) { - it.active = it === sel.item; + it.active = it === item; + if (it.active) { + this.selectedItem = it; + } } if (sections === this._menus.app) { this.colorsItem.options?.forEach((opt) => { - opt.active = opt === sel.option; + opt.active = opt === option; }); this.colorsItem.iconCls = - sel.item === this.colorsItem && sel.option - ? `${sel.option.value}-color` - : undefined; + item === this.colorsItem && option ? `${option.value}-color` : undefined; // TODO: set the filter // const filterKey = sel.item.filterKey; // const filterValue = (sel.option || sel.item).filterValue; // const filter = {}; // filter[filterKey] = filterValue; // Events.emit('set-filter', filter); - } else if (sections === this._menus.settings && sel.item.page) { - Workspace.showSettings(sel.item.page, sel.item.file?.id); + } else if (sections === this._menus.settings && item.page) { + // Workspace.showSettings(sel.item.page, sel.item.file?.id); + } + } + + selectSettingsPage(page: SettingsPage, anchor?: string, fileId?: string): void { + for (const section of this._menus.settings) { + for (const it of section.items) { + it.active = + it.page === page && anchor === it.anchor && (!fileId || fileId === it.file?.id); + if (it.active) { + this.selectedItem = it; + } + } } } @@ -269,7 +284,7 @@ class Menu extends Model { for (const item of this.visibleItems()) { if (item.active && previousItem) { - this.select({ item: previousItem }); + this.select(previousItem); return; } previousItem = item; @@ -283,7 +298,7 @@ class Menu extends Model { if (item.active) { activeItem = item; } else if (activeItem) { - this.select({ item }); + this.select(item); return; } } @@ -299,10 +314,10 @@ class Menu extends Model { } } } - this.tagsSection?.setDefaultItems(this.getDefaultTagItem()); + this.tagsSection?.setDefaultItems(Menu.getDefaultTagItem()); } - private getDefaultTagItem(): MenuItem { + private static getDefaultTagItem(): MenuItem { return new MenuItem({ title: StringFormat.capFirst(Locale.tags), icon: 'tags', diff --git a/app/scripts/models/workspace.ts b/app/scripts/models/workspace.ts index 0ba02642..308b85a3 100644 --- a/app/scripts/models/workspace.ts +++ b/app/scripts/models/workspace.ts @@ -27,8 +27,6 @@ class Workspace extends Model { readonly menu = new Menu(); readonly query = new Query(); mode: WorkspaceMode = 'open'; - settingsPage: SettingsPage = 'general'; - settingsFileId?: string; tags: string[] = []; activeEntryId?: string; unlockMessage?: string; @@ -86,7 +84,7 @@ class Workspace extends Model { } selectShowAllMenuItem(): void { - this.menu.select({ item: this.menu.allItemsItem }); + this.menu.select(this.menu.allItemsItem); } renameTag(from: string, to: string): void { @@ -123,11 +121,11 @@ class Workspace extends Model { } } - toggleSettings(page?: SettingsPage, fileId?: string): void { + toggleSettings(page?: SettingsPage, anchor?: string, fileId?: string): void { if (this.mode === 'settings') { if ( - (!page || this.settingsPage === page) && - (!fileId || this.settingsFileId === fileId) + (!page || this.menu.selectedItem.page === page) && + (!page || !fileId || this.menu.selectedItem.file?.id === fileId) ) { if (FileManager.hasOpenFiles) { this.showList(); @@ -135,10 +133,10 @@ class Workspace extends Model { this.showOpen(); } } else { - this.showSettings(page, fileId); + this.showSettings(page, anchor, fileId); } } else { - this.showSettings(page, fileId); + this.showSettings(page, anchor, fileId); } } @@ -153,10 +151,9 @@ class Workspace extends Model { this.mode = 'open'; } - showSettings(page: SettingsPage = 'general', fileId?: string): void { - this.settingsPage = page; - this.settingsFileId = fileId; + showSettings(page: SettingsPage = 'general', anchor?: string, fileId?: string): void { this.mode = 'settings'; + this.menu.selectSettingsPage(page, anchor, fileId); } modeChanged(mode: WorkspaceMode, prevMode: WorkspaceMode) { diff --git a/app/scripts/ui/footer.ts b/app/scripts/ui/footer.ts index 8c4c0006..41f535c2 100644 --- a/app/scripts/ui/footer.ts +++ b/app/scripts/ui/footer.ts @@ -15,7 +15,7 @@ export const Footer: FunctionComponent = () => { const updateAvailable = updateStatus === 'ready' || updateStatus === 'found'; - const fileClicked = (id: string) => Workspace.toggleSettings('file', id); + const fileClicked = (fileId: string) => Workspace.toggleSettings('file', undefined, fileId); const openClicked = () => Workspace.toggleOpen(); diff --git a/app/scripts/ui/menu/app-menu-item.ts b/app/scripts/ui/menu/app-menu-item.ts index 2b404d7b..2dabb79b 100644 --- a/app/scripts/ui/menu/app-menu-item.ts +++ b/app/scripts/ui/menu/app-menu-item.ts @@ -23,7 +23,7 @@ export const AppMenuItem: FunctionComponent<{ item: MenuItem }> = ({ item }) => Alerts.info(item.disabledAlert); } } else { - Workspace.menu.select({ item }); + Workspace.menu.select(item); } }; @@ -47,7 +47,7 @@ export const AppMenuItem: FunctionComponent<{ item: MenuItem }> = ({ item }) => }; const optionClicked = (option: MenuOption) => { - Workspace.menu.select({ item, option }); + Workspace.menu.select(item, option); }; const actionClicked = () => { diff --git a/app/scripts/ui/settings/settings.ts b/app/scripts/ui/settings/settings.ts index 616a01f6..c3c67d34 100644 --- a/app/scripts/ui/settings/settings.ts +++ b/app/scripts/ui/settings/settings.ts @@ -5,10 +5,20 @@ import { Workspace } from 'models/workspace'; import { Keys } from 'const/keys'; export const Settings: FunctionComponent = () => { - const page = useModelField(Workspace, 'settingsPage'); + const selectedMenuItem = useModelField(Workspace.menu, 'selectedItem'); useKey(Keys.DOM_VK_ESCAPE, () => { Workspace.toggleSettings(); }); - return h(SettingsView, { page }); + const backClicked = () => { + Workspace.toggleSettings(); + }; + + return h(SettingsView, { + page: selectedMenuItem.page ?? 'general', + anchor: selectedMenuItem.anchor, + fileId: selectedMenuItem.file?.id, + + backClicked + }); }; diff --git a/app/scripts/views/settings/settings-view.tsx b/app/scripts/views/settings/settings-view.tsx index 7e98fe9f..8230395c 100644 --- a/app/scripts/views/settings/settings-view.tsx +++ b/app/scripts/views/settings/settings-view.tsx @@ -1,8 +1,26 @@ import { FunctionComponent } from 'preact'; import { SettingsPage } from 'models/workspace'; +import { Scrollable } from 'views/components/scrollable'; +import { Locale } from 'util/locale'; export const SettingsView: FunctionComponent<{ page: SettingsPage; -}> = ({ page }) => { - return
{page}
; + anchor?: string; + fileId?: string; + + backClicked: () => void; +}> = ({ page, anchor, fileId, backClicked }) => { + return ( +
+
+ + {Locale.retToApp} +
+ +

page: {page}

+

anchor: {anchor}

+

file: {fileId}

+ +
+ ); }; diff --git a/app/templates/settings/settings.hbs b/app/templates/settings/settings.hbs deleted file mode 100644 index 335eefaf..00000000 --- a/app/templates/settings/settings.hbs +++ /dev/null @@ -1,8 +0,0 @@ -
-
- {{res 'retToApp'}} -
-
-
-
-