mirror of
https://github.com/apache/nifi.git
synced 2025-02-20 17:36:50 +00:00
NIFI-12547: (#8188)
- Set the width of the Property editor. This ensures the width looks correct and the overflow scroll policy works as expected. - Fixed table layout issues where width: 100% from listing table wasn't correct. This closes #8188
This commit is contained in:
Matt Gilman
GitHub
parent
a06fe5905c
commit
211d1001f2
@ -22,6 +22,8 @@
|
||||
min-width: 740px;
|
||||
|
||||
table {
|
||||
width: auto;
|
||||
|
||||
td,
|
||||
th {
|
||||
cursor: default;
|
||||
|
||||
@ -15,74 +15,78 @@
|
||||
~ limitations under the License.
|
||||
-->
|
||||
|
||||
<div class="property-editor p-4" cdkDrag>
|
||||
<div class="property-editor p-4" [style.width.px]="width" cdkDrag>
|
||||
<form [formGroup]="comboEditorForm" cdkTrapFocus cdkTrapFocusAutoCapture>
|
||||
<div class="flex flex-col gap-y-3">
|
||||
<div class="flex flex-col">
|
||||
<div>
|
||||
<mat-select
|
||||
class="combo"
|
||||
formControlName="value"
|
||||
[placeholder]="getComboPlaceholder()"
|
||||
[panelClass]="'combo-panel'"
|
||||
(mousedown)="preventDrag($event)"
|
||||
(selectionChange)="allowableValueChanged($event.value)">
|
||||
<ng-container *ngFor="let allowableValue of allowableValues">
|
||||
<ng-container *ngIf="allowableValue.description; else noDescription">
|
||||
<mat-option
|
||||
[value]="allowableValue.id"
|
||||
(mousedown)="preventDrag($event)"
|
||||
nifiTooltip
|
||||
[tooltipComponentType]="TextTip"
|
||||
[tooltipInputData]="getAllowableValueOptionTipData(allowableValue)"
|
||||
[delayClose]="false">
|
||||
<span class="option-text" [class.unset]="allowableValue.value == null">{{
|
||||
allowableValue.displayName
|
||||
}}</span>
|
||||
</mat-option>
|
||||
<mat-form-field>
|
||||
<mat-label>Value</mat-label>
|
||||
<mat-select
|
||||
formControlName="value"
|
||||
[placeholder]="getComboPlaceholder()"
|
||||
[panelClass]="'combo-panel'"
|
||||
(mousedown)="preventDrag($event)"
|
||||
(selectionChange)="allowableValueChanged($event.value)">
|
||||
<ng-container *ngFor="let allowableValue of allowableValues">
|
||||
<ng-container *ngIf="allowableValue.description; else noDescription">
|
||||
<mat-option
|
||||
[value]="allowableValue.id"
|
||||
(mousedown)="preventDrag($event)"
|
||||
nifiTooltip
|
||||
[tooltipComponentType]="TextTip"
|
||||
[tooltipInputData]="getAllowableValueOptionTipData(allowableValue)"
|
||||
[delayClose]="false">
|
||||
<span class="option-text" [class.unset]="allowableValue.value == null">{{
|
||||
allowableValue.displayName
|
||||
}}</span>
|
||||
</mat-option>
|
||||
</ng-container>
|
||||
<ng-template #noDescription>
|
||||
<mat-option [value]="allowableValue.id" (mousedown)="preventDrag($event)">
|
||||
<span class="option-text" [class.unset]="allowableValue.value == null">{{
|
||||
allowableValue.displayName
|
||||
}}</span>
|
||||
</mat-option>
|
||||
</ng-template>
|
||||
</ng-container>
|
||||
<ng-template #noDescription>
|
||||
<mat-option [value]="allowableValue.id" (mousedown)="preventDrag($event)">
|
||||
<span class="option-text" [class.unset]="allowableValue.value == null">{{
|
||||
allowableValue.displayName
|
||||
}}</span>
|
||||
</mat-option>
|
||||
</ng-template>
|
||||
</ng-container>
|
||||
</mat-select>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div *ngIf="showParameterAllowableValues">
|
||||
<div *ngIf="!parametersLoaded; else showParameters">
|
||||
<ngx-skeleton-loader count="1"></ngx-skeleton-loader>
|
||||
</div>
|
||||
<ng-template #showParameters>
|
||||
<mat-select
|
||||
class="combo"
|
||||
formControlName="parameterReference"
|
||||
[panelClass]="'combo-panel'"
|
||||
(mousedown)="preventDrag($event)">
|
||||
<ng-container *ngFor="let parameterAllowableValue of parameterAllowableValues">
|
||||
<ng-container *ngIf="parameterAllowableValue.description; else noDescription">
|
||||
<mat-option
|
||||
[value]="parameterAllowableValue.id"
|
||||
(mousedown)="preventDrag($event)"
|
||||
nifiTooltip
|
||||
[tooltipComponentType]="TextTip"
|
||||
[tooltipInputData]="getAllowableValueOptionTipData(parameterAllowableValue)"
|
||||
[delayClose]="false">
|
||||
<span class="option-text" [class.unset]="parameterAllowableValue.value == null">{{
|
||||
parameterAllowableValue.displayName
|
||||
}}</span>
|
||||
</mat-option>
|
||||
<mat-form-field>
|
||||
<mat-label>Parameter</mat-label>
|
||||
<mat-select
|
||||
formControlName="parameterReference"
|
||||
[panelClass]="'combo-panel'"
|
||||
(mousedown)="preventDrag($event)">
|
||||
<ng-container *ngFor="let parameterAllowableValue of parameterAllowableValues">
|
||||
<ng-container *ngIf="parameterAllowableValue.description; else noDescription">
|
||||
<mat-option
|
||||
[value]="parameterAllowableValue.id"
|
||||
(mousedown)="preventDrag($event)"
|
||||
nifiTooltip
|
||||
[tooltipComponentType]="TextTip"
|
||||
[tooltipInputData]="getAllowableValueOptionTipData(parameterAllowableValue)"
|
||||
[delayClose]="false">
|
||||
<span class="option-text" [class.unset]="parameterAllowableValue.value == null">{{
|
||||
parameterAllowableValue.displayName
|
||||
}}</span>
|
||||
</mat-option>
|
||||
</ng-container>
|
||||
<ng-template #noDescription>
|
||||
<mat-option [value]="parameterAllowableValue.id" (mousedown)="preventDrag($event)">
|
||||
<span class="option-text" [class.unset]="parameterAllowableValue.value == null">{{
|
||||
parameterAllowableValue.displayName
|
||||
}}</span>
|
||||
</mat-option>
|
||||
</ng-template>
|
||||
</ng-container>
|
||||
<ng-template #noDescription>
|
||||
<mat-option [value]="parameterAllowableValue.id" (mousedown)="preventDrag($event)">
|
||||
<span class="option-text" [class.unset]="parameterAllowableValue.value == null">{{
|
||||
parameterAllowableValue.displayName
|
||||
}}</span>
|
||||
</mat-option>
|
||||
</ng-template>
|
||||
</ng-container>
|
||||
</mat-select>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</ng-template>
|
||||
</div>
|
||||
<div class="flex justify-end items-center gap-x-2">
|
||||
|
||||
@ -21,14 +21,8 @@
|
||||
@include mat.button-density(-2);
|
||||
@include mat.select-density(-4);
|
||||
|
||||
//@include mat.menu-density(-4);
|
||||
//@include mat.option-density(-4);
|
||||
//@include mat.list-density(-4);
|
||||
|
||||
.combo {
|
||||
width: 255px;
|
||||
border: 1px solid;
|
||||
padding: 6px;
|
||||
.mat-mdc-form-field {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -21,6 +21,7 @@ import { ComboEditor } from './combo-editor.component';
|
||||
import { PropertyItem } from '../../property-table.component';
|
||||
import { Parameter } from '../../../../../state/shared';
|
||||
import { of } from 'rxjs';
|
||||
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
||||
|
||||
describe('ComboEditor', () => {
|
||||
let component: ComboEditor;
|
||||
@ -72,7 +73,7 @@ describe('ComboEditor', () => {
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [ComboEditor]
|
||||
imports: [ComboEditor, BrowserAnimationsModule]
|
||||
});
|
||||
fixture = TestBed.createComponent(ComboEditor);
|
||||
component = fixture.componentInstance;
|
||||
|
||||
@ -83,6 +83,7 @@ export class ComboEditor {
|
||||
this.supportsParameters = getParameters != null;
|
||||
this.initialAllowableValues();
|
||||
}
|
||||
@Input() width!: number;
|
||||
|
||||
@Output() ok: EventEmitter<any> = new EventEmitter<any>();
|
||||
@Output() cancel: EventEmitter<void> = new EventEmitter<void>();
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
~ limitations under the License.
|
||||
-->
|
||||
|
||||
<div class="property-editor p-4" cdkDrag resizable (resized)="resized($event)">
|
||||
<div class="property-editor p-4" [style.width.px]="width" cdkDrag resizable (resized)="resized($event)">
|
||||
<form class="h-full" [formGroup]="nfEditorForm" cdkTrapFocus cdkTrapFocusAutoCapture>
|
||||
<div class="flex flex-col gap-y-3 h-full">
|
||||
<div class="flex justify-end">
|
||||
|
||||
@ -82,6 +82,7 @@ export class NfEditor implements OnDestroy {
|
||||
this.getParametersSet = true;
|
||||
this.loadParameters();
|
||||
}
|
||||
@Input() width!: number;
|
||||
|
||||
@Output() ok: EventEmitter<string> = new EventEmitter<string>();
|
||||
@Output() cancel: EventEmitter<void> = new EventEmitter<void>();
|
||||
|
||||
@ -57,7 +57,7 @@
|
||||
class="pointer"
|
||||
cdkOverlayOrigin
|
||||
#trigger="cdkOverlayOrigin"
|
||||
(click)="openEditor(trigger, item)">
|
||||
(click)="openEditor(trigger, item, $event)">
|
||||
<ng-container *ngIf="isNull(item.value); else nonNull">
|
||||
<div class="unset">No value set</div>
|
||||
</ng-container>
|
||||
@ -153,12 +153,14 @@
|
||||
*ngIf="hasAllowableValues(editorItem); else nfEditor"
|
||||
[item]="editorItem"
|
||||
[getParameters]="getParameters"
|
||||
[width]="editorWidth"
|
||||
(ok)="savePropertyValue(editorItem, $event)"
|
||||
(cancel)="closeEditor()"></combo-editor>
|
||||
<ng-template #nfEditor>
|
||||
<nf-editor
|
||||
[item]="editorItem"
|
||||
[getParameters]="getParameters"
|
||||
[width]="editorWidth"
|
||||
(ok)="savePropertyValue(editorItem, $event)"
|
||||
(cancel)="closeEditor()"></nf-editor>
|
||||
</ng-template>
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
min-width: 740px;
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
width: auto;
|
||||
|
||||
td,
|
||||
th {
|
||||
|
||||
@ -145,6 +145,7 @@ export class PropertyTable implements AfterViewInit, ControlValueAccessor {
|
||||
editorOpen: boolean = false;
|
||||
editorTrigger: any = null;
|
||||
editorItem!: PropertyItem;
|
||||
editorWidth: number = 0;
|
||||
|
||||
constructor(
|
||||
private changeDetector: ChangeDetectorRef,
|
||||
@ -374,10 +375,21 @@ export class PropertyTable implements AfterViewInit, ControlValueAccessor {
|
||||
return Array.isArray(item.descriptor.allowableValues);
|
||||
}
|
||||
|
||||
openEditor(editorTrigger: any, item: PropertyItem): void {
|
||||
this.editorItem = item;
|
||||
this.editorTrigger = editorTrigger;
|
||||
this.editorOpen = true;
|
||||
openEditor(editorTrigger: any, item: PropertyItem, event: MouseEvent): void {
|
||||
if (event.target) {
|
||||
const target: HTMLElement = event.target as HTMLElement;
|
||||
|
||||
// find the table cell regardless of the target of the click
|
||||
const td: HTMLElement | null = target.closest('td');
|
||||
if (td) {
|
||||
const { width } = td.getBoundingClientRect();
|
||||
|
||||
this.editorItem = item;
|
||||
this.editorTrigger = editorTrigger;
|
||||
this.editorOpen = true;
|
||||
this.editorWidth = width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
canGoToService(item: PropertyItem): boolean {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user