paradizelost/paperless-ngx
1
0
Fork 0
mirror of https://github.com/paperless-ngx/paperless-ngx.git synced 2025-08-07 19:08:32 -05:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #137 from shamoon/quick-filters-mobile-2

Browse Source 
Mobile Improvements for "Quick Filters" (2)
This commit is contained in:
Jonas Winkler
2020-12-15 23:39:05 +01:00
committed by GitHub
parent 7dce57b9f7 beffde1051
commit 8e57d4e791
5 changed files with 44 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -62,7 +62,7 @@
</app-page-header>
<div class="w-100 mb-4">
<div class="w-100 mb-2 mb-sm-4">
<app-filter-editor [(filterRules)]="list.filterRules" #filterEditor></app-filter-editor>
</div>

12
src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.html
View File

@@ -1,6 +1,16 @@
<div class="btn-group" ngbDropdown role="group" (openChange)="dropdownOpenChange($event)" #filterDropdown="ngbDropdown">
<button class="btn btn-sm" id="dropdown{{title}}" ngbDropdownToggle [ngClass]="itemsSelected?.length > 0 ? 'btn-primary' : 'btn-outline-primary'">
{{title}}
<div class="d-none d-md-inline">{{title}}</div>
<div class="d-inline-block d-md-none">
<svg class="toolbaricon" fill="currentColor">
<use attr.xlink:href="assets/bootstrap-icons.svg#{{icon}}" />
</svg>
</div>
<ng-container *ngIf="itemsSelected?.length > 0">
<div class="badge bg-secondary text-light rounded-pill badge-corner">
{{itemsSelected?.length}}
</div>
</ng-container>
</button>
<div class="dropdown-menu py-0 shadow" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
<div class="list-group list-group-flush">

6
src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.scss
View File

@@ -1,3 +1,9 @@
.badge-corner {
position: absolute;
top: -8px;
right: -8px;
}
.dropdown-menu {
min-width: 250px;

2
src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.ts
View File

@@ -22,7 +22,7 @@ export class FilterDropdownComponent {
title: string
@Input()
display: string
icon: string
@Output()
toggle = new EventEmitter()

33
src-ui/src/app/components/filter-editor/filter-editor.component.html
View File

@@ -1,22 +1,27 @@
<div class="form-row form-group mb-0">
<div class="col-auto">
<div class="text-muted mt-1">Filter by:</div>
<div class="row">
<div class="col mb-2 mb-xl-0">
<div class="form-inline d-flex">
<label class="text-muted mr-2">Filter by:</label>
<input class="form-control form-control-sm flex-grow-1" type="text" [(ngModel)]="titleFilter" placeholder="Title">
</div>
<div class="col">
<input class="form-control form-control-sm" type="text" [(ngModel)]="titleFilter" placeholder="Title">
</div>
<app-filter-dropdown class="col-auto" [items]="tags" [itemsSelected]="selectedTags" title="Tags" (toggle)="toggleTag($event.id)"></app-filter-dropdown>
<app-filter-dropdown class="col-auto" [items]="correspondents" [itemsSelected]="selectedCorrespondents" title="Correspondents" (toggle)="toggleCorrespondent($event.id)"></app-filter-dropdown>
<app-filter-dropdown class="col-auto" [items]="documentTypes" [itemsSelected]="selectedDocumentTypes" title="Document types" (toggle)="toggleDocumentType($event.id)"></app-filter-dropdown>
<app-filter-dropdown-date class="col-auto" [dateBefore]="dateCreatedBefore" [dateAfter]="dateCreatedAfter" title="Created" (datesSet)="onDatesCreatedSet($event)"></app-filter-dropdown-date>
<app-filter-dropdown-date class="col-auto" [dateBefore]="dateAddedBefore" [dateAfter]="dateAddedAfter" title="Added" (datesSet)="onDatesAddedSet($event)"></app-filter-dropdown-date>
<button class="btn btn-link btn-sm" [disabled]="!hasFilters()" (click)="clearSelected()">
<div class="w-100 d-xl-none"></div>
<div class="col col-xl-auto mb-2 mb-xl-0">
<div class="d-flex">
<app-filter-dropdown class="mr-2 mr-md-3" [items]="tags" [itemsSelected]="selectedTags" title="Tags" icon="tag-fill" (toggle)="toggleTag($event.id)"></app-filter-dropdown>
<app-filter-dropdown class="mr-2 mr-md-3" [items]="correspondents" [itemsSelected]="selectedCorrespondents" title="Correspondents" icon="person-fill" (toggle)="toggleCorrespondent($event.id)"></app-filter-dropdown>
<app-filter-dropdown class="mr-2 mr-md-3" [items]="documentTypes" [itemsSelected]="selectedDocumentTypes" title="Document types" icon="file-earmark-fill" (toggle)="toggleDocumentType($event.id)"></app-filter-dropdown>
<app-filter-dropdown-date class="mr-2 mr-md-3" [dateBefore]="dateCreatedBefore" [dateAfter]="dateCreatedAfter" title="Created" (datesSet)="onDatesCreatedSet($event)"></app-filter-dropdown-date>
<app-filter-dropdown-date [dateBefore]="dateAddedBefore" [dateAfter]="dateAddedAfter" title="Added" (datesSet)="onDatesAddedSet($event)"></app-filter-dropdown-date>
</div>
</div>
<div class="w-100 d-xl-none"></div>
<div class="col col-xl-auto mb-2 mb-xl-0">
<button class="btn btn-link btn-sm px-0 mx-0 ml-xl-n4" [disabled]="!hasFilters()" (click)="clearSelected()">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-x" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
</svg>
Clear all filters
</button>
</div>
</div>