From 7abc5a7ac90ad505791d2e6690a4ac40dac4b74b Mon Sep 17 00:00:00 2001 From: Aleksei Efremov Date: Tue, 9 Apr 2024 14:42:16 +0300 Subject: [PATCH 1/2] Adapt files sidebar navigation for v28 --- css/components/ncappnavigation.scss | 128 ++++++++++++++++------------ 1 file changed, 72 insertions(+), 56 deletions(-) diff --git a/css/components/ncappnavigation.scss b/css/components/ncappnavigation.scss index c338520a..30854911 100644 --- a/css/components/ncappnavigation.scss +++ b/css/components/ncappnavigation.scss @@ -11,7 +11,7 @@ } } -#app-navigation-vue.app-navigation { +.app-navigation { border-right: 1px solid var(--telekom-color-ui-faint); // prevent mobile navigation toggle button to visually overlap underlying content @@ -23,73 +23,89 @@ } } - .app-navigation__content { - // remove gaps between navigation items - .app-navigation__list { - gap: var(--telekom-spacing-composition-space-03); - padding: 4rem 1.5rem 1.5rem; + // remove gaps between navigation items + nav.app-navigation__content ul.app-navigation__list { + gap: var(--telekom-spacing-composition-space-03); + padding: 4rem 1.5rem 1.5rem; - [data-cy-files-navigation-item="recent"], - [data-cy-files-navigation-item="shareoverview"] { - display: none; - } + [data-cy-files-navigation-item="recent"] { + display: none; + } - // default navbar link styling - .app-navigation-entry { - border-radius: var(--telekom-radius-standard); - font: var(--telekom-text-style-ui-bold); - transition: none; - .app-navigation-entry-link { - padding: 0.25rem; - } - &-icon { + // default navbar link styling + .app-navigation-entry { + border-radius: var(--telekom-radius-standard); + font: var(--telekom-text-style-ui-bold); + transition: none; + .app-navigation-entry-link { + padding: 0.25rem; + .app-navigation-entry-icon { background-size: 24px; background-position: center; } - &:hover, &.active { - background-color: var(--nmc-color-background-hover); + } + &:hover, &.active, &.active:hover { + background-color: var(--nmc-color-background-hover) !important; + } + // do not pin app navigation entries to the bottom + &--pinned { + margin-top: initial; + margin-bottom: auto; + } + + // active link styling + &.active { + &::before { + background-color: var(--telekom-color-primary-standard); } - // do not pin app navigation entries to the bottom - &--pinned { - margin-top: initial; - margin-bottom: auto; + span { + color: var(--telekom-color-text-and-icon-primary-standard); } - - // active link styling - &.active { - &::before { - background-color: var(--telekom-color-primary-standard); - } - span { - color: var(--telekom-color-text-and-icon-primary-standard); - } - .app-navigation-entry-icon { - filter: var(--nmc-color-icon) - } + .app-navigation-entry-icon { + filter: var(--nmc-color-icon) } + } - // on hover link styling - &:hover { - span { - color: var(--telekom-color-text-and-icon-primary-standard); - } - .app-navigation-entry-icon { - filter: var(--nmc-color-icon) - } + // on hover link styling + &:hover { + span { + color: var(--telekom-color-text-and-icon-primary-standard); + } + .app-navigation-entry-icon { + filter: var(--nmc-color-icon) } + } + + // hide Collapse buttons + &--collapsible button.icon-collapse{ + display: none; + } - // hide Collapse buttons - &--collapsible button.icon-collapse{ + &--collapsible[data-cy-files-navigation-item=shareoverview] { + // hide 'Shares' link + > div.app-navigation-entry { display: none; } + + .app-navigation-entry { + padding-left: 0px; + } + + // hide every subentry except 'Shared with you' and 'Shared with others' + ul.app-navigation-entry__children { + display: flex; + li:not([data-cy-files-navigation-item=sharingin]):not([data-cy-files-navigation-item=sharingout]) { + display: none; + } + } } } + } - .app-navigation-entry__settings { - // hide nextcloud quota and files settings links - .app-navigation-entry-wrapper { - display: none; - } + &__content &-entry__settings { + // hide nextcloud quota and files settings links + .app-navigation-entry-wrapper { + display: none; } } } @@ -101,19 +117,19 @@ display: none; } - .app-navigation-entry-icon.nav-icon-favorites { + [data-cy-files-navigation-item=favorites] .app-navigation-entry-icon { background-image: var(--icon-star-dark); } - .app-navigation-entry-icon.nav-icon-files { + [data-cy-files-navigation-item=files] .app-navigation-entry-icon { background-image: var(--icon-folder-dark); } - .app-navigation-entry-icon.nav-icon-sharingout { + [data-cy-files-navigation-item=shareoverview] [data-cy-files-navigation-item=sharingout] .app-navigation-entry-icon { background-image: var(--icon-share-dark); } - .app-navigation-entry-icon.nav-icon-sharingin { + [data-cy-files-navigation-item=shareoverview] [data-cy-files-navigation-item=sharingin] .app-navigation-entry-icon { background-image: var(--icon-attachment-dark); } From 01410039a1c4213d66b98e6eb35df5377bcd9cdd Mon Sep 17 00:00:00 2001 From: Aleksei Efremov Date: Wed, 10 Apr 2024 12:52:32 +0300 Subject: [PATCH 2/2] Fix sidebar view for photos --- css/apps/photos.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/css/apps/photos.scss b/css/apps/photos.scss index 6d7a4bf3..e77964ec 100644 --- a/css/apps/photos.scss +++ b/css/apps/photos.scss @@ -302,7 +302,7 @@ } } - .app-navigation__content { + &.app-navigation__content { ul.app-navigation__list { padding: 4rem 1.5rem 1.5rem; @@ -370,7 +370,7 @@ } // contains 'Photos settings' button - &>li.app-navigation-entry-wrapper { + .app-navigation__footer { display: none; } }