From 5afc8611ff77bd04c5e3fa2f2a18268783b077e8 Mon Sep 17 00:00:00 2001 From: nfebe Date: Tue, 2 Jun 2026 16:29:26 +0100 Subject: [PATCH 1/3] fix(NcAppSettingsDialog): Animate sidebar and align selection pill The dialog's navigation sidebar now mirrors the main app navigation: - Hovering an item and switching the selected item animate smoothly instead of snapping. - The selection pill matches the regular navigation height, so it no longer clips into the rounded corners of the item. Refs #8526 Signed-off-by: nfebe --- .../NcAppSettingsDialog/NcAppSettingsDialog.vue | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue b/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue index f4a8ed0353..2d0a77bcab 100644 --- a/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue +++ b/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue @@ -342,6 +342,7 @@ $content-inset: calc(3 * var(--default-grid-baseline)); background-color: transparent; border: none; color: var(--color-main-text); + transition: background-color var(--animation-quick, 200ms) ease-in-out; &:hover, &:focus-visible { @@ -364,11 +365,12 @@ $content-inset: calc(3 * var(--default-grid-baseline)); &::before { content: ''; position: absolute; - inset-block: var(--default-grid-baseline); + 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-settings-pill-in var(--animation-quick, 200ms) ease-out; } } @@ -475,6 +477,17 @@ $content-inset: calc(3 * var(--default-grid-baseline)); } } } + +@keyframes nc-settings-pill-in { + from { + transform: scaleY(0); + opacity: 0; + } + to { + transform: scaleY(1); + opacity: 1; + } +} From 425e7abbc15bab88ff77fa9ace2262a57b2fbcef Mon Sep 17 00:00:00 2001 From: nfebe Date: Tue, 2 Jun 2026 16:30:33 +0100 Subject: [PATCH 2/3] fix(NcAppSettingsDialog): Give the close button a background The close button now sits on a tinted surface, so content scrolling underneath no longer bleeds through behind it. Refs #8526 Signed-off-by: nfebe --- .../NcAppSettingsDialog/NcAppSettingsDialog.vue | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue b/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue index 2d0a77bcab..465754dced 100644 --- a/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue +++ b/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue @@ -278,6 +278,15 @@ $content-inset: calc(3 * var(--default-grid-baseline)); max-width: 900px; } + :deep(.modal-container__close) { + background-color: var(--color-primary-element-light) !important; + + &:hover, + &:focus-visible { + background-color: var(--color-primary-element-light-hover) !important; + } + } + :deep(.dialog__name) { position: absolute; width: 1px; From 783dd8c3832c0f80167e7394e6cc3cf5feabb75d Mon Sep 17 00:00:00 2001 From: nfebe Date: Tue, 2 Jun 2026 17:11:40 +0100 Subject: [PATCH 3/3] fix(NcAppNavigationItem): Polish active collapse chevron on new design On the NC 34+ design, the collapse chevron of an active item with sub-sections was rendering white on a lightly tinted background and its hover state inherited legacy colors. The parent now forces the chevron icon to use the main text color so it stays readable, and the chevron's legacy hover backgrounds are scoped to legacy only, so on the new design the chevron picks up the tertiary button hover tint and looks consistent across active and idle items. Refs #8526 Signed-off-by: nfebe --- src/assets/NcAppNavigationItem.scss | 4 ++++ .../NcAppNavigationItem/NcAppNavigationIconCollapsible.vue | 4 ++-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/assets/NcAppNavigationItem.scss b/src/assets/NcAppNavigationItem.scss index 38e42c383e..d39b040a17 100644 --- a/src/assets/NcAppNavigationItem.scss +++ b/src/assets/NcAppNavigationItem.scss @@ -47,6 +47,10 @@ } } + :deep(.icon-collapse) { + color: var(--color-main-text) !important; + } + &:not(.app-navigation-entry--editing)::before { content: ''; position: absolute; diff --git a/src/components/NcAppNavigationItem/NcAppNavigationIconCollapsible.vue b/src/components/NcAppNavigationItem/NcAppNavigationIconCollapsible.vue index 7df8e34a25..c8890390a7 100644 --- a/src/components/NcAppNavigationItem/NcAppNavigationIconCollapsible.vue +++ b/src/components/NcAppNavigationItem/NcAppNavigationIconCollapsible.vue @@ -87,10 +87,10 @@ export default { inset-inline-end: 0; // the whole navigation item is hovered thus will have the hover color - to distinguish we need to set a different color here. - &:hover { + &.button-vue--legacy34:hover { background-color: var(--color-background-dark) !important; } - &--active:hover { + &--active.button-vue--legacy34:hover { background-color: var(--color-primary-element) !important; } }