refactor(logging): move filter buttons to upper right corner

openscd · Mar 2, 2021 · ffe5746 · ffe5746
1 parent db311e6
commit ffe5746
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 171 deletions.
diff --git a/__snapshots__/open-scd.md b/__snapshots__/open-scd.md
@@ -305,6 +305,16 @@
   heading="Log"
   id="log"
 >
+  <div id="filterContainer">
+    <mwc-icon-button-toggle>
+    </mwc-icon-button-toggle>
+    <mwc-icon-button-toggle>
+    </mwc-icon-button-toggle>
+    <mwc-icon-button-toggle>
+    </mwc-icon-button-toggle>
+    <mwc-icon-button-toggle>
+    </mwc-icon-button-toggle>
+  </div>
   <mwc-list
     id="content"
     wrapfocus=""
@@ -324,33 +334,18 @@
       </mwc-icon>
     </mwc-list-item>
   </mwc-list>
-  <div
-    id="filterContainer"
-    slot="secondaryAction"
-  >
-    <mwc-icon-button-toggle>
-    </mwc-icon-button-toggle>
-    <mwc-icon-button-toggle>
-    </mwc-icon-button-toggle>
-    <mwc-icon-button-toggle>
-    </mwc-icon-button-toggle>
-    <mwc-icon-button-toggle>
-    </mwc-icon-button-toggle>
-  </div>
   <mwc-button
     disabled=""
-    icon="redo"
-    label="Redo"
+    icon="undo"
+    label="Undo"
     slot="secondaryAction"
-    style="float:right;"
   >
   </mwc-button>
   <mwc-button
     disabled=""
-    icon="undo"
-    label="Undo"
+    icon="redo"
+    label="Redo"
     slot="secondaryAction"
-    style="float:right;"
   >
   </mwc-button>
   <mwc-button

diff --git a/src/Logging.ts b/src/Logging.ts
@@ -10,6 +10,7 @@ import {
   invert,
   LitElementConstructor,
   LogEntry,
+  LogEntryType,
   LogEvent,
   Mixin,
   newActionEvent,
@@ -23,7 +24,8 @@ const icons = {
   error: 'report',
   action: 'history',
 };
-const colors: Partial<Record<string, string>> = {
+
+const colors = {
   info: '--cyan',
   warning: '--yellow',
   error: '--red',
@@ -134,7 +136,7 @@ export function Logging<TBase extends LitElementConstructor>(Base: TBase) {
       this.requestUpdate('history', []);
     }
 
-    toggleFilter(filterType: string): void {
+    toggleFilter(filterType: LogEntryType): void {
       if (filterType == 'error')
         this.filterError
           ? (this.filterError = false)
@@ -223,17 +225,17 @@ export function Logging<TBase extends LitElementConstructor>(Base: TBase) {
     }
 
     renderFilterOptions(): TemplateResult {
-      return html`<div id="filterContainer" slot="secondaryAction">
-        ${Object.keys(icons).map(
-          type => html`<mwc-icon-button-toggle
+      return html`<div id="filterContainer">
+        ${(<LogEntryType[]>Object.keys(icons)).map(
+          kind => html`<mwc-icon-button-toggle
             @click="${() => {
-              this.toggleFilter(type);
+              this.toggleFilter(kind);
             }}"
-            >${getFilterTest(type, 'on', '--mdc-theme-on-background')}
+            >${getFilterTest(kind, 'on', '--mdc-theme-on-background')}
             ${getFilterTest(
-              type,
+              kind,
               'off',
-              colors[type] ?? '--mdc-theme-on-background'
+              colors[kind] ?? '--mdc-theme-on-background'
             )}</mwc-icon-button-toggle
           >`
         )}
@@ -243,24 +245,22 @@ export function Logging<TBase extends LitElementConstructor>(Base: TBase) {
     render(): TemplateResult {
       return html`${ifImplemented(super.render())}
         <mwc-dialog id="log" heading="${translate('log.name')}">
-          <mwc-list id="content" wrapFocus>${this.renderHistory()}</mwc-list>
           ${this.renderFilterOptions()}
+          <mwc-list id="content" wrapFocus>${this.renderHistory()}</mwc-list>
           <mwc-button
-            style="float:right;"
-            icon="redo"
-            label="${translate('redo')}"
-            ?disabled=${!this.canRedo}
-            @click=${this.redo}
-            slot="secondaryAction"
-          ></mwc-button>
-          <mwc-button
-            style="float:right;"
             icon="undo"
             label="${translate('undo')}"
             ?disabled=${!this.canUndo}
             @click=${this.undo}
             slot="secondaryAction"
           ></mwc-button>
+          <mwc-button
+            icon="redo"
+            label="${translate('redo')}"
+            ?disabled=${!this.canRedo}
+            @click=${this.redo}
+            slot="secondaryAction"
+          ></mwc-button>
           <mwc-button slot="primaryAction" dialogaction="close"
             >${translate('close')}</mwc-button
           >

diff --git a/src/foundation.ts b/src/foundation.ts
@@ -189,6 +189,9 @@ export function newWizardEvent(
 }
 
 type InfoEntryKind = 'info' | 'warning' | 'error';
+
+export type LogEntryType = 'info' | 'warning' | 'error' | 'action';
+
 /** The basic information contained in each [[`LogEntry`]]. */
 interface LogDetailBase {
   title: string;

diff --git a/src/icons.ts b/src/icons.ts
@@ -1,132 +1,33 @@
-import { html, TemplateResult } from 'lit-element';
+import { html, svg, TemplateResult } from 'lit-element';
 
-const path1: Partial<Record<string, string>> = {
-  action: `M0 0h24v24H0z`,
-  info: `M0 0h24v24H0z`,
-  warning: `M0 0h24v24H0z`,
-  error: `M0 0h24v24H0z`,
-};
-
-const path2: Partial<Record<string, string>> = {
-  action: `M13 3c-4.97 0-9
+const pathsSVG = {
+  action: svg`<path d="M0 0h24v24H0z" fill="none"></path><path d="M13 3c-4.97 0-9
   4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7
   7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0
-  9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z`,
-  info: `M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z`,
-  warning: `M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z`,
-  error: `M15.73 3H8.27L3 8.27v7.46L8.27 21h7.46L21 15.73V8.27L15.73 3zM12 17.3c-.72 0-1.3-.58-1.3-1.3 0-.72.58-1.3 1.3-1.3.72 0 1.3.58 1.3 1.3 0 .72-.58 1.3-1.3 1.3zm1-4.3h-2V7h2v6z`,
+  9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z" fill="currentColor"></path>`,
+  info: svg`<path d="M0 0h24v24H0z" fill="none"></path><path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" fill="currentColor"></path>`,
+  warning: svg`<path d="M0 0h24v24H0z" fill="none"></path><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" fill="currentColor"></path>`,
+  error: svg`<path d="M0 0h24v24H0V0z" fill="none"></path>
+  <path d="M15.73 3H8.27L3 8.27v7.46L8.27 21h7.46L21 15.73V8.27L15.73 3zM19 14.9L14.9 19H9.1L5 14.9V9.1L9.1 5h5.8L19 9.1v5.8z" fill="currentColor"></path><path d="M11 7h2v7h-2z" fill="currentColor"></path><circle cx="12" cy="16" r="1" fill="currentColor"></circle>`,
 };
 
 export function getFilterTest(
-  type: string,
-  state: string,
+  type: 'action' | 'info' | 'warning' | 'error',
+  state: 'on' | 'off',
   color: string
 ): TemplateResult {
   return html`<svg
     slot="${state}Icon"
+    style="color:var(${color})"
     xmlns="http://www.w3.org/2000/svg"
     height="24"
     viewBox="0 0 24 24"
     width="24"
   >
-    <path d="${path1[type]}" fill="none" />
-    <path d="${path2[type]}" fill="var(${color ?? ''})" />
+    ${pathsSVG[type]}
   </svg> `;
 }
 
-export const filterActionOff = html`<svg
-  slot="offIcon"
-  xmlns="http://www.w3.org/2000/svg"
-  height="24"
-  viewBox="0 0 24 24"
-  width="24"
->
-  <path d="M0 0h24v24H0z" fill="none" />
-  <path
-    d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"
-    fill="var(--blue)"
-  />
-</svg> `;
-
-export const filterInfoOn = html`<svg
-  slot="onIcon"
-  xmlns="http://www.w3.org/2000/svg"
-  height="24"
-  viewBox="0 0 24 24"
-  width="24"
->
-  <path d="M0 0h24v24H0z" fill="none" />
-  <path
-    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
-  />
-</svg> `;
-
-export const filterInfoOff = html`<svg
-  slot="offIcon"
-  xmlns="http://www.w3.org/2000/svg"
-  height="24"
-  viewBox="0 0 24 24"
-  width="24"
->
-  <path d="M0 0h24v24H0z" fill="none" />
-  <path
-    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
-    fill="var(--cyan)"
-  />
-</svg> `;
-
-export const filterWarningOn = html`<svg
-  slot="onIcon"
-  xmlns="http://www.w3.org/2000/svg"
-  height="24"
-  viewBox="0 0 24 24"
-  width="24"
->
-  <path d="M0 0h24v24H0z" fill="none" />
-  <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" />
-</svg>`;
-
-export const filterWarningOff = html`<svg
-  slot="offIcon"
-  xmlns="http://www.w3.org/2000/svg"
-  height="24"
-  viewBox="0 0 24 24"
-  width="24"
->
-  <path d="M0 0h24v24H0z" fill="none" />
-  <path
-    d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"
-    fill="var(--yellow)"
-  />
-</svg>`;
-
-export const filterErrorOn = html`<svg
-  slot="onIcon"
-  xmlns="http://www.w3.org/2000/svg"
-  height="24"
-  viewBox="0 0 24 24"
-  width="24"
->
-  <path d="M0 0h24v24H0z" fill="none" />
-  <path
-    d="M15.73 3H8.27L3 8.27v7.46L8.27 21h7.46L21 15.73V8.27L15.73 3zM12 17.3c-.72 0-1.3-.58-1.3-1.3 0-.72.58-1.3 1.3-1.3.72 0 1.3.58 1.3 1.3 0 .72-.58 1.3-1.3 1.3zm1-4.3h-2V7h2v6z"
-  />
-</svg>`;
-
-export const filterErrorOff = html`<svg
-  slot="offIcon"
-  xmlns="http://www.w3.org/2000/svg"
-  height="24"
-  viewBox="0 0 24 24"
-  width="24"
->
-  <path d="M0 0h24v24H0z" fill="none" />
-  <path
-    d="M15.73 3H8.27L3 8.27v7.46L8.27 21h7.46L21 15.73V8.27L15.73 3zM12 17.3c-.72 0-1.3-.58-1.3-1.3 0-.72.58-1.3 1.3-1.3.72 0 1.3.58 1.3 1.3 0 .72-.58 1.3-1.3 1.3zm1-4.3h-2V7h2v6z"
-    fill="var(--red)"
-  />
-</svg>`;
-
 export const iedIcon = html`<svg
   xmlns="http://www.w3.org/2000/svg"
   width="24"

diff --git a/src/open-scd.ts b/src/open-scd.ts
@@ -548,34 +548,15 @@ export class OpenSCD extends Setting(
     }
 
     #log > #filterContainer {
-      min-width: 55vw;
-      float: left;
+      position: absolute;
+      top: 14px;
+      right: 14px;
     }
 
     #filterContainer > mwc-icon-button-toggle {
       --mdc-icon-button-size: 36px;
     }
 
-    #filterContainer > mwc-icon-button-toggle:nth-child(1) {
-      position: absolute;
-      left: 15px;
-    }
-
-    #filterContainer > mwc-icon-button-toggle:nth-child(2) {
-      position: absolute;
-      left: 51px;
-    }
-
-    #filterContainer > mwc-icon-button-toggle:nth-child(3) {
-      position: absolute;
-      left: 87px;
-    }
-
-    #filterContainer > mwc-icon-button-toggle:nth-child(4) {
-      position: absolute;
-      left: 123px;
-    }
-
     mwc-dialog > form > * {
       display: block;
       margin-top: 16px;