From c2e9cc9a512b3fbfe1e3a49179ad3e79d2d85726 Mon Sep 17 00:00:00 2001 From: Tomas Rimkus Date: Thu, 13 Jul 2023 14:28:05 +0200 Subject: [PATCH] UI tour fixes and improvements Update UI tour library Fix popover padding in tour steps Add 10px backdrop offset where needed Refactor tour initialization to use defaults Make popover-body rule more specific Update messages.xlf --- src-ui/messages.xlf | 24 ++--- src-ui/package-lock.json | 16 +-- src-ui/package.json | 2 +- src-ui/src/app/app.component.ts | 168 +++++++++++++++----------------- src-ui/src/styles.scss | 11 +++ 5 files changed, 108 insertions(+), 113 deletions(-) diff --git a/src-ui/messages.xlf b/src-ui/messages.xlf index c9029fb6e..da8e16eb0 100644 --- a/src-ui/messages.xlf +++ b/src-ui/messages.xlf @@ -333,84 +333,84 @@ The dashboard can be used to show saved views, such as an 'Inbox'. Those settings are found under Settings > Saved Views once you have created some. src/app/app.component.ts - 145 + 146 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. src/app/app.component.ts - 155 + 153 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. src/app/app.component.ts - 165 + 158 The filtering tools allow you to quickly find documents using various searches, dates, tags, etc. src/app/app.component.ts - 178 + 165 Any combination of filters can be saved as a 'view' which can then be displayed on the dashboard and / or sidebar. src/app/app.component.ts - 189 + 171 Tags, correspondents, document types and storage paths can all be managed using these pages. They can also be created from the document edit view. src/app/app.component.ts - 199 + 176 File Tasks shows you documents that have been consumed, are waiting to be, or may have failed during the process. src/app/app.component.ts - 209 + 184 Check out the settings for various tweaks to the web app, toggle settings for saved views or setup e-mail checking. src/app/app.component.ts - 219 + 192 Thank you! 🙏 src/app/app.component.ts - 229 + 200 There are <em>tons</em> more features and info we didn'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. src/app/app.component.ts - 231 + 202 Lastly, on behalf of every contributor to this community-supported project, thank you for using Paperless-ngx! src/app/app.component.ts - 233 + 204 Initiating upload... src/app/app.component.ts - 289 + 273 diff --git a/src-ui/package-lock.json b/src-ui/package-lock.json index 8c8b652a9..d693331e0 100644 --- a/src-ui/package-lock.json +++ b/src-ui/package-lock.json @@ -27,7 +27,7 @@ "ngx-color": "^9.0.0", "ngx-cookie-service": "^16.0.0", "ngx-file-drop": "^16.0.0", - "ngx-ui-tour-ng-bootstrap": "^13.0.2", + "ngx-ui-tour-ng-bootstrap": "^13.0.3", "rxjs": "^7.8.1", "tslib": "^2.6.0", "uuid": "^9.0.0", @@ -13196,9 +13196,9 @@ } }, "node_modules/ngx-ui-tour-core": { - "version": "11.0.2", - "resolved": "https://registry.npmjs.org/ngx-ui-tour-core/-/ngx-ui-tour-core-11.0.2.tgz", - "integrity": "sha512-P++2ti7EwrqaILmcDnoc6Qe0aejk+/TRhNQrXd9C16Kx0C0bvYwMvMc1ehO81FNOEPy2lv4+vUx1nQJ2hzyxoQ==", + "version": "11.0.3", + "resolved": "https://registry.npmjs.org/ngx-ui-tour-core/-/ngx-ui-tour-core-11.0.3.tgz", + "integrity": "sha512-CKi9NFS3btmjV/QL5zC2pQxmGDyYQBArRnjuQzn9zN+9bSJcwLePAh7jFjPhorbBvK682GutUKDv36OKc6mxJA==", "dependencies": { "tslib": "^2.0.0" }, @@ -13210,11 +13210,11 @@ } }, "node_modules/ngx-ui-tour-ng-bootstrap": { - "version": "13.0.2", - "resolved": "https://registry.npmjs.org/ngx-ui-tour-ng-bootstrap/-/ngx-ui-tour-ng-bootstrap-13.0.2.tgz", - "integrity": "sha512-RVo3Ndj1i52PYxyPYp2KYn3gD6goN38sI/WzaYP6i3ZtbagIatJuB5UO+Aa8OUcJQzyoq8sH1cpPaEcB/AJ6iA==", + "version": "13.0.3", + "resolved": "https://registry.npmjs.org/ngx-ui-tour-ng-bootstrap/-/ngx-ui-tour-ng-bootstrap-13.0.3.tgz", + "integrity": "sha512-ZaJiS4eUzPTb+kl70aRyEkGrmsXo0nN1ePtMxlpl496L2CnnGEQBnz/5NEJrJ0rX89fFmZn5hr39N89N3QEagg==", "dependencies": { - "ngx-ui-tour-core": "11.0.2", + "ngx-ui-tour-core": "11.0.3", "tslib": "^2.0.0" }, "peerDependencies": { diff --git a/src-ui/package.json b/src-ui/package.json index adf33823d..d5690cb9c 100644 --- a/src-ui/package.json +++ b/src-ui/package.json @@ -29,7 +29,7 @@ "ngx-color": "^9.0.0", "ngx-cookie-service": "^16.0.0", "ngx-file-drop": "^16.0.0", - "ngx-ui-tour-ng-bootstrap": "^13.0.2", + "ngx-ui-tour-ng-bootstrap": "^13.0.3", "rxjs": "^7.8.1", "tslib": "^2.6.0", "uuid": "^9.0.0", diff --git a/src-ui/src/app/app.component.ts b/src-ui/src/app/app.component.ts index 9d9f2c99c..e6718bbed 100644 --- a/src-ui/src/app/app.component.ts +++ b/src-ui/src/app/app.component.ts @@ -139,104 +139,88 @@ export class AppComponent implements OnInit, OnDestroy { const nextBtnTitle = $localize`Next` const endBtnTitle = $localize`End` - this.tourService.initialize([ + this.tourService.initialize( + [ + { + anchorId: 'tour.dashboard', + content: $localize`The dashboard can be used to show saved views, such as an 'Inbox'. Those settings are found under Settings > Saved Views once you have created some.`, + route: '/dashboard', + delayAfterNavigation: 500, + isOptional: false, + }, + { + anchorId: 'tour.upload-widget', + content: $localize`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.`, + route: '/dashboard', + }, + { + anchorId: 'tour.documents', + content: $localize`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.`, + route: '/documents?sort=created&reverse=1&page=1', + delayAfterNavigation: 500, + placement: 'bottom', + }, + { + anchorId: 'tour.documents-filter-editor', + content: $localize`The filtering tools allow you to quickly find documents using various searches, dates, tags, etc.`, + route: '/documents?sort=created&reverse=1&page=1', + placement: 'bottom', + }, + { + anchorId: 'tour.documents-views', + content: $localize`Any combination of filters can be saved as a 'view' which can then be displayed on the dashboard and / or sidebar.`, + route: '/documents?sort=created&reverse=1&page=1', + }, + { + anchorId: 'tour.tags', + content: $localize`Tags, correspondents, document types and storage paths can all be managed using these pages. They can also be created from the document edit view.`, + route: '/tags', + backdropConfig: { + offset: 0, + }, + }, + { + anchorId: 'tour.file-tasks', + content: $localize`File Tasks shows you documents that have been consumed, are waiting to be, or may have failed during the process.`, + route: '/tasks', + backdropConfig: { + offset: 0, + }, + }, + { + anchorId: 'tour.settings', + content: $localize`Check out the settings for various tweaks to the web app, toggle settings for saved views or setup e-mail checking.`, + route: '/settings', + backdropConfig: { + offset: 0, + }, + }, + { + anchorId: 'tour.outro', + title: $localize`Thank you! 🙏`, + content: + $localize`There are tons more features and info we didn'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.` + + '

' + + $localize`Lastly, on behalf of every contributor to this community-supported project, thank you for using Paperless-ngx!`, + route: '/dashboard', + isOptional: false, + backdropConfig: { + offset: 0, + }, + }, + ], { - anchorId: 'tour.dashboard', - content: $localize`The dashboard can be used to show saved views, such as an 'Inbox'. Those settings are found under Settings > Saved Views once you have created some.`, - route: '/dashboard', enableBackdrop: true, - delayAfterNavigation: 500, + backdropConfig: { + offset: 10, + }, prevBtnTitle, nextBtnTitle, endBtnTitle, - }, - { - anchorId: 'tour.upload-widget', - content: $localize`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.`, - route: '/dashboard', - enableBackdrop: true, isOptional: true, - prevBtnTitle, - nextBtnTitle, - endBtnTitle, - }, - { - anchorId: 'tour.documents', - content: $localize`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.`, - route: '/documents?sort=created&reverse=1&page=1', - delayAfterNavigation: 500, - placement: 'bottom', - enableBackdrop: true, - disableScrollToAnchor: true, - isOptional: true, - prevBtnTitle, - nextBtnTitle, - endBtnTitle, - }, - { - anchorId: 'tour.documents-filter-editor', - content: $localize`The filtering tools allow you to quickly find documents using various searches, dates, tags, etc.`, - route: '/documents?sort=created&reverse=1&page=1', - placement: 'bottom', - enableBackdrop: true, - isOptional: true, - prevBtnTitle, - nextBtnTitle, - endBtnTitle, - }, - { - anchorId: 'tour.documents-views', - content: $localize`Any combination of filters can be saved as a 'view' which can then be displayed on the dashboard and / or sidebar.`, - route: '/documents?sort=created&reverse=1&page=1', - enableBackdrop: true, - isOptional: true, - prevBtnTitle, - nextBtnTitle, - endBtnTitle, - }, - { - anchorId: 'tour.tags', - content: $localize`Tags, correspondents, document types and storage paths can all be managed using these pages. They can also be created from the document edit view.`, - route: '/tags', - enableBackdrop: true, - isOptional: true, - prevBtnTitle, - nextBtnTitle, - endBtnTitle, - }, - { - anchorId: 'tour.file-tasks', - content: $localize`File Tasks shows you documents that have been consumed, are waiting to be, or may have failed during the process.`, - route: '/tasks', - enableBackdrop: true, - isOptional: true, - prevBtnTitle, - nextBtnTitle, - endBtnTitle, - }, - { - anchorId: 'tour.settings', - content: $localize`Check out the settings for various tweaks to the web app, toggle settings for saved views or setup e-mail checking.`, - route: '/settings', - enableBackdrop: true, - isOptional: true, - prevBtnTitle, - nextBtnTitle, - endBtnTitle, - }, - { - anchorId: 'tour.outro', - title: $localize`Thank you! 🙏`, - content: - $localize`There are tons more features and info we didn'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.` + - '

' + - $localize`Lastly, on behalf of every contributor to this community-supported project, thank you for using Paperless-ngx!`, - route: '/dashboard', - prevBtnTitle, - nextBtnTitle, - endBtnTitle, - }, - ]) + useLegacyTitle: true, + } + ) this.tourService.start$.subscribe(() => { this.renderer.addClass(document.body, 'tour-active') diff --git a/src-ui/src/styles.scss b/src-ui/src/styles.scss index 0c29026d2..824d3b278 100644 --- a/src-ui/src/styles.scss +++ b/src-ui/src/styles.scss @@ -560,6 +560,17 @@ body.tour-active .sidebar { z-index: inherit !important; } +.tour-step { + .popover-header { + --bs-popover-header-padding-y: .75rem; + } + + .popover-body { + // reset ngx-ui-tour overrides + padding: var(--bs-popover-body-padding-y) var(--bs-popover-body-padding-x) !important; + } +} + .nav-item.touranchor--is-active a { font-weight: bold !important; color: var(--bs-primary);