hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-07 10:04:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixed --ds-header-icon-color & --ds-header-icon-color-hover not being applied to all header icons

Browse Source
This commit is contained in:
Alexandre Vryghem
2023-04-30 13:19:00 +01:00
parent 5e27741483
commit ef9c42804c
8 changed files with 19 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,13 +11,12 @@
line-height: 1.5; line-height: 1.5;
} }
.navbar ::ng-deep { .navbar-toggler {
a { border: none;
color: var(--ds-header-icon-color); color: var(--ds-header-icon-color);
&:hover, &:focus { &:hover, &:focus {
color: var(--ds-header-icon-color-hover); color: var(--ds-header-icon-color-hover);
} }
} }
}

1
src/app/search-navbar/search-navbar.component.scss
View File

@@ -1,6 +1,7 @@
input[type="text"] { input[type="text"] {
margin-top: calc(-0.5 * var(--bs-font-size-base)); margin-top: calc(-0.5 * var(--bs-font-size-base));
background-color: #fff !important; background-color: #fff !important;
border-color: var(--ds-header-icon-color);
&.collapsed { &.collapsed {
opacity: 0; opacity: 0;

4
src/app/shared/auth-nav-menu/auth-nav-menu.component.html
View File

@@ -19,7 +19,7 @@
</li> </li>
<li *ngIf="(isAuthenticated | async) && !(isXsOrSm$ | async) && (showAuth | async)" class="nav-item"> <li *ngIf="(isAuthenticated | async) && !(isXsOrSm$ | async) && (showAuth | async)" class="nav-item">
<div ngbDropdown display="dynamic" placement="bottom-right" class="d-inline-block" @fadeInOut> <div ngbDropdown display="dynamic" placement="bottom-right" class="d-inline-block" @fadeInOut>
<a href="javascript:void(0);" role="button" [attr.aria-label]="'nav.user-profile-menu-and-logout' |translate" (click)="$event.preventDefault()" [title]="'nav.user-profile-menu-and-logout' | translate" class="px-1" [attr.data-test]="'user-menu' | dsBrowserOnly" ngbDropdownToggle> <a href="javascript:void(0);" role="button" [attr.aria-label]="'nav.user-profile-menu-and-logout' |translate" (click)="$event.preventDefault()" [title]="'nav.user-profile-menu-and-logout' | translate" class="dropdownLogout px-1" [attr.data-test]="'user-menu' | dsBrowserOnly" ngbDropdownToggle>
<i class="fas fa-user-circle fa-lg fa-fw"></i></a> <i class="fas fa-user-circle fa-lg fa-fw"></i></a>
<div class="logoutDropdownMenu" ngbDropdownMenu [attr.aria-label]="'nav.user-profile-menu-and-logout' |translate"> <div class="logoutDropdownMenu" ngbDropdownMenu [attr.aria-label]="'nav.user-profile-menu-and-logout' |translate">
<ds-user-menu></ds-user-menu> <ds-user-menu></ds-user-menu>
@@ -27,7 +27,7 @@
</div> </div>
</li> </li>
<li *ngIf="(isAuthenticated | async) && (isXsOrSm$ | async)" class="nav-item"> <li *ngIf="(isAuthenticated | async) && (isXsOrSm$ | async)" class="nav-item">
<a id="logoutLink" role="button" [attr.aria-label]="'nav.logout' |translate" [title]="'nav.logout' | translate" routerLink="/logout" routerLinkActive="active" class="px-1"> <a role="button" [attr.aria-label]="'nav.logout' |translate" [title]="'nav.logout' | translate" routerLink="/logout" routerLinkActive="active" class="logoutLink px-1">
<i class="fas fa-sign-out-alt fa-lg fa-fw"></i> <i class="fas fa-sign-out-alt fa-lg fa-fw"></i>
<span class="sr-only">(current)</span> <span class="sr-only">(current)</span>
</a> </a>

2
src/app/shared/auth-nav-menu/auth-nav-menu.component.scss
View File

@@ -12,7 +12,7 @@
background-color: transparent !important; background-color: transparent !important;
} }
.dropdown-toggle { .loginLink, .dropdownLogin, .logoutLink, .dropdownLogout {
color: var(--ds-header-icon-color); color: var(--ds-header-icon-color);
&:hover, &:focus { &:hover, &:focus {

2
src/app/shared/auth-nav-menu/auth-nav-menu.component.spec.ts
View File

@@ -358,7 +358,7 @@ describe('AuthNavMenuComponent', () => {
}); });
it('should render logout link', inject([Store], (store: Store<AppState>) => { it('should render logout link', inject([Store], (store: Store<AppState>) => {
const logoutDropdownMenu = deNavMenuItem.query(By.css('a[id=logoutLink]')); const logoutDropdownMenu = deNavMenuItem.query(By.css('a.logoutLink'));
expect(logoutDropdownMenu.nativeElement).toBeDefined(); expect(logoutDropdownMenu.nativeElement).toBeDefined();
})); }));
}); });

2
src/themes/dspace/app/header/header.component.html
View File

@@ -6,7 +6,7 @@
</a> </a>
</div> </div>
<div class="d-flex flex-grow-1 ml-auto justify-content-end align-items-center"> <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-themed-search-navbar></ds-themed-search-navbar>
<ds-lang-switch></ds-lang-switch> <ds-lang-switch></ds-lang-switch>
<ds-context-help-toggle></ds-context-help-toggle> <ds-context-help-toggle></ds-context-help-toggle>
<ds-themed-auth-nav-menu></ds-themed-auth-nav-menu> <ds-themed-auth-nav-menu></ds-themed-auth-nav-menu>

9
src/themes/dspace/app/header/header.component.scss
View File

@@ -15,5 +15,12 @@
.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-toggler {
color: var(--ds-header-icon-color);
&:hover, &:focus {
color: var(--ds-header-icon-color-hover);
}
} }

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

@@ -2,7 +2,6 @@ nav.navbar {
border-top: 1px var(--ds-header-navbar-border-top-color) solid; border-top: 1px var(--ds-header-navbar-border-top-color) solid;
border-bottom: 5px var(--ds-header-navbar-border-bottom-color) solid; border-bottom: 5px 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 **/