mirror of https://github.com/apache/nifi.git
[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
This commit is contained in:
Scott Aslan
GitHub
parent
914e2b1057
commit
b946465709
|
|
@ -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(
|
||||
|
|
|
|||
|
|
@ -16,6 +16,11 @@
|
|||
*/
|
||||
|
||||
.new-canvas-item {
|
||||
.cdk-drag {
|
||||
background: unset;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 32px;
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -16,77 +16,105 @@
|
|||
-->
|
||||
|
||||
<div class="prioritizers flex flex-col gap-y-4" cdkDropListGroup>
|
||||
@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 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) {
|
||||
Selected Prioritizers
|
||||
} @else {
|
||||
Prioritizers
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<div>
|
||||
Selected 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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -15,90 +15,119 @@
|
|||
~ limitations under the License.
|
||||
-->
|
||||
|
||||
<div class="parameter-context-inheritance flex gap-x-4" cdkDropListGroup>
|
||||
<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 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>
|
||||
@if (!isDisabled) {
|
||||
Selected Parameter Contexts
|
||||
} @else {
|
||||
Parameter Contexts
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col w-full">
|
||||
<div>
|
||||
Selected 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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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-drag-disabled {
|
||||
background: $alternate-surface !important;
|
||||
.cdk-drop-list {
|
||||
background: if($is-dark, $nifi-theme-surface-palette-default, $nifi-theme-surface-palette-lighter);
|
||||
}
|
||||
|
||||
.cdk-drag-preview {
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
|
||||
.cdk-drag {
|
||||
background: if($is-dark, $nifi-theme-surface-palette-darker, $nifi-theme-surface-palette-lighter);
|
||||
}
|
||||
|
||||
span.grip {
|
||||
color: $surface-contrast;
|
||||
}
|
||||
|
||||
.cdk-drag-disabled {
|
||||
color: $nifi-theme-surface-palette-default;
|
||||
background: if($is-dark, $nifi-theme-surface-palette-darker, $nifi-theme-surface-palette-lighter) !important;
|
||||
}
|
||||
|
||||
.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 {
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ $material-primary-light-palette: (
|
|||
A100: #ffffff,
|
||||
A200: #ffffff,
|
||||
A400: #ffffff,
|
||||
A700: #ffffff,
|
||||
A700: rgba(#000000, .87),
|
||||
)
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Reference in New Issue