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

Styled, organized button UI

Browse Source
This commit is contained in:
Michael Shamoon 2020-12-15 00:57:31 -08:00
parent 34c42c4339
commit 03f071fd27
4 changed files with 95 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
View File

@ -1,16 +1,89 @@
<div class="btn-group mr-lg-2" role="group" aria-label="Select"> <div class="card bg-light">
<button class="btn btn-sm btn-outline-primary" (click)="this.selectPage.next()">Select page</button> <div class="card-body px-2 py-2 d-flex justify-content-between flex-wrap align-items-end">
<button class="btn btn-sm btn-outline-primary" (click)="this.selectAll.next()">Select all</button> <div class="d-flex flex-grow-1 mb-2 mb-lg-0" role="group" aria-label="Select">
<button class="btn btn-sm btn-outline-primary" (click)="this.selectNone.next()">Select none</button> <label class="d-flex mt-1 mr-auto mr-lg-2">Select:</label>
<div class="btn-group d-flex">
<button class="btn btn-sm btn-outline-primary" (click)="selectPage.next()">
<svg viewBox="0 0 16 16" fill="currentColor">
<use xlink:href="assets/bootstrap-icons.svg#file-earmark-check" />
</svg>
Page
</button>
<button class="btn btn-sm btn-outline-primary" (click)="selectAll.next()">
<svg viewBox="0 0 16 16" fill="currentColor">
<use xlink:href="assets/bootstrap-icons.svg#check-all" />
</svg>
All
</button>
<button class="btn btn-sm btn-outline-primary" (click)="selectNone.next()">
<svg viewBox="0 0 16 16" fill="currentColor">
<use xlink:href="assets/bootstrap-icons.svg#slash-circle" />
</svg>
None
</button>
</div>
</div>
<div class="d-flex flex-grow-1 mb-2 mb-lg-0" role="group" aria-label="Tags">
<label class="d-flex mt-1 mr-auto mr-lg-2">Tags:</label>
<div class="btn-group d-flex">
<button class="btn btn-sm btn-outline-primary" (click)="addTag.next()">
<ng-container *ngTemplateOutlet="add"></ng-container>
</button>
<button class="btn btn-sm btn-outline-primary" (click)="removeTag.next()">
<ng-container *ngTemplateOutlet="remove"></ng-container>
</button>
</div>
</div>
<div class="d-flex flex-grow-1 mb-2 mb-lg-0" role="group" aria-label="Correspondent">
<label class="d-flex mt-1 mr-auto mr-lg-2">Correspondent:</label>
<div class="btn-group d-flex">
<button class="btn btn-sm btn-outline-primary" (click)="setCorrespondent.next()">
<ng-container *ngTemplateOutlet="edit"></ng-container>
</button>
<button class="btn btn-sm btn-outline-primary" (click)="removeCorrespondent.next()">
<ng-container *ngTemplateOutlet="remove"></ng-container>
</button>
</div>
</div>
<div class="d-flex flex-grow-1 mb-2 mb-lg-0" role="group" aria-label="Document Type">
<label class="d-flex mt-1 mr-auto mr-lg-2">Document Type:</label>
<div class="btn-group d-flex">
<button class="btn btn-sm btn-outline-primary" (click)="setDocumentType.next()">
<ng-container *ngTemplateOutlet="edit"></ng-container>
</button>
<button class="btn btn-sm btn-outline-primary" (click)="removeDocumentType.next()">
<ng-container *ngTemplateOutlet="remove"></ng-container>
</button>
</div>
</div>
<div class="d-flex flex-grow-1 mb-2 mb-lg-0" role="group" aria-label="Delete">
<button class="btn btn-sm btn-outline-danger ml-auto" (click)="delete.next()">
<svg viewBox="0 0 16 16" fill="currentColor">
<use xlink:href="assets/bootstrap-icons.svg#trash" />
</svg>
Delete
</button>
</div>
</div> </div>
<div class="btn-group mr-lg-2" role="group" aria-label="Actions">
<button class="btn btn-sm btn-outline-primary" (click)="this.setCorrespondent.next()">Set correspondent</button>
<button class="btn btn-sm btn-outline-primary" (click)="this.removeCorrespondent.next()">Remove correspondent</button>
<button class="btn btn-sm btn-outline-primary" (click)="this.setDocumentType.next()">Set document type</button>
<button class="btn btn-sm btn-outline-primary" (click)="this.removeDocumentType.next()">Remove document type</button>
<button class="btn btn-sm btn-outline-primary" (click)="this.addTag.next()">Add tag</button>
<button class="btn btn-sm btn-outline-primary" (click)="this.removeTag.next()">Remove tag</button>
</div>
<div class="btn-group mr-lg-2" role="group" aria-label="Delete">
<button class="btn btn-sm btn-outline-primary" (click)="this.delete.next()">Delete</button>
</div> </div>
<ng-template #add>
<svg viewBox="0 0 16 16" fill="currentColor">
<use xlink:href="assets/bootstrap-icons.svg#plus-circle" />
</svg>
Add
</ng-template>
<ng-template #edit>
<svg viewBox="0 0 16 16" fill="currentColor">
<use xlink:href="assets/bootstrap-icons.svg#pencil" />
</svg>
Edit
</ng-template>
<ng-template #remove>
<svg viewBox="0 0 16 16" fill="currentColor">
<use xlink:href="assets/bootstrap-icons.svg#x-circle" />
</svg>
Remove
</ng-template>

6
src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.scss
View File

@ -0,0 +1,6 @@
.btn svg {
width: 0.9em;
height: 0.9em;
margin-right: 2px;
margin-top: -1px;
}

2
src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.ts
View File

@ -24,7 +24,7 @@ export class BulkEditorComponent {
setCorrespondent = new EventEmitter() setCorrespondent = new EventEmitter()
@Output() @Output()
removeCorresponden = new EventEmitter() removeCorrespondent = new EventEmitter()
@Output() @Output()
setDocumentType = new EventEmitter() setDocumentType = new EventEmitter()

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

@ -87,7 +87,7 @@
[rotate]="true" (pageChange)="list.reload()" aria-label="Default pagination"></ngb-pagination> [rotate]="true" (pageChange)="list.reload()" aria-label="Default pagination"></ngb-pagination>
</div> </div>
<div class="w-100 mb-2" [ngbCollapse]="!isBulkEditing"> <div class="w-100 mb-3" [ngbCollapse]="!isBulkEditing">
<app-bulk-editor <app-bulk-editor
(selectPage)="list.selectPage()" (selectPage)="list.selectPage()"
(selectAll)="list.selectAll()" (selectAll)="list.selectAll()"