keeweb/keeweb
1
0
Fork 0
mirror of https://github.com/keeweb/keeweb.git synced 2024-06-25 07:37:46 +02:00
Code Issues Releases Wiki Activity

settings menu

Browse Source
This commit is contained in:
antelle 2021-06-01 20:35:34 +02:00
parent 61a78107c4
commit d9ed7ced22
No known key found for this signature in database
GPG Key ID: 63C9777AAB7C563C
8 changed files with 80 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/scripts/models/menu/menu-item.ts
View File

@ -34,7 +34,7 @@ class MenuItem extends Model {
page?: SettingsPage;
editable = false;
file?: File;
section?: string;
anchor?: string;
constructor(values?: InitWithFieldsOf<MenuItem>) {
super();

57
app/scripts/models/menu/menu.ts
View File

@ -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<MenuType, MenuSection[]>;
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',

19
app/scripts/models/workspace.ts
View File

@ -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) {

2
app/scripts/ui/footer.ts
View File

@ -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();

4
app/scripts/ui/menu/app-menu-item.ts
View File

@ -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 = () => {

14
app/scripts/ui/settings/settings.ts
View File

@ -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
});
};

22
app/scripts/views/settings/settings-view.tsx
View File

@ -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 <div class="settings">{page}</div>;
anchor?: string;
fileId?: string;
backClicked: () => void;
}> = ({ page, anchor, fileId, backClicked }) => {
return (
<div class="settings">
<div class="settings__back-button" onClick={backClicked}>
<i class="fa fa-chevron-left settings__back-button-pre" />
{Locale.retToApp} <i class="fa fa-arrow-circle-left settings__back-button-post" />
</div>
<Scrollable>
<p>page: {page}</p>
<p>anchor: {anchor}</p>
<p>file: {fileId}</p>
</Scrollable>
</div>
);
};

8
app/templates/settings/settings.hbs
View File

@ -1,8 +0,0 @@
<div class="settings">
<div class="settings__back-button">
<i class="fa fa-chevron-left settings__back-button-pre"></i>{{res 'retToApp'}} <i class="fa fa-arrow-circle-left settings__back-button-post"></i>
</div>
<div class="scroller">
</div>
<div class="scroller__bar-wrapper"><div class="scroller__bar"></div></div>
</div>