Skip to content

Commit d47e9d9

Browse files
nfebenfebe
committed
feat(app-content): Revise sidebar selection and content edge styling
Main content now has a subtle left divider and rounded left edge next to the navigation. Selected nav and list items use a softly tinted pill instead of a solid primary fill. Backport of #8448 to stable8. Signed-off-by: nfebe <fenn25.fn@gmail.com>
1 parent a3a1c1d commit d47e9d9

8 files changed

Lines changed: 137 additions & 16 deletions

File tree

‎src/assets/NcAppNavigationItem.scss‎

Lines changed: 50 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -31,16 +31,42 @@
3131
}
3232
}
3333

34-
// When .active class is applied, change color background of link and utils. The
35-
// !important prevents the focus state to override the active state.
36-
&.active {
34+
// !important so :focus-within does not override the active state.
35+
// New design (NC34+): glassy tinted bg + inline-start stripe.
36+
&:not(.app-navigation-entry--legacy).active {
37+
background-color: var(--color-primary-element-light) !important;
38+
39+
&:hover {
40+
background-color: var(--color-primary-element-light-hover) !important;
41+
}
42+
43+
&:not(.app-navigation-entry--editing) {
44+
.app-navigation-entry-link,
45+
.app-navigation-entry-button {
46+
color: var(--color-main-text) !important;
47+
}
48+
}
49+
50+
&:not(.app-navigation-entry--editing)::before {
51+
content: '';
52+
position: absolute;
53+
inset-block: calc(var(--default-grid-baseline, 4px) * 2);
54+
inset-inline-start: 0;
55+
width: 3px;
56+
background-color: var(--color-primary-element);
57+
border-radius: 999px;
58+
animation: nc-nav-stripe-in var(--animation-quick, 200ms) ease-out;
59+
}
60+
}
61+
62+
// Legacy design (NC < 34): solid primary fill.
63+
&.app-navigation-entry--legacy.active {
3764
background-color: var(--color-primary-element) !important;
3865

3966
&:hover {
4067
background-color: var(--color-primary-element-hover) !important;
4168
}
4269

43-
// overwrite active text color
4470
.app-navigation-entry-link, .app-navigation-entry-button {
4571
color: var(--color-primary-element-text) !important;
4672
}
@@ -49,6 +75,10 @@
4975
&:hover {
5076
background-color: var(--color-background-hover);
5177
}
78+
&:not(.app-navigation-entry--legacy):focus-within,
79+
&:not(.app-navigation-entry--legacy):hover {
80+
background-color: color-mix(in srgb, var(--color-primary-element) 8%, transparent);
81+
}
5282
&.active,
5383
&:focus-within,
5484
&:hover {
@@ -74,7 +104,10 @@
74104
.app-navigation-entry__actions:hover :deep(.button-vue) {
75105
background-color: var(--color-background-dark) !important;
76106
}
77-
&.active .app-navigation-entry__actions:hover :deep(.button-vue) {
107+
&:not(.app-navigation-entry--legacy).active .app-navigation-entry__actions:hover :deep(.button-vue) {
108+
background-color: var(--color-background-dark) !important;
109+
}
110+
&.app-navigation-entry--legacy.active .app-navigation-entry__actions:hover :deep(.button-vue) {
78111
background-color: var(--color-primary-element) !important;
79112
}
80113

@@ -101,6 +134,7 @@
101134
padding: 0;
102135
white-space: nowrap;
103136
color: var(--color-main-text);
137+
font-weight: 500;
104138
background-repeat: no-repeat;
105139
background-position: $icon-margin center;
106140
background-size: $icon-size $icon-size;
@@ -231,3 +265,14 @@
231265
}
232266
}
233267
}
268+
269+
@keyframes nc-nav-stripe-in {
270+
from {
271+
transform: scaleY(0);
272+
opacity: 0;
273+
}
274+
to {
275+
transform: scaleY(1);
276+
opacity: 1;
277+
}
278+
}

‎src/components/NcAppNavigation/NcAppNavigation.vue‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,10 @@ emit('toggle-navigation', {
139139
<div
140140
ref="appNavigationContainer"
141141
class="app-navigation"
142-
:class="{ 'app-navigation--close': !open }">
142+
:class="{
143+
'app-navigation--close': !open,
144+
'app-navigation--legacy': isLegacy34,
145+
}">
143146
<nav
144147
id="app-navigation-vue"
145148
:aria-hidden="open ? 'false' : 'true'"
@@ -177,6 +180,7 @@ import Vue from 'vue'
177180
import { useHotKey } from '../../composables/useHotKey/index.ts'
178181
import { useIsMobile } from '../../composables/useIsMobile/index.ts'
179182
import { getTrapStack } from '../../utils/focusTrap.ts'
183+
import { isLegacy34 } from '../../utils/legacy.ts'
180184
import { logger } from '../../utils/logger.ts'
181185
import NcAppNavigationList from '../NcAppNavigationList/index.js'
182186
import NcAppNavigationToggle from '../NcAppNavigationToggle/index.js'
@@ -218,6 +222,7 @@ export default {
218222
setup() {
219223
return {
220224
isMobile: useIsMobile(),
225+
isLegacy34,
221226
}
222227
},
223228
@@ -396,9 +401,14 @@ export default {
396401
user-select: none;
397402
flex-grow: 0;
398403
flex-shrink: 0;
399-
background-color: var(--color-main-background-blur, var(--color-main-background));
400-
-webkit-backdrop-filter: var(--filter-background-blur, none);
401-
backdrop-filter: var(--filter-background-blur, none);
404+
// New design (NC34+): transparent so the frosted chrome on NcContent shows through.
405+
background-color: transparent;
406+
407+
&--legacy {
408+
background-color: var(--color-main-background-blur, var(--color-main-background));
409+
-webkit-backdrop-filter: var(--filter-background-blur, none);
410+
backdrop-filter: var(--filter-background-blur, none);
411+
}
402412
403413
&--close {
404414
margin-inline-start: calc(-1 * min($navigation-width, var(--app-navigation-max-width)));

‎src/components/NcAppNavigationItem/NcAppNavigationIconCollapsible.vue‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
'icon-collapse--open': open,
1313
}"
1414
:aria-label="labelButton"
15-
:variant="active ? 'tertiary-on-primary' : 'tertiary'"
15+
:variant="(active && isLegacy34) ? 'tertiary-on-primary' : 'tertiary'"
1616
@click="onClick">
1717
<template #icon>
1818
<ChevronUp
@@ -29,6 +29,7 @@
2929
import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
3030
import ChevronUp from 'vue-material-design-icons/ChevronUp.vue'
3131
import { t } from '../../l10n.js'
32+
import { isLegacy34 } from '../../utils/legacy.ts'
3233
import NcButton from '../NcButton/index.js'
3334
3435
export default {
@@ -40,6 +41,10 @@ export default {
4041
ChevronUp,
4142
},
4243
44+
setup() {
45+
return { isLegacy34 }
46+
},
47+
4348
props: {
4449
/**
4550
* Is the list currently open (or collapsed)

‎src/components/NcAppNavigationItem/NcAppNavigationItem.vue‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -301,6 +301,7 @@ Just set the `pinned` prop.
301301
:class="{
302302
'app-navigation-entry--editing': editingActive,
303303
'app-navigation-entry--deleted': undo,
304+
'app-navigation-entry--legacy': isLegacy34,
304305
active: (to && isActive) || active,
305306
}"
306307
class="app-navigation-entry">
@@ -369,7 +370,7 @@ Just set the `pinned` prop.
369370
:boundaries-element="actionsBoundariesElement"
370371
:placement="menuPlacement"
371372
:open="menuOpen"
372-
:type="(to && isActive) || active ? 'tertiary-on-primary' : 'tertiary'"
373+
type="tertiary"
373374
:force-menu="forceMenu"
374375
:default-icon="menuIcon"
375376
@update:open="onMenuToggle">
@@ -424,6 +425,7 @@ import NcInputConfirmCancel from './NcInputConfirmCancel.vue'
424425
import { useIsMobile } from '../../composables/useIsMobile/index.ts'
425426
import { t } from '../../l10n.js'
426427
import GenRandomId from '../../utils/GenRandomId.js'
428+
import { isLegacy34 } from '../../utils/legacy.ts'
427429
import NcActionButton from '../NcActionButton/index.js'
428430
import NcActions from '../NcActions/index.js'
429431
import NcLoadingIcon from '../NcLoadingIcon/index.js'
@@ -652,6 +654,7 @@ export default {
652654
setup() {
653655
return {
654656
isMobile: useIsMobile(),
657+
isLegacy34,
655658
}
656659
},
657660

‎src/components/NcAppNavigationItem/NcInputConfirmCancel.vue‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
</docs>
1313

1414
<template>
15-
<div class="app-navigation-input-confirm">
15+
<div class="app-navigation-input-confirm" :class="{ 'app-navigation-input-confirm--legacy': isLegacy34 }">
1616
<form
1717
@submit.prevent="confirm"
1818
@keydown.esc.exact.stop.prevent="cancel"
@@ -51,6 +51,7 @@
5151
import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
5252
import Close from 'vue-material-design-icons/Close.vue'
5353
import { t } from '../../l10n.js'
54+
import { isLegacy34 } from '../../utils/legacy.ts'
5455
import NcButton from '../NcButton/index.js'
5556
5657
export default {
@@ -62,6 +63,10 @@ export default {
6263
Close,
6364
},
6465
66+
setup() {
67+
return { isLegacy34 }
68+
},
69+
6570
props: {
6671
/**
6772
* If this element is used on a primary element set to true for primary styling.
@@ -156,5 +161,25 @@ $input-margin: 5px;
156161
border-color: var(--color-primary-element);
157162
}
158163
}
164+
165+
// New design (NC34+): square confirm/cancel buttons with consistent gaps.
166+
&:not(&--legacy) {
167+
form {
168+
align-items: center;
169+
gap: $input-margin;
170+
padding-inline-end: $input-margin;
171+
}
172+
173+
.app-navigation-input-confirm__input {
174+
margin-inline-end: 0 !important;
175+
}
176+
177+
:deep(.button-vue) {
178+
width: $input-height !important;
179+
min-width: $input-height !important;
180+
height: $input-height !important;
181+
flex: 0 0 $input-height;
182+
}
183+
}
159184
}
160185
</style>

‎src/components/NcButton/NcButton.vue‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -423,7 +423,7 @@ td.row-size {
423423
</docs>
424424

425425
<script>
426-
import { isLegacy32 } from '../../utils/legacy.ts'
426+
import { isLegacy32, isLegacy34 } from '../../utils/legacy.ts'
427427
import { logger } from '../../utils/logger.ts'
428428
import { useNcFormBox } from '../NcFormBox/useNcFormBox.ts'
429429
@@ -728,6 +728,7 @@ export default {
728728
'button-vue--icon-and-text': hasIcon && hasText,
729729
[`button-vue--vue-${this.realVariant}`]: this.realVariant,
730730
'button-vue--legacy': isLegacy32,
731+
'button-vue--legacy34': isLegacy34,
731732
'button-vue--tertiary': this.isTertiary,
732733
'button-vue--wide': this.wide,
733734
[`button-vue--${this.flexAlignment}`]: this.flexAlignment !== 'center',
@@ -1007,6 +1008,12 @@ export default {
10071008
}
10081009
}
10091010
1011+
&--tertiary:not(#{&}--legacy34) {
1012+
&:hover:not(:disabled) {
1013+
background-color: color-mix(in srgb, var(--color-primary-element) 8%, transparent);
1014+
}
1015+
}
1016+
10101017
// Tertiary, no background
10111018
&--vue-tertiary-no-background {
10121019
&:hover:not(:disabled) {

‎src/components/NcContent/NcContent.vue‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,10 @@ It also will set the skip content buttons needed for accessibility.
5454
</docs>
5555

5656
<template>
57-
<div id="content-vue" class="content" :class="`app-${appName.toLowerCase()}`">
57+
<div
58+
id="content-vue"
59+
class="content"
60+
:class="[`app-${appName.toLowerCase()}`, { 'content--legacy': isLegacy34 }]">
5861
<!-- TODO: with vue3 the `selector` attribute needs to be changed to `to="#skip-actions"` -->
5962
<Teleport selector="#skip-actions">
6063
<div class="vue-skip-actions__container">
@@ -99,6 +102,7 @@ import NcButton from '../NcButton/NcButton.vue'
99102
import NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'
100103
import { useIsMobile } from '../../composables/useIsMobile/index.ts'
101104
import { t } from '../../l10n.js'
105+
import { isLegacy34 } from '../../utils/legacy.ts'
102106
import contentSvg from './content-selected.svg?raw'
103107
import navigationSvg from './navigation-selected.svg?raw'
104108
@@ -133,6 +137,7 @@ export default {
133137
const isMobile = useIsMobile()
134138
return {
135139
isMobile,
140+
isLegacy34,
136141
}
137142
},
138143
@@ -185,6 +190,8 @@ export default {
185190
</script>
186191

187192
<style lang="scss">
193+
@use '../../assets/variables.scss' as *;
194+
188195
// Remove server stylings and add a backdrop
189196
#skip-actions.vue-skip-actions:focus-within {
190197
top: 0!important;
@@ -194,6 +201,15 @@ export default {
194201
padding: var(--body-container-margin)!important;
195202
backdrop-filter: brightness(50%);
196203
}
204+
205+
// New design (NC34+): divider only when an open navigation is present.
206+
@media only screen and (min-width: $breakpoint-mobile) {
207+
.content:not(.content--legacy) .app-navigation:not(.app-navigation--close) ~ .app-content {
208+
border-inline-start: 1px solid var(--color-border);
209+
border-start-start-radius: var(--body-container-radius);
210+
border-end-start-radius: var(--body-container-radius);
211+
}
212+
}
197213
</style>
198214

199215
<style lang="scss" scoped>
@@ -243,6 +259,14 @@ export default {
243259
overflow: hidden;
244260
padding: 0;
245261
262+
// New design (NC34+): wrapper carries the frosted chrome so nav and
263+
// AppContent rounded-edge cutouts share one surface.
264+
&:not(&--legacy) {
265+
background-color: var(--color-main-background-blur, var(--color-main-background));
266+
backdrop-filter: var(--filter-background-blur, none);
267+
-webkit-backdrop-filter: var(--filter-background-blur, none);
268+
}
269+
246270
&:not(.with-sidebar--full) {
247271
position: fixed;
248272
}

‎src/utils/legacy.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,7 @@
33
* SPDX-License-Identifier: AGPL-3.0-or-later
44
*/
55

6-
const version = window.OC?.config?.version?.split('.')[0] || '32'
7-
export const isLegacy32 = Number.parseInt(version) < 32
6+
const version = window.OC?.config?.version?.split('.')[0] || '34'
7+
const major = Number.parseInt(version)
8+
export const isLegacy32 = major < 32
9+
export const isLegacy34 = major < 34

0 commit comments

Comments
 (0)
⚡