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 <scottyas...@users.noreply.github.com> 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 */