From 94a1ce0c0d8fff6cb292097ae11ca450f3f990fc Mon Sep 17 00:00:00 2001 From: Davide Negretti Date: Thu, 23 Nov 2023 19:03:03 +0100 Subject: [PATCH] [DURACOM-195] Header, navbar, and sidebar refactoring --- .../admin-sidebar-section.component.html | 43 ++-- .../admin-sidebar-section.component.ts | 8 + .../admin-sidebar.component.html | 99 ++++---- .../admin-sidebar.component.scss | 231 ++++++++++-------- .../admin-sidebar/admin-sidebar.component.ts | 20 +- ...dable-admin-sidebar-section.component.html | 54 ++-- ...dable-admin-sidebar-section.component.scss | 36 ++- ...andable-admin-sidebar-section.component.ts | 25 +- .../expandable-navbar-section.component.html | 26 +- .../expandable-navbar-section.component.scss | 40 +-- .../navbar-section.component.html | 6 +- .../navbar-section.component.scss | 8 +- src/app/navbar/navbar.component.html | 4 +- src/app/navbar/navbar.component.scss | 13 +- src/app/root/root.component.html | 4 +- src/app/root/root.component.ts | 13 +- src/app/shared/animations/slide.ts | 53 ++-- .../external-link-menu-item.component.html | 3 +- .../external-link-menu-item.component.ts | 3 +- .../menu-item/link-menu-item.component.html | 3 +- .../menu-item/link-menu-item.component.ts | 3 +- .../menu/menu-item/menu-item.component.scss | 5 + .../onclick-menu-item.component.html | 6 +- .../menu-item/onclick-menu-item.component.ts | 2 +- .../menu-item/text-menu-item.component.html | 2 +- .../menu-item/text-menu-item.component.ts | 1 + .../system-wide-alert-banner.component.html | 2 +- src/assets/i18n/en.json5 | 2 + src/styles/_bootstrap_variables.scss | 3 - src/styles/_custom_variables.scss | 20 +- src/styles/_global-styles.scss | 5 - src/styles/_mixins.scss | 2 +- .../header-navbar-wrapper.component.html | 8 +- .../header-navbar-wrapper.component.scss | 81 +++++- .../header-navbar-wrapper.component.ts | 2 + .../dspace/app/header/header.component.html | 34 +-- .../dspace/app/header/header.component.scss | 29 +-- .../dspace/app/header/header.component.ts | 11 +- .../dspace/app/navbar/navbar.component.html | 34 +-- .../dspace/app/navbar/navbar.component.scss | 64 +---- .../styles/_theme_css_variable_overrides.scss | 20 +- 41 files changed, 558 insertions(+), 470 deletions(-) create mode 100644 src/app/shared/menu/menu-item/menu-item.component.scss diff --git a/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html b/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html index 7f1e8716ba5..a158dcbbdee 100644 --- a/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html +++ b/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html @@ -1,23 +1,22 @@ -
- -
- +
  • + +
    + +
    +
    +
    + {{itemModel.text | translate}}
    -
    -
    - - {{itemModel.text | translate}} - -
    -
    -     -
    +
    • + + diff --git a/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts b/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts index b195526d1c0..51a0902f61b 100644 --- a/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts +++ b/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts @@ -52,4 +52,12 @@ export class AdminSidebarSectionComponent extends MenuSectionComponent implement this.router.navigate(this.itemModel.link); } } + + adminMenuSectionId(sectionId: string) { + return `admin-menu-section-${sectionId}`; + } + + adminMenuSectionTitleId(sectionId: string) { + return `admin-menu-section-${sectionId}-title`; + } } diff --git a/src/app/admin/admin-sidebar/admin-sidebar.component.html b/src/app/admin/admin-sidebar/admin-sidebar.component.html index fe7e5595ab0..e793fdd32f7 100644 --- a/src/app/admin/admin-sidebar/admin-sidebar.component.html +++ b/src/app/admin/admin-sidebar/admin-sidebar.component.html @@ -1,55 +1,62 @@ - diff --git a/src/app/admin/admin-sidebar/admin-sidebar.component.scss b/src/app/admin/admin-sidebar/admin-sidebar.component.scss index 5ed0142c7f9..b5d29953cae 100644 --- a/src/app/admin/admin-sidebar/admin-sidebar.component.scss +++ b/src/app/admin/admin-sidebar/admin-sidebar.component.scss @@ -1,123 +1,140 @@ :host { - --ds-icon-z-index: 10; - - left: 0; - top: 0; - height: 100vh; - flex: 1 1 auto; - nav { - background-color: var(--ds-admin-sidebar-bg); - height: 100%; - flex-direction: column; - > div { - width: 100%; - &.sidebar-top-level-items { - flex: 1; - overflow: auto; - @include dark-scrollbar; - } + + /* SIDEBAR SIZE AND POSITION */ + + /* Sidebar hierarchy: + § nav + § .sidebar-full-width-container (any OPTIONAL full width element with no horizontal margin or padding - it can be nested) + § .sidebar-section-wrapper + § .sidebar-fixed-element-wrapper + § .sidebar-collapsible-element-outer-wrapper + § .sidebar-collapsible-element-inner-wrapper + § .sidebar-item + */ + + // Sidebar position + position: fixed; + left: 0; + top: 0; + z-index: var(--ds-sidebar-z-index); + + // Sidebar size and content position + nav#admin-sidebar { + + max-width: var(--ds-admin-sidebar-fixed-element-width); // Sidebar collapsed width + + display: flex; + flex-direction: column; + flex-wrap: nowrap; + + div#sidebar-top-level-items-container { + flex: 1 1 auto; // Fill available vertical space + overflow-x: hidden; + overflow-y: auto; + @include dark-scrollbar; + } + + img#admin-sidebar-logo { + width: 20px; + } + + ::ng-deep { + + // This class must be applied to any nested wrapper containing a sidebar section + .sidebar-full-width-container { + width: 100%; + padding-left: 0 !important; + padding-right: 0 !important; + margin-left: 0 !important; + margin-right: 0 !important; + } + + // This class must be applied to the innermost block element containing a section or subsection link + // (it can be applied together with `sidebar-collapsible-element-inner-wrapper`) + .sidebar-item { + padding-top: 0.75rem; + padding-bottom: 0.75rem; + } + + // These classes handle the collapsing behavior + .sidebar-section-wrapper { + + display: flex; + flex-direction: row; + flex-wrap: nowrap; + align-items: stretch; + + // These elements have fixed width and determine the width of the collapsed sidebar + & > .sidebar-fixed-element-wrapper { + min-width: var(--ds-admin-sidebar-fixed-element-width); + flex: 1 1 auto; // Fill available space + + // Align the icons + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; } - &.inactive ::ng-deep .sidebar-collapsible { - margin-left: calc(-1 * var(--ds-sidebar-items-width)); + & > .sidebar-collapsible-element-outer-wrapper { + display: flex; + flex-wrap: wrap; + justify-content: flex-end; // make inner wrapper slide on the left when collapsing + max-width: calc(100% - var(--ds-admin-sidebar-fixed-element-width)); // fill available space + padding-left: var(--ds-dark-scrollbar-width); // leave room for scrollbar + overflow-x: hidden; // hide inner wrapper when sidebar is collapsed + + // These elements have fixed width and slide on the left when the sidebar is collapsed + // Their content should fill all available space + & > .sidebar-collapsible-element-inner-wrapper { + min-width: calc(var(--ds-admin-sidebar-collapsible-element-width) - var(--ds-dark-scrollbar-width)); + height: 100%; + padding-right: 16px !important; + } } + } - .navbar-nav { - .admin-menu-header { - background-color: var(--ds-admin-sidebar-header-bg); + } - .sidebar-section { - background-color: inherit; - } + // Set here any style that depends on the sidebar status + &.collapsed, &.transitioning, &.expanded { } - .logo-wrapper { - img { - height: 20px; - } - } - .section-header-text { - line-height: 1.5; - } + } - .navbar-brand { - margin-right: 0; - } + /* SIDEBAR STYLE */ - } - } + nav#admin-sidebar { + background-color: var(--ds-admin-sidebar-bg); - ::ng-deep { - .navbar-nav { - .sidebar-section { - display: flex; - align-content: stretch; - background-color: var(--ds-admin-sidebar-bg); - overflow-x: visible; - - .nav-item { - padding-top: var(--bs-spacer); - padding-bottom: var(--bs-spacer); - background-color: inherit; - - &:focus-visible { - // since links fill the whole sidebar, we _inset_ the outline - outline-offset: -4px; - - // replace padding with margins so it doesn't extend over the :focus-visible outline - // → can't remove the padding altogether; the icon needs to fill out - // the collapsed width of the sidebar for the slide animation to look decent. - .shortcut-icon { - padding-left: 0; - padding-right: 0; - margin-left: var(--ds-icon-padding); - margin-right: var(--ds-icon-padding); - } - .logo-wrapper { - margin-right: var(--bs-navbar-padding-x) !important; - } - .navbar-brand { - padding-top: 0; - padding-bottom: 0; - margin-top: var(--bs-navbar-brand-padding-y); - margin-bottom: var(--bs-navbar-brand-padding-y); - } - } - } - - .shortcut-icon { - background-color: inherit; - padding-left: var(--ds-icon-padding); - padding-right: var(--ds-icon-padding); - z-index: var(--ds-icon-z-index); - align-self: baseline; - } - - .sidebar-collapsible { - padding-left: 0; - padding-right: var(--bs-spacer); - width: var(--ds-sidebar-items-width); - position: relative; - .toggle { - width: 100%; - } - - ul { - padding-top: var(--bs-spacer); - - li a { - padding-left: var(--bs-spacer); - } - } - } - - &.active > .sidebar-collapsible > .nav-link { - color: var(--bs-navbar-dark-active-color); - } - } - } + ::ng-deep { + + color: white; + + // Set here the style of the *-menu-item nested components + .ds-menu-item { + } + + a { + color: var(--ds-admin-sidebar-link-color); + text-decoration: none; + + &:hover, &:focus { + color: var(--ds-admin-sidebar-link-hover-color); } + } + } + div#sidebar-header-container { + background-color: var(--ds-admin-sidebar-header-bg); + .sidebar-fixed-element-wrapper { + background-color: var(--ds-admin-sidebar-header-bg); + } } + div#sidebar-collapse-toggle-container { + .sidebar-collapsible-element-inner-wrapper { + } + } + } } diff --git a/src/app/admin/admin-sidebar/admin-sidebar.component.ts b/src/app/admin/admin-sidebar/admin-sidebar.component.ts index 26ded965d4d..91ae86663a4 100644 --- a/src/app/admin/admin-sidebar/admin-sidebar.component.ts +++ b/src/app/admin/admin-sidebar/admin-sidebar.component.ts @@ -28,9 +28,14 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit { menuID = MenuID.ADMIN; /** - * Observable that emits the width of the collapsible menu sections + * Observable that emits the width of the sidebar when expanded */ - sidebarWidth: Observable; + expandedSidebarWidth$: Observable; + + /** + * Observable that emits the width of the sidebar when collapsed + */ + collapsedSidebarWidth$: Observable; /** * Is true when the sidebar is open, is false when the sidebar is animating or closed @@ -44,6 +49,12 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit { */ sidebarClosed = !this.sidebarOpen; // Closed in UI, animation finished + /** + * Is true when the sidebar is opening or closing + * @type {boolean} + */ + sidebarTransitioning = !this.sidebarOpen; // Animation in progress + /** * Emits true when either the menu OR the menu's preview is expanded, else emits false */ @@ -69,7 +80,8 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit { */ ngOnInit(): void { super.ngOnInit(); - this.sidebarWidth = this.variableService.getVariable('--ds-sidebar-items-width'); + this.expandedSidebarWidth$ = this.variableService.getVariable('--ds-admin-sidebar-total-width'); + this.collapsedSidebarWidth$ = this.variableService.getVariable('--ds-admin-sidebar-fixed-element-width'); this.authService.isAuthenticated() .subscribe((loggedIn: boolean) => { if (loggedIn) { @@ -134,6 +146,7 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit { * @param event The animation event */ startSlide(event: any): void { + this.sidebarTransitioning = true; if (event.toState === 'expanded') { this.sidebarClosed = false; } else if (event.toState === 'collapsed') { @@ -146,6 +159,7 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit { * @param event The animation event */ finishSlide(event: any): void { + this.sidebarTransitioning = false; if (event.fromState === 'expanded') { this.sidebarClosed = true; } else if (event.fromState === 'collapsed') { diff --git a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html index 1f4666bbd08..4478244caee 100644 --- a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html +++ b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html @@ -1,37 +1,47 @@ -