[NIFI-12903] style updates for drag/drop UX (apache#8729)

* [NIFI-12903] style updates for drag/drop UX * restore nf-editor styles * remove padding from new canvas items * remove unused disabled * no value set UX * restore initial disabled state This closes apache#8729
shubhluck · Jun 1, 2024 · 1facbca · 1facbca
1 parent ee0ee0c
commit 1facbca
Show file tree

Hide file tree

Showing 11 changed files with 348 additions and 303 deletions.
diff --git a/...ages/flow-designer/ui/canvas/header/new-canvas-item/_new-canvas-item.component-theme.scss b/...ages/flow-designer/ui/canvas/header/new-canvas-item/_new-canvas-item.component-theme.scss
@@ -40,11 +40,13 @@
     .new-canvas-item {
         .icon {
             &.hovering {
+                @extend .mat-elevation-z2;
+
                 // This solution re-uses the highlight value used throughout the UI, but because we need to hide the non-hover
                 // version of the icons, we create a double layered gradient with the matching background color of the
                 // navigation bar, then put the highlight on top of it.
                 background: linear-gradient($hover, $hover),
-                    linear-gradient($nifi-theme-surface-palette-lighter, $nifi-theme-surface-palette-lighter);
+                    linear-gradient($nifi-theme-surface-palette-lighter, $nifi-theme-surface-palette-lighter) !important;
 
                 .component-button-grip {
                     background: repeating-linear-gradient(

diff --git a/...c/app/pages/flow-designer/ui/canvas/header/new-canvas-item/new-canvas-item.component.scss b/...c/app/pages/flow-designer/ui/canvas/header/new-canvas-item/new-canvas-item.component.scss
@@ -16,6 +16,11 @@
  */
 
 .new-canvas-item {
+    .cdk-drag {
+        background: unset;
+        height: 64px;
+    }
+
     .icon {
         font-size: 32px;
 

diff --git a/.../flow-designer/ui/canvas/items/connection/prioritizers/_prioritizers.component-theme.scss b/.../flow-designer/ui/canvas/items/connection/prioritizers/_prioritizers.component-theme.scss
diff --git a/...p/pages/flow-designer/ui/canvas/items/connection/prioritizers/prioritizers.component.html b/...p/pages/flow-designer/ui/canvas/items/connection/prioritizers/prioritizers.component.html
@@ -16,77 +16,105 @@
   -->
 
 <div class="prioritizers flex flex-col gap-y-4" cdkDropListGroup>
-    <div class="flex flex-col">
-        <div>
-            Available Prioritizers
-            <i
-                class="fa fa-info-circle"
-                nifiTooltip
-                [tooltipComponentType]="TextTip"
-                tooltipInputData="Prioritizers that are available to reprioritize FlowFiles in this processors work queue."></i>
-        </div>
-        <div
-            class="prioritizers-list border"
-            cdkDropList
-            cdkDropListSortingDisabled
-            [cdkDropListDisabled]="isDisabled"
-            [cdkDropListData]="availablePrioritizers"
-            (cdkDropListDropped)="dropAvailable($event)">
-            @for (item of availablePrioritizers; track item; let i = $index) {
-                <div
-                    class="prioritizer-draggable-item border-b surface-contrast m-1"
-                    cdkDrag
-                    cdkDragPreviewContainer="parent">
-                    <ng-container
-                        *ngTemplateOutlet="
-                            prioritizerItem;
-                            context: { $implicit: item, i: i, canClose: false }
-                        "></ng-container>
-                </div>
-            }
+    @if (!isDisabled) {
+        <div class="flex flex-col">
+            <div>
+                Available Prioritizers
+                <i
+                    class="fa fa-info-circle"
+                    nifiTooltip
+                    [tooltipComponentType]="TextTip"
+                    tooltipInputData="Prioritizers that are available to reprioritize FlowFiles in this processors work queue."></i>
+            </div>
+            <div
+                class="cdk-list border"
+                cdkDropList
+                cdkDropListSortingDisabled
+                [cdkDropListData]="availablePrioritizers"
+                (cdkDropListDropped)="dropAvailable($event)">
+                @for (item of availablePrioritizers; track item; let i = $index) {
+                    <div
+                        class="prioritizer-draggable-item border mat-elevation-z2 m-1 font-bold"
+                        cdkDrag
+                        cdkDragPreviewContainer="parent">
+                        <ng-container
+                            *ngTemplateOutlet="
+                                prioritizerItem;
+                                context: { $implicit: item, i: i, canClose: false }
+                            "></ng-container>
+                    </div>
+                }
+            </div>
         </div>
-    </div>
+    }
     <div class="flex flex-col">
         <div>
-            Selected Prioritizers
+            @if (!isDisabled) {
+                Selected Prioritizers
+            } @else {
+                Prioritizers
+            }
             <i
                 class="fa fa-info-circle"
                 nifiTooltip
                 [tooltipComponentType]="TextTip"
                 tooltipInputData="Prioritizers that have been selected to reprioritize FlowFiles in this processors work queue. Multiple selected prioritizers will be considered in order from top to bottom."></i>
         </div>
-        <div
-            class="prioritizers-list border"
-            cdkDropList
-            [cdkDropListDisabled]="isDisabled"
-            [cdkDropListData]="selectedPrioritizers"
-            (cdkDropListDropped)="dropSelected($event)">
-            @for (item of selectedPrioritizers; track item; let i = $index) {
-                <div class="prioritizer-draggable-item border-b m-1" cdkDrag cdkDragPreviewContainer="parent">
-                    <ng-container
-                        *ngTemplateOutlet="
-                            prioritizerItem;
-                            context: { $implicit: item, i: i, canClose: true }
-                        "></ng-container>
-                </div>
-            }
-        </div>
+        @if (!isDisabled || selectedPrioritizers.length > 0) {
+            <div
+                class="cdk-list cdk-drag-selected border"
+                [class.border-dashed]="!isDisabled"
+                cdkDropList
+                [cdkDropListDisabled]="isDisabled"
+                [cdkDropListData]="selectedPrioritizers"
+                (cdkDropListDropped)="dropSelected($event)">
+                @for (item of selectedPrioritizers; track item; let i = $index) {
+                    <div
+                        class="prioritizer-draggable-item border mat-elevation-z2 m-1 font-bold"
+                        cdkDrag
+                        cdkDragPreviewContainer="parent"
+                        [class.border-dashed]="isDisabled">
+                        <ng-container
+                            *ngTemplateOutlet="
+                                prioritizerItem;
+                                context: { $implicit: item, i: i, canClose: true }
+                            "></ng-container>
+                    </div>
+                }
+            </div>
+        } @else {
+            <div class="unset">No value set</div>
+        }
     </div>
     <ng-template #prioritizerItem let-item let-i="i" let-canClose="canClose">
-        <div class="flex gap-x-3 items-center">
-            <div>{{ getPrioritizerLabel(item) }}</div>
-            @if (hasDescription(item)) {
-                <i
-                    class="fa fa-info-circle"
-                    nifiTooltip
-                    [tooltipComponentType]="TextTip"
-                    [tooltipInputData]="item.description"></i>
+        @if (!isDisabled) {
+            <div class="flex items-center">
+                <span class="grip pr-5"></span>
+                <div class="prioritizer-name" [title]="getPrioritizerLabel(item)">{{ getPrioritizerLabel(item) }}</div>
+                @if (hasDescription(item)) {
+                    <i
+                        class="pl-1 fa fa-info-circle surface-color"
+                        nifiTooltip
+                        [tooltipComponentType]="TextTip"
+                        [tooltipInputData]="item.description"></i>
+                }
+            </div>
+            @if (canClose) {
+                <button class="pr-1" type="button" (click)="removeSelected(item, i)">
+                    <i class="fa fa-times surface-contrast"></i>
+                </button>
             }
-        </div>
-        @if (canClose) {
-            <button type="button" (click)="removeSelected(item, i)" [disabled]="isDisabled">
-                <i class="fa fa-times primary-color"></i>
-            </button>
+        } @else {
+            <div class="flex items-center accent-color font-medium">
+                <div>{{ getPrioritizerLabel(item) }}</div>
+                @if (hasDescription(item)) {
+                    <i
+                        class="pl-1 fa fa-info-circle surface-color"
+                        nifiTooltip
+                        [tooltipComponentType]="TextTip"
+                        [tooltipInputData]="item.description"></i>
+                }
+            </div>
         }
     </ng-template>
 </div>
diff --git a/...p/pages/flow-designer/ui/canvas/items/connection/prioritizers/prioritizers.component.scss b/...p/pages/flow-designer/ui/canvas/items/connection/prioritizers/prioritizers.component.scss
@@ -16,26 +16,22 @@
  */
 
 .prioritizers {
-    .prioritizers-list {
-        min-height: 74px;
-        border-radius: 4px;
-        overflow: hidden;
-        display: block;
-        user-select: none;
-    }
-
-    .prioritizer-draggable-item {
-        padding: 20px 10px;
+    .cdk-drag {
+        height: 36px;
+        padding-left: 6px;
         display: flex;
         flex-direction: row;
         align-items: center;
         justify-content: space-between;
         box-sizing: border-box;
-        cursor: grab;
-        font-size: 14px;
+    }
 
-        &:last-child {
-            border: none;
+    .cdk-list {
+        .prioritizer-name {
+            max-width: 180px;
+            overflow: hidden;
+            text-wrap: nowrap;
+            text-overflow: ellipsis;
         }
     }
 }
diff --git a/...listing/parameter-context-inheritance/_parameter-context-inheritance.component-theme.scss b/...listing/parameter-context-inheritance/_parameter-context-inheritance.component-theme.scss