lgcosta/paperless-ngx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Better doc link value layout

Browse Source
This commit is contained in:
shamoon 2024-09-09 12:18:00 -07:00
parent b3c60b383b
commit 3bf40b154c
4 changed files with 39 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.html
View File

@ -79,7 +79,7 @@
<ng-container *ngTemplateOutlet="comparisonValueTemplate; context: { atom: atom }"></ng-container> <ng-container *ngTemplateOutlet="comparisonValueTemplate; context: { atom: atom }"></ng-container>
} }
@case (CustomFieldQueryOperator.Contains) { @case (CustomFieldQueryOperator.Contains) {
<pngx-input-document-link [(ngModel)]="atom.value" class="w-25 form-select doc-link-select" placeholder="Search docs" [minimal]="true"></pngx-input-document-link> <pngx-input-document-link [(ngModel)]="atom.value" class="w-25 form-select doc-link-select p-0" placeholder="Search docs..." i18n-placeholder [minimal]="true"></pngx-input-document-link>
} }
@default { @default {
<input class="w-25 form-control rounded-end" type="text" [(ngModel)]="atom.value" [disabled]="disabled"> <input class="w-25 form-control rounded-end" type="text" [(ngModel)]="atom.value" [disabled]="disabled">

8
src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.scss
View File

@ -8,6 +8,7 @@
::ng-deep .ng-select-container { ::ng-deep .ng-select-container {
border-top-right-radius: 0 !important; border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important; border-bottom-right-radius: 0 !important;
height: 100% !important;
} }
::ng-deep .ng-select { ::ng-deep .ng-select {
@ -20,10 +21,13 @@
padding-top: 0 !important; padding-top: 0 !important;
border-top-right-radius: var(--bs-border-radius) !important; border-top-right-radius: var(--bs-border-radius) !important;
border-bottom-right-radius: var(--bs-border-radius) !important; border-bottom-right-radius: var(--bs-border-radius) !important;
background-image: none !important;
.ng-select-container { .ng-select-container,
.ng-select.ng-select-opened > .ng-select-container {
border: none !important; border: none !important;
min-height: auto !important; min-height: 34px !important;
background: none !important;
} }
.ng-select { .ng-select {
max-width: 200px; max-width: 200px;

60
src-ui/src/app/components/common/input/document-link/document-link.component.html
View File

@ -24,35 +24,33 @@
} }
<ng-template #select> <ng-template #select>
<div class="doc-link-select"> <ng-select name="inputId" [(ngModel)]="selectedDocuments"
<ng-select name="inputId" [(ngModel)]="selectedDocuments" [disabled]="disabled"
[disabled]="disabled" [items]="foundDocuments$ | async"
[items]="foundDocuments$ | async" [placeholder]="placeholder"
placeholder="Search for documents" [notFoundText]="notFoundText"
[notFoundText]="notFoundText" [multiple]="true"
[multiple]="true" bindValue="id"
bindValue="id" [compareWith]="compareDocuments"
[compareWith]="compareDocuments" [trackByFn]="trackByFn"
[trackByFn]="trackByFn" [minTermLength]="2"
[minTermLength]="2" [loading]="loading"
[loading]="loading" [typeahead]="documentsInput$"
[typeahead]="documentsInput$" (change)="onChange(selectedDocuments)">
(change)="onChange(selectedDocuments)"> <ng-template ng-label-tmp let-document="item">
<ng-template ng-label-tmp let-document="item"> <div class="d-flex align-items-center">
<div class="d-flex align-items-center"> <button class="btn p-0 lh-1" (click)="unselect(document)" title="Remove link" i18n-title><i-bs name="x"></i-bs></button>
<button class="btn p-0 lh-1" (click)="unselect(document)" title="Remove link" i18n-title><i-bs name="x"></i-bs></button> <a routerLink="/documents/{{document.id}}" class="badge bg-light text-primary" (mousedown)="$event.stopImmediatePropagation();" title="Open link" i18n-title>
<a routerLink="/documents/{{document.id}}" class="badge bg-light text-primary" (mousedown)="$event.stopImmediatePropagation();" title="Open link" i18n-title> <i-bs width="0.9em" height="0.9em" name="file-text"></i-bs>&nbsp;<span>{{document.title}}</span>
<i-bs width="0.9em" height="0.9em" name="file-text"></i-bs>&nbsp;<span>{{document.title}}</span> </a>
</a> </div>
</div> </ng-template>
</ng-template> <ng-template ng-loadingspinner-tmp>
<ng-template ng-loadingspinner-tmp> <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
<div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div> <div class="visually-hidden" i18n>Loading...</div>
<div class="visually-hidden" i18n>Loading...</div> </ng-template>
</ng-template> <ng-template ng-option-tmp let-document="item" let-index="index" let-search="searchTerm">
<ng-template ng-option-tmp let-document="item" let-index="index" let-search="searchTerm"> <div>{{document.title}} <small class="text-muted">({{document.created | customDate:'shortDate'}})</small></div>
<div>{{document.title}} <small class="text-muted">({{document.created | customDate:'shortDate'}})</small></div> </ng-template>
</ng-template> </ng-select>
</ng-select>
</div>
</ng-template> </ng-template>

3
src-ui/src/app/components/common/input/document-link/document-link.component.ts
View File

@ -49,6 +49,9 @@ export class DocumentLinkComponent
@Input() @Input()
minimal: boolean = false minimal: boolean = false
@Input()
placeholder: string = $localize`Search for documents`
constructor(private documentsService: DocumentService) { constructor(private documentsService: DocumentService) {
super() super()
} }