Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 6 commits into from
May 3, 2024
Merged

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

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0f4b1f1
[NIFI-12903] style updates for drag/drop UX
scottyaslan May 2, 2024
4928a02
restore nf-editor styles
scottyaslan May 2, 2024
02a9177
remove padding from new canvas items
scottyaslan May 2, 2024
e0c5c48
remove unused disabled
scottyaslan May 3, 2024
8159118
no value set UX
scottyaslan May 3, 2024
ee75992
restore initial disabled state
scottyaslan May 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion ...ages/flow-designer/ui/canvas/header/new-canvas-item/_new-canvas-item.component-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
5 changes: 5 additions & 0 deletions ...c/app/pages/flow-designer/ui/canvas/header/new-canvas-item/new-canvas-item.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,11 @@
*/

.new-canvas-item {
.cdk-drag {
background: unset;
height: 64px;
}

.icon {
font-size: 32px;

Expand Down
45 changes: 0 additions & 45 deletions .../flow-designer/ui/canvas/items/connection/prioritizers/_prioritizers.component-theme.scss
View file
Open in desktop

This file was deleted.

146 changes: 87 additions & 59 deletions ...p/pages/flow-designer/ui/canvas/items/connection/prioritizers/prioritizers.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
scottyaslan marked this conversation as resolved.
Show resolved Hide resolved
}
<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>
24 changes: 10 additions & 14 deletions ...p/pages/flow-designer/ui/canvas/items/connection/prioritizers/prioritizers.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}
45 changes: 0 additions & 45 deletions ...listing/parameter-context-inheritance/_parameter-context-inheritance.component-theme.scss
View file
Open in desktop

This file was deleted.

Loading