Add admin tour step, remove step titles, cleaner look

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

@@ -15,6 +15,7 @@
 <tour-step-template>
     <ng-template #tourStep let-step="step">
         <p class="tour-step-content" [innerHTML]="step?.content"></p>
+        <hr/>
         <div class="d-flex justify-content-between align-items-center">
             <span class="badge bg-light text-dark">{{ tourService.steps?.indexOf(step) + 1 }} / {{ tourService.steps?.length }}</span>
             <div class="tour-step-navigation btn-toolbar" role="toolbar" aria-label="Controls">

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

@@ -119,55 +119,51 @@ export class AppComponent implements OnInit, OnDestroy {
     this.tourService.initialize([
       {
         anchorId: 'tour.dashboard',
-        title: $localize`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.`,
-        content: $localize`Once you've created some saved views, such as an 'Inbox', you can set them to display on the dashboard. Those settings are found under Settings > Saved Views.`,
         route: '/dashboard',
       },
       {
         anchorId: 'tour.upload-widget',
-        title: $localize`Uploading Documents`,
+        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.`,
-        content: $localize`Drag-and-drop documents here to start uploading. 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',
       },
       {
         anchorId: 'tour.documents',
-        title: $localize`Documents List`,
+        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.`,
-        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.`,
         route: '/documents',
         delayAfterNavigation: 500,
         placement: 'bottom',
       },
       {
         anchorId: 'tour.documents-filter-editor',
-        title: $localize`Document Filtering`,
+        content: $localize`The filtering tools allow you to quickly find documents using various searches, dates, tags, etc.`,
-        content: $localize`The filtering tools allow you to quickly find documents using various searches, tags, etc.`,
         route: '/documents',
         placement: 'bottom',
       },
       {
         anchorId: 'tour.documents-views',
-        title: $localize`Saved 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',
       },
       {
         anchorId: 'tour.tags',
-        title: $localize`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',
       },
       {
         anchorId: 'tour.file-tasks',
-        title: $localize`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',
       },
       {
         anchorId: 'tour.settings',
-        title: $localize`Settings`,
         content: $localize`Check out the settings for various tweaks to the web app or to toggle settings for saved views.`,
         route: '/settings',
       },
+      {
+        anchorId: 'tour.admin',
+        content: $localize`The Admin area contains more advanced controls as well as the settings for automatic e-mail fetching.`,
+      },
       {
         anchorId: 'tour.outro',
         title: $localize`Thank you! 🙏`,

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

@@ -170,7 +170,7 @@
             </a>
           </li>
           <li class="nav-item">
-            <a class="nav-link" href="admin/" ngbPopover="Admin" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+            <a class="nav-link" href="admin/" ngbPopover="Admin" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim" tourAnchor="tour.admin">
               <svg class="sidebaricon" fill="currentColor">
                 <use xlink:href="assets/bootstrap-icons.svg#toggles"/>
               </svg><span>&nbsp;<ng-container i18n>Admin</ng-container></span>