This is an automated email from the ASF dual-hosted git repository.
mcgilman pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/nifi.git
The following commit(s) were added to refs/heads/main by this push:
new b946465709 [NIFI-12903] style updates for drag/drop UX (#8729)
b946465709 is described below
commit b946465709114369dafa341921baac42d86e8f6a
Author: Scott Aslan <[email protected]>
AuthorDate: Fri May 3 15:50:36 2024 -0400
[NIFI-12903] style updates for drag/drop UX (#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 #8729
---
.../_new-canvas-item.component-theme.scss | 4 +-
.../new-canvas-item/new-canvas-item.component.scss | 5 +
.../_prioritizers.component-theme.scss | 45 -----
.../prioritizers/prioritizers.component.html | 146 ++++++++++-------
.../prioritizers/prioritizers.component.scss | 24 ++-
...ameter-context-inheritance.component-theme.scss | 45 -----
.../parameter-context-inheritance.component.html | 169 +++++++++++--------
.../parameter-context-inheritance.component.scss | 24 ++-
.../src/main/nifi/src/assets/styles/_app.scss | 181 +++++++++++++++------
.../src/main/nifi/src/assets/themes/material.scss | 2 +-
.../src/main/nifi/src/styles.scss | 6 -
11 files changed, 348 insertions(+), 303 deletions(-)
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/new-canvas-item/_new-canvas-item.component-theme.scss
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/new-canvas-item/_new-canvas-item.component-theme.scss
index fd5c529067..a057da4b4c 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/new-canvas-item/_new-canvas-item.component-theme.scss
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/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/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/new-canvas-item/new-canvas-item.component.scss
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/new-canvas-item/new-canvas-item.component.scss
index 423d8ab3b2..1c2bd2690c 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/new-canvas-item/new-canvas-item.component.scss
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/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/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/prioritizers/_prioritizers.component-theme.scss
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/prioritizers/_prioritizers.component-theme.scss
deleted file mode 100644
index c4851fb26a..0000000000
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/prioritizers/_prioritizers.component-theme.scss
+++ /dev/null
@@ -1,45 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-@use 'sass:map';
-@use '@angular/material' as mat;
-
-@mixin generate-theme($material-theme, $nifi-theme) {
- // Get the color config from the theme.
- $material-theme-color-config: mat.get-color-config($material-theme);
- $nifi-theme-color-config: mat.get-color-config($nifi-theme);
-
- // Get the color palette from the color-config.
- $material-theme-primary-palette: map.get($material-theme-color-config,
'primary');
- $nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
-
- // Get hues from palette
- $is-dark: map-get($nifi-theme-color-config, is-dark);
- $nifi-theme-surface-palette-darker:
mat.get-color-from-palette($nifi-theme-surface-palette, darker);
- $nifi-theme-surface-palette-lighter:
mat.get-color-from-palette($nifi-theme-surface-palette, lighter);
- $material-theme-primary-palette-default:
mat.get-color-from-palette($material-theme-primary-palette, default);
-
- .prioritizers {
- .prioritizers-list {
- background: $material-theme-primary-palette-default;
- }
-
- .prioritizer-draggable-item {
- background: if($is-dark, $nifi-theme-surface-palette-darker,
$nifi-theme-surface-palette-lighter);
- }
- }
-}
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/prioritizers/prioritizers.component.html
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/prioritizers/prioritizers.component.html
index 87b64373a5..15645b83de 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/prioritizers/prioritizers.component.html
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/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/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/prioritizers/prioritizers.component.scss
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/prioritizers/prioritizers.component.scss
index e38ff7943e..e3641ffeba 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/prioritizers/prioritizers.component.scss
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/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/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-inheritance/_parameter-context-inheritance.component-theme.scss
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-inheritance/_parameter-context-inheritance.component-theme.scss
deleted file mode 100644
index 2c5a5c9d59..0000000000
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-inheritance/_parameter-context-inheritance.component-theme.scss
+++ /dev/null
@@ -1,45 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-@use 'sass:map';
-@use '@angular/material' as mat;
-
-@mixin generate-theme($material-theme, $nifi-theme) {
- // Get the color config from the theme.
- $material-theme-color-config: mat.get-color-config($material-theme);
- $nifi-theme-color-config: mat.get-color-config($nifi-theme);
-
- // Get the color palette from the color-config.
- $material-theme-primary-palette: map.get($material-theme-color-config,
'primary');
- $nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
-
- // Get hues from palette
- $is-dark: map-get($nifi-theme-color-config, is-dark);
- $nifi-theme-surface-palette-darker:
mat.get-color-from-palette($nifi-theme-surface-palette, darker);
- $nifi-theme-surface-palette-lighter:
mat.get-color-from-palette($nifi-theme-surface-palette, lighter);
- $material-theme-primary-palette-default:
mat.get-color-from-palette($material-theme-primary-palette, default);
-
- .parameter-context-inheritance {
- .parameter-context-inheritance-list {
- background: $material-theme-primary-palette-default;
- }
-
- .parameter-context-draggable-item {
- background: if($is-dark, $nifi-theme-surface-palette-darker,
$nifi-theme-surface-palette-lighter);
- }
- }
-}
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-inheritance/parameter-context-inheritance.component.html
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-inheritance/parameter-context-inheritance.component.html
index d08d68057d..12a3b048dc 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-inheritance/parameter-context-inheritance.component.html
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-inheritance/parameter-context-inheritance.component.html
@@ -15,90 +15,119 @@
~ limitations under the License.
-->
-<div class="parameter-context-inheritance flex gap-x-4" cdkDropListGroup>
- <div class="flex flex-col w-full">
- <div>
- Available Parameter Contexts
- <i
- class="fa fa-info-circle"
- nifiTooltip
- [tooltipComponentType]="TextTip"
- tooltipInputData="Available Parameter Contexts that could be
inherited from."></i>
- </div>
- <div
- class="parameter-context-inheritance-list border"
- cdkDropList
- cdkDropListSortingDisabled
- [cdkDropListDisabled]="isDisabled"
- [cdkDropListData]="availableParameterContexts"
- (cdkDropListDropped)="dropAvailable($event)">
- @for (item of availableParameterContexts; track item; let i =
$index) {
- <div
- class="parameter-context-draggable-item border-b
surface-contrast m-1"
- cdkDrag
- cdkDragPreviewContainer="parent"
- [cdkDragDisabled]="!item.permissions.canRead">
- <ng-container
- *ngTemplateOutlet="
- item.permissions.canRead
- ? authorizedInheritedParameterContext
- : unauthorizedInheritedParameterContext;
- context: { $implicit: item, i: i, canClose: false }
- "></ng-container>
- </div>
- }
+<div class="parameter-context-inheritance flex flex-row gap-x-4"
cdkDropListGroup>
+ @if (!isDisabled) {
+ <div class="flex flex-col w-full">
+ <div>
+ Available Parameter Contexts
+ <i
+ class="fa fa-info-circle"
+ nifiTooltip
+ [tooltipComponentType]="TextTip"
+ tooltipInputData="Available Parameter Contexts that could
be inherited from."></i>
+ </div>
+ <div
+ class="cdk-list border"
+ cdkDropList
+ cdkDropListSortingDisabled
+ [cdkDropListData]="availableParameterContexts"
+ (cdkDropListDropped)="dropAvailable($event)">
+ @for (item of availableParameterContexts; track item; let i =
$index) {
+ <div
+ class="parameter-context-inheritance-draggable-item
border mat-elevation-z2 m-1 font-bold"
+ cdkDrag
+ cdkDragPreviewContainer="parent"
+ [class.border-dashed]="isDisabled ||
!item.permissions.canRead"
+ [cdkDragDisabled]="!item.permissions.canRead">
+ <ng-container
+ *ngTemplateOutlet="
+ item.permissions.canRead
+ ? authorizedInheritedParameterContext
+ : unauthorizedInheritedParameterContext;
+ context: { $implicit: item, i: i, canClose:
false }
+ "></ng-container>
+ </div>
+ }
+ </div>
</div>
- </div>
+ }
<div class="flex flex-col w-full">
<div>
- Selected Parameter Contexts
+ @if (!isDisabled) {
+ Selected Parameter Contexts
+ } @else {
+ Parameter Contexts
+ }
<i
class="fa fa-info-circle"
nifiTooltip
[tooltipComponentType]="TextTip"
tooltipInputData="Parameter Contexts selected for inheritance.
Multiple selected Parameter Contexts will be considered in order from top to
bottom."></i>
</div>
- <div
- class="parameter-context-inheritance-list border"
- cdkDropList
- [cdkDropListDisabled]="isDisabled"
- [cdkDropListData]="selectedParameterContexts"
- (cdkDropListDropped)="dropSelected($event)">
- @for (item of selectedParameterContexts; track item; let i =
$index) {
- <div
- class="parameter-context-draggable-item border-b m-1"
- cdkDrag
- cdkDragPreviewContainer="parent"
- [cdkDragDisabled]="!item.permissions.canRead">
- <ng-container
- *ngTemplateOutlet="
- item.permissions.canRead
- ? authorizedInheritedParameterContext
- : unauthorizedInheritedParameterContext;
- context: { $implicit: item, i: i, canClose: true }
- "></ng-container>
- </div>
- }
- </div>
+ @if (!isDisabled || selectedParameterContexts.length > 0) {
+ <div
+ class="cdk-list cdk-drag-selected border"
+ [class.border-dashed]="!isDisabled"
+ cdkDropList
+ [cdkDropListDisabled]="isDisabled"
+ [cdkDropListData]="selectedParameterContexts"
+ (cdkDropListDropped)="dropSelected($event)">
+ @for (item of selectedParameterContexts; track item; let i =
$index) {
+ <div
+ class="parameter-context-inheritance-draggable-item
border mat-elevation-z2 m-1 font-bold"
+ cdkDrag
+ cdkDragPreviewContainer="parent"
+ [cdkDragDisabled]="!item.permissions.canRead">
+ <ng-container
+ *ngTemplateOutlet="
+ item.permissions.canRead
+ ? authorizedInheritedParameterContext
+ : unauthorizedInheritedParameterContext;
+ context: { $implicit: item, i: i, canClose:
true }
+ "></ng-container>
+ </div>
+ }
+ </div>
+ } @else {
+ <div class="unset">No value set</div>
+ }
</div>
<ng-template #authorizedInheritedParameterContext let-item let-i="i"
let-canClose="canClose">
- <div class="flex gap-x-3 items-center">
- <div>{{ item.component.name }}</div>
- @if (hasDescription(item)) {
- <i
- class="fa fa-info-circle"
- nifiTooltip
- [tooltipComponentType]="TextTip"
- [tooltipInputData]="item.component.description"></i>
+ @if (!isDisabled) {
+ <div class="flex items-center">
+ <span class="grip pr-5"></span>
+ <div class="parameter-context-inheritance-name"
[title]="item.component.name">
+ {{ item.component.name }}
+ </div>
+ @if (hasDescription(item)) {
+ <i
+ class="pl-1 fa fa-info-circle surface-color"
+ nifiTooltip
+ [tooltipComponentType]="TextTip"
+ [tooltipInputData]="item.component.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>{{ item.component.name }}</div>
+ @if (hasDescription(item)) {
+ <i
+ class="pl-1 fa fa-info-circle surface-color"
+ nifiTooltip
+ [tooltipComponentType]="TextTip"
+ [tooltipInputData]="item.description"></i>
+ }
+ </div>
}
</ng-template>
<ng-template #unauthorizedInheritedParameterContext let-item>
- <div>{{ item.id }}</div>
+ <div class="flex items-center accent-color font-medium">
+ <div>{{ item.id }}</div>
+ </div>
</ng-template>
</div>
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-inheritance/parameter-context-inheritance.component.scss
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-inheritance/parameter-context-inheritance.component.scss
index 694e74f95a..8b207557f2 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-inheritance/parameter-context-inheritance.component.scss
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-inheritance/parameter-context-inheritance.component.scss
@@ -16,26 +16,22 @@
*/
.parameter-context-inheritance {
- .parameter-context-inheritance-list {
- min-height: 74px;
- border-radius: 4px;
- overflow: hidden;
- display: block;
- user-select: none;
- }
-
- .parameter-context-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 {
+ .parameter-context-inheritance-name {
+ max-width: 388px;
+ overflow: hidden;
+ text-wrap: nowrap;
+ text-overflow: ellipsis;
}
}
}
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_app.scss
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_app.scss
index f13ec7030e..a3acc52821 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_app.scss
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_app.scss
@@ -19,6 +19,8 @@
@use '@angular/material' as mat;
@mixin styles() {
+ /* other classes and styles */
+
html,
body {
height: 100%;
@@ -29,18 +31,6 @@
font-family: Roboto, 'Helvetica Neue', sans-serif;
}
- .cdk-drag-disabled {
- cursor: not-allowed !important;
- }
-
- .cdk-drag-placeholder {
- opacity: 0;
- }
-
- .cdk-drop-list-dragging {
- cursor: grabbing;
- }
-
a {
font-size: 13px;
cursor: pointer;
@@ -51,18 +41,6 @@
text-underline-offset: 3px;
}
- //Icon for styling mat-icon in forms throughout the application.
- .info-icon {
- font-size: 14px;
- height: 14px !important;
- width: 14px !important;
- }
-
- //This style is needed due to an incompatibility between material and
tailwind.
- .mdc-notched-outline__notch {
- border-right: none;
- }
-
.tooltip {
max-width: 500px;
padding: 10px;
@@ -86,12 +64,6 @@
font-weight: 400;
}
- .CodeMirror-hints {
- font-size: 13px !important;
- z-index: 1000 !important;
- overflow-y: scroll !important;
- }
-
.blank,
.empty,
.unset,
@@ -101,25 +73,10 @@
opacity: 0.8;
}
- .mat-mdc-tab-header {
- user-select: none;
- }
-
.hidden {
display: none;
}
- .mat-mdc-icon-button {
- --mdc-icon-button-state-layer-size: 28px;
- --mdc-icon-button-icon-size: 14px;
- line-height: var(--mdc-icon-button-state-layer-size);
- padding: 0;
-
- &.mat-mdc-button-base.mdc-icon-button {
- padding: 0;
- }
- }
-
.pointer {
cursor: pointer;
}
@@ -137,6 +94,82 @@
flex: 1;
}
+ /* overriding 3rd party styles */
+
+ .cdk-drag-disabled {
+ cursor: not-allowed !important;
+ }
+
+ .cdk-drag-placeholder {
+ opacity: 0;
+ }
+
+ .cdk-drop-list-dragging {
+ cursor: grabbing;
+ }
+
+ .cdk-drag:hover {
+ cursor: grab;
+ }
+
+ .cdk-list {
+ min-height: 34px;
+ border-radius: 4px;
+ overflow: hidden;
+ display: block;
+ user-select: none;
+ }
+
+ span.grip {
+ width: 12px;
+ height: 36px;
+ display: block;
+ line-height: 6px;
+ letter-spacing: 1px;
+ }
+
+ .cdk-drag:hover {
+ span.grip::after {
+ content: '.. .. .. .. ..';
+ }
+ }
+
+ .cdk-drag-disabled {
+ font-style: italic;
+ }
+
+ .cdk-drag:hover {
+ span.grip::after {
+ content: '.. .. .. .. ..';
+ }
+ }
+
+ //This style is needed due to an incompatibility between material and
tailwind.
+ .mdc-notched-outline__notch {
+ border-right: none;
+ }
+
+ .CodeMirror-hints {
+ font-size: 13px !important;
+ z-index: 1000 !important;
+ overflow-y: scroll !important;
+ }
+
+ .mat-mdc-tab-header {
+ user-select: none;
+ }
+
+ .mat-mdc-icon-button {
+ --mdc-icon-button-state-layer-size: 28px;
+ --mdc-icon-button-icon-size: 14px;
+ line-height: var(--mdc-icon-button-state-layer-size);
+ padding: 0;
+
+ &.mat-mdc-button-base.mdc-icon-button {
+ padding: 0;
+ }
+ }
+
.mat-mdc-paginator {
background-color: unset !important;
}
@@ -244,6 +277,20 @@
$material-theme-accent-palette-lighter
)};
}
+
+ .cdk-drop-list {
+ color: $material-theme-primary-palette-default;
+ }
+
+ .cdk-drop-list-dragging {
+ background-color: $material-theme-primary-palette-darker !important;
+ }
+
+ .cdk-drag-selected {
+ .cdk-drag {
+ background-color: $material-theme-primary-palette-default;
+ }
+ }
}
@mixin generate-nifi-theme($nifi-theme) {
@@ -352,12 +399,50 @@
border-color: $alternate-surface;
}
+ .cdk-drop-list {
+ background: if($is-dark, $nifi-theme-surface-palette-default,
$nifi-theme-surface-palette-lighter);
+ }
+
+ .cdk-drag {
+ background: if($is-dark, $nifi-theme-surface-palette-darker,
$nifi-theme-surface-palette-lighter);
+ }
+
+ span.grip {
+ color: $surface-contrast;
+ }
+
.cdk-drag-disabled {
- background: $alternate-surface !important;
+ color: $nifi-theme-surface-palette-default;
+ background: if($is-dark, $nifi-theme-surface-palette-darker,
$nifi-theme-surface-palette-lighter) !important;
}
- .cdk-drag-preview {
- box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
+ .cdk-drag-selected {
+ .cdk-drag {
+ // invert the contrast colors since the surface is dark in light
mode and light in dark mode
+ color: if(
+ $is-dark,
+ $nifi-theme-surface-palette-lighter-contrast,
+ $nifi-theme-surface-palette-darker-contrast
+ );
+ }
+
+ span.grip {
+ // invert the contrast colors since the surface is dark in light
mode and light in dark mode
+ color: if(
+ $is-dark,
+ $nifi-theme-surface-palette-lighter-contrast,
+ $nifi-theme-surface-palette-darker-contrast
+ );
+ }
+
+ .fa {
+ // invert the contrast colors since the surface is dark in light
mode and light in dark mode
+ color: if(
+ $is-dark,
+ $nifi-theme-surface-palette-lighter-contrast,
+ $nifi-theme-surface-palette-darker-contrast
+ );
+ }
}
ngx-skeleton-loader .skeleton-loader {
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/material.scss
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/material.scss
index de4314804a..a00469ea9f 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/material.scss
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/material.scss
@@ -47,7 +47,7 @@ $material-primary-light-palette: (
A100: #ffffff,
A200: #ffffff,
A400: #ffffff,
- A700: #ffffff,
+ A700: rgba(#000000, .87),
)
);
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss
index cb355de6bf..47340f0c50 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss
@@ -30,12 +30,10 @@
@use
'app/pages/flow-designer/ui/canvas/header/flow-status/flow-status.component-theme'
as flow-status;
@use
'app/pages/flow-designer/ui/canvas/header/new-canvas-item/new-canvas-item.component-theme'
as new-canvas-item;
@use 'app/pages/flow-designer/ui/canvas/header/search/search.component-theme'
as search;
-@use
'app/pages/flow-designer/ui/canvas/items/connection/prioritizers/prioritizers.component-theme'
as prioritizers;
@use 'app/pages/login/feature/login.component-theme' as login;
@use 'app/pages/provenance/feature/provenance.component-theme' as provenance;
@use
'app/pages/provenance/ui/provenance-event-listing/provenance-event-table/provenance-event-table.component-theme'
as provenance-event-table;
@use
'app/pages/provenance/ui/provenance-event-listing/provenance-event-table/lineage/lineage.component-theme'
as lineage;
-@use
'app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-inheritance/parameter-context-inheritance.component-theme'
as parameter-context-inheritance;
@use 'app/ui/common/context-menu/context-menu.component-theme' as context-menu;
@use 'app/ui/common/navigation/navigation.component-theme' as navigation;
@use
'app/ui/common/property-table/editors/nf-editor/nf-editor.component-theme' as
nf-editor;
@@ -87,12 +85,10 @@
@include flow-status.generate-theme($material-theme-light, $nifi-theme-light);
@include new-canvas-item.generate-theme($material-theme-light,
$nifi-theme-light);
@include search.generate-theme($nifi-theme-light);
-@include prioritizers.generate-theme($material-theme-light, $nifi-theme-light);
@include login.generate-theme($material-theme-light, $nifi-theme-light);
@include provenance-event-table.generate-theme($nifi-theme-light);
@include provenance.generate-theme($material-theme-light, $nifi-theme-light);
@include lineage.generate-theme($material-theme-light, $nifi-theme-light);
-@include parameter-context-inheritance.generate-theme($material-theme-light,
$nifi-theme-light);
@include context-menu.generate-theme($material-theme-light, $nifi-theme-light);
@include navigation.generate-theme($material-theme-light);
@include nf-editor.generate-theme($material-theme-light, $nifi-theme-light);
@@ -117,12 +113,10 @@
@include flow-status.generate-theme($material-theme-dark,
$nifi-theme-dark);
@include new-canvas-item.generate-theme($material-theme-dark,
$nifi-theme-dark);
@include search.generate-theme($nifi-theme-dark);
- @include prioritizers.generate-theme($material-theme-dark,
$nifi-theme-dark);
@include login.generate-theme($material-theme-dark, $nifi-theme-dark);
@include provenance-event-table.generate-theme($nifi-theme-dark);
@include provenance.generate-theme($material-theme-dark, $nifi-theme-dark);
@include lineage.generate-theme($material-theme-dark, $nifi-theme-dark);
- @include
parameter-context-inheritance.generate-theme($material-theme-dark,
$nifi-theme-dark);
@include context-menu.generate-theme($material-theme-dark,
$nifi-theme-dark);
@include navigation.generate-theme($material-theme-dark);
@include nf-editor.generate-theme($material-theme-dark, $nifi-theme-dark);
