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 d1173b2f98 [NIFI-13115] update context menu, search results overalay,
and nf edi… (#8714)
d1173b2f98 is described below
commit d1173b2f98b218dd9f6b0b14f36afaa358f3fcee
Author: Scott Aslan <[email protected]>
AuthorDate: Wed May 1 08:25:34 2024 -0400
[NIFI-13115] update context menu, search results overalay, and nf edi…
(#8714)
* [NIFI-13115] update context menu, search results overalay, and nf editor
overlay to match angular material overlay styles
* use mat-elevation-z8 to match elevation of mat-menus
* update nf editor resize handle
* restore tooltip border width
This closes #8714
---
.../ui/canvas/header/search/_search.component-theme.scss | 3 ++-
.../flow-designer/ui/canvas/header/search/search.component.html | 2 +-
.../ui/common/context-menu/_context-menu.component-theme.scss | 4 ++--
.../src/app/ui/common/context-menu/context-menu.component.html | 9 ++++++---
.../src/app/ui/common/context-menu/context-menu.component.scss | 1 -
.../editors/combo-editor/combo-editor.component.html | 2 +-
.../property-table/editors/nf-editor/nf-editor.component.html | 7 ++++++-
.../nifi/src/app/ui/common/resizable/resizable.component.scss | 8 ++++----
.../nifi-web-frontend/src/main/nifi/src/assets/styles/_app.scss | 4 ++--
9 files changed, 24 insertions(+), 16 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/search/_search.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/search/_search.component-theme.scss
index ff7157835e..aa46c7a9a3 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/search/_search.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/search/_search.component-theme.scss
@@ -42,6 +42,7 @@
}
.search-results {
- background-color: if($is-dark, $nifi-theme-surface-palette-darker,
$nifi-theme-surface-palette-lighter);
+ background-color: var(--mat-menu-container-color);
+ border-radius: 4px;
}
}
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/search/search.component.html
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/search/search.component.html
index fac9488d00..86f7bbd9b8 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/search/search.component.html
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/search/search.component.html
@@ -26,7 +26,7 @@
[cdkConnectedOverlayHasBackdrop]="true"
[cdkConnectedOverlayBackdropClass]="'cdk-overlay-transparent-backdrop'"
(overlayOutsideClick)="backdropClicked($event)">
- <div class="search-results w-96 border p-2 text-sm max-h-96
overflow-y-auto">
+ <div class="search-results mat-elevation-z8 w-96 border p-2
text-sm max-h-96 overflow-y-auto">
@if (searching) {
<div class="unset nifi-surface-default
italic">Searching</div>
} @else {
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/context-menu/_context-menu.component-theme.scss
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/context-menu/_context-menu.component-theme.scss
index 040f01cf8d..10d25cbe03 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/context-menu/_context-menu.component-theme.scss
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/context-menu/_context-menu.component-theme.scss
@@ -44,8 +44,8 @@
);
div.context-menu {
- background-color: if($is-dark, $nifi-theme-surface-palette-darker,
$nifi-theme-surface-palette-lighter);
- box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
+ background-color: var(--mat-menu-container-color);
+ border-radius: 4px;
.context-menu-item:hover {
background-color: var(--mat-menu-item-hover-state-layer-color);
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/context-menu/context-menu.component.html
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/context-menu/context-menu.component.html
index 3ef979b62f..944be9cec8 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/context-menu/context-menu.component.html
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/context-menu/context-menu.component.html
@@ -17,7 +17,7 @@
<ng-template #menu>
<div
- class="context-menu border primary-color"
+ class="context-menu pt-2 pb-2 mat-elevation-z8 primary-color"
[class.show-focused]="showFocused$ | async"
(keydown)="keydown()"
cdkMenu>
@@ -27,7 +27,7 @@
} @else {
@if (hasSubMenu(item)) {
@if (menuComponent.menu; as subMenu) {
- <button class="context-menu-item" cdkMenuItem
[cdkMenuTriggerFor]="subMenu">
+ <button class="context-menu-item pl-1 pt-2 pb-2"
cdkMenuItem [cdkMenuTriggerFor]="subMenu">
<div class="context-menu-item-img"
[class]="item.clazz"></div>
<div class="context-menu-item-text
surface-contrast">{{ item.text }}</div>
<div class="context-menu-group-item-img fa
fa-caret-right"></div>
@@ -38,7 +38,10 @@
[menuProvider]="menuProvider"
[menuId]="item.subMenuId"></fd-context-menu>
} @else {
- <button class="context-menu-item"
(click)="menuItemClicked(item, $event)" cdkMenuItem>
+ <button
+ class="context-menu-item pl-1 pt-2 pb-2"
+ (click)="menuItemClicked(item, $event)"
+ cdkMenuItem>
<div class="context-menu-item-img"
[class]="item.clazz"></div>
<div class="context-menu-item-text
surface-contrast">{{ item.text }}</div>
</button>
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/context-menu/context-menu.component.scss
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/context-menu/context-menu.component.scss
index dd6ac85411..842fb7d2e2 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/context-menu/context-menu.component.scss
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/context-menu/context-menu.component.scss
@@ -17,7 +17,6 @@
div.context-menu {
font-size: 13px;
- padding: 3px;
width: 215px;
user-select: none;
display: flex;
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/combo-editor/combo-editor.component.html
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/combo-editor/combo-editor.component.html
index 321f8ae9e7..569dc4e32c 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/combo-editor/combo-editor.component.html
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/combo-editor/combo-editor.component.html
@@ -15,7 +15,7 @@
~ limitations under the License.
-->
-<div class="property-editor p-4" [style.width.px]="width" cdkDrag>
+<div class="property-editor mat-elevation-z8 p-4" [style.width.px]="width"
cdkDrag>
<form [formGroup]="comboEditorForm" cdkTrapFocus cdkTrapFocusAutoCapture>
<div class="flex flex-col">
<div>
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/nf-editor/nf-editor.component.html
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/nf-editor/nf-editor.component.html
index 2c9c41fb33..70068a8cbf 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/nf-editor/nf-editor.component.html
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/nf-editor/nf-editor.component.html
@@ -15,7 +15,12 @@
~ limitations under the License.
-->
-<div class="property-editor p-4 h-full" [style.width.px]="width" cdkDrag
resizable (resized)="resized()">
+<div
+ class="property-editor mat-elevation-z8 p-4 h-full"
+ [style.width.px]="width"
+ cdkDrag
+ resizable
+ (resized)="resized()">
<form class="h-full" [formGroup]="nfEditorForm" cdkTrapFocus
cdkTrapFocusAutoCapture>
<div class="flex flex-col gap-y-3 h-full">
<div class="flex justify-end">
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/resizable/resizable.component.scss
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/resizable/resizable.component.scss
index 0c3c3ddf0d..3ac2025b19 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/resizable/resizable.component.scss
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/resizable/resizable.component.scss
@@ -27,8 +27,8 @@ $handle-size: 15px;
position: absolute;
width: $handle-size;
height: $handle-size;
- bottom: 0;
- right: 0;
+ bottom: 10px;
+ right: 10px;
cursor: se-resize;
}
@@ -45,6 +45,6 @@ $handle-size: 15px;
border-right-style: solid;
border-bottom-width: math.div($handle-size, 2);
border-bottom-style: solid;
- bottom: 0;
- right: 0;
+ bottom: 10px;
+ right: 10px;
}
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 513303e109..c759984557 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
@@ -318,8 +318,8 @@
}
.property-editor {
- background-color: if($is-dark, $nifi-theme-surface-palette-darker,
$nifi-theme-surface-palette-lighter);
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
+ background-color: var(--mat-menu-container-color);
+ border-radius: 4px;
}
/* overriding 3rd party styles */
