]> git.ipfire.org Git - thirdparty/paperless-ngx.git/commitdiff
UI tour fixes and improvements 3791/head
authorTomas Rimkus <sandshrew@gmail.com>
Thu, 13 Jul 2023 12:28:05 +0000 (14:28 +0200)
committershamoon <4887959+shamoon@users.noreply.github.com>
Thu, 13 Jul 2023 14:58:41 +0000 (07:58 -0700)
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
src-ui/package-lock.json
src-ui/package.json
src-ui/src/app/app.component.ts
src-ui/src/styles.scss

index c9029fb6ea4da26a3938a7807a76d2125dc45e85..da8e16eb0741a077c9eb860eccc116a4aca77c8c 100644 (file)
         <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">145</context>
+          <context context-type="linenumber">146</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">155</context>
+          <context context-type="linenumber">153</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">165</context>
+          <context context-type="linenumber">158</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">178</context>
+          <context context-type="linenumber">165</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">189</context>
+          <context context-type="linenumber">171</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">199</context>
+          <context context-type="linenumber">176</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">209</context>
+          <context context-type="linenumber">184</context>
         </context-group>
       </trans-unit>
       <trans-unit id="8116994662047019809" datatype="html">
         <source>Check out the settings for various tweaks to the web app, toggle settings for saved views or setup e-mail checking.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/app.component.ts</context>
-          <context context-type="linenumber">219</context>
+          <context context-type="linenumber">192</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">229</context>
+          <context context-type="linenumber">200</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">231</context>
+          <context context-type="linenumber">202</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">233</context>
+          <context context-type="linenumber">204</context>
         </context-group>
       </trans-unit>
       <trans-unit id="5749300816154614125" datatype="html">
         <source>Initiating upload...</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/app.component.ts</context>
-          <context context-type="linenumber">289</context>
+          <context context-type="linenumber">273</context>
         </context-group>
       </trans-unit>
       <trans-unit id="2173456130768795374" datatype="html">
index 8c8b652a9ae23a77d37a26f11c52037e166d9618..d693331e0be43bd38fcf3030e5527064067b285e 100644 (file)
@@ -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",
       }
     },
     "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"
       },
       }
     },
     "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": {
index adf33823d814d0eda6214923da08edaea2c7964d..d5690cb9c598bd3624b285e28fc5659b29a99aac 100644 (file)
@@ -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",
index 9d9f2c99c318f9194670b18a87819e3d0039ab61..e6718bbede69303c0d66669148fb115cea6c4d8b 100644 (file)
@@ -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 <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.` +
+            '<br/><br/>' +
+            $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 <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.` +
-          '<br/><br/>' +
-          $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')
index 0c29026d2f3c2532f4572b9e448bb01e37a4ca0f..824d3b2782f9f02c5f9bc2bf89b96a0408359159 100644 (file)
@@ -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);