lgcosta/paperless-ngx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compact toasts, drop title and padding

Browse Source
This commit is contained in:
shamoon 2023-11-09 19:53:26 -08:00
parent facb7226fe
commit 8c67e486c7
8 changed files with 57 additions and 101 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-group>
</trans-unit>
<trans-unit id="9103526311244275943" datatype="html">
<source>Document added</source>
<trans-unit id="3527354815023530656" datatype="html">
<source>Document <x id="PH" equiv-text="status.filename"/> was added to Paperless-ngx.</source>
<context-group purpose="location">
<context context-type="sourcefile">src/app/app.component.ts</context>
<context context-type="linenumber">83</context>
</context-group>
<context-group purpose="location">
<context context-type="sourcefile">src/app/app.component.ts</context>
<context context-type="linenumber">93</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 context-type="linenumber">92</context>
</context-group>
</trans-unit>
<trans-unit id="1931214133925051574" datatype="html">
<source>Open document</source>
<context-group purpose="location">
<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 purpose="location">
<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>
<context-group purpose="location">
<context context-type="sourcefile">src/app/app.component.ts</context>
<context context-type="linenumber">109</context>
<context context-type="linenumber">107</context>
</context-group>
</trans-unit>
<trans-unit id="1710712016675379662" datatype="html">
<source>New document detected</source>
<trans-unit id="1218124467712564468" datatype="html">
<source>Document <x id="PH" equiv-text="status.filename"/> is being processed by Paperless-ngx.</source>
<context-group purpose="location">
<context context-type="sourcefile">src/app/app.component.ts</context>
<context context-type="linenumber">124</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 context-type="linenumber">122</context>
</context-group>
</trans-unit>
<trans-unit id="2501522447884928778" datatype="html">
<source>Prev</source>
<context-group purpose="location">
<context context-type="sourcefile">src/app/app.component.ts</context>
<context context-type="linenumber">131</context>
<context context-type="linenumber">128</context>
</context-group>
</trans-unit>
<trans-unit id="3885497195825665706" datatype="html">
<source>Next</source>
<context-group purpose="location">
<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 purpose="location">
<context context-type="sourcefile">src/app/components/document-detail/document-detail.component.html</context>
@ -319,98 +301,98 @@
<source>End</source>
<context-group purpose="location">
<context context-type="sourcefile">src/app/app.component.ts</context>
<context context-type="linenumber">133</context>
<context context-type="linenumber">130</context>
</context-group>
</trans-unit>
<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>
<context-group purpose="location">
<context context-type="sourcefile">src/app/app.component.ts</context>
<context context-type="linenumber">139</context>
<context context-type="linenumber">136</context>
</context-group>
</trans-unit>
<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>
<context-group purpose="location">
<context context-type="sourcefile">src/app/app.component.ts</context>
<context context-type="linenumber">146</context>
<context context-type="linenumber">143</context>
</context-group>
</trans-unit>
<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>
<context-group purpose="location">
<context context-type="sourcefile">src/app/app.component.ts</context>
<context context-type="linenumber">151</context>
<context context-type="linenumber">148</context>
</context-group>
</trans-unit>
<trans-unit id="1334220418719920556" datatype="html">
<source>The filtering tools allow you to quickly find documents using various searches, dates, tags, etc.</source>
<context-group purpose="location">
<context context-type="sourcefile">src/app/app.component.ts</context>
<context context-type="linenumber">158</context>
<context context-type="linenumber">155</context>
</context-group>
</trans-unit>
<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>
<context-group purpose="location">
<context context-type="sourcefile">src/app/app.component.ts</context>
<context context-type="linenumber">164</context>
<context context-type="linenumber">161</context>
</context-group>
</trans-unit>
<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>
<context-group purpose="location">
<context context-type="sourcefile">src/app/app.component.ts</context>
<context context-type="linenumber">169</context>
<context context-type="linenumber">166</context>
</context-group>
</trans-unit>
<trans-unit id="7851939076947092983" datatype="html">
<source>Manage e-mail accounts and rules for automatically importing documents.</source>
<context-group purpose="location">
<context context-type="sourcefile">src/app/app.component.ts</context>
<context context-type="linenumber">177</context>
<context context-type="linenumber">174</context>
</context-group>
</trans-unit>
<trans-unit id="1347174817382304718" datatype="html">
<source>Consumption templates give you finer control over the document ingestion process.</source>
<context-group purpose="location">
<context context-type="sourcefile">src/app/app.component.ts</context>
<context context-type="linenumber">185</context>
<context context-type="linenumber">182</context>
</context-group>
</trans-unit>
<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>
<context-group purpose="location">
<context context-type="sourcefile">src/app/app.component.ts</context>
<context context-type="linenumber">193</context>
<context context-type="linenumber">190</context>
</context-group>
</trans-unit>
<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>
<context-group purpose="location">
<context context-type="sourcefile">src/app/app.component.ts</context>
<context context-type="linenumber">201</context>
<context context-type="linenumber">198</context>
</context-group>
</trans-unit>
<trans-unit id="7172877665285340082" datatype="html">
<source>Thank you! 🙏</source>
<context-group purpose="location">
<context context-type="sourcefile">src/app/app.component.ts</context>
<context context-type="linenumber">209</context>
<context context-type="linenumber">206</context>
</context-group>
</trans-unit>
<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>
<context-group purpose="location">
<context context-type="sourcefile">src/app/app.component.ts</context>
<context context-type="linenumber">211</context>
<context context-type="linenumber">208</context>
</context-group>
</trans-unit>
<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>
<context-group purpose="location">
<context context-type="sourcefile">src/app/app.component.ts</context>
<context context-type="linenumber">213</context>
<context context-type="linenumber">210</context>
</context-group>
</trans-unit>
<trans-unit id="4804785061014590286" datatype="html">
@ -1378,39 +1360,32 @@
<context context-type="linenumber">370</context>
</context-group>
</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">
<source>Settings were saved successfully.</source>
<context-group purpose="location">
<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>
</trans-unit>
<trans-unit id="525012668859298131" datatype="html">
<source>Settings were saved successfully. Reload is required to apply some changes.</source>
<context-group purpose="location">
<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>
</trans-unit>
<trans-unit id="8491974984518503778" datatype="html">
<source>Reload now</source>
<context-group purpose="location">
<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>
</trans-unit>
<trans-unit id="3011185103048412841" datatype="html">
<source>An error occurred while saving settings.</source>
<context-group purpose="location">
<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 purpose="location">
<context context-type="sourcefile">src/app/components/app-frame/app-frame.component.ts</context>
@ -1421,21 +1396,21 @@
<source>Use system language</source>
<context-group purpose="location">
<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>
</trans-unit>
<trans-unit id="7729897675462249787" datatype="html">
<source>Use date format of display language</source>
<context-group purpose="location">
<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>
</trans-unit>
<trans-unit id="5260584511980773458" datatype="html">
<source>Error while storing settings on server.</source>
<context-group purpose="location">
<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>
</trans-unit>
<trans-unit id="2991443309752293110" datatype="html">
@ -2595,11 +2570,7 @@
</context-group>
<context-group purpose="location">
<context context-type="sourcefile">src/app/components/common/toasts/toasts.component.html</context>
<context context-type="linenumber">14</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 context-type="linenumber">18</context>
</context-group>
</trans-unit>
<trans-unit id="2159130950882492111" datatype="html">
@ -3787,14 +3758,14 @@
<source>Status</source>
<context-group purpose="location">
<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>
</trans-unit>
<trans-unit id="6732151329960766506" datatype="html">
<source>Copy Raw Error</source>
<context-group purpose="location">
<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>
</trans-unit>
<trans-unit id="1865646076514070962" datatype="html">
@ -6520,13 +6491,6 @@
<context context-type="linenumber">542</context>
</context-group>
</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">
<source>Connecting...</source>
<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({
title: $localize`Document added`,
content: $localize`Document ${status.filename} was added to Paperless-ngx.`,
delay: 10000,
content: $localize`Document ${status.filename} was added to paperless.`,
actionName: $localize`Open document`,
action: () => {
this.router.navigate(['documents', status.documentId])
@ -90,9 +89,8 @@ export class AppComponent implements OnInit, OnDestroy {
})
} else {
this.toastService.show({
title: $localize`Document added`,
content: $localize`Document ${status.filename} was added to Paperless-ngx.`,
delay: 10000,
content: $localize`Document ${status.filename} was added to paperless.`,
})
}
}
@ -121,9 +119,8 @@ export class AppComponent implements OnInit, OnDestroy {
)
) {
this.toastService.show({
title: $localize`New document detected`,
content: $localize`Document ${status.filename} is being processed by Paperless-ngx.`,
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.settings.updateAppearanceSettings()
let savedToast: Toast = {
title: $localize`Settings saved`,
content: $localize`Settings were saved successfully.`,
delay: 5000,
}

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

@ -1,9 +1,13 @@
<ngb-toast
*ngFor="let toast of toasts"
[header]="toast.title" [autohide]="true" [delay]="toast.delay"
[autohide]="true" [delay]="toast.delay"
[class]="toast.classname"
[class.mb-2]="true"
(hidden)="toastService.closeToast(toast)">
<p>{{toast.content}}</p>
<div class="d-flex">
<p class="mb-0">{{toast.content}}</p>
<button type="button" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close" (click)="toastService.closeToast(toast);"></button>
</div>
<details *ngIf="toast.error">
<div class="p-3">
<dl class="row" *ngIf="isDetailedError(toast.error)">
@ -26,5 +30,5 @@
</div>
</div>
</details>
<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>
<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>
</ngb-toast>

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

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

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

@ -14,18 +14,15 @@ import { Clipboard } from '@angular/cdk/clipboard'
const toasts = [
{
title: 'Title',
content: 'content',
content: 'foo bar',
delay: 5000,
},
{
title: 'Error 1',
content: 'Error 1 content',
delay: 5000,
error: 'Error 1 string',
},
{
title: 'Error 2',
content: 'Error 2 content',
delay: 5000,
error: {
@ -75,8 +72,7 @@ describe('ToastsComponent', () => {
expect(spy).toHaveBeenCalled()
expect(component.toasts).toContainEqual({
title: 'Title',
content: 'content',
content: 'foo bar',
delay: 5000,
})
@ -89,7 +85,7 @@ describe('ToastsComponent', () => {
component.ngOnInit()
fixture.detectChanges()
expect(fixture.nativeElement.textContent).toContain('Title')
expect(fixture.nativeElement.textContent).toContain('foo bar')
component.ngOnDestroy()
flush()
@ -134,6 +130,9 @@ describe('ToastsComponent', () => {
'Error string no detail'
)
expect(component.getErrorText('Error string')).toEqual('')
expect(
component.getErrorText({ error: { message: 'foo error bar' } })
).toContain('{"message":"foo error bar"}')
expect(
component.getErrorText({ error: new Array(205).join('a') })
).toContain('...')

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

@ -2,8 +2,6 @@ import { Injectable } from '@angular/core'
import { Subject } from 'rxjs'
export interface Toast {
title: string
content: string
delay: number
@ -34,7 +32,6 @@ export class ToastService {
showError(content: string, error: any = null, delay: number = 10000) {
this.show({
title: $localize`Error`,
content: content,
delay: delay,
classname: 'error',
@ -43,7 +40,7 @@ export class ToastService {
}
showInfo(content: string, delay: number = 5000) {
this.show({ title: $localize`Information`, content: content, delay: delay })
this.show({ content: content, delay: delay })
}
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%);
}
.toast, .toast-header {
background-color: hsla(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 15%), 0.8);
.toast {
background-color: hsla(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 10%), 0.9);
}
.toast,
.toast .toast-header,
.toast .btn,
.toast .btn-close {
color: var(--pngx-primary-text-contrast);