Make menu footer customizable
This commit is contained in:
Martin Kleinschrodt
parent
80ef149559
commit
c5a8ec303c
|
|
@ -187,6 +187,12 @@ body {
|
|||
--menu-item-selected-background: var(--color-highlight-bg);
|
||||
--menu-item-selected-color: var(--color-highlight-dark);
|
||||
--menu-item-selected-weight: 600;
|
||||
--menu-footer-border: none;
|
||||
--menu-footer-button-padding: --button-padding-slim;
|
||||
--menu-footer-button-width: auto;
|
||||
--menu-footer-button-color: var(--button-color);
|
||||
--menu-footer-button-icon-size: initial;
|
||||
--menu-footer-button-label-size: 0;
|
||||
|
||||
/* VAULT ITEMS LIST */
|
||||
|
||||
|
|
|
|||
|
|
@ -188,8 +188,8 @@ export class Button extends LitElement {
|
|||
}
|
||||
|
||||
pl-spinner {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
|
|
|||
|
|
@ -526,7 +526,7 @@ export class PlIcon extends LitElement {
|
|||
}
|
||||
|
||||
:host([icon="support"]) > div::before {
|
||||
content: "\\f82d";
|
||||
content: var(--icon-support, "\\f82d");
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
|
|
|||
|
|
@ -3,12 +3,11 @@ import { ErrorCode } from "@padloc/core/src/error";
|
|||
import { Vault } from "@padloc/core/src/vault";
|
||||
import { app } from "../globals";
|
||||
import { shared } from "../styles";
|
||||
import { dialog, alert } from "../lib/dialog";
|
||||
import { alert } from "../lib/dialog";
|
||||
import { StateMixin } from "../mixins/state";
|
||||
import { Routing } from "../mixins/routing";
|
||||
import "./logo";
|
||||
import "./spinner";
|
||||
import { ReportErrorsDialog } from "./report-errors-dialog";
|
||||
import "./button";
|
||||
import "./drawer";
|
||||
import "./drawer";
|
||||
|
|
@ -33,9 +32,6 @@ export class Menu extends Routing(StateMixin(LitElement)) {
|
|||
@property()
|
||||
selected: string;
|
||||
|
||||
@dialog("pl-report-errors-dialog")
|
||||
private _reportErrorsDialog: ReportErrorsDialog;
|
||||
|
||||
@state()
|
||||
private _expanded = new Set<string>();
|
||||
|
||||
|
|
@ -100,10 +96,6 @@ export class Menu extends Routing(StateMixin(LitElement)) {
|
|||
this.dispatchEvent(new CustomEvent("toggle-menu", { bubbles: true, composed: true }));
|
||||
}
|
||||
|
||||
private _reportErrors() {
|
||||
this._reportErrorsDialog.show();
|
||||
}
|
||||
|
||||
private _displayVaultError(vault: Vault, e?: Event) {
|
||||
e && e.stopPropagation();
|
||||
|
||||
|
|
@ -210,6 +202,25 @@ export class Menu extends Routing(StateMixin(LitElement)) {
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
.menu-footer {
|
||||
border-top: var(--menu-footer-border);
|
||||
}
|
||||
|
||||
.menu-footer-button {
|
||||
--button-background: transparent;
|
||||
--button-color: var(--menu-footer-button-color);
|
||||
--button-padding: var(--menu-footer-button-padding);
|
||||
width: var(--menu-footer-button-width);
|
||||
}
|
||||
|
||||
.menu-footer-button-icon {
|
||||
font-size: var(--menu-footer-button-icon-size);
|
||||
}
|
||||
|
||||
.menu-footer-button-label {
|
||||
font-size: var(--menu-footer-button-label-size);
|
||||
}
|
||||
|
||||
@supports (-webkit-overflow-scrolling: touch) {
|
||||
pl-logo {
|
||||
margin-top: max(env(safe-area-inset-top), 15px);
|
||||
|
|
@ -557,22 +568,30 @@ export class Menu extends Routing(StateMixin(LitElement)) {
|
|||
</pl-list>
|
||||
</pl-scroller>
|
||||
|
||||
<div class="small padded center-aligning horizontal layout">
|
||||
<pl-button class="transparent round" @click=${this._lock}>
|
||||
<pl-icon icon="lock"></pl-icon>
|
||||
<div class="half-padded center-aligning horizontal layout menu-footer">
|
||||
<pl-button class="menu-footer-button" @click=${this._lock}>
|
||||
<div class="vertical centering layout">
|
||||
<pl-icon icon="lock" class="menu-footer-button-icon"></pl-icon>
|
||||
<div class="menu-footer-button-label">Lock</div>
|
||||
</div>
|
||||
</pl-button>
|
||||
<pl-button class="transparent round" @click=${this._nextTheme} title="Theme: ${app.settings.theme}">
|
||||
<pl-icon icon="theme-${app.settings.theme}"></pl-icon>
|
||||
<pl-button class="menu-footer-button" @click=${this._nextTheme} title="Theme: ${app.settings.theme}">
|
||||
<div class="vertical centering layout">
|
||||
<pl-icon icon="theme-${app.settings.theme}" class="menu-footer-button-icon"></pl-icon>
|
||||
<div class="menu-footer-button-label">Theme</div>
|
||||
</div>
|
||||
</pl-button>
|
||||
<pl-button class="transparent round" @click=${() => app.synchronize()}>
|
||||
<pl-icon icon="refresh"></pl-icon>
|
||||
<pl-button
|
||||
class="menu-footer-button"
|
||||
@click=${() => app.synchronize()}
|
||||
.state=${app.state.syncing ? "loading" : "idle"}
|
||||
>
|
||||
<div class="vertical centering layout">
|
||||
<pl-icon icon="refresh" class="menu-footer-button-icon"></pl-icon>
|
||||
<div class="menu-footer-button-label">Sync</div>
|
||||
</div>
|
||||
</pl-button>
|
||||
<div class="stretch"></div>
|
||||
<pl-spinner .active=${app.state.syncing} class="syncing"></pl-spinner>
|
||||
<pl-button class="negative borderless slim" @click=${this._reportErrors} ?hidden=${true}>
|
||||
<pl-icon icon="error" class="small right-margined"></pl-icon>
|
||||
<div>${app.state._errors.length}</div>
|
||||
</pl-button>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue