feat(wizard-dialog): require pro mode for code editor

openscd · Jul 1, 2021 · 8fdb5dd · 8fdb5dd
1 parent 572d993
commit 8fdb5dd
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 5 deletions.
diff --git a/src/Setting.ts b/src/Setting.ts
@@ -7,12 +7,18 @@ import { Switch } from '@material/mwc-switch';
 
 import { ifImplemented, LitElementConstructor, Mixin } from './foundation.js';
 import { Language, languages, loader } from './translations/loader.js';
+import { WizardDialog } from './wizard-dialog.js';
 
 export type Settings = {
   language: Language;
   theme: 'light' | 'dark';
+  mode: 'safe' | 'pro';
+};
+export const defaults: Settings = {
+  language: 'en',
+  theme: 'light',
+  mode: 'safe',
 };
-export const defaults: Settings = { language: 'en', theme: 'light' };
 
 /** Mixin that saves [[`Settings`]] to `localStorage`, reflecting them in the
  * `settings` property, setting them through `setSetting(setting, value)`. */
@@ -26,6 +32,7 @@ export function Setting<TBase extends LitElementConstructor>(Base: TBase) {
       return {
         language: this.getSetting('language'),
         theme: this.getSetting('theme'),
+        mode: this.getSetting('mode'),
       };
     }
 
@@ -35,6 +42,8 @@ export function Setting<TBase extends LitElementConstructor>(Base: TBase) {
     languageUI!: Select;
     @query('#dark')
     darkThemeUI!: Switch;
+    @query('#mode')
+    modeUI!: Switch;
 
     private getSetting<T extends keyof Settings>(setting: T): Settings[T] {
       return (
@@ -44,6 +53,9 @@ export function Setting<TBase extends LitElementConstructor>(Base: TBase) {
     /** Update the `value` of `setting`, storing to `localStorage`. */
     setSetting<T extends keyof Settings>(setting: T, value: Settings[T]): void {
       localStorage.setItem(setting, <string>(<unknown>value));
+      this.shadowRoot
+        ?.querySelector<WizardDialog>('wizard-dialog')
+        ?.requestUpdate();
       this.requestUpdate();
     }
 
@@ -56,6 +68,7 @@ export function Setting<TBase extends LitElementConstructor>(Base: TBase) {
       } else if (ae.detail?.action === 'save') {
         this.setSetting('language', <Language>this.languageUI.value);
         this.setSetting('theme', this.darkThemeUI.checked ? 'dark' : 'light');
+        this.setSetting('mode', this.modeUI.checked ? 'pro' : 'safe');
         this.requestUpdate('settings');
       }
     }
@@ -81,7 +94,7 @@ export function Setting<TBase extends LitElementConstructor>(Base: TBase) {
         >
           <form>
             <mwc-select
-              naturalMenuWidth
+              fixedMenuPosition
               id="language"
               icon="language"
               label="${translate('settings.language')}"
@@ -102,6 +115,12 @@ export function Setting<TBase extends LitElementConstructor>(Base: TBase) {
                 ?checked=${this.settings.theme === 'dark'}
               ></mwc-switch>
             </mwc-formfield>
+            <mwc-formfield label="${translate('settings.mode')}">
+              <mwc-switch
+                id="mode"
+                ?checked=${this.settings.mode === 'pro'}
+              ></mwc-switch>
+            </mwc-formfield>
           </form>
           <mwc-button slot="secondaryAction" dialogAction="close">
             ${translate('cancel')}

diff --git a/src/open-scd.ts b/src/open-scd.ts
@@ -124,7 +124,7 @@ export class OpenSCD extends Hosting(
     }
 
     mwc-dialog {
-      --mdc-dialog-max-width: 92vw;
+      --mdc-dialog-max-width: 98vw;
     }
 
     mwc-dialog > form {

diff --git a/src/translations/de.ts b/src/translations/de.ts
@@ -32,6 +32,7 @@ export const de: Translations = {
     language: 'Sprache',
     languages: { de: 'Deutsch', en: 'Englisch (English)' },
     dark: 'Dunkles Design',
+    mode: 'Profimodus',
   },
   menu: {
     title: 'Menü',

diff --git a/src/translations/en.ts b/src/translations/en.ts
@@ -30,6 +30,7 @@ export const en = {
     language: 'Language',
     languages: { de: 'German (Deutsch)', en: 'English' },
     dark: 'Dark theme',
+    mode: 'Pro mode',
   },
   menu: {
     title: 'Menu',

diff --git a/src/wizard-dialog.ts b/src/wizard-dialog.ts
@@ -91,7 +91,10 @@ export class WizardDialog extends LitElement {
   }
 
   get code(): boolean {
-    return this.dialog?.querySelector('mwc-icon-button-toggle')?.on ?? false;
+    return (
+      (this.dialog?.querySelector('mwc-icon-button-toggle')?.on ?? false) &&
+      localStorage.getItem('mode') === 'pro'
+    );
   }
 
   /** Checks the inputs of all [[`WizardPage`]]s for validity. */
@@ -183,7 +186,7 @@ export class WizardDialog extends LitElement {
       heading=${page.title}
       @closed=${this.onClosed}
     >
-      ${page.element
+      ${page.element && localStorage.getItem('mode') === 'pro'
         ? html`<mwc-icon-button-toggle
             onicon="code"
             officon="code_off"
@@ -267,6 +270,7 @@ export class WizardDialog extends LitElement {
       position: absolute;
       top: 8px;
       right: 14px;
+      color: var(--base00);
     }
 
     mwc-dialog > mwc-icon-button-toggle[on] {

diff --git a/src/wizards.ts b/src/wizards.ts
@@ -4,6 +4,8 @@ import { repeat } from 'lit-html/directives/repeat';
 import { get, translate } from 'lit-translate';
 
 import {
+  Create,
+  Delete,
   EditorAction,
   identity,
   isEqual,
@@ -13,6 +15,7 @@ import {
   Wizard,
   WizardActor,
 } from './foundation.js';
+import { WizardDialog } from './wizard-dialog.js';
 
 interface MergeOptions {
   title?: string;