On second thought lets make filter editor buttons fill

This commit is contained in:
Michael Shamoon 2021-01-11 12:22:35 -08:00
parent cfd263da90
commit 18a128b917
3 changed files with 10 additions and 10 deletions

View File

@ -1,5 +1,5 @@
<div class="btn-group" ngbDropdown role="group"> <div class="btn-group w-100" ngbDropdown role="group">
<button class="btn btn-sm" id="dropdown{{title}}" ngbDropdownToggle [ngClass]="dateBefore || dateAfter ? 'btn-primary' : 'btn-outline-primary'"> <button class="btn btn-sm flex-fill" id="dropdown{{title}}" ngbDropdownToggle [ngClass]="dateBefore || dateAfter ? 'btn-primary' : 'btn-outline-primary'">
{{title}} {{title}}
</button> </button>
<div class="dropdown-menu date-dropdown shadow pt-0" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}"> <div class="dropdown-menu date-dropdown shadow pt-0" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">

View File

@ -1,5 +1,5 @@
<div class="btn-group" ngbDropdown role="group" (openChange)="dropdownOpenChange($event)" #dropdown="ngbDropdown"> <div class="btn-group w-100" ngbDropdown role="group" (openChange)="dropdownOpenChange($event)" #dropdown="ngbDropdown">
<button class="btn btn-sm" id="dropdown{{title}}" ngbDropdownToggle [ngClass]="!editing && selectionModel.selectionSize() > 0 ? 'btn-primary' : 'btn-outline-primary'"> <button class="btn btn-sm flex-fill" id="dropdown{{title}}" ngbDropdownToggle [ngClass]="!editing && selectionModel.selectionSize() > 0 ? 'btn-primary' : 'btn-outline-primary'">
<div class="d-none d-md-inline">{{title}}</div> <div class="d-none d-md-inline">{{title}}</div>
<div class="d-inline-block d-md-none"> <div class="d-inline-block d-md-none">
<svg class="toolbaricon" fill="currentColor"> <svg class="toolbaricon" fill="currentColor">

View File

@ -7,8 +7,8 @@
</div> </div>
<div class="w-100 d-xl-none"></div> <div class="w-100 d-xl-none"></div>
<div class="col col-xl-auto mb-2 mb-xl-0"> <div class="col col-xl-auto mb-2 mb-xl-0">
<div class="d-flex justify-content-between"> <div class="d-flex justify-content-between">
<app-filterable-dropdown class="mr-md-3" title="Tags" icon="tag-fill" i18n-title <app-filterable-dropdown class="mr-2 flex-fill" title="Tags" icon="tag-fill" i18n-title
filterPlaceholder="Filter tags" i18n-filterPlaceholder filterPlaceholder="Filter tags" i18n-filterPlaceholder
[items]="tags" [items]="tags"
[(selectionModel)]="tagSelectionModel" [(selectionModel)]="tagSelectionModel"
@ -16,26 +16,26 @@
[multiple]="true" [multiple]="true"
(open)="onTagsDropdownOpen()" (open)="onTagsDropdownOpen()"
[allowSelectNone]="true"></app-filterable-dropdown> [allowSelectNone]="true"></app-filterable-dropdown>
<app-filterable-dropdown class="mr-md-3" title="Correspondent" icon="person-fill" i18n-title <app-filterable-dropdown class="mr-2 flex-fill" title="Correspondent" icon="person-fill" i18n-title
filterPlaceholder="Filter correspondents" i18n-filterPlaceholder filterPlaceholder="Filter correspondents" i18n-filterPlaceholder
[items]="correspondents" [items]="correspondents"
[(selectionModel)]="correspondentSelectionModel" [(selectionModel)]="correspondentSelectionModel"
(selectionModelChange)="updateRules()" (selectionModelChange)="updateRules()"
(open)="onCorrespondentDropdownOpen()" (open)="onCorrespondentDropdownOpen()"
[allowSelectNone]="true"></app-filterable-dropdown> [allowSelectNone]="true"></app-filterable-dropdown>
<app-filterable-dropdown class="mr-md-3" title="Document type" icon="file-earmark-fill" i18n-title <app-filterable-dropdown class="mr-2 flex-fill" title="Document type" icon="file-earmark-fill" i18n-title
filterPlaceholder="Filter document types" i18n-filterPlaceholder filterPlaceholder="Filter document types" i18n-filterPlaceholder
[items]="documentTypes" [items]="documentTypes"
[(selectionModel)]="documentTypeSelectionModel" [(selectionModel)]="documentTypeSelectionModel"
(open)="onDocumentTypeDropdownOpen()" (open)="onDocumentTypeDropdownOpen()"
(selectionModelChange)="updateRules()" (selectionModelChange)="updateRules()"
[allowSelectNone]="true"></app-filterable-dropdown> [allowSelectNone]="true"></app-filterable-dropdown>
<app-date-dropdown class="mr-md-3" <app-date-dropdown class="mr-2 flex-fill"
title="Created" i18n-title title="Created" i18n-title
(datesSet)="updateRules()" (datesSet)="updateRules()"
[(dateBefore)]="dateCreatedBefore" [(dateBefore)]="dateCreatedBefore"
[(dateAfter)]="dateCreatedAfter"></app-date-dropdown> [(dateAfter)]="dateCreatedAfter"></app-date-dropdown>
<app-date-dropdown <app-date-dropdown class="flex-fill"
[(dateBefore)]="dateAddedBefore" [(dateBefore)]="dateAddedBefore"
[(dateAfter)]="dateAddedAfter" [(dateAfter)]="dateAddedAfter"
title="Added" i18n-title title="Added" i18n-title