feat(openscd): Move progress indicator beneath plugin tabs (openscd#1181)

Move progress indicator beneath plugin tabs, closes openscd#1178

Author: danyill

package-lock.json

@@ -17,7 +17,6 @@
   "module": "open-scd.js",
   "type": "module",
   "dependencies": {
-    "@material/mwc-circular-progress-four-color": "0.22.1",
     "@material/mwc-dialog": "0.22.1",
     "@material/mwc-drawer": "0.22.1",
     "@material/mwc-fab": "0.22.1",

package.json

@@ -286,7 +286,7 @@ export function Hosting<
             wrapFocus
             @action=${(ae: CustomEvent<ActionDetail>) => {
               //FIXME: dirty hack to be fixed in open-scd-core
-              //       if clause not neccassary when oscd... compenents in open-scd not list
+              //       if clause not necessary when oscd... components in open-scd not list
               if (ae.target instanceof List)
                 (<MenuItem>(
                   this.menu.filter(

src/Hosting.ts

@@ -1,6 +1,6 @@
 import { html, property, TemplateResult } from 'lit-element';
 
-import '@material/mwc-circular-progress-four-color';
+import '@material/mwc-linear-progress';
 
 import {
   LitElementConstructor,
@@ -41,10 +41,10 @@ export function Waiting<TBase extends LitElementConstructor>(Base: TBase) {
 
     render(): TemplateResult {
       return html`${ifImplemented(super.render())}
-        <mwc-circular-progress-four-color
+        <mwc-linear-progress
           .closed=${!this.waiting}
           indeterminate
-        ></mwc-circular-progress-four-color>`;
+        ></mwc-linear-progress>`;
     }
   }
 

src/Waiting.ts

@@ -23,8 +23,8 @@ import { Wizarding } from './Wizarding.js';
 /** The `<open-scd>` custom element is the main entry point of the
  * Open Substation Configuration Designer. */
 @customElement('open-scd')
-export class OpenSCD extends Hosting(
-  Setting(Wizarding(Waiting(Plugging(Editing(Logging(LitElement))))))
+export class OpenSCD extends Waiting(
+  Hosting(Setting(Wizarding(Plugging(Editing(Logging(LitElement))))))
 ) {
   private currentSrc = '';
   /** The current file's URL. `blob:` URLs are *revoked after parsing*! */
@@ -119,15 +119,21 @@ export class OpenSCD extends Hosting(
       margin-top: 16px;
     }
 
-    mwc-circular-progress-four-color {
+    mwc-linear-progress {
       position: fixed;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      z-index: 99;
+      --mdc-theme-primary: var(--mdc-theme-secondary);
+      left: 0px;
+      top: 112px;
+      width: 100%;
       pointer-events: none;
     }
 
+    @media (max-width: 599px) {
+      mwc-linear-progress {
+        top: 104px;
+      }
+    }
+
     tt {
       font-family: 'Roboto Mono', monospace;
       font-weight: 300;

src/open-scd.ts

@@ -37,11 +37,6 @@ export function getTheme(theme: Settings['theme']): TemplateResult {
 
         --mdc-dialog-heading-ink-color: var(--base00);
 
-        --mdc-circular-progress-bar-color-1: var(--mdc-theme-primary);
-        --mdc-circular-progress-bar-color-2: var(--mdc-theme-on-background);
-        --mdc-circular-progress-bar-color-3: var(--mdc-theme-secondary);
-        --mdc-circular-progress-bar-color-4: var(--mdc-theme-on-background);
-
         --mdc-icon-font: 'Material Icons Outlined';
       }
 

src/themes.ts

@@ -1200,13 +1200,6 @@ snapshots["open-scd looks like its snapshot"] =
   >
   </mwc-button>
 </mwc-dialog>
-<mwc-circular-progress-four-color
-  closed=""
-  density="0"
-  indeterminate=""
-  progress="0"
->
-</mwc-circular-progress-four-color>
 <wizard-dialog>
 </wizard-dialog>
 <mwc-dialog
@@ -1380,6 +1373,11 @@ snapshots["open-scd looks like its snapshot"] =
     Save
   </mwc-button>
 </mwc-dialog>
+<mwc-linear-progress
+  closed=""
+  indeterminate=""
+>
+</mwc-linear-progress>
 `;
 /* end snapshot open-scd looks like its snapshot */
 

test/integration/__snapshots__/open-scd.test.snap.js

@@ -61,7 +61,7 @@ describe('open-scd', () => {
 
   it('renders a progress indicator on `waiting`', async () => {
     const progressBar = element.shadowRoot!.querySelector(
-      'mwc-circular-progress-four-color[indeterminate]'
+      'mwc-linear-progress[indeterminate]'
     );
     expect(progressBar).property('closed').to.be.true;
     element.waiting = true;