From 760656092ce49a320a43a23bbcfc7fbd5062f956 Mon Sep 17 00:00:00 2001 From: Ray Cashmore Date: Tue, 10 Sep 2024 15:50:15 +1000 Subject: [PATCH 1/3] Resolve layout shrink --- .gitignore | 3 ++- .../src/platform/layout/layout-override.ts | 2 +- .../public/common/style/app.css | 18 ++++++++++++++++++ .../public/platform/provider.html | 10 +++------- 4 files changed, 24 insertions(+), 9 deletions(-) diff --git a/.gitignore b/.gitignore index 144e879..a9a3b53 100644 --- a/.gitignore +++ b/.gitignore @@ -3,4 +3,5 @@ node_modules **/public/js/*.bundle.js **/public/js/*.bundle.js.map **/.DS_Store -**/node_modules \ No newline at end of file +**/node_modules +.idea \ No newline at end of file diff --git a/how-to/web-interop-support-context-and-intents/client/src/platform/layout/layout-override.ts b/how-to/web-interop-support-context-and-intents/client/src/platform/layout/layout-override.ts index 2a220c7..7b1cccc 100644 --- a/how-to/web-interop-support-context-and-intents/client/src/platform/layout/layout-override.ts +++ b/how-to/web-interop-support-context-and-intents/client/src/platform/layout/layout-override.ts @@ -218,7 +218,7 @@ export function makeOverride( // Create a new div container for the layout. const container = document.createElement("div"); container.id = layoutName; - container.className = "col fill layout-container hidden"; + container.className = "col layout-container workspace-container hidden"; this._layoutContainer?.append(container); await fin.Platform.Layout.create({ layoutName, layout, container }); if (entry === length) { diff --git a/how-to/web-interop-support-context-and-intents/public/common/style/app.css b/how-to/web-interop-support-context-and-intents/public/common/style/app.css index f99a90c..cb3f7a2 100644 --- a/how-to/web-interop-support-context-and-intents/public/common/style/app.css +++ b/how-to/web-interop-support-context-and-intents/public/common/style/app.css @@ -17,6 +17,8 @@ --brand-success: var(--theme-status-success, #35c759); accent-color: var(--brand-primary); + + --header-height: 60px; } .theme-light { @@ -166,6 +168,14 @@ main { min-height: 100px; } +.header { + height: var(--header-height); +} + +.workspace-container { + height: calc(100dvh - var(--header-height)); +} + a { color: var(--brand-primary); font-size: 12px; @@ -920,6 +930,14 @@ td, gap: 20px; } +.width-viewport { + width: 100dvw; +} + +.height-viewport { + height: 100dvh; +} + .width-full { width: 100%; } diff --git a/how-to/web-interop-support-context-and-intents/public/platform/provider.html b/how-to/web-interop-support-context-and-intents/public/platform/provider.html index a11e728..b0330b4 100644 --- a/how-to/web-interop-support-context-and-intents/public/platform/provider.html +++ b/how-to/web-interop-support-context-and-intents/public/platform/provider.html @@ -12,8 +12,8 @@ - -
+ +

OpenFin - Support Context & Intents

@@ -36,10 +36,6 @@

-
-
-
-
-
+
From f8d5d8e3c12d5fd6c89b682a14da62e8fce2575d Mon Sep 17 00:00:00 2001 From: Ray Cashmore Date: Tue, 10 Sep 2024 15:50:15 +1000 Subject: [PATCH 2/3] Resolve layout shrink --- .../src/platform/layout/layout-override.ts | 2 +- .../public/common/style/app.css | 13 ++++++-- .../public/platform/provider.html | 6 ++-- .../public/common/style/app.css | 15 ++++++++-- .../public/platform/provider.html | 10 +++---- how-to/web-layout/client/src/provider.ts | 2 +- how-to/web-layout/public/common/style/app.css | 30 ++++++++++++------- .../web-layout/public/platform/provider.html | 20 ++++++------- 8 files changed, 63 insertions(+), 35 deletions(-) diff --git a/how-to/web-interop-support-context-and-intents/client/src/platform/layout/layout-override.ts b/how-to/web-interop-support-context-and-intents/client/src/platform/layout/layout-override.ts index 7b1cccc..4a62a63 100644 --- a/how-to/web-interop-support-context-and-intents/client/src/platform/layout/layout-override.ts +++ b/how-to/web-interop-support-context-and-intents/client/src/platform/layout/layout-override.ts @@ -218,7 +218,7 @@ export function makeOverride( // Create a new div container for the layout. const container = document.createElement("div"); container.id = layoutName; - container.className = "col layout-container workspace-container hidden"; + container.className = "col layout-container hidden"; this._layoutContainer?.append(container); await fin.Platform.Layout.create({ layoutName, layout, container }); if (entry === length) { diff --git a/how-to/web-interop-support-context-and-intents/public/common/style/app.css b/how-to/web-interop-support-context-and-intents/public/common/style/app.css index cb3f7a2..da1a529 100644 --- a/how-to/web-interop-support-context-and-intents/public/common/style/app.css +++ b/how-to/web-interop-support-context-and-intents/public/common/style/app.css @@ -19,6 +19,7 @@ accent-color: var(--brand-primary); --header-height: 60px; + --body-padding: 20px; } .theme-light { @@ -38,6 +39,14 @@ --brand-success: var(--theme-status-success, #35c759); } +.layout-container { + height: calc(100dvh - var(--header-height) - (var(--body-padding) * 2)); +} + +.header { + height: var(--header-height); +} + .primary { color: var(--brand-primary); } @@ -69,14 +78,14 @@ body { justify-content: stretch; align-items: stretch; overflow: hidden; - padding: 20px; + padding: var(--body-padding); margin: 0; background-color: var(--brand-background); color: var(--brand-text); } body.border { - padding: 20px; + padding: var(--body-padding); margin: 0; background-color: var(--brand-background); color: var(--brand-text); diff --git a/how-to/web-interop-support-context-and-intents/public/platform/provider.html b/how-to/web-interop-support-context-and-intents/public/platform/provider.html index bf1358a..1fa215f 100644 --- a/how-to/web-interop-support-context-and-intents/public/platform/provider.html +++ b/how-to/web-interop-support-context-and-intents/public/platform/provider.html @@ -13,7 +13,7 @@ - +

OpenFin - Support Context & Intents

@@ -43,6 +43,8 @@

-
+
+
+
diff --git a/how-to/web-layout-basic/public/common/style/app.css b/how-to/web-layout-basic/public/common/style/app.css index cf6a78d..617f7a7 100644 --- a/how-to/web-layout-basic/public/common/style/app.css +++ b/how-to/web-layout-basic/public/common/style/app.css @@ -17,6 +17,9 @@ --brand-success: var(--theme-status-success, #35c759); accent-color: var(--brand-primary); + + --header-height: 60px; + --body-padding: 20px; } .theme-light { @@ -36,6 +39,14 @@ --brand-success: var(--theme-status-success, #35c759); } +#layout_container { + height: calc(100dvh - var(--header-height) - (var(--body-padding) * 2)); +} + +.header { + height: var(--header-height); +} + .primary { color: var(--brand-primary); } @@ -67,14 +78,14 @@ body { justify-content: stretch; align-items: stretch; overflow: hidden; - padding: 20px; + padding: var(--body-padding); margin: 0; background-color: var(--brand-background); color: var(--brand-text); } body.border { - padding: 20px; + padding: var(--body-padding); margin: 0; background-color: var(--brand-background); color: var(--brand-text); diff --git a/how-to/web-layout-basic/public/platform/provider.html b/how-to/web-layout-basic/public/platform/provider.html index f0339db..2142e5e 100644 --- a/how-to/web-layout-basic/public/platform/provider.html +++ b/how-to/web-layout-basic/public/platform/provider.html @@ -12,8 +12,8 @@ - -
+ +

Web Layout Basic Example

Demonstrate a very basic layout with generic content

@@ -22,10 +22,8 @@

Demonstrate a very basic layout with generic content

OpenFin
-
-
-
-
+
+
diff --git a/how-to/web-layout/client/src/provider.ts b/how-to/web-layout/client/src/provider.ts index 41bd125..35b7ff3 100644 --- a/how-to/web-layout/client/src/provider.ts +++ b/how-to/web-layout/client/src/provider.ts @@ -181,7 +181,7 @@ async function createLayout( // Create a new div container for the layout. const container = document.createElement("div"); container.id = layoutName; - container.className = "col fill"; + container.className = "col layout-container"; container.style.display = order === 0 ? "block" : "none"; PARENT_CONTAINER?.append(container); diff --git a/how-to/web-layout/public/common/style/app.css b/how-to/web-layout/public/common/style/app.css index 94c2abf..795cc61 100644 --- a/how-to/web-layout/public/common/style/app.css +++ b/how-to/web-layout/public/common/style/app.css @@ -17,6 +17,11 @@ --brand-success: var(--theme-status-success, #35c759); accent-color: var(--brand-primary); + + --header-height: 60px; + --left-panel-width: 300px; + --tab-height: 30px; + --body-padding: 20px; } .theme-light { @@ -36,6 +41,19 @@ --brand-success: var(--theme-status-success, #35c759); } +.left-panel { + width: var(--left-panel-width); +} + +.layout-container { + height: calc(100dvh - var(--header-height) - (var(--body-padding) * 2) - var(--tab-height)); + width: calc(100dvw - var(--left-panel-width) - (var(--body-padding) * 2)); +} + +.header { + height: var(--header-height); +} + .primary { color: var(--brand-primary); } @@ -67,7 +85,7 @@ body { justify-content: stretch; align-items: stretch; overflow: hidden; - padding: 20px; + padding: var(--body-padding); margin: 0; background-color: var(--brand-background); color: var(--brand-text); @@ -75,7 +93,7 @@ body { } body.border { - padding: 20px; + padding: var(--body-padding); margin: 0; background-color: var(--brand-background); color: var(--brand-text); @@ -975,11 +993,3 @@ td, color: var(--brand-text-secondary); cursor: pointer; } - -.main-container { - display: flex; - justify-content: stretch; - align-items: stretch; - height: 100%; - width: 100%; -} diff --git a/how-to/web-layout/public/platform/provider.html b/how-to/web-layout/public/platform/provider.html index fc91b44..20f0936 100644 --- a/how-to/web-layout/public/platform/provider.html +++ b/how-to/web-layout/public/platform/provider.html @@ -12,8 +12,8 @@ - -
+ +

Web Multiple Layout Example

Demonstrate web interop usage with multiple layouts

@@ -23,15 +23,13 @@

Demonstrate web interop usage with multiple layouts

OpenFin
-
-
- -
-
-
-
+
+ +
+
+
From f5933d967f8895b44d0dfe1cbd5c0d93955716a1 Mon Sep 17 00:00:00 2001 From: Ray Cashmore Date: Tue, 17 Sep 2024 14:48:19 +1000 Subject: [PATCH 3/3] Resolve layout shrink - web-interop, cloud-interop --- .../cloud-interop/public/common/style/app.css | 21 +++++++++++++++++-- .../public/platform/provider.html | 8 +++---- .../web-interop/public/common/style/app.css | 21 +++++++++++++++++-- .../web-interop/public/platform/provider.html | 12 +++++------ 4 files changed, 47 insertions(+), 15 deletions(-) diff --git a/how-to/cloud-interop/public/common/style/app.css b/how-to/cloud-interop/public/common/style/app.css index cf6a78d..2747a57 100644 --- a/how-to/cloud-interop/public/common/style/app.css +++ b/how-to/cloud-interop/public/common/style/app.css @@ -17,6 +17,10 @@ --brand-success: var(--theme-status-success, #35c759); accent-color: var(--brand-primary); + + --header-height: 75px; + --body-padding: 20px; + --left-panel-width: 300px; } .theme-light { @@ -36,6 +40,19 @@ --brand-success: var(--theme-status-success, #35c759); } +.left-panel { + width: var(--left-panel-width); +} + +#layout_container { + width: calc(100dvw - var(--left-panel-width) - (var(--body-padding) * 2)); + height: calc(100dvh - var(--header-height) - (var(--body-padding) * 2)); +} + +.header { + height: var(--header-height); +} + .primary { color: var(--brand-primary); } @@ -67,14 +84,14 @@ body { justify-content: stretch; align-items: stretch; overflow: hidden; - padding: 20px; + padding: var(--body-padding); margin: 0; background-color: var(--brand-background); color: var(--brand-text); } body.border { - padding: 20px; + padding: var(--body-padding); margin: 0; background-color: var(--brand-background); color: var(--brand-text); diff --git a/how-to/cloud-interop/public/platform/provider.html b/how-to/cloud-interop/public/platform/provider.html index ae902d7..507d10e 100644 --- a/how-to/cloud-interop/public/platform/provider.html +++ b/how-to/cloud-interop/public/platform/provider.html @@ -12,8 +12,8 @@ - -
+ +

Web Interop Example

Demonstrate web interop usage with a layout

@@ -24,9 +24,9 @@

-