This is an automated email from the ASF dual-hosted git repository.
rfellows 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 74731b5a59 [NIFI-13212] handle canvas overflow on shorter screens
(#8810)
74731b5a59 is described below
commit 74731b5a596a1df295e4cb5a3ec0ffa5521fb134
Author: Scott Aslan <scottyas...@users.noreply.github.com>
AuthorDate: Fri May 10 17:49:46 2024 -0400
[NIFI-13212] handle canvas overflow on shorter screens (#8810)
* [NIFI-13212] handle canvas overflow on shorter screens
* add z-index to drag/drop new canvas items
This closes #8810
---
.../app/pages/flow-designer/ui/canvas/canvas.component.html | 10 ++++------
.../app/pages/flow-designer/ui/canvas/canvas.component.scss | 7 ++++++-
.../ui/canvas/footer/_footer.component-theme.scss | 5 +++++
.../ui/canvas/graph-controls/graph-controls.component.scss | 2 +-
.../header/new-canvas-item/new-canvas-item.component.scss | 1 +
5 files changed, 17 insertions(+), 8 deletions(-)
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/canvas.component.html
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/canvas.component.html
index 85fb83e8ab..2df323691e 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/canvas.component.html
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/canvas.component.html
@@ -15,15 +15,13 @@
~ limitations under the License.
-->
-<div class="flex flex-col h-screen justify-between">
+<div class="flex flex-col justify-between">
<fd-header></fd-header>
<div class="flex-1">
- <div
- id="canvas-container"
- class="canvas-background h-full select-none"
- [cdkContextMenuTriggerFor]="contextMenu.menu"></div>
+ <div id="canvas-container" class="canvas-background select-none"
[cdkContextMenuTriggerFor]="contextMenu.menu">
+ <graph-controls></graph-controls>
+ </div>
<fd-context-menu #contextMenu [menuProvider]="canvasContextMenu"
menuId="root"></fd-context-menu>
- <graph-controls></graph-controls>
</div>
<fd-footer></fd-footer>
</div>
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/canvas.component.scss
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/canvas.component.scss
index e4ed4efaba..064d18477c 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/canvas.component.scss
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/canvas.component.scss
@@ -16,6 +16,11 @@
*/
.canvas-background {
+ position: absolute;
+ top: 98px;
+ left: 0;
+ bottom: 0;
+ right: 0;
background-size: 14px 14px;
z-index: 1;
overflow: hidden;
@@ -25,7 +30,7 @@
:host ::ng-deep svg.canvas-svg {
width: 100%;
- height: 100%;
+ height: calc(100% - 33px);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/footer/_footer.component-theme.scss
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/footer/_footer.component-theme.scss
index 7300b9b2f6..a914896c6d 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/footer/_footer.component-theme.scss
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/footer/_footer.component-theme.scss
@@ -28,6 +28,11 @@
// Get hues from palette
.breadcrumb-container {
+ position: absolute;
+ bottom: 0;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
+ height: 33px;
+ width: 100%;
+ background-color: var(--mat-app-background-color);
}
}
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/graph-controls.component.scss
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/graph-controls.component.scss
index 86ecc2d822..e400df89e1 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/graph-controls.component.scss
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/graph-controls.component.scss
@@ -18,6 +18,6 @@
div.graph-controls {
position: absolute;
left: 0;
- top: 110px;
+ top: 22px;
z-index: 2;
}
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 1c2bd2690c..8d536ca8eb 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
@@ -19,6 +19,7 @@
.cdk-drag {
background: unset;
height: 64px;
+ z-index: 2;
}
.icon {
