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>

Author: nfebe

cypress/snapshots/base/cypress/visual/AppNavigationItem.cy.ts/NcAppNavigationItem-primary-on-active-entry.png

@@ -31,16 +31,42 @@
 		}
 	}
 
-	// When .active class is applied, change color background of link and utils. The
-	// !important prevents the focus state to override the active state.
-	&.active {
+	// !important so :focus-within does not override the active state.
+	// New design (NC34+): glassy tinted bg + inline-start stripe.
+	&:not(.app-navigation-entry--legacy).active {
+		background-color: var(--color-primary-element-light) !important;
+
+		&:hover {
+			background-color: var(--color-primary-element-light-hover) !important;
+		}
+
+		&:not(.app-navigation-entry--editing) {
+			.app-navigation-entry-link,
+			.app-navigation-entry-button {
+				color: var(--color-main-text) !important;
+			}
+		}
+
+		&:not(.app-navigation-entry--editing)::before {
+			content: '';
+			position: absolute;
+			inset-block: calc(var(--default-grid-baseline, 4px) * 2);
+			inset-inline-start: 0;
+			width: 3px;
+			background-color: var(--color-primary-element);
+			border-radius: 999px;
+			animation: nc-nav-stripe-in var(--animation-quick, 200ms) ease-out;
+		}
+	}
+
+	// Legacy design (NC < 34): solid primary fill.
+	&.app-navigation-entry--legacy.active {
 		background-color: var(--color-primary-element) !important;
 
 		&:hover {
 			background-color: var(--color-primary-element-hover) !important;
 		}
 
-		// overwrite active text color
 		.app-navigation-entry-link, .app-navigation-entry-button {
 			color: var(--color-primary-element-text) !important;
 		}
@@ -49,6 +75,10 @@
 	&:hover {
 		background-color: var(--color-background-hover);
 	}
+	&:not(.app-navigation-entry--legacy):focus-within,
+	&:not(.app-navigation-entry--legacy):hover {
+		background-color: color-mix(in srgb, var(--color-primary-element) 8%, transparent);
+	}
 	&.active,
 	&:focus-within,
 	&:hover {
@@ -74,7 +104,10 @@
 	.app-navigation-entry__actions:hover :deep(.button-vue) {
 		background-color: var(--color-background-dark) !important;
 	}
-	&.active .app-navigation-entry__actions:hover :deep(.button-vue) {
+	&:not(.app-navigation-entry--legacy).active .app-navigation-entry__actions:hover :deep(.button-vue) {
+		background-color: var(--color-background-dark) !important;
+	}
+	&.app-navigation-entry--legacy.active .app-navigation-entry__actions:hover :deep(.button-vue) {
 		background-color: var(--color-primary-element) !important;
 	}
 
@@ -101,6 +134,7 @@
 		padding: 0;
 		white-space: nowrap;
 		color: var(--color-main-text);
+		font-weight: 500;
 		background-repeat: no-repeat;
 		background-position: $icon-margin center;
 		background-size: $icon-size $icon-size;
@@ -231,3 +265,14 @@
 		}
 	}
 }
+
+@keyframes nc-nav-stripe-in {
+	from {
+		transform: scaleY(0);
+		opacity: 0;
+	}
+	to {
+		transform: scaleY(1);
+		opacity: 1;
+	}
+}

cypress/snapshots/base/cypress/visual/AppNavigationItem.cy.ts/NcAppNavigationItem-primary-on-active-route.png

@@ -139,7 +139,10 @@ emit('toggle-navigation', {
 	<div
 		ref="appNavigationContainer"
 		class="app-navigation"
-		:class="{ 'app-navigation--close': !open }">
+		:class="{
+			'app-navigation--close': !open,
+			'app-navigation--legacy': isLegacy34,
+		}">
 		<nav
 			id="app-navigation-vue"
 			:aria-hidden="open ? 'false' : 'true'"
@@ -177,6 +180,7 @@ import Vue from 'vue'
 import { useHotKey } from '../../composables/useHotKey/index.ts'
 import { useIsMobile } from '../../composables/useIsMobile/index.ts'
 import { getTrapStack } from '../../utils/focusTrap.ts'
+import { isLegacy34 } from '../../utils/legacy.ts'
 import { logger } from '../../utils/logger.ts'
 import NcAppNavigationList from '../NcAppNavigationList/index.js'
 import NcAppNavigationToggle from '../NcAppNavigationToggle/index.js'
@@ -218,6 +222,7 @@ export default {
 	setup() {
 		return {
 			isMobile: useIsMobile(),
+			isLegacy34,
 		}
 	},
 
@@ -396,9 +401,14 @@ export default {
 	user-select: none;
 	flex-grow: 0;
 	flex-shrink: 0;
-	background-color: var(--color-main-background-blur, var(--color-main-background));
-	-webkit-backdrop-filter: var(--filter-background-blur, none);
-	backdrop-filter: var(--filter-background-blur, none);
+	// New design (NC34+): transparent so the frosted chrome on NcContent shows through.
+	background-color: transparent;
+
+	&--legacy {
+		background-color: var(--color-main-background-blur, var(--color-main-background));
+		-webkit-backdrop-filter: var(--filter-background-blur, none);
+		backdrop-filter: var(--filter-background-blur, none);
+	}
 
 	&--close {
 		margin-inline-start: calc(-1 * min($navigation-width, var(--app-navigation-max-width)));

src/assets/NcAppNavigationItem.scss

@@ -12,7 +12,7 @@
 			'icon-collapse--open': open,
 		}"
 		:aria-label="labelButton"
-		:variant="active ? 'tertiary-on-primary' : 'tertiary'"
+		:variant="(active && isLegacy34) ? 'tertiary-on-primary' : 'tertiary'"
 		@click="onClick">
 		<template #icon>
 			<ChevronUp
@@ -29,6 +29,7 @@
 import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
 import ChevronUp from 'vue-material-design-icons/ChevronUp.vue'
 import { t } from '../../l10n.js'
+import { isLegacy34 } from '../../utils/legacy.ts'
 import NcButton from '../NcButton/index.js'
 
 export default {
@@ -40,6 +41,10 @@ export default {
 		ChevronUp,
 	},
 
+	setup() {
+		return { isLegacy34 }
+	},
+
 	props: {
 		/**
 		 * Is the list currently open (or collapsed)

src/components/NcAppNavigation/NcAppNavigation.vue

@@ -301,6 +301,7 @@ Just set the `pinned` prop.
 				:class="{
 					'app-navigation-entry--editing': editingActive,
 					'app-navigation-entry--deleted': undo,
+					'app-navigation-entry--legacy': isLegacy34,
 					active: (to && isActive) || active,
 				}"
 				class="app-navigation-entry">
@@ -369,7 +370,7 @@ Just set the `pinned` prop.
 						:boundaries-element="actionsBoundariesElement"
 						:placement="menuPlacement"
 						:open="menuOpen"
-						:type="(to && isActive) || active ? 'tertiary-on-primary' : 'tertiary'"
+						type="tertiary"
 						:force-menu="forceMenu"
 						:default-icon="menuIcon"
 						@update:open="onMenuToggle">
@@ -424,6 +425,7 @@ import NcInputConfirmCancel from './NcInputConfirmCancel.vue'
 import { useIsMobile } from '../../composables/useIsMobile/index.ts'
 import { t } from '../../l10n.js'
 import GenRandomId from '../../utils/GenRandomId.js'
+import { isLegacy34 } from '../../utils/legacy.ts'
 import NcActionButton from '../NcActionButton/index.js'
 import NcActions from '../NcActions/index.js'
 import NcLoadingIcon from '../NcLoadingIcon/index.js'
@@ -652,6 +654,7 @@ export default {
 	setup() {
 		return {
 			isMobile: useIsMobile(),
+			isLegacy34,
 		}
 	},
 

src/components/NcAppNavigationItem/NcAppNavigationIconCollapsible.vue

@@ -12,7 +12,7 @@
 </docs>
 
 <template>
-	<div class="app-navigation-input-confirm">
+	<div class="app-navigation-input-confirm" :class="{ 'app-navigation-input-confirm--legacy': isLegacy34 }">
 		<form
 			@submit.prevent="confirm"
 			@keydown.esc.exact.stop.prevent="cancel"
@@ -51,6 +51,7 @@
 import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
 import Close from 'vue-material-design-icons/Close.vue'
 import { t } from '../../l10n.js'
+import { isLegacy34 } from '../../utils/legacy.ts'
 import NcButton from '../NcButton/index.js'
 
 export default {
@@ -62,6 +63,10 @@ export default {
 		Close,
 	},
 
+	setup() {
+		return { isLegacy34 }
+	},
+
 	props: {
 		/**
 		 * If this element is used on a primary element set to true for primary styling.
@@ -156,5 +161,25 @@ $input-margin: 5px;
 			border-color: var(--color-primary-element);
 		}
 	}
+
+	// New design (NC34+): square confirm/cancel buttons with consistent gaps.
+	&:not(&--legacy) {
+		form {
+			align-items: center;
+			gap: $input-margin;
+			padding-inline-end: $input-margin;
+		}
+
+		.app-navigation-input-confirm__input {
+			margin-inline-end: 0 !important;
+		}
+
+		:deep(.button-vue) {
+			width: $input-height !important;
+			min-width: $input-height !important;
+			height: $input-height !important;
+			flex: 0 0 $input-height;
+		}
+	}
 }
 </style>

src/components/NcAppNavigationItem/NcAppNavigationItem.vue

@@ -423,7 +423,7 @@ td.row-size {
 </docs>
 
 <script>
-import { isLegacy32 } from '../../utils/legacy.ts'
+import { isLegacy32, isLegacy34 } from '../../utils/legacy.ts'
 import { logger } from '../../utils/logger.ts'
 import { useNcFormBox } from '../NcFormBox/useNcFormBox.ts'
 
@@ -728,6 +728,7 @@ export default {
 						'button-vue--icon-and-text': hasIcon && hasText,
 						[`button-vue--vue-${this.realVariant}`]: this.realVariant,
 						'button-vue--legacy': isLegacy32,
+						'button-vue--legacy34': isLegacy34,
 						'button-vue--tertiary': this.isTertiary,
 						'button-vue--wide': this.wide,
 						[`button-vue--${this.flexAlignment}`]: this.flexAlignment !== 'center',
@@ -1007,6 +1008,12 @@ export default {
 		}
 	}
 
+	&--tertiary:not(#{&}--legacy34) {
+		&:hover:not(:disabled) {
+			background-color: color-mix(in srgb, var(--color-primary-element) 8%, transparent);
+		}
+	}
+
 	// Tertiary, no background
 	&--vue-tertiary-no-background {
 		&:hover:not(:disabled) {

src/components/NcAppNavigationItem/NcInputConfirmCancel.vue

@@ -54,7 +54,10 @@ It also will set the skip content buttons needed for accessibility.
 </docs>
 
 <template>
-	<div id="content-vue" class="content" :class="`app-${appName.toLowerCase()}`">
+	<div
+		id="content-vue"
+		class="content"
+		:class="[`app-${appName.toLowerCase()}`, { 'content--legacy': isLegacy34 }]">
 		<!-- TODO: with vue3 the `selector` attribute needs to be changed to `to="#skip-actions"` -->
 		<Teleport selector="#skip-actions">
 			<div class="vue-skip-actions__container">
@@ -99,6 +102,7 @@ import NcButton from '../NcButton/NcButton.vue'
 import NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'
 import { useIsMobile } from '../../composables/useIsMobile/index.ts'
 import { t } from '../../l10n.js'
+import { isLegacy34 } from '../../utils/legacy.ts'
 import contentSvg from './content-selected.svg?raw'
 import navigationSvg from './navigation-selected.svg?raw'
 
@@ -133,6 +137,7 @@ export default {
 		const isMobile = useIsMobile()
 		return {
 			isMobile,
+			isLegacy34,
 		}
 	},
 
@@ -185,6 +190,8 @@ export default {
 </script>
 
 <style lang="scss">
+@use '../../assets/variables.scss' as *;
+
 // Remove server stylings and add a backdrop
 #skip-actions.vue-skip-actions:focus-within {
 	top: 0!important;
@@ -194,6 +201,15 @@ export default {
 	padding: var(--body-container-margin)!important;
 	backdrop-filter: brightness(50%);
 }
+
+// New design (NC34+): divider only when an open navigation is present.
+@media only screen and (min-width: $breakpoint-mobile) {
+	.content:not(.content--legacy) .app-navigation:not(.app-navigation--close) ~ .app-content {
+		border-inline-start: 1px solid var(--color-border);
+		border-start-start-radius: var(--body-container-radius);
+		border-end-start-radius: var(--body-container-radius);
+	}
+}
 </style>
 
 <style lang="scss" scoped>
@@ -243,6 +259,14 @@ export default {
 	overflow: hidden;
 	padding: 0;
 
+	// New design (NC34+): wrapper carries the frosted chrome so nav and
+	// AppContent rounded-edge cutouts share one surface.
+	&:not(&--legacy) {
+		background-color: var(--color-main-background-blur, var(--color-main-background));
+		backdrop-filter: var(--filter-background-blur, none);
+		-webkit-backdrop-filter: var(--filter-background-blur, none);
+	}
+
 	&:not(.with-sidebar--full) {
 		position: fixed;
 	}

src/components/NcButton/NcButton.vue

@@ -3,5 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-const version = window.OC?.config?.version?.split('.')[0] || '32'
-export const isLegacy32 = Number.parseInt(version) < 32
+const version = window.OC?.config?.version?.split('.')[0] || '34'
+const major = Number.parseInt(version)
+export const isLegacy32 = major < 32
+export const isLegacy34 = major < 34