Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Commit

Permalink
feat(ui): remove hover animation on left menu (#1250)
Browse files Browse the repository at this point in the history
* feat(ui): remove hover animation on left menu

* Review
  • Loading branch information
nbrouand committed Feb 12, 2024
1 parent eeea65f commit f2659f8
Show file tree
Hide file tree
Showing 15 changed files with 32 additions and 220 deletions.
3 changes: 1 addition & 2 deletions ui/src/app/core/components/parent/parent.component.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
<div [ngClass]="{
'closed-sidebar' : layoutOptions.toggleSidebar,
'closed-sidebar-md' : layoutOptions.toggleSidebarMobile,
'closed-sidebar-open': layoutOptions.sidebarHover || layoutOptions.toggleSidebarMobile
'closed-sidebar-open': !layoutOptions.toggleSidebar
}" class="app">
<header>
<router-outlet name="header"></router-outlet>
Expand Down
4 changes: 0 additions & 4 deletions ui/src/app/core/components/parent/parent.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -37,10 +37,6 @@ export class ParentComponent implements OnInit, OnDestroy {
ngOnInit(): void {
}

toggleSidebarMobile() {
this.layoutOptions.toggleSidebarMobile = !this.layoutOptions.toggleSidebarMobile;
}

ngOnDestroy() {
if (this.linkifierSubscription) {
this.linkifierSubscription.unsubscribe();
Expand Down
2 changes: 0 additions & 2 deletions ui/src/app/core/layout/layout-options.service.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,5 @@ import { Injectable } from '@angular/core';
providedIn: 'root'
})
export class LayoutOptions {
sidebarHover = false;
toggleSidebar = false;
toggleSidebarMobile = false;
}
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
<div class="app-header bg-primary">
<div class="logo-src">
</div>
<div class="app-header__content">
<div class="app-header-left">
<div class="close-sidebar-btn" (click)="toggleSidebar()">
<i class="fa fa-bars"></i>
</div>
</div>
<div class="app-header-right">
<div class="nav">
Expand All @@ -11,30 +12,30 @@
<i class="fa fa-book"></i>
</a>
</div>
<div *ngIf="false" class="nav-item" placement="bottom" ngbTooltip="{{'menu.principal.feedback' | translate}}">
<div *ngIf="false" class="nav-item" placement="bottom" ngbTooltip="{{'menu.principal.feedback' | translate}}">
<span class="nav-link cursor-pointer">
<i class="fa fa-lightbulb"></i>
</span>
</div>
<div *ngIf="false" class="nav-item" placement="bottom" ngbTooltip="{{'menu.principal.notif' | translate}}">
<div *ngIf="false" class="nav-item" placement="bottom" ngbTooltip="{{'menu.principal.notif' | translate}}">
<span class="nav-link">
<i class="fa fa-bell"></i>
</span>
</div>
<div class="nav-item" *ngIf="isLight()" (click)="switchTheme()"
placement="bottom" ngbTooltip="{{'menu.principal.darkMode' | translate}}">
placement="bottom" ngbTooltip="{{'menu.principal.darkMode' | translate}}">
<span class="nav-link">
<i class="fa fa-moon"></i>
</span>
</div>
<div class="nav-item" *ngIf="isDark()" (click)="switchTheme()"
placement="bottom" ngbTooltip="{{'menu.principal.lightMode' | translate}}">
placement="bottom" ngbTooltip="{{'menu.principal.lightMode' | translate}}">
<span class="nav-link">
<i class="fa fa-sun"></i>
</span>
</div>
<ng-container *ngIf="(user$ | async) as user">
<div class="nav-item dropdown" *ngIf="user?.id" ngbTooltip="{{'menu.principal.profile' | translate}}">
<div class="nav-item dropdown" *ngIf="user?.id" ngbTooltip="{{'menu.principal.profile' | translate}}">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
<i class="fa fa-regular fa-user" placement="bottom"></i>
</a>
Expand All @@ -55,10 +56,4 @@
</div>
</div>
</div>
<div class="app-header__mobile-menu">
<div class="close-sidebar-btn__mobile" (click)="toggleSidebarMobile()">
<i class="fa fa-bars"></i>
</div>
</div>

</div>
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export class ChutneyMainHeaderComponent implements OnInit {

constructor(private loginService: LoginService,
private themeService: ThemeService,
public globals: LayoutOptions) {
public layoutOptions: LayoutOptions) {
this.user$ = this.loginService.getUser();
}

Expand All @@ -44,8 +44,8 @@ export class ChutneyMainHeaderComponent implements OnInit {
isActive: boolean;


toggleSidebarMobile() {
this.globals.toggleSidebarMobile = !this.globals.toggleSidebarMobile;
toggleSidebar() {
this.layoutOptions.toggleSidebar = !this.layoutOptions.toggleSidebar;
}

ngOnInit(): void {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,11 +1,5 @@
<div class="app-sidebar" (mouseover)="sidebarHover()"
(mouseout)="sidebarHover()">
<div class="app-sidebar">
<div class="app-sidebar-content">
<div class="py-1">
<span class="close-sidebar-btn" (click)="toggleSidebar()">
<i [ngClass]="layoutOptions.toggleSidebar ? 'fa fa-thumb-tack' : 'fa fa-angle-double-left'"></i>
</span>
</div>
<div class="app-sidebar-scroll">
<perfect-scrollbar [autoPropagation]="true">
<div class="sidebar-menu">
Expand All @@ -14,7 +8,8 @@
<ng-container *ngIf="canViewMenuGroup(item)">
<div class="menu-header">{{item.label}}</div>
<ng-container *ngFor="let subItem of item.children">
<div class="menu-item nav-item" *ngIf="canViewMenuItem(subItem)">
<div class="menu-item nav-item" *ngIf="canViewMenuItem(subItem)"
placement="right" container="body" [disableTooltip]="!layoutOptions.toggleSidebar" ngbTooltip="{{subItem.label | translate}}">
<a [routerLink]="subItem.link" routerLinkActive="active-item" class="menu-link">
<i class="menu-icon" [ngClass]="subItem.iconClass"></i>
<span class="menu-title">{{subItem.label | translate}}</span>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -58,10 +58,6 @@ export class ChutneyLeftMenuComponent implements OnInit {
this.layoutOptions.toggleSidebar = !this.layoutOptions.toggleSidebar;
}

sidebarHover() {
this.layoutOptions.sidebarHover = !this.layoutOptions.sidebarHover;
}

@HostListener('window:resize', ['$event'])
onResize(event) {
this.newInnerWidth = event.target.innerWidth;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,10 @@

import { Authorization } from '@model';
import { MenuItem } from '@shared/components/layout/menuItem';
import { FeatureName } from '@core/feature/feature.model';

export const allMenuItems: MenuItem [] = [
{
label: 'Navigation',
label: '',
children: [
{
label: 'menu.principal.scenarios',
Expand Down
2 changes: 1 addition & 1 deletion ui/src/assets/i18n/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
"lightMode": "Light mode",
"feedback": "Feedback",
"notif": "Notifications",
"previewReport": "Preview execution",
"previewReport": "Load report",
"metrics": "Metrics"
}
},
Expand Down
2 changes: 1 addition & 1 deletion ui/src/assets/i18n/fr.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
"lightMode": "Thème clair",
"feedback": "Donner un avis",
"notif": "Notifications",
"previewReport": "Visualiser une exécution",
"previewReport": "Charger rapport",
"metrics": "Métriques"
}
},
Expand Down
2 changes: 1 addition & 1 deletion ui/src/assets/style/layout/_layout-variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ $spacer-sm: 1.5rem;
$layout-spacer-lg: 3rem;
$layout-spacer-x: 1.5rem;

$app-sidebar-width: 260px;
$app-sidebar-width: 220px;
$app-sidebar-width-collapsed: 80px;

$logo-height: 23px;
Expand Down
32 changes: 12 additions & 20 deletions ui/src/assets/style/layout/header/_header-base.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
// Header Base
@import "~bootstrap/scss/bootstrap";
@import "../layout-variables";

.app-header {
height: $app-header-height;
display: flex;
Expand All @@ -19,7 +20,6 @@
align-items: center;
align-content: center;
flex: 1;
padding-left: $app-sidebar-width;
height: $app-header-height;
transition: all .2s;

Expand All @@ -29,27 +29,19 @@
margin-left: auto;
padding: 0 $layout-spacer-x 0 0;
}
}

}
.close-sidebar-btn {
cursor: pointer;
color: var(--bs-primary);
font-size: larger;
padding-right: 0.5rem;
}

.app-header__menu,
.app-header__mobile-menu {
display: none;
padding: 0 $layout-spacer-x;
height: $app-header-height;
align-items: center;
.app-header-left {
padding: 0 $layout-spacer-x;
height: $app-header-height;
align-items: center;
display: flex;
}
}
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
background-color: $white!important;
.close-sidebar-btn {
font-size: x-large;
cursor: pointer;
color: var(--bs-white);
}

127 changes: 0 additions & 127 deletions ui/src/assets/style/layout/responsive/_responsive-base.scss
Original file line number Diff line number Diff line change
@@ -1,139 +1,12 @@
// Responsive
@import "../layout-variables";
@import "~bootstrap/scss/bootstrap";
@media only screen and (max-width: 1320px) {
.header-user-info {
display: none;
}
}

@include media-breakpoint-down(md) {

.app-sidebar {
transform: translateX(-$app-sidebar-width-collapsed);
z-index: 20;
box-shadow: 0 0 0 0 transparent;

}

.closed-sidebar-md.closed-sidebar-open {
.app-sidebar {
transform: translateX(0);
box-shadow: $sidebar-box-shadow;
}
}

.app-header {
justify-content: space-between;
z-index: 25;

.logo-src {
display: block;
order: 2;
}

.app-header__mobile-menu {
display: flex;
order: 1;
.close-sidebar-btn__mobile {
font-size: xx-large;
color: var(--bs-white);
z-index: 21;
}

}

.app-header__menu {
display: flex;
order: 3;
}

.app-header__content {
position: absolute;
left: 5%;
width: 90%;
top: 0;
transition: all .2s;
padding: 0 10px !important;
overflow: hidden;


.app-header-right {
padding-right: 0;
}

}

.app-header__menu {
display: flex;
order: 3;
}

}

.header-menu-open {
.app-header__content {
visibility: visible;
opacity: 1;
top: $app-header-height + 20;
}
}


.app-page-title {
text-align: center;

.page-title-heading,
.page-title-wrapper {
margin: 0 auto;
display: block;
}

.page-title-actions {
margin: calc($grid-gutter-width / 2) auto 0;
}

.page-title-actions,
.page-title-subheading {
.breadcrumb-item,
.breadcrumb {
display: inline-block;
}
}
}


.app-header.text-lighter {
.logo-src {
//background: url('/assets/logo/logo-circle.png');
}

.app-header__menu {
& > span .btn,
& > .btn {
background: rgba(255, 255, 255, .1);
border-color: rgba(255, 255, 255, .1);
}
}

.app-header__content {
background: $gray-800;
}
}
.closed-sidebar:not(.closed-sidebar-open) {
.app-sidebar {
display: none!important;
}
}
}


@include media-breakpoint-down(sm) {
.app_main_inner {
padding: 15px 15px 0;
}

body {
margin-bottom: calc($grid-gutter-width / 2) !important;
}
}
Loading

0 comments on commit f2659f8

Please sign in to comment.