#86, #88: new loader screen, #95: fix empty list

fluxxus-nl · Feb 8, 2021 · d6b4386 · d6b4386
1 parent dac7fba
commit d6b4386
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 6 deletions.
diff --git a/services/ALObjectParser b/services/ALObjectParser
diff --git a/web-ui/src/app.html b/web-ui/src/app.html
@@ -4,6 +4,8 @@
   <require from="ag-grid-community/dist/styles/ag-theme-material.css"></require>
   <require from="./styles/common.css"></require>
 
+  <loader if.bind="appService.loading"></loader>
+
   <div class="fixed-top">
     <toolbar search-value.two-way="searchValue"></toolbar>
   </div>

diff --git a/web-ui/src/app.ts b/web-ui/src/app.ts
@@ -44,6 +44,7 @@ export class App {
       let result = await this.backendService.send({ Command: 'SaveChanges', Data: message });
       let userCancelledSaving: boolean = result.success === false;
       console.log('saveChanges', result, userCancelledSaving);
+      this.appService.loading = false;
       if (userCancelledSaving === true) {
         this.eventAggregator.publish(AppEventPublisher.saveChangesCancelled, message);
       } else {

diff --git a/web-ui/src/resources/elements/loader.html b/web-ui/src/resources/elements/loader.html
@@ -0,0 +1,7 @@
+<template>
+    <div id="loader" class="overlay">
+        <div class="overlay-content">
+            <div class="lds-dual-ring"></div>
+        </div>
+    </div>
+</template>
diff --git a/web-ui/src/resources/index.ts b/web-ui/src/resources/index.ts
@@ -6,6 +6,7 @@ export function configure(config: FrameworkConfiguration) {
     './elements/test-list',
     './elements/feature-list',
     './elements/entry-form',
-    './elements/entry-form-group'
+    './elements/entry-form-group',
+    './elements/loader.html'
   ]);
 }
diff --git a/web-ui/src/services/app-service.ts b/web-ui/src/services/app-service.ts
@@ -14,11 +14,21 @@ export class AppService {
     private _entries: Array<Message> = [];
     public selectedEntry: Message;
     public gridApi: GridApi;
+    private _loading: boolean = false;
 
     public constructor(private eventAggregator: EventAggregator) {
         this._editMode = AppEditMode.Scenario;
     }
 
+    @computedFrom('_loading')
+    public get loading() {
+        return this._loading;
+    }
+
+    public set loading(newVal: boolean) {
+        this._loading = newVal;
+    }
+
     @computedFrom('_editMode')
     public get editMode() {
         return this._editMode;
@@ -71,10 +81,22 @@ export class AppService {
             });
         }
 
+        if (!this._projects || this._projects.length == 0) {
+            this._sidebarLinks.push({
+                name: 'New Project',
+                active: false,
+                children: [
+                    ''
+                ],
+                hasChildren: true
+            });
+        }
+
         this.eventAggregator.publish(AppEventPublisher.sidebarLinksUpdated);
     }
 
     public sendChangeNotification(type: TypeChanged, state: MessageState, newValue: any, oldValue: any, item?: Message) {
+        this.loading = true;
         if (state === MessageState.Unchanged)
             return;
 
@@ -91,7 +113,7 @@ export class AppService {
             message.FsPath = item.FsPath;
         }
         //message.DeleteProcedure = [TypeChanged.Given, TypeChanged.When, TypeChanged.Then].indexOf(type) !== -1 && state == MessageState.Deleted;
-        message.ArrayIndex = item.ArrayIndex;        
+        message.ArrayIndex = item.ArrayIndex;
 
         this.eventAggregator.publish(AppEventPublisher.saveChanges, message);
     }

diff --git a/web-ui/src/styles/common.less b/web-ui/src/styles/common.less
@@ -11,9 +11,9 @@
 
 body {
     /*font-family     : "Segoe UI", "Segoe WP", Segoe, device-segoe, Tahoma, Helvetica, Arial, sans-serif !important;*/
-    padding           : 0;
-    color             : var(--vscode-editor-foreground);
-    background-color  : inherit !important;
+    padding         : 0;
+    color           : var(--vscode-editor-foreground);
+    background-color: inherit !important;
 }
 
 html,
@@ -60,7 +60,7 @@ ul#sidebar-list {
 
         div {
             padding: 7px;
-            cursor: pointer;
+            cursor : pointer;
 
             &:not(.active) {
                 background-color: transparent;
@@ -235,6 +235,63 @@ body.vscode-light {
     }
 }
 
+/**
+
+Loader animation
+https://loading.io/css/
+
+**/
+
+.lds-dual-ring {
+    display: inline-block;
+    width  : 80px;
+    height : 80px;
+}
+
+.lds-dual-ring:after {
+    content      : " ";
+    display      : block;
+    width        : 64px;
+    height       : 64px;
+    margin       : 8px;
+    border-radius: 50%;
+    border       : 6px solid @bc-green;
+    border-color : @bc-green transparent @bc-green transparent;
+    animation    : lds-dual-ring 1.2s linear infinite;
+}
+
+@keyframes lds-dual-ring {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+/* Loader END */
+
+.overlay {
+    height          : 100%;
+    width           : 100%;
+    position        : fixed;
+    z-index         : 1001;
+    top             : 0;
+    left            : 0;
+    opacity         : 0.85;
+    background-color: @bc-black;
+    overflow-x      : hidden;
+    transition      : 0.5s;
+}
+
+.overlay-content {
+    position  : relative;
+    top       : 45%;
+    width     : 100%;
+    text-align: center;
+}
+
 body.vscode-high-contrast,
 body.vscode-dark {