From a17a58f1d72f533f82cac2edcc1f3ea8c8ede69e Mon Sep 17 00:00:00 2001 From: emielvdveen Date: Thu, 29 Jun 2023 17:21:01 +0200 Subject: [PATCH 1/5] Refactor worspace layout and sidepanel positioning --- core/assets/js/side_panel.js | 50 +++++-------- core/assets/js/tabbar.js | 2 +- core/assets/tailwind.config.js | 2 +- .../frameworks/pixel/components/side_panel.ex | 4 +- .../pixel/components/square_container.ex | 2 +- .../controllers/layouts/error.html.heex | 2 +- .../controllers/layouts/root.html.leex | 2 +- .../layouts/workspace/component.ex | 70 ++++++++++--------- core/lib/core_web/ui/navigation.ex | 6 +- 9 files changed, 66 insertions(+), 74 deletions(-) diff --git a/core/assets/js/side_panel.js b/core/assets/js/side_panel.js index e3f3a3a70..9cb5cac3a 100644 --- a/core/assets/js/side_panel.js +++ b/core/assets/js/side_panel.js @@ -1,54 +1,42 @@ -const maxBottomMargin = 62; +const maxBottomMargin = 63; export const SidePanel = { mounted() { + this.mainContent = document.getElementById("main-content"); this.parent = document.getElementById(this.el.dataset.parent); this.panel = this.el.getElementsByClassName("panel")[0]; - this.panel.style = `height: 0px;`; - this.make_absolute(); + this.panel.style = `position: fixed; height: 0px; top: 0px`; this.updateFrame(); - window.addEventListener("tab-activated", (event) => { + new ResizeObserver(() => { this.updateFrame(); - }); + }).observe(this.parent); - window.addEventListener("scroll", (event) => { + this.mainContent.addEventListener("scroll", (event) => { this.updateFrame(); }); window.addEventListener("resize", (event) => { this.updateFrame(); }); - }, - make_absolute() { - this.el.classList.remove("relative"); - this.el.classList.add("absolute"); + + window.addEventListener("tab-activated", (event) => { + this.updateFrame(); + }); }, updated() { - this.make_absolute(); this.updateFrame(); }, updateFrame() { - this.updateHeight(); - this.updatePosition(); - }, - updateHeight() { - const bottomMarginDelta = Math.min( - maxBottomMargin, - document.documentElement.scrollHeight - - window.scrollY - - window.innerHeight - ); - const bottomMargin = maxBottomMargin - bottomMarginDelta; + const bottomDistance = + this.mainContent.scrollHeight - + this.mainContent.scrollTop - + window.innerHeight; + const bottomMargin = + maxBottomMargin - Math.min(maxBottomMargin, bottomDistance); + const topMargin = Math.max(0, this.parent.getBoundingClientRect().top); + const height = window.innerHeight - (topMargin + bottomMargin); - const height = - window.innerHeight - - (this.parent.getBoundingClientRect().top + bottomMargin); - this.panel.style = `height: ${height}px;`; - }, - updatePosition() { - const top = - Math.max(0, this.parent.getBoundingClientRect().top) + window.scrollY; - this.el.style = `top: ${top}px; right: 0px`; + this.panel.style = `position: fixed; height: ${height}px; top: ${topMargin}px`; }, }; diff --git a/core/assets/js/tabbar.js b/core/assets/js/tabbar.js index 18af8d362..eff8758db 100644 --- a/core/assets/js/tabbar.js +++ b/core/assets/js/tabbar.js @@ -63,7 +63,7 @@ export const Tabbar = { var isVisible = tab.id === nextTabId; setVisible(tab, isVisible); if (isVisible) { - tab.dispatchEvent(new Event("tab-activated", { bubbles: true})); + tab.dispatchEvent(new Event("tab-activated", { bubbles: true })); } }); diff --git a/core/assets/tailwind.config.js b/core/assets/tailwind.config.js index d7deef92b..8f02ec07a 100644 --- a/core/assets/tailwind.config.js +++ b/core/assets/tailwind.config.js @@ -239,7 +239,7 @@ module.exports = { paddingBottom: "constant(safe-area-inset-bottom)", paddingBottom: "env(safe-area-inset-bottom)", }, - ".scrollbar-hide": { + ".scrollbar-hidden": { /* Firefox */ "scrollbar-width": "thin", diff --git a/core/frameworks/pixel/components/side_panel.ex b/core/frameworks/pixel/components/side_panel.ex index e1bec621c..6e6020362 100644 --- a/core/frameworks/pixel/components/side_panel.ex +++ b/core/frameworks/pixel/components/side_panel.ex @@ -9,8 +9,8 @@ defmodule Frameworks.Pixel.SidePanel do def side_panel(assigns) do ~H""" -
-
+
+
<%= render_slot(@inner_block) %>
diff --git a/core/frameworks/pixel/components/square_container.ex b/core/frameworks/pixel/components/square_container.ex index 5a3450c67..0e844c3b5 100644 --- a/core/frameworks/pixel/components/square_container.ex +++ b/core/frameworks/pixel/components/square_container.ex @@ -8,7 +8,7 @@ defmodule Frameworks.Pixel.Square do def container(assigns) do ~H"""
-
+
<%= render_slot(@inner_block) %>
diff --git a/core/lib/core_web/controllers/layouts/error.html.heex b/core/lib/core_web/controllers/layouts/error.html.heex index b6dc33471..d9ca0ff32 100644 --- a/core/lib/core_web/controllers/layouts/error.html.heex +++ b/core/lib/core_web/controllers/layouts/error.html.heex @@ -15,7 +15,7 @@ /> - +
diff --git a/core/lib/core_web/controllers/layouts/root.html.leex b/core/lib/core_web/controllers/layouts/root.html.leex index 414b112a6..fa1a4af2f 100644 --- a/core/lib/core_web/controllers/layouts/root.html.leex +++ b/core/lib/core_web/controllers/layouts/root.html.leex @@ -21,7 +21,7 @@ /> - +
- - -
-
-
-
- -
-
-
-
-
- <%= if @title do %> -
- -
- <% end %> - <%= if @top_bar do %> -
- <%= render_slot(@top_bar) %> +
+
+ + +
+
+
+
+
+ +
+
+
+
+
+ <%= if @title do %> +
+ +
+ <% end %> + <%= if @top_bar do %> +
+ <%= render_slot(@top_bar) %> +
+ <% end %> +
+ <%= render_slot(@inner_block) %> +
- <% end %> -
- <%= render_slot(@inner_block) %> -
+ <%= if @footer do %> +
+ <.content_footer /> +
+ <% end %>
- <%= if @footer do %> -
- <.content_footer /> -
- <% end %>
-
-
- <.platform_footer /> +
+ <.platform_footer /> +
diff --git a/core/lib/core_web/ui/navigation.ex b/core/lib/core_web/ui/navigation.ex index 0de5602cb..c9c6671cf 100644 --- a/core/lib/core_web/ui/navigation.ex +++ b/core/lib/core_web/ui/navigation.ex @@ -68,7 +68,7 @@ defmodule CoreWeb.UI.Navigation do
-
+
<%= if @centralize do %>
@@ -136,7 +136,7 @@ defmodule CoreWeb.UI.Navigation do def desktop_menu(assigns) do ~H""" -