toast text dynamic based on drugstone layout + toast warning color to black +...

toast text dynamic based on drugstone layout + toast warning color to black + bulma loading spinners for tasks in progress instead of fa spinner

src/app/components/task-list/task-list.component.html

@@ -77,11 +77,11 @@
               {{ algorithmNames[task.info.algorithm] }}</span
             >
           </div>
-          <div class="column">
-            <app-fa-solid-icon
-              classString="is-pulled-right"
-              icon="spinner"
-            ></app-fa-solid-icon>
+          <div class="column p-0">
+            <div
+              class="control is-loading center"
+              alt="loading..."
+            ></div>
           </div>
         </div>
         <div class="columns mb-0">
@@ -162,7 +162,7 @@
           </div>
           <div class="column">
             <app-fa-solid-icon
-              classString="is-pulled-right"
+              classString="is-pulled-right has-text-danger"
               icon="exclamation-triangle"
             ></app-fa-solid-icon>
           </div>

src/app/components/toast/toast.component.html

@@ -3,7 +3,6 @@
     <div class="toast {{ getDrugstoneClass(toast.value.type) }}">
       <a (click)="close(toast.key)" aria-label="close" class="close">
         <app-fa-solid-icon
-          classString="toast-times"
           title="Close analysis"
           icon="times"
         ></app-fa-solid-icon>

src/app/components/toast/toast.component.scss

@@ -7,38 +7,3 @@
   left: 0;
   right: 0;
 }
-
-.toast {
-  z-index: $toast-z;
-  position: relative;
-  max-width: 60vw;
-  padding: 10px 15px;
-  border-radius: 0.25rem;
-  box-shadow: 0 0.5em 1em -0.125em hsla(0, 0%, 4%, 0.1),
-    0 0 0 1px hsla(0, 0%, 4%, 0.02);
-  margin: 0 auto;
-  &.drugstone-plugin-danger {
-    color: var(--drgstn-text-secondary);
-    background-color: var(--drgstn-danger);
-  }
-  &.drugstone-plugin-success {
-    color: var(--drgstn-text-secondary) !important;
-    background-color: var(--drgstn-success);
-  }
-  &.drugstone-plugin-warning {
-    color: var(--drgstn-text-secondary);
-    background-color: var(--drgstn-warning);
-  }
-  &.drugstone-plugin-info {
-    color: var(--drgstn-text-secondary);
-    background-color: var(--drgstn-info);
-  }
-  .close {
-    display: inline;
-    float: right;
-  }
-}
-
-.fa-times {
-  color: white;
-}

src/app/services/analysis/analysis.service.ts

@@ -292,8 +292,8 @@ export class AnalysisService {
     this.startWatching();
 
     this.toast.setNewToast({
-      message: 'Quick analysis started. This may take a while.' +
-        ' Once the computation finished you can view the results in the task list to the right.',
+      message: 'Quick analysis started. This may take a while. ' +
+        `Once the computation finished you can view the results in the task list to the ${this.drugstoneConfig.config.showSidebar}.`,
       type: 'success'
     });
     return {taskId: resp.token, algorithm: algorithm, target: target, params: parameters};
@@ -316,6 +316,12 @@ export class AnalysisService {
     this.tokens.push(resp.token);
     localStorage.setItem(`netex-tokens-${window.location.host}`, JSON.stringify(this.tokens));
     this.startWatching();
+
+    this.toast.setNewToast({
+      message: 'Analysis task started. This may take a while. ' +
+        `Once the computation finished you can view the results in the task list to the ${this.drugstoneConfig.config.showSidebar}.`,
+      type: 'success'
+    });
     return resp.token;
   }
 

src/stylesheets/styles.scss

@@ -270,3 +270,41 @@
   padding: 0.5rem 1rem;
   line-height: 24px;
 }
+
+.toast {
+  z-index: $toast-z;
+  position: relative;
+  max-width: 60vw;
+  padding: 10px 15px;
+  border-radius: 0.25rem;
+  box-shadow: 0 0.5em 1em -0.125em hsla(0, 0%, 4%, 0.1),
+    0 0 0 1px hsla(0, 0%, 4%, 0.02);
+  margin: 0 auto;
+  &.drugstone-plugin-danger {
+    color: var(--drgstn-text-secondary);
+    background-color: var(--drgstn-danger);
+  }
+  &.drugstone-plugin-success {
+    color: var(--drgstn-text-secondary) !important;
+    background-color: var(--drgstn-success);
+  }
+  &.drugstone-plugin-warning {
+    color: var(--drgstn-text-primary);
+    background-color: var(--drgstn-warning);
+    .icon {
+      color: var(--drgstn-text-primary) !important;
+    }
+  }
+  &.drugstone-plugin-info {
+    color: var(--drgstn-text-secondary);
+    background-color: var(--drgstn-info);
+  }
+  .close {
+    display: inline;
+    float: right;
+    .icon {
+      color: var(--drgstn-text-secondary);
+    }
+  }
+}
+

src/stylesheets/theme-styles.scss

@@ -283,7 +283,11 @@
     width: 0px !important;
   }
   
-  .toast-times {
+  .has-text-primary {
+    color: var(--drgstn-text-primary) !important;
+  }
+
+  .has-text-secondary {
     color: var(--drgstn-text-secondary) !important;
   }