paradizelost/paperless-ngx
1
0
Fork 0
mirror of https://github.com/paperless-ngx/paperless-ngx.git synced 2025-10-30 03:56:23 -05:00
Code Issues Packages Projects Releases Wiki Activity

Prettier styling on dropdowns

Browse Source
This commit is contained in:
Michael Shamoon
2020-12-13 14:40:17 -08:00
parent b3b24ebe03
commit 7fb432eaf7
4 changed files with 31 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,9 +7,9 @@
</ng-container> </ng-container>
{{title}} {{title}}
</button> </button>
<div class="dropdown-menu date-filter shadow" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}"> <div class="dropdown-menu date-filter shadow pt-0" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
<div class="list-group list-group-flush"> <div class="list-group list-group-flush">
<button *ngFor="let range of [7, 30, 'month', 'year']" class="list-group-item small list-goup list-group-item-action d-flex" role="menuitem" (click)="setDateQuickFilter(range)"> <button *ngFor="let range of [7, 30, 'month', 'year']" class="list-group-item small list-goup list-group-item-action d-flex p-2 pl-3" role="menuitem" (click)="setDateQuickFilter(range)">
<ng-container *ngIf="isStringRange(range)">This </ng-container> <ng-container *ngIf="isStringRange(range)">This </ng-container>
{{ range }} {{ range }}
<ng-container *ngIf="!isStringRange(range)"> days</ng-container> <ng-container *ngIf="!isStringRange(range)"> days</ng-container>

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

@@ -1,4 +1,4 @@
<button class="list-group-item list-group-item-action d-flex align-items-center" role="menuitem" (click)="toggleItem()"> <button class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-left-0 border-right-0 border-bottom" role="menuitem" (click)="toggleItem()">
<div class="selected-icon mr-1"> <div class="selected-icon mr-1">
<svg *ngIf="selected" width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-check" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <svg *ngIf="selected" width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-check" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z"/> <path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z"/>
@@ -8,5 +8,5 @@
<app-tag *ngIf="isTag; else displayName" [tag]="item" [clickable]="true" linkTitle="Filter by tag"></app-tag> <app-tag *ngIf="isTag; else displayName" [tag]="item" [clickable]="true" linkTitle="Filter by tag"></app-tag>
<ng-template #displayName><small>{{item.name}}</small></ng-template> <ng-template #displayName><small>{{item.name}}</small></ng-template>
</div> </div>
<div class="badge bg-primary text-light rounded-pill ml-auto">{{item.document_count}}</div> <div class="badge badge-light rounded-pill ml-auto">{{item.document_count}}</div>
</button> </button>

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

@@ -1,18 +1,32 @@
<div class="btn-group" ngbDropdown role="group" (openChange)="dropdownOpenChange($event)"> <div class="btn-group" ngbDropdown role="group" (openChange)="dropdownOpenChange($event)">
<button class="btn btn-outline-primary btn-sm" id="dropdown{{title}}" ngbDropdownToggle> <button class="btn btn-outline-primary btn-sm" id="dropdown{{title}}" ngbDropdownToggle>
<div class="badge bg-primary text-light rounded-pill ml-auto">
<ng-container *ngIf="itemsSelected?.length > 0"> <ng-container *ngIf="itemsSelected?.length > 0">
<div class="badge bg-primary text-light rounded-pill ml-auto">{{itemsSelected?.length}}</div> {{itemsSelected?.length}}
</ng-container> </ng-container>
</div>
{{title}} {{title}}
</button> </button>
<div class="dropdown-menu quick-filter shadow" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}"> <div class="dropdown-menu py-0 shadow" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
<div class="list-group list-group-flush"> <div class="list-group list-group-flush">
<input class="list-group-item form-control form-control-sm" type="text" [(ngModel)]="filterText" placeholder="Filter {{title}}" (keyup.enter)="listFilterEnter()" #listFilterTextInput> <div class="list-group-item">
<ng-container *ngIf="items"> <div class="input-group input-group-sm">
<input class="form-control" type="text" [(ngModel)]="filterText" placeholder="Filter {{title}}" (keyup.enter)="listFilterEnter()" #listFilterTextInput>
<div class="input-group-append">
<span class="input-group-text bg-light text-muted">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z"/>
<path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"/>
</svg>
</span>
</div>
</div>
</div>
<div *ngIf="items" class="items">
<ng-container *ngFor="let item of items | filter: filterText; let i = index"> <ng-container *ngFor="let item of items | filter: filterText; let i = index">
<app-filter-dropdown-button [item]="item" [selected]="isItemSelected(item)" (toggle)="toggleItem($event)"></app-filter-dropdown-button> <app-filter-dropdown-button [item]="item" [selected]="isItemSelected(item)" (toggle)="toggleItem($event)"></app-filter-dropdown-button>
</ng-container> </ng-container>
</ng-container> </div>
</div> </div>
</div> </div>
</div> </div>

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

@@ -1,5 +1,8 @@
.quick-filter { .dropdown-menu {
min-width: 250px; min-width: 250px;
.items {
max-height: 400px; max-height: 400px;
overflow-y: scroll; overflow-y: scroll;
} }
}