Add highlighting, move some anchors for visibility

src-ui/src/app/app.component.ts

@@ -121,12 +121,14 @@ export class AppComponent implements OnInit, OnDestroy {
         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',
-        placement: 'bottom',
+        enableBackdrop: true,
+        delayAfterNavigation: 500,
       },
       {
         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 it's machine learning algorithms.`,
         route: '/dashboard',
+        enableBackdrop: true,
       },
       {
         anchorId: 'tour.documents',
@@ -134,36 +136,44 @@ export class AppComponent implements OnInit, OnDestroy {
         route: '/documents?sort=created&reverse=1&page=1',
         delayAfterNavigation: 500,
         placement: 'bottom',
+        enableBackdrop: true,
+        disableScrollToAnchor: true,
       },
       {
         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,
       },
       {
         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,
       },
       {
         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,
       },
       {
         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,
       },
       {
         anchorId: 'tour.settings',
         content: $localize`Check out the settings for various tweaks to the web app or to toggle settings for saved views.`,
         route: '/settings',
+        enableBackdrop: true,
       },
       {
         anchorId: 'tour.admin',
         content: $localize`The Admin area contains more advanced controls as well as the settings for automatic e-mail fetching.`,
+        enableBackdrop: true,
       },
       {
         anchorId: 'tour.outro',

src-ui/src/app/components/dashboard/dashboard.component.html

@@ -19,8 +19,6 @@
   </svg>
 </app-page-header>
 
-<div tourAnchor="tour.dashboard"></div>
-
 <div class="row">
   <div class="col-lg-8">
     <ng-container *ngIf="savedViewService.loading">
@@ -28,10 +26,13 @@
       <ng-container i18n>Loading...</ng-container>
     </ng-container>
 
-    <app-welcome-widget *ngIf="settingsService.offerTour()"></app-welcome-widget>
+    <app-welcome-widget *ngIf="settingsService.offerTour()" tourAnchor="tour.dashboard"></app-welcome-widget>
 
-    <ng-container *ngFor="let v of savedViewService.dashboardViews">
-      <app-saved-view-widget [savedView]="v"></app-saved-view-widget>
+    <ng-container *ngFor="let v of savedViewService.dashboardViews; first as isFirst">
+      <app-saved-view-widget *ngIf="isFirst; else noTour" [savedView]="v" tourAnchor="tour.dashboard"></app-saved-view-widget>
+      <ng-template #noTour>
+        <app-saved-view-widget [savedView]="v"></app-saved-view-widget>
+      </ng-template>
     </ng-container>
 
   </div>

src-ui/src/app/components/document-list/document-list.component.html

@@ -77,12 +77,11 @@
 <div class="row sticky-top pt-3 pt-sm-4 pb-2 pb-lg-4 bg-body">
   <app-filter-editor [hidden]="isBulkEditing" [(filterRules)]="list.filterRules" [unmodifiedFilterRules]="unmodifiedFilterRules" #filterEditor></app-filter-editor>
   <app-bulk-editor [hidden]="!isBulkEditing"></app-bulk-editor>
-  <div tourAnchor="tour.documents-filter-editor"></div>
 </div>
 
 
 <ng-template #pagination>
-  <div class="d-flex justify-content-between align-items-center">
+  <div class="d-flex justify-content-between align-items-center" tourAnchor="tour.documents">
     <p>
       <ng-container *ngIf="list.isReloading">
         <div class="spinner-border spinner-border-sm me-2" role="status"></div>
@@ -98,7 +97,6 @@
   </div>
 </ng-template>
 
-<div tourAnchor="tour.documents"></div>
 <ng-container *ngTemplateOutlet="pagination"></ng-container>
 
 <ng-container *ngIf="list.error ; else documentListNoError">

src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html

@@ -1,4 +1,4 @@
-<div class="row flex-wrap">
+<div class="row flex-wrap" tourAnchor="tour.documents-filter-editor">
    <div class="col mb-2 mb-xxl-0">
      <div class="form-inline d-flex align-items-center">
          <div class="input-group input-group-sm flex-fill w-auto flex-nowrap">