Cutlery/paperless-ngx
1
0
Fork 0
mirror of https://github.com/paperless-ngx/paperless-ngx.git synced 2025-10-31 10:37:12 -04:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #329 from shamoon/fix/mobile-button-group-improvements

Browse Source 
Mobile button group improvements
This commit is contained in:
Jonas Winkler 2021-01-12 11:55:12 +01:00 committed by GitHub
commit 95bfc4be9a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 58 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html
View File

@ -1,4 +1,4 @@
<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" id="dropdown{{title}}" ngbDropdownToggle [ngClass]="dateBefore || dateAfter ? 'btn-primary' : 'btn-outline-primary'">
{{title}} {{title}}
</button> </button>

12
src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html
View File

@ -1,11 +1,9 @@
<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" id="dropdown{{title}}" ngbDropdownToggle [ngClass]="!editing && selectionModel.selectionSize() > 0 ? 'btn-primary' : 'btn-outline-primary'">
<div class="d-none d-md-inline">{{title}}</div> <svg class="toolbaricon" fill="currentColor">
<div class="d-inline-block d-md-none"> <use attr.xlink:href="assets/bootstrap-icons.svg#{{icon}}" />
<svg class="toolbaricon" fill="currentColor"> </svg>
<use attr.xlink:href="assets/bootstrap-icons.svg#{{icon}}" /> <div class="d-none d-sm-inline">&nbsp;{{title}}</div>
</svg>
</div>
<ng-container *ngIf="!editing && selectionModel.selectionSize() > 0"> <ng-container *ngIf="!editing && selectionModel.selectionSize() > 0">
<div class="badge bg-secondary text-light rounded-pill badge-corner"> <div class="badge bg-secondary text-light rounded-pill badge-corner">
{{selectionModel.selectionSize()}} {{selectionModel.selectionSize()}}

4
src-ui/src/app/components/common/page-header/page-header.component.html
View File

@ -1,9 +1,9 @@
<div class="row pt-3 pb-1 mb-3 border-bottom align-items-center" > <div class="row pt-3 pb-3 pb-md-1 mb-3 border-bottom align-items-center">
<div class="col-md text-truncate"> <div class="col-md text-truncate">
<p class="h2 text-truncate" style="line-height: 1.4">{{title}}</p> <p class="h2 text-truncate" style="line-height: 1.4">{{title}}</p>
<p *ngIf="subTitle" class="h5 text-truncate" style="line-height: 1.4">{{subTitle}}</p> <p *ngIf="subTitle" class="h5 text-truncate" style="line-height: 1.4">{{subTitle}}</p>
</div> </div>
<div class="btn-toolbar col-auto"> <div class="btn-toolbar col col-md-auto">
<ng-content></ng-content> <ng-content></ng-content>
</div> </div>
</div> </div>

4
src-ui/src/app/components/document-detail/document-detail.component.html
View File

@ -1,5 +1,5 @@
<app-page-header [(title)]="title"> <app-page-header [(title)]="title">
<div class="input-group input-group-sm mr-5" *ngIf="getContentType() == 'application/pdf'"> <div class="input-group input-group-sm mr-5 d-none d-md-flex" *ngIf="getContentType() == 'application/pdf'">
<div class="input-group-prepend"> <div class="input-group-prepend">
<div class="input-group-text" i18n>Page</div> <div class="input-group-text" i18n>Page</div>
</div> </div>
@ -9,7 +9,7 @@
</div> </div>
</div> </div>
<button type="button" class="btn btn-sm btn-outline-danger mr-2" (click)="delete()"> <button type="button" class="btn btn-sm btn-outline-danger mr-2 ml-auto" (click)="delete()">
<svg class="buttonicon" fill="currentColor"> <svg class="buttonicon" fill="currentColor">
<use xlink:href="assets/bootstrap-icons.svg#trash" /> <use xlink:href="assets/bootstrap-icons.svg#trash" />
</svg>&nbsp;<span class="d-none d-lg-inline" i18n>Delete</span> </svg>&nbsp;<span class="d-none d-lg-inline" i18n>Delete</span>

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

@ -6,8 +6,7 @@
</svg>&nbsp;<ng-container i18n>Cancel</ng-container> </svg>&nbsp;<ng-container i18n>Cancel</ng-container>
</button> </button>
</div> </div>
<div class="w-100 d-xl-none"></div> <div class="col-auto mb-2 mb-xl-0 ml-auto ml-md-0" role="group" aria-label="Select">
<div class="col-auto mb-2 mb-xl-0" role="group" aria-label="Select">
<label class="mr-2 mb-0" i18n>Select:</label> <label class="mr-2 mb-0" i18n>Select:</label>
<div class="btn-group"> <div class="btn-group">
<button class="btn btn-sm btn-outline-primary" (click)="list.selectPage()"> <button class="btn btn-sm btn-outline-primary" (click)="list.selectPage()">
@ -56,9 +55,8 @@
</app-filterable-dropdown> </app-filterable-dropdown>
</div> </div>
</div> </div>
<div class="w-100 d-xl-none"></div> <div class="col-auto ml-auto mb-2 mb-xl-0 d-flex">
<div class="col mb-2 mb-xl-0 d-flex"> <button type="button" class="btn btn-sm btn-outline-danger" (click)="applyDelete()">
<button type="button" class="btn btn-sm btn-outline-danger ml-0 ml-lg-auto" (click)="applyDelete()">
<svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor"> <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
<use xlink:href="assets/bootstrap-icons.svg#trash" /> <use xlink:href="assets/bootstrap-icons.svg#trash" />
</svg>&nbsp;<ng-container i18n>Delete</ng-container> </svg>&nbsp;<ng-container i18n>Delete</ng-container>

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

@ -1,11 +1,10 @@
<app-page-header [title]="getTitle()"> <app-page-header [title]="getTitle()">
<div ngbDropdown class="d-inline-block 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;<ng-container i18n>Select</ng-container> </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,43 +35,42 @@
</label> </label>
</div> </div>
<div class="btn-group btn-group-toggle ml-2" ngbRadioGroup [(ngModel)]="list.sortReverse"> <div ngbDropdown class="btn-group ml-2 flex-fill">
<div ngbDropdown class="btn-group"> <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">
<label ngbButtonLabel class="btn-outline-primary btn-sm mx-2 flex-fill">
<input ngbButton type="radio" class="btn btn-sm" [value]="false">
<svg class="toolbaricon" fill="currentColor">
<use xlink:href="assets/bootstrap-icons.svg#sort-alpha-down" />
</svg>
</label>
<label ngbButtonLabel class="btn-outline-primary btn-sm mr-2 flex-fill">
<input ngbButton type="radio" class="btn btn-sm" [value]="true">
<svg class="toolbaricon" fill="currentColor">
<use xlink:href="assets/bootstrap-icons.svg#sort-alpha-up-alt" />
</svg>
</label>
</div>
<div>
<button *ngFor="let f of getSortFields()" ngbDropdownItem (click)="list.sortField = f.field" <button *ngFor="let f of getSortFields()" ngbDropdownItem (click)="list.sortField = f.field"
[class.active]="list.sortField == f.field">{{f.name}}</button> [class.active]="list.sortField == f.field">{{f.name}}
</button>
</div> </div>
</div> </div>
<label ngbButtonLabel class="btn-outline-primary btn-sm">
<input ngbButton type="radio" class="btn btn-sm" [value]="false">
<svg class="toolbaricon" fill="currentColor">
<use xlink:href="assets/bootstrap-icons.svg#sort-alpha-down" />
</svg>
</label>
<label ngbButtonLabel class="btn-outline-primary btn-sm">
<input ngbButton type="radio" class="btn btn-sm" [value]="true">
<svg class="toolbaricon" fill="currentColor">
<use xlink:href="assets/bootstrap-icons.svg#sort-alpha-up-alt" />
</svg>
</label>
</div> </div>
<div class="btn-group ml-2"> <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="dropdown-menu shadow dropdown-menu-right" ngbDropdownMenu>
<ng-container *ngIf="!list.savedViewId">
<button ngbDropdownItem *ngFor="let view of savedViewService.allViews" (click)="loadViewConfig(view)">{{view.name}}</button>
<div class="dropdown-divider" *ngIf="savedViewService.allViews.length > 0"></div>
</ng-container>
<div class="btn-group" ngbDropdown role="group"> <button ngbDropdownItem (click)="saveViewConfig()" *ngIf="list.savedViewId" i18n>Save "{{list.savedViewTitle}}"</button>
<button class="btn btn-sm btn-outline-primary dropdown-toggle" ngbDropdownToggle i18n>Views</button> <button ngbDropdownItem (click)="saveViewConfigAs()" i18n>Save as...</button>
<div class="dropdown-menu shadow" ngbDropdownMenu>
<ng-container *ngIf="!list.savedViewId">
<button ngbDropdownItem *ngFor="let view of savedViewService.allViews" (click)="loadViewConfig(view)">{{view.name}}</button>
<div class="dropdown-divider" *ngIf="savedViewService.allViews.length > 0"></div>
</ng-container>
<button ngbDropdownItem (click)="saveViewConfig()" *ngIf="list.savedViewId" i18n>Save "{{list.savedViewTitle}}"</button>
<button ngbDropdownItem (click)="saveViewConfigAs()" i18n>Save as...</button>
</div>
</div> </div>
</div> </div>
</app-page-header> </app-page-header>

5
src-ui/src/app/components/document-list/document-list.component.scss
View File

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

14
src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html
View File

@ -1,14 +1,14 @@
<div class="row"> <div class="row">
<div class="col mb-2 mb-xl-0"> <div class="col mb-2 mb-xl-0">
<div class="form-inline d-flex"> <div class="form-inline d-flex align-items-center">
<label class="text-muted mr-2" i18n>Filter by:</label> <label class="text-muted mr-2 mb-0" i18n>Filter by:</label>
<input class="form-control form-control-sm flex-grow-1" type="text" [(ngModel)]="titleFilter" placeholder="Title" i18n-placeholder> <input class="form-control form-control-sm flex-fill w-auto" type="text" [(ngModel)]="titleFilter" placeholder="Title" i18n-placeholder>
</div> </div>
</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"> <div class="d-flex">
<app-filterable-dropdown class="mr-2 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,21 +16,21 @@
[multiple]="true" [multiple]="true"
(open)="onTagsDropdownOpen()" (open)="onTagsDropdownOpen()"
[allowSelectNone]="true"></app-filterable-dropdown> [allowSelectNone]="true"></app-filterable-dropdown>
<app-filterable-dropdown class="mr-2 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-2 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-2 mr-md-3" <app-date-dropdown class="mr-2"
title="Created" i18n-title title="Created" i18n-title
(datesSet)="updateRules()" (datesSet)="updateRules()"
[(dateBefore)]="dateCreatedBefore" [(dateBefore)]="dateCreatedBefore"

2
src-ui/src/theme_dark.scss
View File

@ -84,7 +84,7 @@ $border-color-dark-mode: #47494f;
} }
.dropdown-menu { .dropdown-menu {
background-color: $bg-dark-mode; background-color: $bg-light-dark-mode;
.dropdown-divider { .dropdown-divider {
border-color: $border-color-dark-mode; border-color: $border-color-dark-mode;