From ffe5746423ce4c3f2bd841d5224d64f37c596182 Mon Sep 17 00:00:00 2001 From: Jakob Vogelsang Date: Tue, 2 Mar 2021 07:35:03 +0100 Subject: [PATCH] refactor(logging): move filter buttons to upper right corner --- __snapshots__/open-scd.md | 33 +++++----- src/Logging.ts | 38 ++++++------ src/foundation.ts | 3 + src/icons.ts | 123 ++++---------------------------------- src/open-scd.ts | 25 +------- 5 files changed, 51 insertions(+), 171 deletions(-) diff --git a/__snapshots__/open-scd.md b/__snapshots__/open-scd.md index 0ecae18d9..1a327d750 100644 --- a/__snapshots__/open-scd.md +++ b/__snapshots__/open-scd.md @@ -305,6 +305,16 @@ heading="Log" id="log" > +
+ + + + + + + + +
-
- - - - - - - - -
> = { + +const colors = { info: '--cyan', warning: '--yellow', error: '--red', @@ -134,7 +136,7 @@ export function Logging(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(Base: TBase) { } renderFilterOptions(): TemplateResult { - return html`
- ${Object.keys(icons).map( - type => html` + ${(Object.keys(icons)).map( + kind => html`${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' )}` )} @@ -243,24 +245,22 @@ export function Logging(Base: TBase) { render(): TemplateResult { return html`${ifImplemented(super.render())} - ${this.renderHistory()} ${this.renderFilterOptions()} + ${this.renderHistory()} - + ${translate('close')} diff --git a/src/foundation.ts b/src/foundation.ts index c08e91c2d..b3a0304d8 100644 --- 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 index fd918d840..2d5a0fbf4 100644 --- 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> = { - action: `M0 0h24v24H0z`, - info: `M0 0h24v24H0z`, - warning: `M0 0h24v24H0z`, - error: `M0 0h24v24H0z`, -}; - -const path2: Partial> = { - action: `M13 3c-4.97 0-9 +const pathsSVG = { + action: svg``, + info: svg``, + warning: svg``, + error: svg` + `, }; export function getFilterTest( - type: string, - state: string, + type: 'action' | 'info' | 'warning' | 'error', + state: 'on' | 'off', color: string ): TemplateResult { return html` - - + ${pathsSVG[type]} `; } -export const filterActionOff = html` - - - `; - -export const filterInfoOn = html` - - - `; - -export const filterInfoOff = html` - - - `; - -export const filterWarningOn = html` - - -`; - -export const filterWarningOff = html` - - -`; - -export const filterErrorOn = html` - - -`; - -export const filterErrorOff = html` - - -`; - export const iedIcon = html` #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;