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

Complete welcome tour

Browse Source
This commit is contained in:
Michael Shamoon 2022-09-21 23:17:24 -07:00
parent 4e56fe339e
commit 07e2329068
10 changed files with 77 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src-ui/src/app/app.component.html
View File

@ -15,19 +15,19 @@
<tour-step-template>
<ng-template #tourStep let-step="step">
<p class="tour-step-content" [innerHTML]="step?.content"></p>
<div class="d-flex justify-content-between align-items-end">
<span class="badge bg-secondary">{{ tourService.steps?.indexOf(step) + 1 }}/{{ tourService.steps?.length }}</span>
<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">
<div class="btn-group me-2" role="group" aria-label="Dismiss">
<button class="btn btn-outline-danger btn-sm" (click)="tourService.end()">
<div class="btn-group btn-group-sm me-2" role="group" aria-label="Dismiss">
<button class="btn btn-outline-danger" (click)="tourService.end()">
{{ step?.endBtnTitle }}
</button>
</div>
<div class="btn-group align-self-end" role="group" aria-label="Previous / Next">
<button *ngIf="tourService.hasPrev(step)" class="btn btn-outline-primary btn-sm" (click)="tourService.prev()">
<div class="btn-group btn-group-sm align-self-end" role="group" aria-label="Previous / Next">
<button *ngIf="tourService.hasPrev(step)" class="btn btn-outline-primary" (click)="tourService.prev()">
« {{ step?.prevBtnTitle }}
</button>
<button *ngIf="tourService.hasNext(step)" class="btn btn-outline-primary btn-sm" (click)="tourService.next()">
<button *ngIf="tourService.hasNext(step)" class="btn btn-outline-primary" (click)="tourService.next()">
{{ step?.nextBtnTitle }} »
</button>
</div>

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

@ -118,24 +118,64 @@ 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.",
anchorId: 'tour.dashboard',
title: $localize`Dashboard`,
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.dashboard',
title: 'The Dashboard',
content: "Here's some dashboard info",
anchorId: 'tour.upload-widget',
title: $localize`Uploading Documents`,
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: 'Documents List',
content: "Here's some dashboard info",
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.`,
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, 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.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',
},
])

8
src-ui/src/app/components/app-frame/app-frame.component.html
View File

@ -127,7 +127,7 @@
</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="tags" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Tags" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
<a class="nav-link" routerLink="tags" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Tags" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim" tourAnchor="tour.tags">
<svg class="sidebaricon" fill="currentColor">
<use xlink:href="assets/bootstrap-icons.svg#tags"/>
</svg><span>&nbsp;<ng-container i18n>Tags</ng-container></span>
@ -148,7 +148,7 @@
</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="tasks" routerLinkActive="active" (click)="closeMenu()" ngbPopover="File Tasks" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
<a class="nav-link" routerLink="tasks" routerLinkActive="active" (click)="closeMenu()" ngbPopover="File Tasks" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim" tourAnchor="tour.file-tasks">
<span *ngIf="tasksService.failedFileTasks.length > 0 && slimSidebarEnabled" class="badge bg-danger position-absolute top-0 end-0">{{tasksService.failedFileTasks.length}}</span>
<svg class="sidebaricon" fill="currentColor">
<use xlink:href="assets/bootstrap-icons.svg#list-task"/>
@ -163,7 +163,7 @@
</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="settings" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Settings" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
<a class="nav-link" routerLink="settings" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Settings" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim" tourAnchor="tour.settings">
<svg class="sidebaricon" fill="currentColor">
<use xlink:href="assets/bootstrap-icons.svg#gear"/>
</svg><span>&nbsp;<ng-container i18n>Settings</ng-container></span>
@ -183,7 +183,7 @@
</h6>
<ul class="nav flex-column mb-2">
<li class="nav-item">
<a class="nav-link" target="_blank" rel="noopener noreferrer" href="https://paperless-ngx.readthedocs.io/en/latest/" ngbPopover="Documentation" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
<a class="nav-link" target="_blank" rel="noopener noreferrer" href="https://paperless-ngx.readthedocs.io/en/latest/" ngbPopover="Documentation" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim" tourAnchor="tour.outro">
<svg class="sidebaricon" fill="currentColor">
<use xlink:href="assets/bootstrap-icons.svg#question-circle"/>
</svg><span>&nbsp;<ng-container i18n>Documentation</ng-container></span>

2
src-ui/src/app/components/dashboard/dashboard.component.html
View File

@ -19,7 +19,7 @@
</svg>
</app-page-header>
<div class='row' tourAnchor="tour.dashboard">
<div class='row'>
<div class="col-lg-8">
<ng-container *ngIf="savedViewService.loading">
<div class="spinner-border spinner-border-sm me-2" role="status"></div>

2
src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.html
View File

@ -8,7 +8,7 @@
</svg>
</a>
</div>
<div content>
<div content tourAnchor="tour.upload-widget">
<form>
<ngx-file-drop dropZoneLabel="Drop documents here or" browseBtnLabel="Browse files" (onFileDrop)="dropped($event)"
(onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)" dropZoneClassName="bg-light card"

13
src-ui/src/app/components/dashboard/widgets/welcome-widget/welcome-widget.component.html
View File

@ -1,10 +1,11 @@
<ngb-alert type="primary" [dismissible]="false">
<ngb-alert type="primary" [dismissible]="false" tourAnchor="tour.dashboard">
<!-- [dismissible]="isFinished(status)" (closed)="dismiss(status)" -->
<h4 class="alert-heading" i18n>Paperless-ngx is running!</h4>
<p i18n>You're ready to start uploading documents! Feel free to explore the various features or start a quick tour using the button below.</p>
<p i18n>More detail on how to use and configure paperless is always available in the <a href="https://paperless-ngx.readthedocs.io" target="_blank">documentation</a>.</p>
<h4 class="alert-heading"><ng-container i18n>Paperless-ngx is running!</ng-container> 🎉</h4>
<p i18n>You're ready to start uploading documents! Explore the various features of this web app on your own, or start a quick tour using the button below.</p>
<p i18n>More detail on how to use and configure Paperless-ngx is always available in the <a href="https://paperless-ngx.readthedocs.io" target="_blank">documentation</a>.</p>
<hr>
<div class="btn-toolbar" role="toolbar" aria-label="Controls">
<button class="btn btn-primary ms-auto" (click)="tourService.start()"><ng-container i18n>Start Tour</ng-container> &rarr;</button>
<div class="d-flex align-items-end">
<p class="lead fs-6 m-0"><em i18n>Thanks for being a part of the Paperless-ngx community!</em></p>
<button class="btn btn-primary ms-auto flex-shrink-0" (click)="tourService.start()"><ng-container i18n>Start the tour</ng-container> &rarr;</button>
</div>
</ngb-alert>

5
src-ui/src/app/components/document-list/document-list.component.html
View File

@ -60,7 +60,7 @@
</div>
<div class="btn-group ms-2 flex-fill" ngbDropdown role="group">
<button class="btn btn-sm btn-outline-primary dropdown-toggle flex-fill" ngbDropdownToggle i18n>Views</button>
<button class="btn btn-sm btn-outline-primary dropdown-toggle flex-fill" tourAnchor="tour.documents-views" ngbDropdownToggle i18n>Views</button>
<div class="dropdown-menu shadow dropdown-menu-right" ngbDropdownMenu>
<ng-container *ngIf="!list.activeSavedViewId">
<button ngbDropdownItem *ngFor="let view of savedViewService.allViews" (click)="loadViewConfig(view.id)">{{view.name}}</button>
@ -75,9 +75,9 @@
</app-page-header>
<div class="row sticky-top pt-3 pt-sm-4 pb-2 pb-lg-4 bg-body">
<div tourAnchor="tour.documents"></div>
<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>
@ -105,6 +105,7 @@
</ng-container>
<ng-template #documentListNoError>
<div tourAnchor="tour.documents"></div>
<div *ngIf="displayMode == 'largeCards'">
<app-document-card-large [selected]="list.isSelected(d)" (toggleSelected)="toggleSelected(d, $event)" *ngFor="let d of list.documents; trackBy: trackByDocumentId" [document]="d" (clickTag)="clickTag($event)" (clickCorrespondent)="clickCorrespondent($event)" (clickDocumentType)="clickDocumentType($event)" (clickStoragePath)="clickStoragePath($event)" (clickMoreLike)="clickMoreLike(d.id)">
</app-document-card-large>

2
src-ui/src/app/components/manage/settings/settings.component.html
View File

@ -1,5 +1,5 @@
<app-page-header title="Settings" i18n-title>
<button class="btn btn-sm btn-outline-primary" (click)="tourService.start()"><ng-container i18n>Start tour</ng-container></button>
</app-page-header>
<!-- <p>items per page, documents per view type</p> -->

5
src-ui/src/app/components/manage/settings/settings.component.ts
View File

@ -28,7 +28,7 @@ import {
import { SETTINGS_KEYS } from 'src/app/data/paperless-uisettings'
import { ActivatedRoute } from '@angular/router'
import { ViewportScroller } from '@angular/common'
import { ForwardRefHandling } from '@angular/compiler'
import { TourService } from 'ngx-ui-tour-ng-bootstrap'
@Component({
selector: 'app-settings',
@ -86,7 +86,8 @@ export class SettingsComponent
private settings: SettingsService,
@Inject(LOCALE_ID) public currentLocale: string,
private viewportScroller: ViewportScroller,
private activatedRoute: ActivatedRoute
private activatedRoute: ActivatedRoute,
public readonly tourService: TourService,
) {
this.settings.settingsSaved.subscribe(() => {
if (!this.savePending) this.initialize()

2
src-ui/src/styles.scss
View File

@ -515,7 +515,7 @@ table.table {
// Tour popovers
.tour-active .popover {
min-width: 400px;
min-width: 360px;
margin: 0 .25rem .25rem !important;
}