Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(NcAppNavigation): add --app--navigation--offset exposed CSS Variable #5862

Draft
wants to merge 4 commits into
base: master
Choose a base branch
from
+64 −22
Draft

feat(NcAppNavigation): add --app--navigation--offset exposed CSS Variable #5862

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8f09b7f
refactor(NcAppNavigation): do not rely on $app-navigation-padding
ShGKme Jul 24, 2024
2047167
chore(NcAppSidebar): fix css vars doc
ShGKme Jul 24, 2024
38a9884
docs(NcAppSidebar): add exposed CSS variables docs section
ShGKme Jul 24, 2024
075003e
feat(NcAppNavigation): add --app-navigation-offset
ShGKme Jul 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions src/assets/variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,5 +37,3 @@ $breakpoint-small-mobile: math.div($breakpoint-mobile, 2);
// navigation spacing
$app-navigation-settings-margin: 3px;

// navigation items
$app-navigation-padding: calc(var(--default-grid-baseline, 4px) * 2);
42 changes: 38 additions & 4 deletions src/components/NcAppNavigation/NcAppNavigation.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,15 @@
-->

<docs>
### Exposed CSS Variables

| Variable | Description |
|----------------------------|------------------------------------------------------------------------|
| `--app-navigation-padding` | The padding between the toggle button and the page border |
| `--app-navigation-offset` | The minimal offset width required to be reserved for the toggle button |

### General usage

```vue
<template>
<div class="styleguide-nc-content">
Expand Down Expand Up @@ -52,6 +61,12 @@
</div>
</template>
</NcAppNavigation>

<div class="nc-app-content-stub">
<div class="top-bar">
Some content, moved using --app-navigation-offset.
</div>
</div>
</div>
</template>

Expand Down Expand Up @@ -87,6 +102,7 @@
height: 300px;
background-color: var(--color-background-plain);
overflow: hidden;
display: flex;
}

.navigation__header,
Expand All @@ -101,6 +117,14 @@
height: 120px;
padding: 10px;
}

.top-bar {
/* Reserver space for the navigation toggle button */
margin-left: var(--app-navigation-offset);
/* General padding */
padding: var(--default-grid-baseline);
height: 50px;
}
</style>
```

Expand Down Expand Up @@ -308,10 +332,20 @@ export default {
</script>

<style lang="scss">
.app-navigation,
.app-content {
/** Distance of the app navigation toggle and the first navigation item to the top edge of the app content container */
--app-navigation-padding: #{$app-navigation-padding};
:root {
/**
* The distance between the app navigation toggle and the first navigation item to the top edge of the app content container
*/
--app-navigation-padding: calc(var(--default-grid-baseline, 4px) * 2);

/**
* The minimal offset width required to be reserved for the toggle button
*/
--app-navigation-offset: 0;

&:has(.app-navigation) {
--app-navigation-offset: calc(var(--app-navigation-padding) + var(--default-clickable-area));
}
}
</style>

Expand Down
42 changes: 26 additions & 16 deletions src/components/NcAppSidebar/NcAppSidebar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,13 @@
-->

<docs>
### 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. <br /> Automatically changes to 0 when there is no toggle button. |

### General description

This component provides a way to include the standardised sidebar.
Expand Down Expand Up @@ -1244,9 +1251,14 @@ export default {
}

.content {
// A padding between the toggle button and the page border
--app-sidebar-padding: #{$app-navigation-padding};
// 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);
/**
* 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
Expand All @@ -1272,8 +1284,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
Expand Down Expand Up @@ -1308,8 +1318,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;
Expand Down Expand Up @@ -1340,11 +1350,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 {
Expand All @@ -1355,8 +1365,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;
}
}
Expand All @@ -1368,15 +1378,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));
}
}
}
Expand Down Expand Up @@ -1408,7 +1418,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
Expand Down
Loading