hazza/yel-dspace-angular
1
0
Fork 0
forked from hazza/dspace-angular
Code Pull Requests Activity

Merge pull request #1221 from atmire/move-header-changes-to-dspace-theme

Browse Source 
Move header changes to dspace theme
This commit is contained in:
Tim Donohue
2021-06-22 09:15:22 -05:00
committed by GitHub
parent e546a4f0b5 b556234207
commit 3d4f493f9f
37 changed files with 381 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
e2e/protractor.conf.js
View File

@@ -69,7 +69,6 @@ exports.config = {
plugins: [{ plugins: [{
path: '../node_modules/protractor-istanbul-plugin' path: '../node_modules/protractor-istanbul-plugin'
}], }],
framework: 'jasmine', framework: 'jasmine',
jasmineNodeOpts: { jasmineNodeOpts: {
showColors: true, showColors: true,
@@ -85,7 +84,7 @@ exports.config = {
onPrepare: function () { onPrepare: function () {
jasmine.getEnv().addReporter(new SpecReporter({ jasmine.getEnv().addReporter(new SpecReporter({
spec: { spec: {
displayStacktrace: true displayStacktrace: 'pretty'
} }
})); }));
} }

1
src/app/+home-page/home-page-routing.module.ts
View File

@@ -20,6 +20,7 @@ import { ThemedHomePageComponent } from './themed-home-page.component';
id: 'statistics_site', id: 'statistics_site',
active: true, active: true,
visible: true, visible: true,
index: 2,
model: { model: {
type: MenuItemType.LINK, type: MenuItemType.LINK,
text: 'menu.section.statistics', text: 'menu.section.statistics',

2
src/app/app.module.ts
View File

@@ -46,6 +46,7 @@ import { ThemedForbiddenComponent } from './forbidden/themed-forbidden.component
import { ThemedHeaderComponent } from './header/themed-header.component'; import { ThemedHeaderComponent } from './header/themed-header.component';
import { ThemedFooterComponent } from './footer/themed-footer.component'; import { ThemedFooterComponent } from './footer/themed-footer.component';
import { ThemedBreadcrumbsComponent } from './breadcrumbs/themed-breadcrumbs.component'; import { ThemedBreadcrumbsComponent } from './breadcrumbs/themed-breadcrumbs.component';
import { ThemedHeaderNavbarWrapperComponent } from './header-nav-wrapper/themed-header-navbar-wrapper.component';
export function getBase() { export function getBase() {
return environment.ui.nameSpace; return environment.ui.nameSpace;
@@ -129,6 +130,7 @@ const DECLARATIONS = [
HeaderComponent, HeaderComponent,
ThemedHeaderComponent, ThemedHeaderComponent,
HeaderNavbarWrapperComponent, HeaderNavbarWrapperComponent,
ThemedHeaderNavbarWrapperComponent,
AdminSidebarComponent, AdminSidebarComponent,
AdminSidebarSectionComponent, AdminSidebarSectionComponent,
ExpandableAdminSidebarSectionComponent, ExpandableAdminSidebarSectionComponent,

109
src/app/footer/footer.component.html
View File

@@ -1,72 +1,79 @@
<footer class="top-footer text-lg-start"> <footer class="text-lg-start">
<!-- Grid container --> <div *ngIf="showTopFooter" class="top-footer">
<div *ngIf="showTopFooter" class="container p-4"> <!-- Grid container -->
<!--Grid row--> <div class=" container p-4">
<div class="row"> <!--Grid row-->
<div class="row">
<!--Grid column--> <!--Grid column-->
<div class="col-lg-4 col-md-6 mb-4 mb-lg-0"> <div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
<h5 class="text-uppercase">Footer Content</h5> <h5 class="text-uppercase">Footer Content</h5>
<ul class="list-unstyled mb-0"> <ul class="list-unstyled mb-0">
<li> <li>
<a routerLink="./" class="">Lorem ipsum</a> <a routerLink="./" class="">Lorem ipsum</a>
</li> </li>
<li> <li>
<a routerLink="./" class="">Ut facilisis</a> <a routerLink="./" class="">Ut facilisis</a>
</li> </li>
<li> <li>
<a routerLink="./" class="">Aenean sit</a> <a routerLink="./" class="">Aenean sit</a>
</li> </li>
</ul> </ul>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
<h5 class="text-uppercase">Footer Content</h5>
<ul class="list-unstyled mb-0">
<li>
<a routerLink="./" class="">Suspendisse potenti</a>
</li>
</ul>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-12 mb-4 mb-md-0">
<h5 class="text-uppercase">Footer Content</h5>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste atque ea quis
molestias. Fugiat pariatur maxime quis culpa corporis vitae repudiandae aliquam
voluptatem veniam, est atque cumque eum delectus sint!
</p>
</div>
<!--Grid column-->
</div> </div>
<!--Grid column--> <!--Grid row-->
<!--Grid column-->
<div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
<h5 class="text-uppercase">Footer Content</h5>
<ul class="list-unstyled mb-0">
<li>
<a routerLink="./" class="">Suspendisse potenti</a>
</li>
</ul>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-12 mb-4 mb-md-0">
<h5 class="text-uppercase">Footer Content</h5>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste atque ea quis
molestias. Fugiat pariatur maxime quis culpa corporis vitae repudiandae aliquam
voluptatem veniam, est atque cumque eum delectus sint!
</p>
</div>
<!--Grid column-->
</div> </div>
<!--Grid row-->
</div> </div>
<!-- Grid container --> <!-- Grid container -->
<!-- Copyright --> <!-- Copyright -->
<div class="footer p-1 d-flex justify-content-center align-items-center text-white"> <div class="bottom-footer p-1 d-flex justify-content-center align-items-center text-white">
<div class="content-container"> <div class="content-container">
<p class="m-0"> <p class="m-0">
<a class="text-white" href="http://www.dspace.org/">{{ 'footer.link.dspace' | translate}}</a> <a class="text-white"
href="http://www.dspace.org/">{{ 'footer.link.dspace' | translate}}</a>
{{ 'footer.copyright' | translate:{year: dateObj | date:'y'} }} {{ 'footer.copyright' | translate:{year: dateObj | date:'y'} }}
<a class="text-white" href="https://www.lyrasis.org/">{{ 'footer.link.lyrasis' | translate}}</a> <a class="text-white"
href="https://www.lyrasis.org/">{{ 'footer.link.lyrasis' | translate}}</a>
</p> </p>
<ul class="footer-info list-unstyled small d-flex justify-content-center mb-0"> <ul class="footer-info list-unstyled small d-flex justify-content-center mb-0">
<li> <li>
<a class="text-white" href="#" (click)="showCookieSettings()">{{ 'footer.link.cookies' | translate}}</a> <a class="text-white" href="#"
(click)="showCookieSettings()">{{ 'footer.link.cookies' | translate}}</a>
</li> </li>
<li> <li>
<a class="text-white" routerLink="info/privacy">{{ 'footer.link.privacy-policy' | translate}}</a> <a class="text-white"
routerLink="info/privacy">{{ 'footer.link.privacy-policy' | translate}}</a>
</li> </li>
<li> <li>
<a class="text-white" routerLink="info/end-user-agreement">{{ 'footer.link.end-user-agreement' | translate}}</a> <a class="text-white"
routerLink="info/end-user-agreement">{{ 'footer.link.end-user-agreement' | translate}}</a>
</li> </li>
</ul> </ul>
</div> </div>

19
src/app/footer/footer.component.scss
View File

@@ -1,11 +1,10 @@
:host { :host {
footer {
.top-footer { background-color: var(--ds-footer-bg);
background-color: var(--ds-top-footer-bg);
border-top: var(--ds-footer-border);
text-align: center; text-align: center;
padding: var(--ds-footer-padding);
z-index: var(--ds-footer-z-index); z-index: var(--ds-footer-z-index);
border-top: var(--ds-footer-border);
padding: var(--ds-footer-padding);
p { p {
margin: 0; margin: 0;
@@ -15,12 +14,18 @@
height: var(--ds-footer-logo-height); height: var(--ds-footer-logo-height);
} }
.footer {
background-color: var(--ds-footer-bg);
.top-footer {
background-color: var(--ds-top-footer-bg);
padding: var(--ds-footer-padding);
margin: calc(var(--ds-footer-padding) * -1);
}
.bottom-footer {
ul { ul {
li { li {
display: inline-flex; display: inline-flex;
a { a {
padding: 0 calc(var(--bs-spacer) / 2); padding: 0 calc(var(--bs-spacer) / 2);
color: inherit color: inherit

1
src/app/header-nav-wrapper/header-navbar-wrapper.component.html
View File

@@ -1,3 +1,4 @@
<div [ngClass]="{'open': !(isNavBarCollapsed | async)}"> <div [ngClass]="{'open': !(isNavBarCollapsed | async)}">
<ds-themed-header></ds-themed-header> <ds-themed-header></ds-themed-header>
<ds-themed-navbar></ds-themed-navbar>
</div> </div>

4
src/app/header-nav-wrapper/header-navbar-wrapper.component.scss
View File

@@ -5,7 +5,3 @@
position: sticky; position: sticky;
} }
} }
:host {
z-index: var(--ds-nav-z-index);
}

3
src/app/header-nav-wrapper/themed-header-navbar-wrapper.component.scss Normal file
View File

@@ -0,0 +1,3 @@
:host {
z-index: var(--ds-nav-z-index);
}

25
src/app/header-nav-wrapper/themed-header-navbar-wrapper.component.ts Normal file
View File

@@ -0,0 +1,25 @@
import { Component } from '@angular/core';
import { ThemedComponent } from '../shared/theme-support/themed.component';
import { HeaderNavbarWrapperComponent } from './header-navbar-wrapper.component';
/**
* Themed wrapper for BreadcrumbsComponent
*/
@Component({
selector: 'ds-themed-header-navbar-wrapper',
styleUrls: ['./themed-header-navbar-wrapper.component.scss'],
templateUrl: '../shared/theme-support/themed.component.html',
})
export class ThemedHeaderNavbarWrapperComponent extends ThemedComponent<HeaderNavbarWrapperComponent> {
protected getComponentName(): string {
return 'HeaderNavbarWrapperComponent';
}
protected importThemedComponent(themeName: string): Promise<any> {
return import(`../../themes/${themeName}/app/header-nav-wrapper/header-navbar-wrapper.component`);
}
protected importUnthemedComponent(): Promise<any> {
return import(`./header-navbar-wrapper.component`);
}
}

41
src/app/header/header.component.html
View File

@@ -1,24 +1,23 @@
<header class="header"> <header>
<nav role="navigation" [attr.aria-label]="'nav.user.description' |translate" class="container navbar navbar-expand-md px-0"> <div class="container">
<div class="d-flex flex-grow-1"> <div class="d-flex flex-row justify-content-between">
<a class="navbar-brand m-2" routerLink="/home"> <a class="navbar-brand my-2" routerLink="/home">
<img src="assets/images/dspace-logo.svg" alt="logo"/> <img src="assets/images/dspace-logo.svg" [attr.alt]="'menu.header.image.logo' | translate"/>
</a> </a>
</div>
<div class="d-flex flex-grow-1 ml-auto justify-content-end align-items-center">
<ds-search-navbar class="navbar-search"></ds-search-navbar>
<ds-lang-switch></ds-lang-switch>
<ds-auth-nav-menu></ds-auth-nav-menu>
<ds-impersonate-navbar></ds-impersonate-navbar>
<div class="pl-2">
<button class="navbar-toggler" type="button" (click)="toggleNavbar()"
aria-controls="collapsingNav"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon fas fa-bars fa-fw" aria-hidden="true"></span>
</button>
</div>
</div>
</nav>
<ds-themed-navbar></ds-themed-navbar>
<nav role="navigation" [attr.aria-label]="'nav.user.description' | translate" class="navbar navbar-light navbar-expand-md flex-shrink-0 px-0">
<ds-search-navbar></ds-search-navbar>
<ds-lang-switch></ds-lang-switch>
<ds-auth-nav-menu></ds-auth-nav-menu>
<ds-impersonate-navbar></ds-impersonate-navbar>
<div class="pl-2">
<button class="navbar-toggler" type="button" (click)="toggleNavbar()"
aria-controls="collapsingNav"
aria-expanded="false" [attr.aria-label]="'nav.toggle' | translate">
<span class="navbar-toggler-icon fas fa-bars fa-fw" aria-hidden="true"></span>
</button>
</div>
</nav>
</div>
</div>
</header> </header>

32
src/app/header/header.component.scss
View File

@@ -1,19 +1,23 @@
@media screen and (min-width: map-get($grid-breakpoints, md)) { .navbar-brand img {
nav.navbar { max-height: var(--ds-header-logo-height);
display: none; max-width: 100%;
} @media screen and (max-width: map-get($grid-breakpoints, sm)) {
.header { max-height: var(--ds-header-logo-height-xs);
background-color: var(--ds-header-bg);
} }
} }
.navbar-brand img {
@media screen and (max-width: map-get($grid-breakpoints, md)) {
height: var(--ds-header-logo-height-xs);
}
}
.navbar-toggler .navbar-toggler-icon { .navbar-toggler .navbar-toggler-icon {
background-image: none !important; background-image: none !important;
line-height: 1.5; line-height: 1.5;
color: var(--bs-link-color);
} }
.navbar ::ng-deep {
a {
color: var(--ds-header-icon-color);
&:hover, &focus {
color: var(--ds-header-icon-color-hover);
}
}
}

2
src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html
View File

@@ -1,4 +1,4 @@
<li class="nav-item dropdown h-100 d-flex flex-column justify-content-center" <li class="nav-item dropdown"
(mouseenter)="activateSection($event)" (mouseenter)="activateSection($event)"
(mouseleave)="deactivateSection($event)"> (mouseleave)="deactivateSection($event)">
<a href="#" class="nav-link dropdown-toggle" routerLinkActive="active" <a href="#" class="nav-link dropdown-toggle" routerLinkActive="active"

2
src/app/navbar/navbar-section/navbar-section.component.html
View File

@@ -1,4 +1,4 @@
<li class="nav-item h-100 d-flex flex-column justify-content-center"> <li class="nav-item">
<ng-container <ng-container
*ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container> *ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
</li> </li>

32
src/app/navbar/navbar.component.html
View File

@@ -1,24 +1,18 @@
<nav [ngClass]="{'open': !(menuCollapsed | async)}" <nav [ngClass]="{'open': !(menuCollapsed | async)}"
[@slideMobileNav]="!(windowService.isXsOrSm() | async) ? 'default' : ((menuCollapsed | async) ? 'collapsed' : 'expanded')" [@slideMobileNav]="!(windowService.isXsOrSm() | async) ? 'default' : ((menuCollapsed | async) ? 'collapsed' : 'expanded')"
class="navbar navbar-expand-md navbar-light p-0 navbar-container" class="navbar navbar-light navbar-expand-md p-md-0 navbar-container"
role="navigation" role="navigation" [attr.aria-label]="'nav.main.description' |translate"> role="navigation" [attr.aria-label]="'nav.main.description' | translate"> <!-- TODO remove navbar-container class when https://github.com/twbs/bootstrap/issues/24726 is fixed -->
<div class="container h-100"> <div class="container">
<a class="navbar-brand my-2" routerLink="/home"> <div class="reset-padding-md w-100">
<img src="assets/images/dspace-logo.svg" alt="logo"/> <div id="collapsingNav">
</a> <ul class="navbar-nav mr-auto shadow-none">
<ng-container *ngFor="let section of (sections | async)">
<div id="collapsingNav" class="w-100 h-100"> <ng-container
<ul class="navbar-nav me-auto mb-2 mb-lg-0 h-100"> *ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
<ng-container *ngFor="let section of (sections | async)"> </ng-container>
<ng-container </ul>
*ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container> </div>
</ng-container> </div>
</ul>
</div> </div>
<ds-search-navbar class="navbar-collapsed"></ds-search-navbar>
<ds-lang-switch class="navbar-collapsed"></ds-lang-switch>
<ds-auth-nav-menu class="navbar-collapsed"></ds-auth-nav-menu>
<ds-impersonate-navbar class="navbar-collapsed"></ds-impersonate-navbar>
</div>
</nav> </nav>

17
src/app/navbar/navbar.component.scss
View File

@@ -1,14 +1,12 @@
nav.navbar { nav.navbar {
border-top: 1px var(--ds-header-navbar-border-top-color) solid; border-bottom: 1px var(--bs-gray-400) solid;
border-bottom: 1px var(--ds-header-navbar-border-bottom-color) solid;
align-items: baseline; align-items: baseline;
color: var(--ds-header-icon-color);
} }
/** Mobile menu styling **/ /** Mobile menu styling **/
@media screen and (max-width: map-get($grid-breakpoints, md)) { @media screen and (max-width: map-get($grid-breakpoints, md)) {
.navbar { .navbar {
width: 100%; width: 100vw;
background-color: var(--bs-white); background-color: var(--bs-white);
position: absolute; position: absolute;
overflow: hidden; overflow: hidden;
@@ -31,20 +29,9 @@ nav.navbar {
@media screen and (max-width: map-get($grid-breakpoints, md)) { @media screen and (max-width: map-get($grid-breakpoints, md)) {
> .container { > .container {
padding: 0 var(--bs-spacer); padding: 0 var(--bs-spacer);
a.navbar-brand {
display: none;
}
.navbar-collapsed {
display: none;
}
} }
padding: 0; padding: 0;
} }
height: 80px;
}
a.navbar-brand img {
max-height: var(--ds-header-logo-height);
} }
.navbar-nav { .navbar-nav {

3
src/app/navbar/navbar.component.ts
View File

@@ -46,6 +46,7 @@ export class NavbarComponent extends MenuComponent {
id: `browse_global_communities_and_collections`, id: `browse_global_communities_and_collections`,
active: false, active: false,
visible: true, visible: true,
index: 0,
model: { model: {
type: MenuItemType.LINK, type: MenuItemType.LINK,
text: `menu.section.browse_global_communities_and_collections`, text: `menu.section.browse_global_communities_and_collections`,
@@ -57,11 +58,11 @@ export class NavbarComponent extends MenuComponent {
id: 'browse_global', id: 'browse_global',
active: false, active: false,
visible: true, visible: true,
index: 1,
model: { model: {
type: MenuItemType.TEXT, type: MenuItemType.TEXT,
text: 'menu.section.browse_global' text: 'menu.section.browse_global'
} as TextMenuItemModel, } as TextMenuItemModel,
index: 0
}, },
]; ];
// Read the different Browse-By types from config and add them to the browse menu // Read the different Browse-By types from config and add them to the browse menu

2
src/app/root/root.component.html
View File

@@ -4,7 +4,7 @@
value: (!(sidebarVisible | async) ? 'hidden' : (slideSidebarOver | async) ? 'shown' : 'expanded'), value: (!(sidebarVisible | async) ? 'hidden' : (slideSidebarOver | async) ? 'shown' : 'expanded'),
params: {collapsedSidebarWidth: (collapsedSidebarWidth | async), totalSidebarWidth: (totalSidebarWidth | async)} params: {collapsedSidebarWidth: (collapsedSidebarWidth | async), totalSidebarWidth: (totalSidebarWidth | async)}
}"> }">
<ds-header-navbar-wrapper></ds-header-navbar-wrapper> <ds-themed-header-navbar-wrapper></ds-themed-header-navbar-wrapper>
<ds-notifications-board <ds-notifications-board
[options]="notificationOptions"> [options]="notificationOptions">

2
src/assets/i18n/en.json5
View File

@@ -2353,6 +2353,8 @@
"nav.stop-impersonating": "Stop impersonating EPerson", "nav.stop-impersonating": "Stop impersonating EPerson",
"nav.toggle" : "Toggle navigation",
"nav.user.description" : "User profile bar", "nav.user.description" : "User profile bar",

12
src/styles/_custom_variables.scss
View File

@@ -20,7 +20,7 @@
--ds-sidebar-z-index: 20; --ds-sidebar-z-index: 20;
--ds-header-bg: #{$white}; --ds-header-bg: #{$white};
--ds-header-logo-height: 40px; --ds-header-logo-height: 50px;
--ds-header-logo-height-xs: 50px; --ds-header-logo-height-xs: 50px;
--ds-header-icon-color: #{$cyan}; --ds-header-icon-color: #{$cyan};
--ds-header-icon-color-hover: #{darken($white, 15%)}; --ds-header-icon-color-hover: #{darken($white, 15%)};
@@ -61,12 +61,12 @@
--ds-sidebar-items-width: #{$sidebar-items-width}; --ds-sidebar-items-width: #{$sidebar-items-width};
--ds-total-sidebar-width: #{$total-sidebar-width}; --ds-total-sidebar-width: #{$total-sidebar-width};
--ds-top-footer-bg: #{$gray-200} !important; --ds-top-footer-bg: #{$gray-200};
--ds-footer-bg: #{theme-color('primary')} !important; --ds-footer-bg: #{theme-color('primary')};
--ds-footer-border: 1px solid var(--bs-gray-400); --ds-footer-border: 1px solid var(--bs-gray-400);
--ds-footer-padding: 0 !important; --ds-footer-padding: 0;
--ds-footer-padding-bottom: 0 !important; --ds-footer-padding-bottom: 0;
--ds-footer-logo-height: 50px !important; --ds-footer-logo-height: 50px;
$home-news-link-color: $cyan; $home-news-link-color: $cyan;
--ds-home-news-link-color: #{$home-news-link-color}; --ds-home-news-link-color: #{$home-news-link-color};

0
src/themes/custom/app/header-nav-wrapper/header-navbar-wrapper.component.html Normal file
View File

0
src/themes/custom/app/header-nav-wrapper/header-navbar-wrapper.component.scss Normal file
View File

15
src/themes/custom/app/header-nav-wrapper/header-navbar-wrapper.component.ts Normal file
View File

@@ -0,0 +1,15 @@
import { Component } from '@angular/core';
import { HeaderNavbarWrapperComponent as BaseComponent } from '../../../../app/header-nav-wrapper/header-navbar-wrapper.component';
/**
* This component represents a wrapper for the horizontal navbar and the header
*/
@Component({
selector: 'ds-header-navbar-wrapper',
// styleUrls: ['header-navbar-wrapper.component.scss'],
styleUrls: ['../../../../app/header-nav-wrapper/header-navbar-wrapper.component.scss'],
// templateUrl: 'header-navbar-wrapper.component.html',
templateUrl: '../../../../app/header-nav-wrapper/header-navbar-wrapper.component.html',
})
export class HeaderNavbarWrapperComponent extends BaseComponent {
}

39
src/themes/custom/styles/_theme_sass_variable_overrides.scss
View File

@@ -3,14 +3,31 @@
// still uses Sass variables internally. So if you want to override bootstrap (or other sass // still uses Sass variables internally. So if you want to override bootstrap (or other sass
// variables) you can do so here. Their CSS counterparts will include the changes you make here // variables) you can do so here. Their CSS counterparts will include the changes you make here
// $blue: #007bff !default; // $font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
// $indigo: #6610f2 !default; //
// $purple: #6f42c1 !default; // $gray-base: #000 !default;
// $pink: #e83e8c !default; // $gray-900: lighten($gray-base, 13.5%) !default; // #222
// $red: #dc3545 !default; // $gray-800: lighten($gray-base, 26.6%) !default; // #444
// $orange: #fd7e14 !default; // $gray-700: lighten($gray-base, 46.6%) !default; // #777
// $yellow: #ffc107 !default; // $gray-600: lighten($gray-base, 73.3%) !default; // #bbb
// $green: #28a745 !default; // $gray-100: lighten($gray-base, 93.5%) !default; // #eee
// $teal: #20c997 !default; //
// $cyan: #17a2b8 !default; // $blue: #2B4E72 !default;
// $green: #94BA65 !default;
// $cyan: #006666 !default;
// $yellow: #ec9433 !default;
// $red: #CF4444 !default;
// $dark: darken($blue, 17%) !default;
//
// $theme-colors: (
// primary: $blue,
// secondary: $gray-700,
// success: $green,
// info: $cyan,
// warning: $yellow,
// danger: $red,
// light: $gray-100,
// dark: $dark
// ) !default;
//
// $link-color: map-get($theme-colors, info) !default;

2
src/themes/custom/theme.module.ts
View File

@@ -78,6 +78,7 @@ import { NavbarComponent } from './app/navbar/navbar.component';
import { HeaderComponent } from './app/header/header.component'; import { HeaderComponent } from './app/header/header.component';
import { FooterComponent } from './app/footer/footer.component'; import { FooterComponent } from './app/footer/footer.component';
import { BreadcrumbsComponent } from './app/breadcrumbs/breadcrumbs.component'; import { BreadcrumbsComponent } from './app/breadcrumbs/breadcrumbs.component';
import { HeaderNavbarWrapperComponent } from './app/header-nav-wrapper/header-navbar-wrapper.component';
const DECLARATIONS = [ const DECLARATIONS = [
HomePageComponent, HomePageComponent,
@@ -117,6 +118,7 @@ const DECLARATIONS = [
FooterComponent, FooterComponent,
HeaderComponent, HeaderComponent,
NavbarComponent, NavbarComponent,
HeaderNavbarWrapperComponent,
BreadcrumbsComponent BreadcrumbsComponent
]; ];

4
src/themes/dspace/app/+home-page/home-news/home-news.component.scss
View File

@@ -6,12 +6,8 @@
color: white; color: white;
background-color: var(--bs-info); background-color: var(--bs-info);
position: relative; position: relative;
background-position-y: -200px;
background-image: url('/assets/dspace/images/banner.jpg'); background-image: url('/assets/dspace/images/banner.jpg');
background-size: cover; background-size: cover;
@media screen and (max-width: map-get($grid-breakpoints, lg)) {
background-position-y: 0;
}
.container { .container {
position: relative; position: relative;

3
src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.html Normal file
View File

@@ -0,0 +1,3 @@
<div [ngClass]="{'open': !(isNavBarCollapsed | async)}">
<ds-themed-header></ds-themed-header>
</div>

0
src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.scss Normal file
View File

13
src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.ts Normal file
View File

@@ -0,0 +1,13 @@
import { Component } from '@angular/core';
import { HeaderNavbarWrapperComponent as BaseComponent } from '../../../../app/header-nav-wrapper/header-navbar-wrapper.component';
/**
* This component represents a wrapper for the horizontal navbar and the header
*/
@Component({
selector: 'ds-header-navbar-wrapper',
styleUrls: ['header-navbar-wrapper.component.scss'],
templateUrl: 'header-navbar-wrapper.component.html',
})
export class HeaderNavbarWrapperComponent extends BaseComponent {
}

24
src/themes/dspace/app/header/header.component.html Normal file
View File

@@ -0,0 +1,24 @@
<header class="header">
<nav role="navigation" [attr.aria-label]="'nav.user.description' | translate" class="container navbar navbar-expand-md px-0">
<div class="d-flex flex-grow-1">
<a class="navbar-brand m-2" routerLink="/home">
<img src="assets/images/dspace-logo.svg" [attr.alt]="'menu.header.image.logo' | translate"/>
</a>
</div>
<div class="d-flex flex-grow-1 ml-auto justify-content-end align-items-center">
<ds-search-navbar class="navbar-search"></ds-search-navbar>
<ds-lang-switch></ds-lang-switch>
<ds-auth-nav-menu></ds-auth-nav-menu>
<ds-impersonate-navbar></ds-impersonate-navbar>
<div class="pl-2">
<button class="navbar-toggler" type="button" (click)="toggleNavbar()"
aria-controls="collapsingNav"
aria-expanded="false" [attr.aria-label]="'nav.toggle' | translate">
<span class="navbar-toggler-icon fas fa-bars fa-fw" aria-hidden="true"></span>
</button>
</div>
</div>
</nav>
<ds-themed-navbar></ds-themed-navbar>
</header>

19
src/themes/dspace/app/header/header.component.scss Normal file
View File

@@ -0,0 +1,19 @@
@media screen and (min-width: map-get($grid-breakpoints, md)) {
nav.navbar {
display: none;
}
.header {
background-color: var(--ds-header-bg);
}
}
.navbar-brand img {
@media screen and (max-width: map-get($grid-breakpoints, md)) {
height: var(--ds-header-logo-height-xs);
}
}
.navbar-toggler .navbar-toggler-icon {
background-image: none !important;
line-height: 1.5;
color: var(--bs-link-color);
}

13
src/themes/dspace/app/header/header.component.ts Normal file
View File

@@ -0,0 +1,13 @@
import { Component } from '@angular/core';
import { HeaderComponent as BaseComponent } from '../../../../app/header/header.component';
/**
* Represents the header with the logo and simple navigation
*/
@Component({
selector: 'ds-header',
styleUrls: ['header.component.scss'],
templateUrl: 'header.component.html',
})
export class HeaderComponent extends BaseComponent {
}

24
src/themes/dspace/app/navbar/navbar.component.html Normal file
View File

@@ -0,0 +1,24 @@
<nav [ngClass]="{'open': !(menuCollapsed | async)}"
[@slideMobileNav]="!(windowService.isXsOrSm() | async) ? 'default' : ((menuCollapsed | async) ? 'collapsed' : 'expanded')"
class="navbar navbar-expand-md navbar-light p-0 navbar-container"
role="navigation" [attr.aria-label]="'nav.main.description' | translate">
<div class="container h-100">
<a class="navbar-brand my-2" routerLink="/home">
<img src="assets/images/dspace-logo.svg" [attr.alt]="'menu.header.image.logo' | translate"/>
</a>
<div id="collapsingNav" class="w-100 h-100">
<ul class="navbar-nav me-auto mb-2 mb-lg-0 h-100">
<ng-container *ngFor="let section of (sections | async)">
<ng-container
*ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
</ng-container>
</ul>
</div>
<ds-search-navbar class="navbar-collapsed"></ds-search-navbar>
<ds-lang-switch class="navbar-collapsed"></ds-lang-switch>
<ds-auth-nav-menu class="navbar-collapsed"></ds-auth-nav-menu>
<ds-impersonate-navbar class="navbar-collapsed"></ds-impersonate-navbar>
</div>
</nav>

56
src/themes/dspace/app/navbar/navbar.component.scss
View File

@@ -1,5 +1,57 @@
@import 'src/app/navbar/navbar.component.scss';
nav.navbar { nav.navbar {
border-top: 1px var(--ds-header-navbar-border-top-color) solid;
border-bottom: 5px var(--bs-green) solid; border-bottom: 5px var(--bs-green) solid;
align-items: baseline;
color: var(--ds-header-icon-color);
}
/** Mobile menu styling **/
@media screen and (max-width: map-get($grid-breakpoints, md)) {
.navbar {
width: 100%;
background-color: var(--bs-white);
position: absolute;
overflow: hidden;
height: 0;
&.open {
height: 100vh; //doesn't matter because wrapper is sticky
}
}
}
@media screen and (min-width: map-get($grid-breakpoints, md)) {
.reset-padding-md {
margin-left: calc(var(--bs-spacer) / -2);
margin-right: calc(var(--bs-spacer) / -2);
}
}
/* TODO remove when https://github.com/twbs/bootstrap/issues/24726 is fixed */
.navbar-expand-md.navbar-container {
@media screen and (max-width: map-get($grid-breakpoints, md)) {
> .container {
padding: 0 var(--bs-spacer);
a.navbar-brand {
display: none;
}
.navbar-collapsed {
display: none;
}
}
padding: 0;
}
height: 80px;
}
a.navbar-brand img {
max-height: var(--ds-header-logo-height);
}
.navbar-nav {
::ng-deep a.nav-link {
color: var(--ds-navbar-link-color);
}
::ng-deep a.nav-link:hover {
color: var(--ds-navbar-link-color-hover);
}
} }

2
src/themes/dspace/app/navbar/navbar.component.ts
View File

@@ -8,7 +8,7 @@ import { slideMobileNav } from '../../../../app/shared/animations/slide';
@Component({ @Component({
selector: 'ds-navbar', selector: 'ds-navbar',
styleUrls: ['./navbar.component.scss'], styleUrls: ['./navbar.component.scss'],
templateUrl: '../../../../app/navbar/navbar.component.html', templateUrl: './navbar.component.html',
animations: [slideMobileNav] animations: [slideMobileNav]
}) })
export class NavbarComponent extends BaseComponent { export class NavbarComponent extends BaseComponent {

12
src/themes/dspace/styles/_global-styles.scss
View File

@@ -3,7 +3,7 @@
// imports the base global style // imports the base global style
@import '../../../styles/_global-styles.scss'; @import '../../../styles/_global-styles.scss';
.facet-filter,.setting-option { .facet-filter, .setting-option {
background-color: var(--bs-light); background-color: var(--bs-light);
border-radius: var(--bs-border-radius); border-radius: var(--bs-border-radius);
@@ -21,3 +21,13 @@
font-size: 1.1rem font-size: 1.1rem
} }
} }
header {
ds-navbar-section > li,
ds-expandable-navbar-section > li {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
}

1
src/themes/dspace/styles/_theme_css_variable_overrides.scss
View File

@@ -1,6 +1,7 @@
// Override or add CSS variables for your theme here // Override or add CSS variables for your theme here
:root { :root {
--ds-header-logo-height: 40px;
--ds-banner-text-background: rgba(0, 0, 0, 0.45); --ds-banner-text-background: rgba(0, 0, 0, 0.45);
--ds-banner-background-gradient-width: 300px; --ds-banner-background-gradient-width: 300px;
--ds-home-news-link-color: #{$green}; --ds-home-news-link-color: #{$green};

4
src/themes/dspace/theme.module.ts
View File

@@ -41,9 +41,13 @@ import { CollectionPageModule } from '../../app/+collection-page/collection-page
import { SubmissionModule } from '../../app/submission/submission.module'; import { SubmissionModule } from '../../app/submission/submission.module';
import { MyDSpacePageModule } from '../../app/+my-dspace-page/my-dspace-page.module'; import { MyDSpacePageModule } from '../../app/+my-dspace-page/my-dspace-page.module';
import { NavbarComponent } from './app/navbar/navbar.component'; import { NavbarComponent } from './app/navbar/navbar.component';
import { HeaderComponent } from './app/header/header.component';
import { HeaderNavbarWrapperComponent } from './app/header-nav-wrapper/header-navbar-wrapper.component';
const DECLARATIONS = [ const DECLARATIONS = [
HomeNewsComponent, HomeNewsComponent,
HeaderComponent,
HeaderNavbarWrapperComponent,
NavbarComponent NavbarComponent
]; ];