diff --git a/src/app/components/task-list/task-list.component.html b/src/app/components/task-list/task-list.component.html index c21dcf5b193c22b6f924cd52aee700677ce538ae..8a45779a3b29ce5a15bf13f7d9a7f7e907debb52 100644 --- a/src/app/components/task-list/task-list.component.html +++ b/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> diff --git a/src/app/components/toast/toast.component.html b/src/app/components/toast/toast.component.html index 7a0a7dbf66534474cdaafaad4624e04888153ac1..f1e62739b7c1043962fb7d45575820dc55d5776c 100644 --- a/src/app/components/toast/toast.component.html +++ b/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> diff --git a/src/app/components/toast/toast.component.scss b/src/app/components/toast/toast.component.scss index 746624e38842f2bdb140690d827a9544266d9ec1..0f56b73ca600554d545f1ca326d6298c6110223a 100644 --- a/src/app/components/toast/toast.component.scss +++ b/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; -} diff --git a/src/app/services/analysis/analysis.service.ts b/src/app/services/analysis/analysis.service.ts index 83d5e71c48b801c208b9a14e47242503f31df03b..1221f40e6149a983d12e288312fb2810b97026cf 100644 --- a/src/app/services/analysis/analysis.service.ts +++ b/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; } diff --git a/src/stylesheets/styles.scss b/src/stylesheets/styles.scss index fdfb2b35006bb3019cdfa7644947713bf39eb180..24c5dd4a9dab6660aed1d85cb499ca42c85c8b93 100644 --- a/src/stylesheets/styles.scss +++ b/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); + } + } +} + diff --git a/src/stylesheets/theme-styles.scss b/src/stylesheets/theme-styles.scss index 463852fc19c8c2bcee2a2f5fff3b450032d1b159..3d7b1afe602e56cfb5bf920871dc43f596c0b92f 100644 --- a/src/stylesheets/theme-styles.scss +++ b/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; }