feat(ui): right menu -> middle menu (#18)

chutney-testing · Mar 4, 2024 · a6ce44a · a6ce44a
1 parent feee40d
commit a6ce44a
Show file tree

Hide file tree

Showing 8 changed files with 55 additions and 36 deletions.
diff --git a/chutney/ui/src/app/core/components/parent/parent.component.html b/chutney/ui/src/app/core/components/parent/parent.component.html
@@ -12,8 +12,5 @@
         <div class="app_main_inner container-fluid">
             <router-outlet></router-outlet>
         </div>
-        <div>
-            <router-outlet name="right-side-bar"></router-outlet>
-        </div>
     </main>
 </div>
diff --git a/.../modules/campaign/components/execution/history/campaign-executions-history.component.html b/.../modules/campaign/components/execution/history/campaign-executions-history.component.html
@@ -1,3 +1,4 @@
+<chutney-campaign-execution-menu></chutney-campaign-execution-menu>
 <div *ngIf="errors.length > 0" class="alert alert-dismissible alert-danger mt-4">
     <button type="button" class="btn-close" data-bs-dismiss="alert" (click)="errors = []"></button>
     <ng-container *ngFor="let err of errors">
@@ -8,7 +9,6 @@
 <div *ngIf="campaign">
     <h5>{{ campaign.title }}</h5>
     <h6>{{ campaign.description }}</h6>
-
     <ul ngbNav #nav="ngbNav" [activeId]="getActiveTab()" (navChange)="onTabChange($event)" class="nav-tabs">
         <li [ngbNavItem]="'0'" [destroyOnHide]="false">
             <a ngbNavLink>

diff --git a/...modules/scenarios/components/execution/history/scenario-executions-history.component.html b/...modules/scenarios/components/execution/history/scenario-executions-history.component.html
@@ -1,3 +1,4 @@
+<chutney-scenario-execution-menu></chutney-scenario-execution-menu>
 <div *ngIf="error" class="alert alert-dismissible alert-danger mt-4">
     <button type="button" class="btn-close" data-bs-dismiss="alert" (click)="error = null"></button>
     {{ error }}
@@ -30,9 +31,10 @@ <h6 [innerHTML]="scenario.description | linkify"></h6>
                 </button>
             </a>
             <ng-template ngbNavContent>
+                <!-- 40px - 1.5rem explanation : calculation between execution header and app_main_inner heights -->
                 <chutney-scenario-execution [scenario]="scenario"
                                             [execution]="exec"
-                                            [stickyTop]="'-1.5rem'"
+                                            [stickyTop]="'40px - 1.5rem'"
                                             [stickyTopElementSelector]="'.executions-tabs'"
                                             (onExecutionStatusUpdate)="updateExecutionStatus(exec.executionId, $event)">
 

diff --git a/...modules/scenarios/components/execution/history/scenario-executions-history.component.scss b/...modules/scenarios/components/execution/history/scenario-executions-history.component.scss
@@ -1,5 +1,5 @@
 .executions-tabs {
-    top: -1.5rem;
+    top: calc(40px - 1.5rem); // calculation between execution header and app_main_inner heights
     z-index: 1021;
     background-color: var(--bs-body-bg) !important;
 }

diff --git a/chutney/ui/src/app/shared/components/layout/right-menu/chutney-right-menu.component.html b/chutney/ui/src/app/shared/components/layout/right-menu/chutney-right-menu.component.html
@@ -1,31 +1,31 @@
-<nav class="navbar px-1 bg-light h-100 align-items-start" *ngIf="menuItems?.length">
-    <div class="container-fluid">
-        <ul class="navbar-nav me-auto mb-2">
-                <ng-container *ngFor="let item of menuItems"
-                    [ngTemplateOutlet]="!!item.options && item.options.length > 1 ? dropDownItem : simpleItem"
-                    [ngTemplateOutletContext]="{item:item}">
-                </ng-container>
-        </ul>
+<div class="middle-sidebar chutney-nav-menu d-flex justify-content-center sticky-top">
+    <div class="nav">
+        <ng-container *ngIf="menuItems?.length">
+            <ng-container *ngFor="let item of menuItems"
+                [ngTemplateOutlet]="!!item.options && item.options.length > 1 ? dropDownItem : simpleItem"
+                [ngTemplateOutletContext]="{item:item}">
+            </ng-container>
+        </ng-container>
     </div>
-</nav>
-<ng-template #dropDownItem let-item='item'>
-    <li class="nav-item" ngbDropdown display="dynamic" *hasAuthorization="item.authorizations || []">
-        <a class="nav-link" tabindex="0" ngbDropdownToggle id="executeDropdown" role="button">
-            <i [ngClass]="item.iconClass"></i>
-            {{item.label | translate}}
-        </a>
-        <div ngbDropdownMenu aria-labelledby="executeDropdown" class="dropdown-menu">
-            <a class="cursor-pointer" ngbDropdownItem *ngFor="let option of item.options"
-            (click)="item.click(option.id)">{{ option.label }}</a>
+
+    <ng-template #dropDownItem let-item='item'>
+        <div class="nav-item" placement="bottom" ngbDropdown display="dynamic" *hasAuthorization="item.authorizations || []">
+            <a class="nav-link" tabindex="0" ngbDropdownToggle id="executeDropdown" role="button">
+                <i [ngClass]="item.iconClass"></i>
+            </a>
+            <div ngbDropdownMenu aria-labelledby="executeDropdown" class="dropdown-menu">
+                <a class="cursor-pointer" ngbDropdownItem *ngFor="let option of item.options"
+                    (click)="item.click(option.id)">{{ option.label }}</a>
+            </div>
         </div>
-</ng-template>
+    </ng-template>
 
-<ng-template #simpleItem let-item='item'>
-    <li class="nav-item" *hasAuthorization="item.authorizations || []">
-        <a class="nav-link cursor-pointer" role="nav-link"
-           [routerLink]="getItemLink(item)"
-           (click)="onItemClick(item)">
-            <i [ngClass]="item.iconClass"></i>
-            {{item.label | translate}}</a>
-    </li>
-</ng-template>
+    <ng-template #simpleItem let-item='item'>
+        <div class="nav-item" placement="bottom" ngbTooltip="{{item.label | translate}}" *hasAuthorization="item.authorizations || []">
+            <a class="nav-link cursor-pointer" role="nav-link" [routerLink]="getItemLink(item)"
+                (click)="onItemClick(item)">
+                <i [ngClass]="item.iconClass"></i>
+                </a>
+        </div>
+    </ng-template>
+</div>
diff --git a/chutney/ui/src/app/shared/components/layout/right-menu/chutney-right-menu.component.scss b/chutney/ui/src/app/shared/components/layout/right-menu/chutney-right-menu.component.scss
@@ -1,7 +1,18 @@
+@import "~bootswatch/dist/flatly/variables";
+
 .nav-item {
     white-space: nowrap;
 }
 
 .nav-link:hover {
     color: var(--bs-primary)!important;
 }
+
+.chutney-nav-menu {
+    margin-left: calc(var(--bs-gutter-x)* -0.5);
+    margin-right: calc(var(--bs-gutter-x)* -0.5);
+    margin-top: -1.5rem;
+
+    top: -1.5rem;
+    z-index: 2000;
+}
diff --git a/chutney/ui/src/assets/style/themes/theme.darkly.scss b/chutney/ui/src/assets/style/themes/theme.darkly.scss
@@ -23,7 +23,11 @@ $tooltip-color: $white;
     background-color: black !important;
 }
 
-.app-sidebar{
+.app-sidebar {
+    background-color: black;
+}
+
+.middle-sidebar {
     background-color: black;
 }
 

diff --git a/chutney/ui/src/assets/style/themes/theme.flatly.scss b/chutney/ui/src/assets/style/themes/theme.flatly.scss
@@ -7,10 +7,15 @@ $info:#3190d0;
 @import "~bootstrap/scss/bootstrap";
 @import "~bootswatch/dist/flatly/bootswatch";
 
-.app-sidebar{
+.app-sidebar {
     background-color: $light;
 }
 
+.middle-sidebar {
+    background-color: $light;
+}
+
+
 :root {
     --chutney-report-bg-color: #{$gray-100};
 }