diff --git a/src/renderer/settings/settings.ts b/src/renderer/settings/settings.ts index c0fe532..f5296b8 100644 --- a/src/renderer/settings/settings.ts +++ b/src/renderer/settings/settings.ts @@ -125,6 +125,14 @@ export class PageRoot extends LitElement { } } + toggleActive(index: DeepIndex) { + const module = indexObject(this.config, index); + if (module && typeof module.active == 'boolean') { + module.active = !module.active; + this.onUpdate(); + } + } + buildConfigTabs() { const findConfigTabs = (desc: ObjectConfig, index: DeepIndex = []): @@ -146,10 +154,21 @@ export class PageRoot extends LitElement { class="tab ${classes}" @click="${() => this.selectPage(entry_index)}" > - + ${!entry.icon && activatable + ? html`
+
+
` + : html`` + } ${name} @@ -329,17 +348,36 @@ export class PageRoot extends LitElement { flex: 0 0 auto; font-size: 1.5rem; width: 2.5rem; + height: 1.5rem; + position: relative; color: var(--settings-accent-color); justify-content: flex-start; + } + .tab .icon .circle { + width: 1.2rem; + height: 1.2rem; transition: var(--transition); - transition-property: text-shadow, color; + transition-property: box-shadow, background, width, height; + border-radius: 100%; + position: absolute; + top: 50%; + left: 0.75rem; + transform: translate(-50%, -50%); } - .tab.activatable .icon { - color: var(--settings-inactive-color); + .tab.activatable .icon .circle { + background: var(--settings-inactive-color); } - .tab.activatable.active .icon { - color: var(--settings-active-color); - text-shadow: 0 0 0.25rem var(--settings-active-color); + .tab.activatable.active .icon .circle { + background: var(--settings-active-color); + box-shadow: 0 0 0.25rem var(--settings-active-color); + } + .tab.activatable .icon .circle:hover { + width: 1.35rem; + height: 1.35rem; + } + .tab.activatable .icon .circle:active { + width: 1.1rem; + height: 1.1rem; } .subheader { direction: ltr; @@ -349,8 +387,6 @@ export class PageRoot extends LitElement { opacity: 0.75; font-weight: 600; } - .page { - } .pages { flex: 1 1 auto; overflow: overlay;