From 8f09b7ff31722c46ecf70c229683b3d07d873ca9 Mon Sep 17 00:00:00 2001 From: "Grigorii K. Shartsev" Date: Wed, 24 Jul 2024 12:35:49 +0200 Subject: [PATCH 1/4] refactor(NcAppNavigation): do not rely on $app-navigation-padding Signed-off-by: Grigorii K. Shartsev --- src/components/NcAppSidebar/NcAppSidebar.vue | 26 +++++++++----------- 1 file changed, 12 insertions(+), 14 deletions(-) diff --git a/src/components/NcAppSidebar/NcAppSidebar.vue b/src/components/NcAppSidebar/NcAppSidebar.vue index 98f7a65ced..4f0b3a5ee7 100644 --- a/src/components/NcAppSidebar/NcAppSidebar.vue +++ b/src/components/NcAppSidebar/NcAppSidebar.vue @@ -1245,7 +1245,7 @@ export default { .content { // A padding between the toggle button and the page border - --app-sidebar-padding: #{$app-navigation-padding}; + --app-sidebar-padding: calc(var(--default-grid-baseline, 4px) * 2); // A padding between the toggle button and the page border --app-sidebar-offset: 0; // Explicitly disable transition by default to enable it only when sidebar animation is active @@ -1272,8 +1272,6 @@ $desc-name-height: 30px; $desc-subname-height: 22px; $desc-height: $desc-name-height + $desc-subname-height; -$top-buttons-spacing: $app-navigation-padding; // align with app navigation - /* Sidebar: to be used within #content app-content will be shrinked properly @@ -1308,8 +1306,8 @@ $top-buttons-spacing: $app-navigation-padding; // align with app navigation > .app-sidebar__close { position: absolute; z-index: 100; - top: $top-buttons-spacing; - right: $top-buttons-spacing; + top: var(--app-sidebar-padding); + right: var(--app-sidebar-padding); width: var(--default-clickable-area); height: var(--default-clickable-area); opacity: $opacity_normal; @@ -1340,11 +1338,11 @@ $top-buttons-spacing: $app-navigation-padding; // align with app navigation padding-left: 0; flex: 1 1 auto; min-width: 0; - padding-right: calc(2 * var(--default-clickable-area) + $top-buttons-spacing); + padding-right: calc(2 * var(--default-clickable-area) + var(--app-sidebar-padding)); padding-top: var(--app-sidebar-padding); &.app-sidebar-header__desc--without-actions { - padding-right: calc(var(--default-clickable-area) + $top-buttons-spacing); + padding-right: calc(var(--default-clickable-area) + var(--app-sidebar-padding)); } .app-sidebar-header__tertiary-actions { @@ -1355,8 +1353,8 @@ $top-buttons-spacing: $app-navigation-padding; // align with app navigation gap: 0; // override gap } .app-sidebar-header__menu { - top: $top-buttons-spacing; - right: calc(var(--default-clickable-area) + $top-buttons-spacing); // left of the close button + top: var(--app-sidebar-padding); + right: calc(var(--default-clickable-area) + var(--app-sidebar-padding)); // left of the close button position: absolute; } } @@ -1368,15 +1366,15 @@ $top-buttons-spacing: $app-navigation-padding; // align with app navigation // align the menu with the close button .app-sidebar-header__menu { position: absolute; - top: $top-buttons-spacing; - right: calc($top-buttons-spacing + var(--default-clickable-area)); + top: var(--app-sidebar-padding); + right: calc(var(--app-sidebar-padding) + var(--default-clickable-area)); } // increase the padding to not overlap the menu .app-sidebar-header__desc { - padding-right: calc(var(--default-clickable-area) * 2 + $top-buttons-spacing); + padding-right: calc(var(--default-clickable-area) * 2 + var(--app-sidebar-padding)); &.app-sidebar-header__desc--without-actions { - padding-right: calc(var(--default-clickable-area) + $top-buttons-spacing); + padding-right: calc(var(--default-clickable-area) + var(--app-sidebar-padding)); } } } @@ -1408,7 +1406,7 @@ $top-buttons-spacing: $app-navigation-padding; // align with app navigation justify-content: center; align-items: center; padding-inline: var(--app-sidebar-padding); - padding-block: #{$top-buttons-spacing} calc(var(--app-sidebar-padding) / 2); + padding-block: var(--app-sidebar-padding) calc(var(--app-sidebar-padding) / 2); gap: 0 4px; // custom overrides From 20471678aab1af81b5aefbc2502fec468ba09dc9 Mon Sep 17 00:00:00 2001 From: "Grigorii K. Shartsev" Date: Wed, 24 Jul 2024 12:45:15 +0200 Subject: [PATCH 2/4] chore(NcAppSidebar): fix css vars doc Signed-off-by: Grigorii K. Shartsev --- src/components/NcAppSidebar/NcAppSidebar.vue | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/NcAppSidebar/NcAppSidebar.vue b/src/components/NcAppSidebar/NcAppSidebar.vue index 4f0b3a5ee7..b04b1c93eb 100644 --- a/src/components/NcAppSidebar/NcAppSidebar.vue +++ b/src/components/NcAppSidebar/NcAppSidebar.vue @@ -1244,9 +1244,14 @@ export default { } .content { - // A padding between the toggle button and the page border + /** + * The padding between the toggle button and the page border + */ --app-sidebar-padding: calc(var(--default-grid-baseline, 4px) * 2); - // A padding between the toggle button and the page border + /** + * The minimal offset width required to be reserved for the toggle button. + * Automatically changes to 0 when there is no toggle button. + */ --app-sidebar-offset: 0; // Explicitly disable transition by default to enable it only when sidebar animation is active // !important to override styles from an older version, because it's global non-scoped styles From 38a988445e5fa47b66c0a27cc92de91aa5560fdd Mon Sep 17 00:00:00 2001 From: "Grigorii K. Shartsev" Date: Wed, 24 Jul 2024 12:45:35 +0200 Subject: [PATCH 3/4] docs(NcAppSidebar): add exposed CSS variables docs section Signed-off-by: Grigorii K. Shartsev --- src/components/NcAppSidebar/NcAppSidebar.vue | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/components/NcAppSidebar/NcAppSidebar.vue b/src/components/NcAppSidebar/NcAppSidebar.vue index b04b1c93eb..76e135a4e6 100644 --- a/src/components/NcAppSidebar/NcAppSidebar.vue +++ b/src/components/NcAppSidebar/NcAppSidebar.vue @@ -4,6 +4,13 @@ --> +### Exposed CSS Variables + +| Variable | Description | +|-------------------------|-------------------------------------------------------------------------------------------------------------------------------------------| +| `--app-sidebar-padding` | The padding between the toggle button and the page border. | +| `--app-sidebar-offset` | The minimal offset width required to be reserved for the toggle button.
Automatically changes to 0 when there is no toggle button. | + ### General description This component provides a way to include the standardised sidebar. From 77b2f6fd4bfae652604bae512ac860a7f5e2f452 Mon Sep 17 00:00:00 2001 From: "Grigorii K. Shartsev" Date: Wed, 24 Jul 2024 20:15:56 +0200 Subject: [PATCH 4/4] fixup! refactor(NcAppNavigation): do not rely on $app-navigation-padding --- src/components/NcAppSidebar/NcAppSidebar.vue | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/NcAppSidebar/NcAppSidebar.vue b/src/components/NcAppSidebar/NcAppSidebar.vue index 76e135a4e6..1b2c34a848 100644 --- a/src/components/NcAppSidebar/NcAppSidebar.vue +++ b/src/components/NcAppSidebar/NcAppSidebar.vue @@ -1250,7 +1250,7 @@ export default { inherits: true; } -.content { +body { /** * The padding between the toggle button and the page border */ @@ -1266,12 +1266,12 @@ export default { } // When AppSidebar is animation is active - also apply transition for the toggle button offset -.content:has(.app-sidebar.slide-right-enter-active), -.content:has(.app-sidebar.slide-right-leave-active) { +body:has(.app-sidebar.slide-right-enter-active), +body:has(.app-sidebar.slide-right-leave-active) { transition: --app-sidebar-offset var(--animation-quick); } -.content:has(.app-sidebar__toggle) { +body:has(.app-sidebar__toggle) { --app-sidebar-offset: calc(var(--app-sidebar-padding) + var(--default-clickable-area)); }