Cutlery/paperless-ngx
1
0
Fork 0
mirror of https://github.com/paperless-ngx/paperless-ngx.git synced 2025-11-03 19:17:13 -05:00
Code Issues Packages Projects Releases Wiki Activity

mobile improvements, fix dismiss 1 task

Browse Source
This commit is contained in:
Michael Shamoon 2022-05-26 22:15:56 -07:00
parent 00a5c13001
commit dc86993c84
3 changed files with 24 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src-ui/src/app/components/manage/tasks/tasks.component.html
View File

@ -33,10 +33,11 @@
<label class="form-check-label" for="all-tasks"></label> <label class="form-check-label" for="all-tasks"></label>
</div> </div>
</th> </th>
<th scope="col" width="25%" i18n>Name</th> <th scope="col" i18n>Name</th>
<th scope="col" width="20%" i18n>Created</th> <th scope="col" class="d-none d-lg-table-cell" i18n>Created</th>
<th scope="col" width="45%" i18n>Results</th> <th scope="col" class="d-none d-lg-table-cell" *ngIf="activeTab != 'incomplete'" i18n>Results</th>
<th scope="col" width="10%" i18n>Actions</th> <th scope="col" class="d-table-cell d-lg-none" i18n>Info</th>
<th scope="col" i18n>Actions</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -47,20 +48,28 @@
<label class="form-check-label" for="task{{task.id}}"></label> <label class="form-check-label" for="task{{task.id}}"></label>
</div> </div>
</th> </th>
<td>{{ task.name }}</td> <td class="overflow-auto">{{ task.name }}</td>
<td>{{ task.created | customDate:'short' }}</td> <td class="d-none d-lg-table-cell">{{ task.created | customDate:'short' }}</td>
<td> <td class="d-none d-lg-table-cell" *ngIf="activeTab != 'incomplete'">
<div class="text-primary" *ngIf="task.result.length > 50" [ngbPopover]="resultPopover" popoverClass="shadow font-monospace small" triggers="mouseenter:mouseleave:click"> <div class="text-primary" *ngIf="task.result.length > 50" [ngbPopover]="resultPopover" popoverClass="shadow font-monospace small" triggers="mouseenter:mouseleave:click">
<svg fill="currentColor" class="me-2" width="1.2em" height="1.2em" style="vertical-align: text-top;" viewBox="0 0 16 16"> <svg fill="currentColor" class="me-2" width="1.2em" height="1.2em" style="vertical-align: text-top;" viewBox="0 0 16 16">
<use xlink:href="assets/bootstrap-icons.svg#info-circle" /> <use xlink:href="assets/bootstrap-icons.svg#info-circle" />
</svg> </svg>
<span class="small d-none d-md-inline-block font-monospace text-muted">{{ task.result | slice:0:50 }}&hellip;</span> <span class="small d-none d-md-inline-block font-monospace text-muted">{{ task.result | slice:0:50 }}&hellip;</span>
<ng-template #resultPopover><div class="small">{{ task.result }}</div></ng-template>
</div> </div>
<span *ngIf="task.result.length <= 50" class="small d-none d-md-inline-block font-monospace">{{ task.result | slice:0:50 }}</span> <span *ngIf="task.result.length <= 50" class="small d-none d-md-inline-block font-monospace">{{ task.result | slice:0:50 }}</span>
<ng-template #resultPopover><div class="small">{{ task.result }}</div></ng-template> </td>
<td class="d-lg-none">
<span [ngbPopover]="resultPopoverMobile" popoverClass="shadow small mobile" container="body">
<svg fill="currentColor" class="me-2" width="1.2em" height="1.2em" style="vertical-align: text-top;" viewBox="0 0 16 16">
<use xlink:href="assets/bootstrap-icons.svg#info-circle" />
</svg>
</span>
<ng-template #resultPopoverMobile><div class="small">{{ task.created | customDate:'short' }}<div class="font-monospace">{{ task.result }}</div></div></ng-template>
</td> </td>
<td scope="row"> <td scope="row">
<button class="btn btn-sm btn-outline-secondary" (click)="acknowledgeTask(task)"> <button class="btn btn-sm btn-outline-secondary" (click)="dismissTask(task)">
<svg class="sidebaricon" fill="currentColor"> <svg class="sidebaricon" fill="currentColor">
<use xlink:href="assets/bootstrap-icons.svg#check"/> <use xlink:href="assets/bootstrap-icons.svg#check"/>
</svg>&nbsp;<ng-container i18n>Dismiss</ng-container> </svg>&nbsp;<ng-container i18n>Dismiss</ng-container>
@ -79,7 +88,7 @@
</ng-template> </ng-template>
</li> </li>
<li ngbNavItem="completed"> <li ngbNavItem="completed">
<a ngbNavLink i18n>Completed&nbsp;<span class="badge bg-secondary ms-1">{{tasksService.completedFileTasks.length}}</span></a> <a ngbNavLink i18n>Complete&nbsp;<span class="badge bg-secondary ms-1">{{tasksService.completedFileTasks.length}}</span></a>
<ng-template ngbNavContent> <ng-template ngbNavContent>
<ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:tasksService.completedFileTasks}"></ng-container> <ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:tasksService.completedFileTasks}"></ng-container>
</ng-template> </ng-template>

4
src-ui/src/app/components/manage/tasks/tasks.component.scss
View File

@ -1,3 +1,7 @@
::ng-deep .popover { ::ng-deep .popover {
max-width: 50%; max-width: 50%;
} }
::ng-deep .popover.mobile {
max-width: 75%;
}

2
src-ui/src/app/components/manage/tasks/tasks.component.ts
View File

@ -35,7 +35,7 @@ export class TasksComponent implements OnInit, OnDestroy {
dismissTasks(task: PaperlessTask = undefined) { dismissTasks(task: PaperlessTask = undefined) {
let tasks = task ? new Set([task.id]) : this.selectedTasks let tasks = task ? new Set([task.id]) : this.selectedTasks
if (this.selectedTasks.size == 0) if (!task && this.selectedTasks.size == 0)
tasks = new Set(this.currentTasks.map((t) => t.id)) tasks = new Set(this.currentTasks.map((t) => t.id))
this.tasksService.dismissTasks(tasks) this.tasksService.dismissTasks(tasks)
} }