Updated styling with icon
This commit is contained in:
parent
accd05ee65
commit
12707ddbbc
@ -5,33 +5,39 @@
|
|||||||
[class.mb-2]="true"
|
[class.mb-2]="true"
|
||||||
(shown)="onShow(toast)"
|
(shown)="onShow(toast)"
|
||||||
(hidden)="toastService.closeToast(toast)">
|
(hidden)="toastService.closeToast(toast)">
|
||||||
<ngb-progressbar class="position-absolute h-100 w-100 top-90 start-0 bottom-0 end-0 pointer-events-none" type="dark" [max]="toast.delay" [value]="toast.delayRemaining"></ngb-progressbar>
|
<ngb-progressbar class="position-absolute h-100 w-100 top-90 start-0 bottom-0 end-0 pe-none" type="dark" [max]="toast.delay" [value]="toast.delayRemaining"></ngb-progressbar>
|
||||||
<span class="visually-hidden">{{ toast.delayRemaining / 1000 | number: '1.0-0' }} seconds</span>
|
<span class="visually-hidden">{{ toast.delayRemaining / 1000 | number: '1.0-0' }} seconds</span>
|
||||||
<div class="d-flex">
|
<div class="d-flex align-items-top">
|
||||||
<p class="mb-0">{{toast.content}}</p>
|
<svg class="sidebaricon-sm mt-1 me-2 flex-shrink-0" fill="currentColor">
|
||||||
<button type="button" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close" (click)="toastService.closeToast(toast);"></button>
|
<use *ngIf="!toast.error" xlink:href="assets/bootstrap-icons.svg#info-circle"/>
|
||||||
</div>
|
<use *ngIf="toast.error" xlink:href="assets/bootstrap-icons.svg#exclamation-triangle"/>
|
||||||
<details *ngIf="toast.error">
|
</svg>
|
||||||
<div class="p-3">
|
<div>
|
||||||
<dl class="row" *ngIf="isDetailedError(toast.error)">
|
<p class="mb-0">{{toast.content}}</p>
|
||||||
<dt class="col-sm-3 fw-normal text-end">URL</dt>
|
<details *ngIf="toast.error">
|
||||||
<dd class="col-sm-9">{{ toast.error.url }}</dd>
|
<div class="mt-2">
|
||||||
<dt class="col-sm-3 fw-normal text-end" i18n>Status</dt>
|
<dl class="row mb-0" *ngIf="isDetailedError(toast.error)">
|
||||||
<dd class="col-sm-9">{{ toast.error.status }} <em>{{ toast.error.statusText }}</em></dd>
|
<dt class="col-sm-3 fw-normal text-end">URL</dt>
|
||||||
<dt class="col-sm-3 fw-normal text-end" i18n>Error</dt>
|
<dd class="col-sm-9">{{ toast.error.url }}</dd>
|
||||||
<dd class="col-sm-9">{{ getErrorText(toast.error) }}</dd>
|
<dt class="col-sm-3 fw-normal text-end" i18n>Status</dt>
|
||||||
</dl>
|
<dd class="col-sm-9">{{ toast.error.status }} <em>{{ toast.error.statusText }}</em></dd>
|
||||||
<div class="row">
|
<dt class="col-sm-3 fw-normal text-end" i18n>Error</dt>
|
||||||
<div class="col offset-sm-3">
|
<dd class="col-sm-9">{{ getErrorText(toast.error) }}</dd>
|
||||||
<button class="btn btn-sm btn-outline-dark" (click)="copyError(toast.error)">
|
</dl>
|
||||||
<svg class="sidebaricon" fill="currentColor">
|
<div class="row">
|
||||||
<use *ngIf="!copied" xlink:href="assets/bootstrap-icons.svg#clipboard" />
|
<div class="col offset-sm-3">
|
||||||
<use *ngIf="copied" xlink:href="assets/bootstrap-icons.svg#clipboard-check" />
|
<button class="btn btn-sm btn-outline-dark" (click)="copyError(toast.error)">
|
||||||
</svg> <ng-container i18n>Copy Raw Error</ng-container>
|
<svg class="sidebaricon" fill="currentColor">
|
||||||
</button>
|
<use *ngIf="!copied" xlink:href="assets/bootstrap-icons.svg#clipboard" />
|
||||||
|
<use *ngIf="copied" xlink:href="assets/bootstrap-icons.svg#clipboard-check" />
|
||||||
|
</svg> <ng-container i18n>Copy Raw Error</ng-container>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</details>
|
||||||
|
<p class="mb-0 mt-2" *ngIf="toast.action"><button class="btn btn-sm btn-outline-secondary" (click)="toastService.closeToast(toast); toast.action()">{{toast.actionName}}</button></p>
|
||||||
</div>
|
</div>
|
||||||
</details>
|
<button type="button" class="btn-close ms-auto flex-shrink-0" data-bs-dismiss="toast" aria-label="Close" (click)="toastService.closeToast(toast);"></button>
|
||||||
<p class="mb-0 mt-2" *ngIf="toast.action"><button class="btn btn-sm btn-outline-secondary" (click)="toastService.closeToast(toast); toast.action()">{{toast.actionName}}</button></p>
|
</div>
|
||||||
</ngb-toast>
|
</ngb-toast>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user