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

Fix wrapping with multiple tags, embiggen tags, pretty icons

Browse Source
This commit is contained in:
Michael Shamoon
2020-12-18 01:13:30 -08:00
parent e10a2391c4
commit 55c4c690ef
3 changed files with 23 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src-ui/src/app/components/common/input/tags/tags.component.html
View File

@@ -1,7 +1,7 @@
<div class="form-group paperless-input-select paperless-input-tags"> <div class="form-group paperless-input-select paperless-input-tags">
<label for="tags">Tags</label> <label for="tags">Tags</label>
<div class="input-group"> <div class="input-group flex-nowrap">
<ng-select name="tags" [items]="tags" bindLabel="name" bindValue="id" [(ngModel)]="displayValue" <ng-select name="tags" [items]="tags" bindLabel="name" bindValue="id" [(ngModel)]="displayValue"
[multiple]="true" [multiple]="true"
[closeOnSelect]="false" [closeOnSelect]="false"
@@ -9,15 +9,22 @@
(change)="ngSelectChange()"> (change)="ngSelectChange()">
<ng-template ng-label-tmp let-item="item"> <ng-template ng-label-tmp let-item="item">
<app-tag style="background-color: none;" [tag]="getTag(item.id)" (click)="removeTag(item.id)"></app-tag> <span class="tag-wrap tag-wrap-delete" (click)="removeTag(item.id)">
<svg width="1.2em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="assets/bootstrap-icons.svg#x"/>
</svg>
<app-tag style="background-color: none;" [tag]="getTag(item.id)"></app-tag>
</span>
</ng-template> </ng-template>
<ng-template ng-option-tmp let-item="item" let-index="index" let-search="searchTerm"> <ng-template ng-option-tmp let-item="item" let-index="index" let-search="searchTerm">
<div class="selected-icon d-inline-block mr-1"> <div class="tag-wrap">
<svg *ngIf="displayValue.includes(item.id)" width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-check" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <div class="selected-icon d-inline-block mr-1">
<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"/> <svg *ngIf="displayValue.includes(item.id)" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
</svg> <use xlink:href="assets/bootstrap-icons.svg#check"/>
</svg>
</div>
<app-tag class="mr-2" [tag]="getTag(item.id)"></app-tag>
</div> </div>
<app-tag class="mr-2" [tag]="getTag(item.id)"></app-tag>
</ng-template> </ng-template>
</ng-select> </ng-select>

8
src-ui/src/app/components/common/input/tags/tags.component.scss
View File

@@ -2,3 +2,11 @@
min-width: 1em; min-width: 1em;
min-height: 1em; min-height: 1em;
} }
.tag-wrap {
font-size: 1rem;
}
.tag-wrap-delete {
cursor: pointer;
}

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

@@ -71,7 +71,7 @@ body {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
margin-bottom: 0; margin-bottom: 0;
height: calc(1.5em + 0.75rem + 5px); min-height: calc(1.5em + 0.75rem + 5px);
line-height: 1.5; line-height: 1.5;
.ng-select-container { .ng-select-container {