Apache
/
nifi
mirror of https://github.com/apache/nifi.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[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
This commit is contained in:
Scott Aslan 2024-05-01 08:25:34 -04:00 committed by GitHub
parent 5a5947d1b0
commit d1173b2f98
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 24 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
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
View File

@ -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;
}
}

2
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
View File

@ -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 {

4
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/context-menu/_context-menu.component-theme.scss
View File

@ -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);

9
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/context-menu/context-menu.component.html
View File

@ -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>

1
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/context-menu/context-menu.component.scss
View File

@ -17,7 +17,6 @@
div.context-menu {
font-size: 13px;
padding: 3px;
width: 215px;
user-select: none;
display: flex;

2
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
View File

@ -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>

7
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
View File

@ -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">

8
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/resizable/resizable.component.scss
View File

@ -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;
}

4
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_app.scss
View File

@ -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 */