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

layout, styling, nesting fixes

Browse Source
This commit is contained in:
shamoon 2024-09-02 15:42:15 -07:00
parent 40f3d133de
commit b5691cfbc8
3 changed files with 20 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src-ui/src/app/app.module.ts
View File

@ -142,6 +142,7 @@ import {
arrowRightShort, arrowRightShort,
arrowUpRight, arrowUpRight,
asterisk, asterisk,
braces,
bodyText, bodyText,
boxArrowUp, boxArrowUp,
boxArrowUpRight, boxArrowUpRight,
@ -199,6 +200,7 @@ import {
link, link,
listTask, listTask,
listUl, listUl,
nodePlus,
pencil, pencil,
people, people,
peopleFill, peopleFill,
@ -244,6 +246,7 @@ const icons = {
arrowRightShort, arrowRightShort,
arrowUpRight, arrowUpRight,
asterisk, asterisk,
braces,
bodyText, bodyText,
boxArrowUp, boxArrowUp,
boxArrowUpRight, boxArrowUpRight,
@ -301,6 +304,7 @@ const icons = {
link, link,
listTask, listTask,
listUl, listUl,
nodePlus,
pencil, pencil,
people, people,
peopleFill, peopleFill,

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

@ -9,10 +9,10 @@
<div class="dropdown-menu px-3 shadow" ngbDropdownMenu attr.aria-labelledby="dropdown_{{name}}"> <div class="dropdown-menu px-3 shadow" ngbDropdownMenu attr.aria-labelledby="dropdown_{{name}}">
<div class="btn-group my-2 w-100"> <div class="btn-group my-2 w-100">
<button type="button" class="btn btn-sm btn-outline-primary" (click)="addAtom()" [disabled]="disabled"> <button type="button" class="btn btn-sm btn-outline-primary" (click)="addAtom()" [disabled]="disabled">
<i-bs name="plus"></i-bs>&nbsp;Add query <i-bs name="node-plus"></i-bs>&nbsp;Add query
</button> </button>
<button type="button" class="btn btn-sm btn-outline-primary" (click)="addExpression()" [disabled]="disabled"> <button type="button" class="btn btn-sm btn-outline-primary" (click)="addExpression()" [disabled]="disabled">
<i-bs name="plus"></i-bs>&nbsp;Add expression <i-bs name="braces"></i-bs>&nbsp;Add expression
</button> </button>
</div> </div>
<div class="list-group list-group-flush"> <div class="list-group list-group-flush">
@ -26,9 +26,6 @@
<ng-container *ngTemplateOutlet="queryExpression; context: { query: query }"></ng-container> <ng-container *ngTemplateOutlet="queryExpression; context: { query: query }"></ng-container>
} }
} }
<button class="btn btn-link btn-sm text-danger pe-0" type="button" (click)="removeComponent(query)" [disabled]="disabled">
<i-bs name="x-circle"></i-bs>
</button>
</div> </div>
} }
</div> </div>
@ -38,7 +35,6 @@
<ng-template #queryAtom let-query="query"> <ng-template #queryAtom let-query="query">
<div class="input-group input-group-sm"> <div class="input-group input-group-sm">
<ng-select <ng-select
class="w-40"
[items]="customFields" [items]="customFields"
[(ngModel)]="query.field" [(ngModel)]="query.field"
[disabled]="disabled" [disabled]="disabled"
@ -50,20 +46,23 @@
</select> </select>
@switch (query.operator) { @switch (query.operator) {
@case ('exists') { @case ('exists') {
<select class="w-25 form-select" [(ngModel)]="query.value" [disabled]="disabled"> <select class="w-25 form-select rounded-end" [(ngModel)]="query.value" [disabled]="disabled">
<option value="true" i18n>true</option> <option value="true" i18n>true</option>
<option value="false" i18n>false</option> <option value="false" i18n>false</option>
</select> </select>
} }
@default { @default {
<input class="w-25 form-control" type="text" [(ngModel)]="query.value" [disabled]="disabled"> <input class="w-25 form-control rounded-end" type="text" [(ngModel)]="query.value" [disabled]="disabled">
} }
} }
<button class="btn btn-link btn-sm text-danger pe-0" type="button" (click)="removeComponent(query)" [disabled]="disabled">
<i-bs name="x-circle"></i-bs>
</button>
</div> </div>
</ng-template> </ng-template>
<ng-template #queryExpression let-query="query"> <ng-template #queryExpression let-query="query">
<div class="d-flex flex-column border border-primary rounded p-2 mt-2"> <div class="d-flex flex-column border border-primary rounded px-2 pt-2">
<div class="btn-group btn-group-xs" role="group"> <div class="btn-group btn-group-xs" role="group">
<input [(ngModel)]="query.operator" type="radio" class="btn-check" id="logicalOperatorAnd_{{query.field}}" name="logicalOperatorAnd_{{query.field}}" value="AND"> <input [(ngModel)]="query.operator" type="radio" class="btn-check" id="logicalOperatorAnd_{{query.field}}" name="logicalOperatorAnd_{{query.field}}" value="AND">
<label class="btn btn-outline-primary" for="logicalOperatorAnd_{{query.field}}" i18n>And</label> <label class="btn btn-outline-primary" for="logicalOperatorAnd_{{query.field}}" i18n>And</label>
@ -81,11 +80,11 @@
<ng-container *ngTemplateOutlet="queryExpression; context: { query: subquery }"></ng-container> <ng-container *ngTemplateOutlet="queryExpression; context: { query: subquery }"></ng-container>
} }
} }
<button class="btn btn-link btn-sm text-danger pe-0" type="button" (click)="removeComponent(subquery)" [disabled]="disabled">
<i-bs name="x-circle"></i-bs>
</button>
</div> </div>
} }
</div> </div>
</div> </div>
<button class="btn btn-link btn-sm text-danger pe-0" type="button" (click)="removeComponent(query)" [disabled]="disabled">
<i-bs name="x-circle"></i-bs>
</button>
</ng-template> </ng-template>

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

@ -1,5 +1,5 @@
.dropdown-menu { .dropdown-menu {
width: 500px; width: 450px;
} }
::ng-deep .ng-select-container { ::ng-deep .ng-select-container {
@ -7,6 +7,8 @@
border-bottom-right-radius: 0 !important; border-bottom-right-radius: 0 !important;
} }
.w-40 { ::ng-deep .ng-select {
width: 40%; max-width: 100px;
min-width: 35%;
font-size: 14px;
} }