paradizelost/paperless-ngx
1
0
Fork 0
mirror of https://github.com/paperless-ngx/paperless-ngx.git synced 2025-04-02 13:45:10 -05:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3791 from hakimio/ui-tour-fix

Browse Source 
Enhancement: add UI tour step padding
This commit is contained in:
shamoon 2023-07-13 08:08:17 -07:00 committed by GitHub
commit 44125be979
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 108 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src-ui/messages.xlf
View File

@ -333,84 +333,84 @@
<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">

16
src-ui/package-lock.json generated
View 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",
@ -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": {

2
src-ui/package.json
View 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",

70
src-ui/src/app/app.component.ts
View File

@ -139,26 +139,19 @@ 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',
enableBackdrop: true,
delayAfterNavigation: 500,
prevBtnTitle,
nextBtnTitle,
endBtnTitle,
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',
enableBackdrop: true,
isOptional: true,
prevBtnTitle,
nextBtnTitle,
endBtnTitle,
},
{
anchorId: 'tour.documents',
@ -166,63 +159,41 @@ export class AppComponent implements OnInit, OnDestroy {
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,
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',
enableBackdrop: true,
isOptional: true,
prevBtnTitle,
nextBtnTitle,
endBtnTitle,
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',
enableBackdrop: true,
isOptional: true,
prevBtnTitle,
nextBtnTitle,
endBtnTitle,
backdropConfig: {
offset: 0,
},
},
{
anchorId: 'tour.outro',
@ -232,11 +203,24 @@ export class AppComponent implements OnInit, OnDestroy {
'<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,
},
},
],
{
enableBackdrop: true,
backdropConfig: {
offset: 10,
},
prevBtnTitle,
nextBtnTitle,
endBtnTitle,
},
])
isOptional: true,
useLegacyTitle: true,
}
)
this.tourService.start$.subscribe(() => {
this.renderer.addClass(document.body, 'tour-active')

11
src-ui/src/styles.scss
View 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);