Fill document list buttons, show select icon because its not obvious, make some menus right

This commit is contained in:
Michael Shamoon 2021-01-11 12:52:42 -08:00
parent 18a128b917
commit 64a966c9a5
2 changed files with 39 additions and 41 deletions

View File

@ -1,11 +1,10 @@
<app-page-header [title]="getTitle()"> <app-page-header [title]="getTitle()">
<div ngbDropdown class="mr-2"> <div ngbDropdown class="mr-2 flex-fill d-flex">
<button class="btn btn-sm btn-outline-primary" id="dropdownSelect" ngbDropdownToggle> <button class="btn btn-sm btn-outline-primary flex-fill" id="dropdownSelect" ngbDropdownToggle>
<svg class="toolbaricon" fill="currentColor"> <svg class="toolbaricon" fill="currentColor">
<use xlink:href="assets/bootstrap-icons.svg#text-indent-left" /> <use xlink:href="assets/bootstrap-icons.svg#text-indent-left" />
</svg>&nbsp;<span class="d-none d-md-inline" i18n>Select</span> </svg>&nbsp;<ng-container i18n>Select</ng-container>
</button> </button>
<div ngbDropdownMenu aria-labelledby="dropdownSelect" class="shadow"> <div ngbDropdownMenu aria-labelledby="dropdownSelect" class="shadow">
<button ngbDropdownItem (click)="list.selectNone()" i18n>Select none</button> <button ngbDropdownItem (click)="list.selectNone()" i18n>Select none</button>
@ -14,7 +13,7 @@
</div> </div>
</div> </div>
<div class="btn-group btn-group-toggle" ngbRadioGroup [(ngModel)]="displayMode" <div class="btn-group btn-group-toggle flex-fill" ngbRadioGroup [(ngModel)]="displayMode"
(ngModelChange)="saveDisplayMode()"> (ngModelChange)="saveDisplayMode()">
<label ngbButtonLabel class="btn-outline-primary btn-sm"> <label ngbButtonLabel class="btn-outline-primary btn-sm">
<input ngbButton type="radio" class="btn btn-sm" value="details"> <input ngbButton type="radio" class="btn btn-sm" value="details">
@ -36,10 +35,9 @@
</label> </label>
</div> </div>
<div class="btn-group ml-2 flex-fill"> <div ngbDropdown class="btn-group ml-2 flex-fill">
<div ngbDropdown class="btn-group flex-fill"> <button class="btn btn-outline-primary btn-sm" id="dropdownBasic1" ngbDropdownToggle i18n>Sort</button>
<button class="btn btn-outline-primary btn-sm" id="dropdownBasic1" ngbDropdownToggle i18n>Sort by</button> <div ngbDropdownMenu aria-labelledby="dropdownBasic1" class="shadow dropdown-menu-right">
<div ngbDropdownMenu aria-labelledby="dropdownBasic1" class="shadow">
<div class="w-100 d-flex btn-group-toggle pb-2 mb-1 border-bottom" ngbRadioGroup [(ngModel)]="list.sortReverse"> <div class="w-100 d-flex btn-group-toggle pb-2 mb-1 border-bottom" ngbRadioGroup [(ngModel)]="list.sortReverse">
<label ngbButtonLabel class="btn-outline-primary btn-sm mx-2 flex-fill"> <label ngbButtonLabel class="btn-outline-primary btn-sm mx-2 flex-fill">
<input ngbButton type="radio" class="btn btn-sm" [value]="false"> <input ngbButton type="radio" class="btn btn-sm" [value]="false">
@ -61,13 +59,10 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="btn-group ml-2 flex-fill"> <div class="btn-group ml-2 flex-fill" ngbDropdown role="group">
<button class="btn btn-sm btn-outline-primary dropdown-toggle flex-fill" ngbDropdownToggle i18n>Views</button>
<div class="btn-group flex-fill" ngbDropdown role="group"> <div class="dropdown-menu shadow dropdown-menu-right" ngbDropdownMenu>
<button class="btn btn-sm btn-outline-primary dropdown-toggle" ngbDropdownToggle i18n>Views</button>
<div class="dropdown-menu shadow" ngbDropdownMenu>
<ng-container *ngIf="!list.savedViewId"> <ng-container *ngIf="!list.savedViewId">
<button ngbDropdownItem *ngFor="let view of savedViewService.allViews" (click)="loadViewConfig(view)">{{view.name}}</button> <button ngbDropdownItem *ngFor="let view of savedViewService.allViews" (click)="loadViewConfig(view)">{{view.name}}</button>
<div class="dropdown-divider" *ngIf="savedViewService.allViews.length > 0"></div> <div class="dropdown-divider" *ngIf="savedViewService.allViews.length > 0"></div>
@ -78,8 +73,6 @@
</div> </div>
</div> </div>
</div>
</app-page-header> </app-page-header>
<div class="w-100 mb-2 mb-sm-4"> <div class="w-100 mb-2 mb-sm-4">

View File

@ -25,3 +25,8 @@ $paperless-card-breakpoints: (
} }
} }
} }
.dropdown-menu-right {
right: 0 !important;
left: auto !important;
}