From 4e56fe339e7fbed3ef74de686e99d74f26792b0e Mon Sep 17 00:00:00 2001 From: Michael Shamoon <4887959+shamoon@users.noreply.github.com> Date: Wed, 21 Sep 2022 21:44:15 -0700 Subject: [PATCH] Core welcome tour functionality --- src-ui/package-lock.json | 48 ++++++++++++++++++ src-ui/package.json | 1 + src-ui/src/app/app.component.html | 24 +++++++++ src-ui/src/app/app.component.ts | 41 ++++++++++++++- src-ui/src/app/app.module.ts | 10 ++-- .../app-frame/app-frame.component.html | 4 +- .../app-frame/app-frame.component.ts | 2 +- .../dashboard/dashboard.component.html | 4 +- .../dashboard/dashboard.component.ts | 7 ++- .../welcome-widget.component.html | 26 ++++------ .../welcome-widget.component.ts | 3 +- .../document-list.component.html | 3 +- src-ui/src/app/services/settings.service.ts | 5 ++ src-ui/src/assets/save-filter.png | Bin 8263 -> 0 bytes src-ui/src/styles.scss | 17 ++++++- src-ui/src/theme.scss | 9 +++- 16 files changed, 169 insertions(+), 35 deletions(-) delete mode 100644 src-ui/src/assets/save-filter.png diff --git a/src-ui/package-lock.json b/src-ui/package-lock.json index 7e9e0061c..274117558 100644 --- a/src-ui/package-lock.json +++ b/src-ui/package-lock.json @@ -26,6 +26,7 @@ "ngx-color": "^8.0.3", "ngx-cookie-service": "^14.0.1", "ngx-file-drop": "^14.0.1", + "ngx-ui-tour-ng-bootstrap": "^11.0.0", "rxjs": "~7.5.7", "tslib": "^2.3.1", "uuid": "^9.0.0", @@ -12936,6 +12937,36 @@ "@angular/core": ">=14.0.0" } }, + "node_modules/ngx-ui-tour-core": { + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/ngx-ui-tour-core/-/ngx-ui-tour-core-9.0.0.tgz", + "integrity": "sha512-3HvrprosDaZm9jHi/w+oA8N9bPeaV9k0Y70nsEkRPRQ1jM302JyjGYFuM6/FzbXU5FITGLChtrFJpBn/Q4yJIA==", + "dependencies": { + "tslib": "^2.0.0" + }, + "peerDependencies": { + "@angular/common": "^14.0.0", + "@angular/core": "^14.0.0", + "@angular/router": "^14.0.0", + "rxjs": ">=6.0.0", + "typescript": ">=3.8.0" + } + }, + "node_modules/ngx-ui-tour-ng-bootstrap": { + "version": "11.0.0", + "resolved": "https://registry.npmjs.org/ngx-ui-tour-ng-bootstrap/-/ngx-ui-tour-ng-bootstrap-11.0.0.tgz", + "integrity": "sha512-oF5ySZEiO4ib/RfYno81V2UBaX7EMzxSPwfCdedDr38e5BEPTOrcCufOaiOfuQzQftg+7CC/BbFY8Df9kmeL1A==", + "dependencies": { + "ngx-ui-tour-core": "9.0.0", + "tslib": "^2.0.0" + }, + "peerDependencies": { + "@angular/common": "^14.0.0", + "@angular/core": "^14.0.0", + "@ng-bootstrap/ng-bootstrap": "^13.0.0", + "typescript": ">=3.8.0" + } + }, "node_modules/nice-napi": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/nice-napi/-/nice-napi-1.0.2.tgz", @@ -27156,6 +27187,23 @@ "tslib": "^2.3.0" } }, + "ngx-ui-tour-core": { + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/ngx-ui-tour-core/-/ngx-ui-tour-core-9.0.0.tgz", + "integrity": "sha512-3HvrprosDaZm9jHi/w+oA8N9bPeaV9k0Y70nsEkRPRQ1jM302JyjGYFuM6/FzbXU5FITGLChtrFJpBn/Q4yJIA==", + "requires": { + "tslib": "^2.0.0" + } + }, + "ngx-ui-tour-ng-bootstrap": { + "version": "11.0.0", + "resolved": "https://registry.npmjs.org/ngx-ui-tour-ng-bootstrap/-/ngx-ui-tour-ng-bootstrap-11.0.0.tgz", + "integrity": "sha512-oF5ySZEiO4ib/RfYno81V2UBaX7EMzxSPwfCdedDr38e5BEPTOrcCufOaiOfuQzQftg+7CC/BbFY8Df9kmeL1A==", + "requires": { + "ngx-ui-tour-core": "9.0.0", + "tslib": "^2.0.0" + } + }, "nice-napi": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/nice-napi/-/nice-napi-1.0.2.tgz", diff --git a/src-ui/package.json b/src-ui/package.json index 513e1b2f7..02afd7e79 100644 --- a/src-ui/package.json +++ b/src-ui/package.json @@ -31,6 +31,7 @@ "ngx-color": "^8.0.3", "ngx-cookie-service": "^14.0.1", "ngx-file-drop": "^14.0.1", + "ngx-ui-tour-ng-bootstrap": "^11.0.0", "rxjs": "~7.5.7", "tslib": "^2.3.1", "uuid": "^9.0.0", diff --git a/src-ui/src/app/app.component.html b/src-ui/src/app/app.component.html index 2b050ed3f..9a605bead 100644 --- a/src-ui/src/app/app.component.html +++ b/src-ui/src/app/app.component.html @@ -11,3 +11,27 @@ + + + +

+
+ {{ tourService.steps?.indexOf(step) + 1 }}/{{ tourService.steps?.length }} + +
+ + diff --git a/src-ui/src/app/app.component.ts b/src-ui/src/app/app.component.ts index b1ba49c3a..90a1a1905 100644 --- a/src-ui/src/app/app.component.ts +++ b/src-ui/src/app/app.component.ts @@ -1,6 +1,6 @@ import { SettingsService } from './services/settings.service' import { SETTINGS_KEYS } from './data/paperless-uisettings' -import { Component, OnDestroy, OnInit } from '@angular/core' +import { Component, OnDestroy, OnInit, Renderer2 } from '@angular/core' import { Router } from '@angular/router' import { Subscription } from 'rxjs' import { ConsumerStatusService } from './services/consumer-status.service' @@ -8,6 +8,7 @@ import { ToastService } from './services/toast.service' import { NgxFileDropEntry } from 'ngx-file-drop' import { UploadDocumentsService } from './services/upload-documents.service' import { TasksService } from './services/tasks.service' +import { TourService } from 'ngx-ui-tour-ng-bootstrap' @Component({ selector: 'app-root', @@ -29,7 +30,9 @@ export class AppComponent implements OnInit, OnDestroy { private toastService: ToastService, private router: Router, private uploadDocumentsService: UploadDocumentsService, - private tasksService: TasksService + private tasksService: TasksService, + public tourService: TourService, + private renderer: Renderer2 ) { let anyWindow = window as any anyWindow.pdfWorkerSrc = 'assets/js/pdf.worker.min.js' @@ -112,6 +115,40 @@ export class AppComponent implements OnInit, OnDestroy { }) } }) + + this.tourService.initialize([ + { + anchorId: 'tour.intro', + title: `Hello ${this.settings.displayName}, welcome to Paperless-ngx!`, + content: + "Here's a tutorial to guide you around some of Paperless-ngx's most useful features.", + route: '/dashboard', + }, + { + anchorId: 'tour.dashboard', + title: 'The Dashboard', + content: "Here's some dashboard info", + route: '/dashboard', + }, + { + anchorId: 'tour.documents', + title: 'Documents List', + content: "Here's some dashboard info", + route: '/documents', + delayAfterNavigation: 500, + }, + ]) + + this.tourService.start$.subscribe(() => { + this.renderer.addClass(document.body, 'tour-active') + }) + + this.tourService.end$.subscribe(() => { + // animation time + setTimeout(() => { + this.renderer.removeClass(document.body, 'tour-active') + }, 500) + }) } public get dragDropEnabled(): boolean { diff --git a/src-ui/src/app/app.module.ts b/src-ui/src/app/app.module.ts index 9840deb58..02fd8ea66 100644 --- a/src-ui/src/app/app.module.ts +++ b/src-ui/src/app/app.module.ts @@ -69,6 +69,11 @@ import { ColorComponent } from './components/common/input/color/color.component' import { DocumentAsnComponent } from './components/document-asn/document-asn.component' import { DocumentCommentsComponent } from './components/document-comments/document-comments.component' import { DirtyDocGuard } from './guards/dirty-doc.guard' +import { StoragePathListComponent } from './components/manage/storage-path-list/storage-path-list.component' +import { StoragePathEditDialogComponent } from './components/common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component' +import { SettingsService } from './services/settings.service' +import { TasksComponent } from './components/manage/tasks/tasks.component' +import { TourNgBootstrapModule } from 'ngx-ui-tour-ng-bootstrap' import localeBe from '@angular/common/locales/be' import localeCs from '@angular/common/locales/cs' @@ -89,10 +94,6 @@ import localeSr from '@angular/common/locales/sr' import localeSv from '@angular/common/locales/sv' import localeTr from '@angular/common/locales/tr' import localeZh from '@angular/common/locales/zh' -import { StoragePathListComponent } from './components/manage/storage-path-list/storage-path-list.component' -import { StoragePathEditDialogComponent } from './components/common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component' -import { SettingsService } from './services/settings.service' -import { TasksComponent } from './components/manage/tasks/tasks.component' registerLocaleData(localeBe) registerLocaleData(localeCs) @@ -188,6 +189,7 @@ function initializeApp(settings: SettingsService) { PdfViewerModule, NgSelectModule, ColorSliderModule, + TourNgBootstrapModule.forRoot(), ], providers: [ { diff --git a/src-ui/src/app/components/app-frame/app-frame.component.html b/src-ui/src/app/components/app-frame/app-frame.component.html index 7d003225d..7a8546640 100644 --- a/src-ui/src/app/components/app-frame/app-frame.component.html +++ b/src-ui/src/app/components/app-frame/app-frame.component.html @@ -4,8 +4,8 @@ (click)="isMenuCollapsed = !isMenuCollapsed"> - - + + Paperless-ngx diff --git a/src-ui/src/app/components/app-frame/app-frame.component.ts b/src-ui/src/app/components/app-frame/app-frame.component.ts index b189409a8..96207e66f 100644 --- a/src-ui/src/app/components/app-frame/app-frame.component.ts +++ b/src-ui/src/app/components/app-frame/app-frame.component.ts @@ -52,7 +52,7 @@ export class AppFrameComponent implements OnInit, ComponentCanDeactivate { } this.tasksService.reload() } - + versionString = `${environment.appTitle} ${environment.version}` appRemoteVersion diff --git a/src-ui/src/app/components/dashboard/dashboard.component.html b/src-ui/src/app/components/dashboard/dashboard.component.html index 4b6bc223b..aa4c17402 100644 --- a/src-ui/src/app/components/dashboard/dashboard.component.html +++ b/src-ui/src/app/components/dashboard/dashboard.component.html @@ -19,14 +19,14 @@ -
+
Loading... - + diff --git a/src-ui/src/app/components/dashboard/dashboard.component.ts b/src-ui/src/app/components/dashboard/dashboard.component.ts index a58140d5a..bb01f130e 100644 --- a/src-ui/src/app/components/dashboard/dashboard.component.ts +++ b/src-ui/src/app/components/dashboard/dashboard.component.ts @@ -1,5 +1,4 @@ -import { Component, OnInit } from '@angular/core' -import { Meta } from '@angular/platform-browser' +import { Component } from '@angular/core' import { SavedViewService } from 'src/app/services/rest/saved-view.service' import { SettingsService } from 'src/app/services/settings.service' @@ -16,9 +15,9 @@ export class DashboardComponent { get subtitle() { if (this.settingsService.displayName) { - return $localize`Hello ${this.settingsService.displayName}, welcome to Paperless-ngx!` + return $localize`Hello ${this.settingsService.displayName}, welcome to Paperless-ngx` } else { - return $localize`Welcome to Paperless-ngx!` + return $localize`Welcome to Paperless-ngx` } } } diff --git a/src-ui/src/app/components/dashboard/widgets/welcome-widget/welcome-widget.component.html b/src-ui/src/app/components/dashboard/widgets/welcome-widget/welcome-widget.component.html index 17c7ffe1e..762d5cd32 100644 --- a/src-ui/src/app/components/dashboard/widgets/welcome-widget/welcome-widget.component.html +++ b/src-ui/src/app/components/dashboard/widgets/welcome-widget/welcome-widget.component.html @@ -1,16 +1,10 @@ - - - - -

Paperless is running! :)

-

You can start uploading documents by dropping them in the file upload box to the right or by dropping them in the configured consumption folder and they'll start showing up in the documents list. - After you've added some metadata to your documents, use the filtering mechanisms of paperless to create custom views (such as 'Recently added', 'Tagged TODO') and they will appear on the dashboard instead of this message.

-

Paperless offers some more features that try to make your life easier:

-
    -
  • Once you've got a couple documents in paperless and added metadata to them, paperless can assign that metadata to new documents automatically.
    • -
  • You can configure paperless to read your mails and add documents from attached files.
    • -
-

Consult the documentation on how to use these features. The section on basic usage also has some information on how to use paperless in general.

- - - + + +

Paperless-ngx is running!

+

You're ready to start uploading documents! Feel free to explore the various features or start a quick tour using the button below.

+

More detail on how to use and configure paperless is always available in the documentation.

+
+ + diff --git a/src-ui/src/app/components/dashboard/widgets/welcome-widget/welcome-widget.component.ts b/src-ui/src/app/components/dashboard/widgets/welcome-widget/welcome-widget.component.ts index 9873932ee..718f3291c 100644 --- a/src-ui/src/app/components/dashboard/widgets/welcome-widget/welcome-widget.component.ts +++ b/src-ui/src/app/components/dashboard/widgets/welcome-widget/welcome-widget.component.ts @@ -1,4 +1,5 @@ import { Component, OnInit } from '@angular/core' +import { TourService } from 'ngx-ui-tour-ng-bootstrap' @Component({ selector: 'app-welcome-widget', @@ -6,7 +7,7 @@ import { Component, OnInit } from '@angular/core' styleUrls: ['./welcome-widget.component.scss'], }) export class WelcomeWidgetComponent implements OnInit { - constructor() {} + constructor(public readonly tourService: TourService) {} ngOnInit(): void {} } diff --git a/src-ui/src/app/components/document-list/document-list.component.html b/src-ui/src/app/components/document-list/document-list.component.html index 60c9bcfb9..f20cf0d40 100644 --- a/src-ui/src/app/components/document-list/document-list.component.html +++ b/src-ui/src/app/components/document-list/document-list.component.html @@ -75,10 +75,12 @@
+
+

@@ -103,7 +105,6 @@ -

diff --git a/src-ui/src/app/services/settings.service.ts b/src-ui/src/app/services/settings.service.ts index 10cc93ce0..b2f239b06 100644 --- a/src-ui/src/app/services/settings.service.ts +++ b/src-ui/src/app/services/settings.service.ts @@ -446,4 +446,9 @@ export class SettingsService { get updateCheckingIsSet(): boolean { return this.settingIsSet(SETTINGS_KEYS.UPDATE_CHECKING_ENABLED) } + + offerTour(): boolean { + return true + // !savedViewService.loading && savedViewService.dashboardViews.length == 0 + } } diff --git a/src-ui/src/assets/save-filter.png b/src-ui/src/assets/save-filter.png deleted file mode 100644 index 0f011f8127280d88db5970d30e23570765fa5cc9..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 8263 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 W9G(85(c8@c7 .popover-arrow::after, .bs-popover-auto[data-popper-placement^="left"] { border-left-color: var(--pngx-bg-alt); diff --git a/src-ui/src/theme.scss b/src-ui/src/theme.scss index 99dcb8bab..77260a882 100644 --- a/src-ui/src/theme.scss +++ b/src-ui/src/theme.scss @@ -10,11 +10,12 @@ body { --bs-primary: hsl(var(--pngx-primary), var(--pngx-primary-lightness)); --bs-border-color: var(--bs-gray-400); - --pngx-primary-faded: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) + 72%)); + --pngx-primary-faded: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) + 76%)); --pngx-primary-lighten-30: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) + 30%)); --pngx-primary-darken-5: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 5%)); --pngx-primary-darken-15: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 15%)); --pngx-primary-darken-18: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 18%)); + --pngx-primary-darken-27: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 27%)); --pngx-bg-alt: #fff; --pngx-bg-darker: var(--bs-gray-100); --pngx-focus-alpha: 0.3; @@ -177,6 +178,12 @@ $form-check-radio-checked-bg-image-dark: url("data:image/svg+xml,