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

[DURACOM-195] add background on mouse over to dropdown user menu items

Browse Source 
(cherry picked from commit 8e35c0f713)
This commit is contained in:
Davide Negretti
2024-02-26 20:24:12 +01:00
parent 49efc4175d
commit e3f1fa39d5
5 changed files with 47 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -29,9 +29,9 @@
[attr.data-test]="'user-menu' | dsBrowserOnly"
ngbDropdownToggle>
<i class="fas fa-user-circle fa-lg fa-fw"></i></a>
<ul id="logoutDropdownMenu" class="p-3" ngbDropdownMenu role="presentation">
<ds-themed-user-menu></ds-themed-user-menu>
</ul>
<div id="logoutDropdownMenu" ngbDropdownMenu>
<ds-themed-user-menu [inExpandableNavbar]="false"></ds-themed-user-menu>
</div>
</div>
</div>
</div>

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

@@ -1,6 +1,6 @@
<ds-themed-loading *ngIf="(loading$ | async)"></ds-themed-loading>
<ul *ngIf="!(loading$ | async)" class="user-menu" role="menu"
[ngClass]="{ 'pb-2 mb-2 border-bottom' : inExpandableNavbar }"
[ngClass]="inExpandableNavbar ? 'user-menu-mobile pb-2 mb-2 border-bottom' : 'user-menu-dropdown'"
[attr.aria-label]="'nav.user-profile-menu-and-logout' |translate" id="user-menu-dropdown">
<li class="ds-menu-item-wrapper username-email-wrapper" role="presentation">
{{dsoNameService.getName(user$ | async)}}<br>

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

@@ -3,10 +3,43 @@
list-style: none;
margin: 0;
padding: 0;
&.user-menu-dropdown {
.ds-menu-item-wrapper {
a.ds-menu-item, &.username-email-wrapper {
padding: var(--ds-user-menu-item-vertical-padding) var(--ds-user-menu-dropdown-padding);
}
a.ds-menu-item {
display: block;
color: var(--ds-expandable-navbar-link-color);
&:hover {
color: var(--ds-expandable-navbar-link-color-hover);
background-color: var(--ds-user-menu-dropdown-link-background-hover);
}
}
}
}
&.user-menu-mobile {
.ds-menu-item-wrapper {
padding-top: var(--ds-user-menu-item-vertical-padding);
padding-bottom: var(--ds-user-menu-item-vertical-padding);
}
.ds-menu-item {
display: inline-block;
padding: var(--ds-user-menu-item-vertical-padding) var(--ds-user-menu-item-horizontal-padding);
}
.ds-menu-item, .ds-menu-toggler-wrapper {
color: var(--ds-expandable-navbar-link-color) !important;
&:hover, &:focus {
color: var(--ds-expandable-navbar-link-background-hover) !important;
}
}
}
}
}

11
src/styles/_custom_variables.scss
View File

@@ -36,13 +36,14 @@
--ds-header-navbar-border-bottom-color: #{$ds-header-navbar-border-bottom-color};
--ds-expandable-navbar-bg: #{$ds-expandable-navbar-bg};
--ds-expandable-navbar-link-color: #{$ds-navbar-link-color};
--ds-expandable-navbar-link-color-hover: #{$ds-navbar-link-color-hover};
--ds-expandable-navbar-dropdown-item-vertical-padding: 0.25rem;
--ds-expandable-navbar-dropdown-item-horizontal-padding: 0;
--ds-expandable-navbar-link-color: #{$body-color};
--ds-expandable-navbar-link-color-hover: #{$body-color};
--ds-expandable-navbar-link-background-hover: #{$ds-navbar-link-color-hover};
--ds-user-menu-item-vertical-padding: 0.25rem;
--ds-user-menu-item-horizontal-padding: 0;
--ds-user-menu-dropdown-padding: 1rem;
--ds-user-menu-dropdown-link-color: #{$dark};
--ds-user-menu-dropdown-link-background-hover: #{$gray-200};
@include media-breakpoint-up(md) {
--ds-header-logo-height: 50px;

24
src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.scss
View File

@@ -69,30 +69,6 @@
border-top: var(--ds-expandable-navbar-border-top-style);
padding-top: var(--ds-expandable-navbar-padding-top);
::ng-deep {
/* mobile menu */
.ds-menu-item {
padding: var(--ds-expandable-navbar-dropdown-item-vertical-padding) var(--ds-expandable-navbar-dropdown-item-horizontal-padding);
}
.ds-menu-item, .ds-menu-toggler-wrapper {
color: var(--ds-expandable-navbar-link-color) !important;
&:hover, &:focus {
color: var(--ds-expandable-navbar-link-color-hover) !important;
}
}
/* mobile submenu */
//.dropdown-menu {
// .ds-menu-item {
// }
//}
}
}
}
}