paradizelost/paperless-ngx
1
0
Fork 0
mirror of https://github.com/paperless-ngx/paperless-ngx.git synced 2025-04-09 09:58:20 -05:00
Code Issues Packages Projects Releases Wiki Activity

Feature: compact toasts (#4545)

Browse Source
This commit is contained in:
shamoon 2023-11-13 13:17:44 -08:00 committed by GitHub
parent facb7226fe
commit 90707d661b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 127 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
src-ui/messages.xlf
View File

@ -243,33 +243,22 @@
<context context-type="linenumber">13</context> <context context-type="linenumber">13</context>
</context-group> </context-group>
</trans-unit> </trans-unit>
<trans-unit id="9103526311244275943" datatype="html"> <trans-unit id="3527354815023530656" datatype="html">
<source>Document added</source> <source>Document <x id="PH" equiv-text="status.filename"/> was added to Paperless-ngx.</source>
<context-group purpose="location"> <context-group purpose="location">
<context context-type="sourcefile">src/app/app.component.ts</context> <context context-type="sourcefile">src/app/app.component.ts</context>
<context context-type="linenumber">83</context> <context context-type="linenumber">83</context>
</context-group> </context-group>
<context-group purpose="location"> <context-group purpose="location">
<context context-type="sourcefile">src/app/app.component.ts</context> <context context-type="sourcefile">src/app/app.component.ts</context>
<context context-type="linenumber">93</context> <context context-type="linenumber">92</context>
</context-group>
</trans-unit>
<trans-unit id="9204248378636247318" datatype="html">
<source>Document <x id="PH" equiv-text="status.filename"/> was added to paperless.</source>
<context-group purpose="location">
<context context-type="sourcefile">src/app/app.component.ts</context>
<context context-type="linenumber">85</context>
</context-group>
<context-group purpose="location">
<context context-type="sourcefile">src/app/app.component.ts</context>
<context context-type="linenumber">95</context>
</context-group> </context-group>
</trans-unit> </trans-unit>
<trans-unit id="1931214133925051574" datatype="html"> <trans-unit id="1931214133925051574" datatype="html">
<source>Open document</source> <source>Open document</source>
<context-group purpose="location"> <context-group purpose="location">
<context context-type="sourcefile">src/app/app.component.ts</context> <context context-type="sourcefile">src/app/app.component.ts</context>
<context context-type="linenumber">86</context> <context context-type="linenumber">85</context>
</context-group> </context-group>
<context-group purpose="location"> <context-group purpose="location">
<context context-type="sourcefile">src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.html</context> <context context-type="sourcefile">src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.html</context>
@ -280,35 +269,28 @@
<source>Could not add <x id="PH" equiv-text="status.filename"/>: <x id="PH_1" equiv-text="status.message"/></source> <source>Could not add <x id="PH" equiv-text="status.filename"/>: <x id="PH_1" equiv-text="status.message"/></source>
<context-group purpose="location"> <context-group purpose="location">
<context context-type="sourcefile">src/app/app.component.ts</context> <context context-type="sourcefile">src/app/app.component.ts</context>
<context context-type="linenumber">109</context> <context context-type="linenumber">107</context>
</context-group> </context-group>
</trans-unit> </trans-unit>
<trans-unit id="1710712016675379662" datatype="html"> <trans-unit id="1218124467712564468" datatype="html">
<source>New document detected</source> <source>Document <x id="PH" equiv-text="status.filename"/> is being processed by Paperless-ngx.</source>
<context-group purpose="location"> <context-group purpose="location">
<context context-type="sourcefile">src/app/app.component.ts</context> <context context-type="sourcefile">src/app/app.component.ts</context>
<context context-type="linenumber">124</context> <context context-type="linenumber">122</context>
</context-group>
</trans-unit>
<trans-unit id="587031278561344416" datatype="html">
<source>Document <x id="PH" equiv-text="status.filename"/> is being processed by paperless.</source>
<context-group purpose="location">
<context context-type="sourcefile">src/app/app.component.ts</context>
<context context-type="linenumber">126</context>
</context-group> </context-group>
</trans-unit> </trans-unit>
<trans-unit id="2501522447884928778" datatype="html"> <trans-unit id="2501522447884928778" datatype="html">
<source>Prev</source> <source>Prev</source>
<context-group purpose="location"> <context-group purpose="location">
<context context-type="sourcefile">src/app/app.component.ts</context> <context context-type="sourcefile">src/app/app.component.ts</context>
<context context-type="linenumber">131</context> <context context-type="linenumber">128</context>
</context-group> </context-group>
</trans-unit> </trans-unit>
<trans-unit id="3885497195825665706" datatype="html"> <trans-unit id="3885497195825665706" datatype="html">
<source>Next</source> <source>Next</source>
<context-group purpose="location"> <context-group purpose="location">
<context context-type="sourcefile">src/app/app.component.ts</context> <context context-type="sourcefile">src/app/app.component.ts</context>
<context context-type="linenumber">132</context> <context context-type="linenumber">129</context>
</context-group> </context-group>
<context-group purpose="location"> <context-group purpose="location">
<context context-type="sourcefile">src/app/components/document-detail/document-detail.component.html</context> <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.html</context>
@ -319,98 +301,98 @@
<source>End</source> <source>End</source>
<context-group purpose="location"> <context-group purpose="location">
<context context-type="sourcefile">src/app/app.component.ts</context> <context context-type="sourcefile">src/app/app.component.ts</context>
<context context-type="linenumber">133</context> <context context-type="linenumber">130</context>
</context-group> </context-group>
</trans-unit> </trans-unit>
<trans-unit id="3909462337752654810" datatype="html"> <trans-unit id="3909462337752654810" datatype="html">
<source>The dashboard can be used to show saved views, such as an &apos;Inbox&apos;. Those settings are found under Settings &gt; Saved Views once you have created some.</source> <source>The dashboard can be used to show saved views, such as an &apos;Inbox&apos;. Those settings are found under Settings &gt; Saved Views once you have created some.</source>
<context-group purpose="location"> <context-group purpose="location">
<context context-type="sourcefile">src/app/app.component.ts</context> <context context-type="sourcefile">src/app/app.component.ts</context>
<context context-type="linenumber">139</context> <context context-type="linenumber">136</context>
</context-group> </context-group>
</trans-unit> </trans-unit>
<trans-unit id="9075755296812854717" datatype="html"> <trans-unit id="9075755296812854717" datatype="html">
<source>Drag-and-drop documents here to start uploading or place them in the consume folder. You can also drag-and-drop documents anywhere on all other pages of the web app. Once you do, Paperless-ngx will start training its machine learning algorithms.</source> <source>Drag-and-drop documents here to start uploading or place them in the consume folder. You can also drag-and-drop documents anywhere on all other pages of the web app. Once you do, Paperless-ngx will start training its machine learning algorithms.</source>
<context-group purpose="location"> <context-group purpose="location">
<context context-type="sourcefile">src/app/app.component.ts</context> <context context-type="sourcefile">src/app/app.component.ts</context>
<context context-type="linenumber">146</context> <context context-type="linenumber">143</context>
</context-group> </context-group>
</trans-unit> </trans-unit>
<trans-unit id="7495498057594070122" datatype="html"> <trans-unit id="7495498057594070122" datatype="html">
<source>The documents list shows all of your documents and allows for filtering as well as bulk-editing. There are three different view styles: list, small cards and large cards. A list of documents currently opened for editing is shown in the sidebar.</source> <source>The documents list shows all of your documents and allows for filtering as well as bulk-editing. There are three different view styles: list, small cards and large cards. A list of documents currently opened for editing is shown in the sidebar.</source>
<context-group purpose="location"> <context-group purpose="location">
<context context-type="sourcefile">src/app/app.component.ts</context> <context context-type="sourcefile">src/app/app.component.ts</context>
<context context-type="linenumber">151</context> <context context-type="linenumber">148</context>
</context-group> </context-group>
</trans-unit> </trans-unit>
<trans-unit id="1334220418719920556" datatype="html"> <trans-unit id="1334220418719920556" datatype="html">
<source>The filtering tools allow you to quickly find documents using various searches, dates, tags, etc.</source> <source>The filtering tools allow you to quickly find documents using various searches, dates, tags, etc.</source>
<context-group purpose="location"> <context-group purpose="location">
<context context-type="sourcefile">src/app/app.component.ts</context> <context context-type="sourcefile">src/app/app.component.ts</context>
<context context-type="linenumber">158</context> <context context-type="linenumber">155</context>
</context-group> </context-group>
</trans-unit> </trans-unit>
<trans-unit id="5427326625898532358" datatype="html"> <trans-unit id="5427326625898532358" datatype="html">
<source>Any combination of filters can be saved as a &apos;view&apos; which can then be displayed on the dashboard and / or sidebar.</source> <source>Any combination of filters can be saved as a &apos;view&apos; which can then be displayed on the dashboard and / or sidebar.</source>
<context-group purpose="location"> <context-group purpose="location">
<context context-type="sourcefile">src/app/app.component.ts</context> <context context-type="sourcefile">src/app/app.component.ts</context>
<context context-type="linenumber">164</context> <context context-type="linenumber">161</context>
</context-group> </context-group>
</trans-unit> </trans-unit>
<trans-unit id="2804886236408698479" datatype="html"> <trans-unit id="2804886236408698479" datatype="html">
<source>Tags, correspondents, document types and storage paths can all be managed using these pages. They can also be created from the document edit view.</source> <source>Tags, correspondents, document types and storage paths can all be managed using these pages. They can also be created from the document edit view.</source>
<context-group purpose="location"> <context-group purpose="location">
<context context-type="sourcefile">src/app/app.component.ts</context> <context context-type="sourcefile">src/app/app.component.ts</context>
<context context-type="linenumber">169</context> <context context-type="linenumber">166</context>
</context-group> </context-group>
</trans-unit> </trans-unit>
<trans-unit id="7851939076947092983" datatype="html"> <trans-unit id="7851939076947092983" datatype="html">
<source>Manage e-mail accounts and rules for automatically importing documents.</source> <source>Manage e-mail accounts and rules for automatically importing documents.</source>
<context-group purpose="location"> <context-group purpose="location">
<context context-type="sourcefile">src/app/app.component.ts</context> <context context-type="sourcefile">src/app/app.component.ts</context>
<context context-type="linenumber">177</context> <context context-type="linenumber">174</context>
</context-group> </context-group>
</trans-unit> </trans-unit>
<trans-unit id="1347174817382304718" datatype="html"> <trans-unit id="1347174817382304718" datatype="html">
<source>Consumption templates give you finer control over the document ingestion process.</source> <source>Consumption templates give you finer control over the document ingestion process.</source>
<context-group purpose="location"> <context-group purpose="location">
<context context-type="sourcefile">src/app/app.component.ts</context> <context context-type="sourcefile">src/app/app.component.ts</context>
<context context-type="linenumber">185</context> <context context-type="linenumber">182</context>
</context-group> </context-group>
</trans-unit> </trans-unit>
<trans-unit id="4680387114119209483" datatype="html"> <trans-unit id="4680387114119209483" datatype="html">
<source>File Tasks shows you documents that have been consumed, are waiting to be, or may have failed during the process.</source> <source>File Tasks shows you documents that have been consumed, are waiting to be, or may have failed during the process.</source>
<context-group purpose="location"> <context-group purpose="location">
<context context-type="sourcefile">src/app/app.component.ts</context> <context context-type="sourcefile">src/app/app.component.ts</context>
<context context-type="linenumber">193</context> <context context-type="linenumber">190</context>
</context-group> </context-group>
</trans-unit> </trans-unit>
<trans-unit id="1453710303796913192" datatype="html"> <trans-unit id="1453710303796913192" datatype="html">
<source>Check out the settings for various tweaks to the web app and toggle settings for saved views.</source> <source>Check out the settings for various tweaks to the web app and toggle settings for saved views.</source>
<context-group purpose="location"> <context-group purpose="location">
<context context-type="sourcefile">src/app/app.component.ts</context> <context context-type="sourcefile">src/app/app.component.ts</context>
<context context-type="linenumber">201</context> <context context-type="linenumber">198</context>
</context-group> </context-group>
</trans-unit> </trans-unit>
<trans-unit id="7172877665285340082" datatype="html"> <trans-unit id="7172877665285340082" datatype="html">
<source>Thank you! 🙏</source> <source>Thank you! 🙏</source>
<context-group purpose="location"> <context-group purpose="location">
<context context-type="sourcefile">src/app/app.component.ts</context> <context context-type="sourcefile">src/app/app.component.ts</context>
<context context-type="linenumber">209</context> <context context-type="linenumber">206</context>
</context-group> </context-group>
</trans-unit> </trans-unit>
<trans-unit id="7354947513482088740" datatype="html"> <trans-unit id="7354947513482088740" datatype="html">
<source>There are &lt;em&gt;tons&lt;/em&gt; more features and info we didn&apos;t cover here, but this should get you started. Check out the documentation or visit the project on GitHub to learn more or to report issues.</source> <source>There are &lt;em&gt;tons&lt;/em&gt; more features and info we didn&apos;t cover here, but this should get you started. Check out the documentation or visit the project on GitHub to learn more or to report issues.</source>
<context-group purpose="location"> <context-group purpose="location">
<context context-type="sourcefile">src/app/app.component.ts</context> <context context-type="sourcefile">src/app/app.component.ts</context>
<context context-type="linenumber">211</context> <context context-type="linenumber">208</context>
</context-group> </context-group>
</trans-unit> </trans-unit>
<trans-unit id="4270528545616947218" datatype="html"> <trans-unit id="4270528545616947218" datatype="html">
<source>Lastly, on behalf of every contributor to this community-supported project, thank you for using Paperless-ngx!</source> <source>Lastly, on behalf of every contributor to this community-supported project, thank you for using Paperless-ngx!</source>
<context-group purpose="location"> <context-group purpose="location">
<context context-type="sourcefile">src/app/app.component.ts</context> <context context-type="sourcefile">src/app/app.component.ts</context>
<context context-type="linenumber">213</context> <context context-type="linenumber">210</context>
</context-group> </context-group>
</trans-unit> </trans-unit>
<trans-unit id="4804785061014590286" datatype="html"> <trans-unit id="4804785061014590286" datatype="html">
@ -1378,39 +1360,32 @@
<context context-type="linenumber">370</context> <context context-type="linenumber">370</context>
</context-group> </context-group>
</trans-unit> </trans-unit>
<trans-unit id="3891152409365583719" datatype="html">
<source>Settings saved</source>
<context-group purpose="location">
<context context-type="sourcefile">src/app/components/admin/settings/settings.component.ts</context>
<context context-type="linenumber">492</context>
</context-group>
</trans-unit>
<trans-unit id="7217000812750597833" datatype="html"> <trans-unit id="7217000812750597833" datatype="html">
<source>Settings were saved successfully.</source> <source>Settings were saved successfully.</source>
<context-group purpose="location"> <context-group purpose="location">
<context context-type="sourcefile">src/app/components/admin/settings/settings.component.ts</context> <context context-type="sourcefile">src/app/components/admin/settings/settings.component.ts</context>
<context context-type="linenumber">493</context> <context context-type="linenumber">492</context>
</context-group> </context-group>
</trans-unit> </trans-unit>
<trans-unit id="525012668859298131" datatype="html"> <trans-unit id="525012668859298131" datatype="html">
<source>Settings were saved successfully. Reload is required to apply some changes.</source> <source>Settings were saved successfully. Reload is required to apply some changes.</source>
<context-group purpose="location"> <context-group purpose="location">
<context context-type="sourcefile">src/app/components/admin/settings/settings.component.ts</context> <context context-type="sourcefile">src/app/components/admin/settings/settings.component.ts</context>
<context context-type="linenumber">497</context> <context context-type="linenumber">496</context>
</context-group> </context-group>
</trans-unit> </trans-unit>
<trans-unit id="8491974984518503778" datatype="html"> <trans-unit id="8491974984518503778" datatype="html">
<source>Reload now</source> <source>Reload now</source>
<context-group purpose="location"> <context-group purpose="location">
<context context-type="sourcefile">src/app/components/admin/settings/settings.component.ts</context> <context context-type="sourcefile">src/app/components/admin/settings/settings.component.ts</context>
<context context-type="linenumber">498</context> <context context-type="linenumber">497</context>
</context-group> </context-group>
</trans-unit> </trans-unit>
<trans-unit id="3011185103048412841" datatype="html"> <trans-unit id="3011185103048412841" datatype="html">
<source>An error occurred while saving settings.</source> <source>An error occurred while saving settings.</source>
<context-group purpose="location"> <context-group purpose="location">
<context context-type="sourcefile">src/app/components/admin/settings/settings.component.ts</context> <context context-type="sourcefile">src/app/components/admin/settings/settings.component.ts</context>
<context context-type="linenumber">508</context> <context context-type="linenumber">507</context>
</context-group> </context-group>
<context-group purpose="location"> <context-group purpose="location">
<context context-type="sourcefile">src/app/components/app-frame/app-frame.component.ts</context> <context context-type="sourcefile">src/app/components/app-frame/app-frame.component.ts</context>
@ -1421,21 +1396,21 @@
<source>Use system language</source> <source>Use system language</source>
<context-group purpose="location"> <context-group purpose="location">
<context context-type="sourcefile">src/app/components/admin/settings/settings.component.ts</context> <context context-type="sourcefile">src/app/components/admin/settings/settings.component.ts</context>
<context context-type="linenumber">516</context> <context context-type="linenumber">515</context>
</context-group> </context-group>
</trans-unit> </trans-unit>
<trans-unit id="7729897675462249787" datatype="html"> <trans-unit id="7729897675462249787" datatype="html">
<source>Use date format of display language</source> <source>Use date format of display language</source>
<context-group purpose="location"> <context-group purpose="location">
<context context-type="sourcefile">src/app/components/admin/settings/settings.component.ts</context> <context context-type="sourcefile">src/app/components/admin/settings/settings.component.ts</context>
<context context-type="linenumber">523</context> <context context-type="linenumber">522</context>
</context-group> </context-group>
</trans-unit> </trans-unit>
<trans-unit id="5260584511980773458" datatype="html"> <trans-unit id="5260584511980773458" datatype="html">
<source>Error while storing settings on server.</source> <source>Error while storing settings on server.</source>
<context-group purpose="location"> <context-group purpose="location">
<context context-type="sourcefile">src/app/components/admin/settings/settings.component.ts</context> <context context-type="sourcefile">src/app/components/admin/settings/settings.component.ts</context>
<context context-type="linenumber">546</context> <context context-type="linenumber">545</context>
</context-group> </context-group>
</trans-unit> </trans-unit>
<trans-unit id="2991443309752293110" datatype="html"> <trans-unit id="2991443309752293110" datatype="html">
@ -2595,11 +2570,7 @@
</context-group> </context-group>
<context-group purpose="location"> <context-group purpose="location">
<context context-type="sourcefile">src/app/components/common/toasts/toasts.component.html</context> <context context-type="sourcefile">src/app/components/common/toasts/toasts.component.html</context>
<context context-type="linenumber">14</context> <context context-type="linenumber">18</context>
</context-group>
<context-group purpose="location">
<context context-type="sourcefile">src/app/services/toast.service.ts</context>
<context context-type="linenumber">37</context>
</context-group> </context-group>
</trans-unit> </trans-unit>
<trans-unit id="2159130950882492111" datatype="html"> <trans-unit id="2159130950882492111" datatype="html">
@ -3787,14 +3758,14 @@
<source>Status</source> <source>Status</source>
<context-group purpose="location"> <context-group purpose="location">
<context context-type="sourcefile">src/app/components/common/toasts/toasts.component.html</context> <context context-type="sourcefile">src/app/components/common/toasts/toasts.component.html</context>
<context context-type="linenumber">12</context> <context context-type="linenumber">16</context>
</context-group> </context-group>
</trans-unit> </trans-unit>
<trans-unit id="6732151329960766506" datatype="html"> <trans-unit id="6732151329960766506" datatype="html">
<source>Copy Raw Error</source> <source>Copy Raw Error</source>
<context-group purpose="location"> <context-group purpose="location">
<context context-type="sourcefile">src/app/components/common/toasts/toasts.component.html</context> <context context-type="sourcefile">src/app/components/common/toasts/toasts.component.html</context>
<context context-type="linenumber">23</context> <context context-type="linenumber">27</context>
</context-group> </context-group>
</trans-unit> </trans-unit>
<trans-unit id="1865646076514070962" datatype="html"> <trans-unit id="1865646076514070962" datatype="html">
@ -6520,13 +6491,6 @@
<context context-type="linenumber">542</context> <context context-type="linenumber">542</context>
</context-group> </context-group>
</trans-unit> </trans-unit>
<trans-unit id="5037437391296624618" datatype="html">
<source>Information</source>
<context-group purpose="location">
<context context-type="sourcefile">src/app/services/toast.service.ts</context>
<context context-type="linenumber">46</context>
</context-group>
</trans-unit>
<trans-unit id="3852289441366561594" datatype="html"> <trans-unit id="3852289441366561594" datatype="html">
<source>Connecting...</source> <source>Connecting...</source>
<context-group purpose="location"> <context-group purpose="location">

9
src-ui/src/app/app.component.ts
View File

@ -80,9 +80,8 @@ export class AppComponent implements OnInit, OnDestroy {
) )
) { ) {
this.toastService.show({ this.toastService.show({
title: $localize`Document added`, content: $localize`Document ${status.filename} was added to Paperless-ngx.`,
delay: 10000, delay: 10000,
content: $localize`Document ${status.filename} was added to paperless.`,
actionName: $localize`Open document`, actionName: $localize`Open document`,
action: () => { action: () => {
this.router.navigate(['documents', status.documentId]) this.router.navigate(['documents', status.documentId])
@ -90,9 +89,8 @@ export class AppComponent implements OnInit, OnDestroy {
}) })
} else { } else {
this.toastService.show({ this.toastService.show({
title: $localize`Document added`, content: $localize`Document ${status.filename} was added to Paperless-ngx.`,
delay: 10000, delay: 10000,
content: $localize`Document ${status.filename} was added to paperless.`,
}) })
} }
} }
@ -121,9 +119,8 @@ export class AppComponent implements OnInit, OnDestroy {
) )
) { ) {
this.toastService.show({ this.toastService.show({
title: $localize`New document detected`, content: $localize`Document ${status.filename} is being processed by Paperless-ngx.`,
delay: 5000, delay: 5000,
content: $localize`Document ${status.filename} is being processed by paperless.`,
}) })
} }
}) })

1
src-ui/src/app/components/admin/settings/settings.component.ts
View File

@ -489,7 +489,6 @@ export class SettingsComponent
this.documentListViewService.updatePageSize() this.documentListViewService.updatePageSize()
this.settings.updateAppearanceSettings() this.settings.updateAppearanceSettings()
let savedToast: Toast = { let savedToast: Toast = {
title: $localize`Settings saved`,
content: $localize`Settings were saved successfully.`, content: $localize`Settings were saved successfully.`,
delay: 5000, delay: 5000,
} }

59
src-ui/src/app/components/common/toasts/toasts.component.html
View File

@ -1,30 +1,43 @@
<ngb-toast <ngb-toast
*ngFor="let toast of toasts" *ngFor="let toast of toasts"
[header]="toast.title" [autohide]="true" [delay]="toast.delay" [autohide]="true" [delay]="toast.delay"
[class]="toast.classname" [class]="toast.classname"
[class.mb-2]="true"
(shown)="onShow(toast)"
(hidden)="toastService.closeToast(toast)"> (hidden)="toastService.closeToast(toast)">
<p>{{toast.content}}</p> <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>
<details *ngIf="toast.error"> <span class="visually-hidden">{{ toast.delayRemaining / 1000 | number: '1.0-0' }} seconds</span>
<div class="p-3"> <div class="d-flex align-items-top">
<dl class="row" *ngIf="isDetailedError(toast.error)"> <svg class="sidebaricon-sm mt-1 me-2 flex-shrink-0" fill="currentColor">
<dt class="col-sm-3 fw-normal text-end">URL</dt> <use *ngIf="!toast.error" xlink:href="assets/bootstrap-icons.svg#info-circle"/>
<dd class="col-sm-9">{{ toast.error.url }}</dd> <use *ngIf="toast.error" xlink:href="assets/bootstrap-icons.svg#exclamation-triangle"/>
<dt class="col-sm-3 fw-normal text-end" i18n>Status</dt> </svg>
<dd class="col-sm-9">{{ toast.error.status }} <em>{{ toast.error.statusText }}</em></dd> <div>
<dt class="col-sm-3 fw-normal text-end" i18n>Error</dt> <p class="mb-0">{{toast.content}}</p>
<dd class="col-sm-9">{{ getErrorText(toast.error) }}</dd> <details *ngIf="toast.error">
</dl> <div class="mt-2">
<div class="row"> <dl class="row mb-0" *ngIf="isDetailedError(toast.error)">
<div class="col offset-sm-3"> <dt class="col-sm-3 fw-normal text-end">URL</dt>
<button class="btn btn-sm btn-outline-dark" (click)="copyError(toast.error)"> <dd class="col-sm-9">{{ toast.error.url }}</dd>
<svg class="sidebaricon" fill="currentColor"> <dt class="col-sm-3 fw-normal text-end" i18n>Status</dt>
<use *ngIf="!copied" xlink:href="assets/bootstrap-icons.svg#clipboard" /> <dd class="col-sm-9">{{ toast.error.status }} <em>{{ toast.error.statusText }}</em></dd>
<use *ngIf="copied" xlink:href="assets/bootstrap-icons.svg#clipboard-check" /> <dt class="col-sm-3 fw-normal text-end" i18n>Error</dt>
</svg>&nbsp;<ng-container i18n>Copy Raw Error</ng-container> <dd class="col-sm-9">{{ getErrorText(toast.error) }}</dd>
</button> </dl>
<div class="row">
<div class="col offset-sm-3">
<button class="btn btn-sm btn-outline-dark" (click)="copyError(toast.error)">
<svg class="sidebaricon" fill="currentColor">
<use *ngIf="!copied" xlink:href="assets/bootstrap-icons.svg#clipboard" />
<use *ngIf="copied" xlink:href="assets/bootstrap-icons.svg#clipboard-check" />
</svg>&nbsp;<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" *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>

18
src-ui/src/app/components/common/toasts/toasts.component.scss
View File

@ -2,7 +2,7 @@
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; right: 0;
margin: 0.5em; margin: 0.3em;
z-index: 1200; z-index: 1200;
} }
@ -10,13 +10,23 @@
display: block; // this corrects an ng-bootstrap bug that prevented animations display: block; // this corrects an ng-bootstrap bug that prevented animations
} }
::ng-deep .toast.error .toast-header { ::ng-deep .toast-body {
background-color: hsla(350, 79%, 40%, 0.8); // bg-danger position: relative;
border-color: black; }
::ng-deep .toast.error {
border-color: hsla(350, 79%, 40%, 0.4); // bg-danger
} }
::ng-deep .toast.error .toast-body { ::ng-deep .toast.error .toast-body {
background-color: hsla(350, 79%, 40%, 0.8); // bg-danger background-color: hsla(350, 79%, 40%, 0.8); // bg-danger
border-top-left-radius: inherit;
border-top-right-radius: inherit;
border-bottom-left-radius: inherit; border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit; border-bottom-right-radius: inherit;
} }
.progress {
background-color: var(--pngx-primary);
opacity: .07;
}

25
src-ui/src/app/components/common/toasts/toasts.component.spec.ts
View File

@ -3,6 +3,7 @@ import {
discardPeriodicTasks, discardPeriodicTasks,
fakeAsync, fakeAsync,
flush, flush,
tick,
} from '@angular/core/testing' } from '@angular/core/testing'
import { ToastService } from 'src/app/services/toast.service' import { ToastService } from 'src/app/services/toast.service'
import { ToastsComponent } from './toasts.component' import { ToastsComponent } from './toasts.component'
@ -14,18 +15,15 @@ import { Clipboard } from '@angular/cdk/clipboard'
const toasts = [ const toasts = [
{ {
title: 'Title', content: 'foo bar',
content: 'content',
delay: 5000, delay: 5000,
}, },
{ {
title: 'Error 1',
content: 'Error 1 content', content: 'Error 1 content',
delay: 5000, delay: 5000,
error: 'Error 1 string', error: 'Error 1 string',
}, },
{ {
title: 'Error 2',
content: 'Error 2 content', content: 'Error 2 content',
delay: 5000, delay: 5000,
error: { error: {
@ -75,8 +73,7 @@ describe('ToastsComponent', () => {
expect(spy).toHaveBeenCalled() expect(spy).toHaveBeenCalled()
expect(component.toasts).toContainEqual({ expect(component.toasts).toContainEqual({
title: 'Title', content: 'foo bar',
content: 'content',
delay: 5000, delay: 5000,
}) })
@ -89,13 +86,24 @@ describe('ToastsComponent', () => {
component.ngOnInit() component.ngOnInit()
fixture.detectChanges() fixture.detectChanges()
expect(fixture.nativeElement.textContent).toContain('Title') expect(fixture.nativeElement.textContent).toContain('foo bar')
component.ngOnDestroy() component.ngOnDestroy()
flush() flush()
discardPeriodicTasks() discardPeriodicTasks()
})) }))
it('should countdown toast', fakeAsync(() => {
component.ngOnInit()
fixture.detectChanges()
component.onShow(toasts[0])
tick(5000)
expect(component.toasts[0].delayRemaining).toEqual(0)
component.ngOnDestroy()
flush()
discardPeriodicTasks()
}))
it('should show an error if given with toast', fakeAsync(() => { it('should show an error if given with toast', fakeAsync(() => {
component.ngOnInit() component.ngOnInit()
fixture.detectChanges() fixture.detectChanges()
@ -134,6 +142,9 @@ describe('ToastsComponent', () => {
'Error string no detail' 'Error string no detail'
) )
expect(component.getErrorText('Error string')).toEqual('') expect(component.getErrorText('Error string')).toEqual('')
expect(
component.getErrorText({ error: { message: 'foo error bar' } })
).toContain('{"message":"foo error bar"}')
expect( expect(
component.getErrorText({ error: new Array(205).join('a') }) component.getErrorText({ error: new Array(205).join('a') })
).toContain('...') ).toContain('...')

18
src-ui/src/app/components/common/toasts/toasts.component.ts
View File

@ -1,5 +1,5 @@
import { Component, OnDestroy, OnInit } from '@angular/core' import { Component, OnDestroy, OnInit } from '@angular/core'
import { Subscription } from 'rxjs' import { Subscription, interval, take } from 'rxjs'
import { Toast, ToastService } from 'src/app/services/toast.service' import { Toast, ToastService } from 'src/app/services/toast.service'
import { Clipboard } from '@angular/cdk/clipboard' import { Clipboard } from '@angular/cdk/clipboard'
@ -20,6 +20,8 @@ export class ToastsComponent implements OnInit, OnDestroy {
public copied: boolean = false public copied: boolean = false
public seconds: number = 0
ngOnDestroy(): void { ngOnDestroy(): void {
this.subscription?.unsubscribe() this.subscription?.unsubscribe()
} }
@ -37,6 +39,20 @@ export class ToastsComponent implements OnInit, OnDestroy {
}) })
} }
onShow(toast: Toast) {
const refreshInterval = 150
const delay = toast.delay - 500 // for fade animation
interval(refreshInterval)
.pipe(take(delay / refreshInterval))
.subscribe((count) => {
toast.delayRemaining = Math.max(
0,
delay - refreshInterval * (count + 1)
)
})
}
public isDetailedError(error: any): boolean { public isDetailedError(error: any): boolean {
return ( return (
typeof error === 'object' && typeof error === 'object' &&

7
src-ui/src/app/services/toast.service.ts
View File

@ -2,12 +2,12 @@ import { Injectable } from '@angular/core'
import { Subject } from 'rxjs' import { Subject } from 'rxjs'
export interface Toast { export interface Toast {
title: string
content: string content: string
delay: number delay: number
delayRemaining?: number
action?: any action?: any
actionName?: string actionName?: string
@ -34,7 +34,6 @@ export class ToastService {
showError(content: string, error: any = null, delay: number = 10000) { showError(content: string, error: any = null, delay: number = 10000) {
this.show({ this.show({
title: $localize`Error`,
content: content, content: content,
delay: delay, delay: delay,
classname: 'error', classname: 'error',
@ -43,7 +42,7 @@ export class ToastService {
} }
showInfo(content: string, delay: number = 5000) { showInfo(content: string, delay: number = 5000) {
this.show({ title: $localize`Information`, content: content, delay: delay }) this.show({ content: content, delay: delay })
} }
closeToast(toast: Toast) { closeToast(toast: Toast) {

5
src-ui/src/theme.scss
View File

@ -249,12 +249,11 @@ $form-check-radio-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='htt
filter: invert(1) grayscale(100%) brightness(200%); filter: invert(1) grayscale(100%) brightness(200%);
} }
.toast, .toast-header { .toast {
background-color: hsla(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 15%), 0.8); background-color: hsla(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 15%), 0.9);
} }
.toast, .toast,
.toast .toast-header,
.toast .btn, .toast .btn,
.toast .btn-close { .toast .btn-close {
color: var(--pngx-primary-text-contrast); color: var(--pngx-primary-text-contrast);