CHORE: Removed dependency to component libraries menu header due to d…

…eprecation
davidibl · Mar 28, 2020 · 949cccf · 949cccf
1 parent 44780cf
commit 949cccf
Show file tree

Hide file tree

Showing 8 changed files with 131 additions and 101 deletions.
diff --git a/src/app/components/app/applicationMenu.html b/src/app/components/app/applicationMenu.html
@@ -0,0 +1,11 @@
+<div class="header">
+    <div class="nav ">
+        <div class="brand-bar">
+            <img class="full-height left mr-05" alt="{{brandName}}" [src]="brandLogoSource" />
+            <h2 class="brand-name">{{brandName}}</h2>
+        </div>
+        <ul class="main-menu block">
+            <ng-content select=".menu"></ng-content>
+        </ul>
+    </div>
+</div>
diff --git a/src/app/components/app/applicationMenu.scss b/src/app/components/app/applicationMenu.scss
@@ -0,0 +1,64 @@
+@import "variables";
+@import "mixins";
+
+$application-menu-background-color:             #fff;
+$application-menu-brand-weight:                   900;
+$application-menu-brand-color:                    $brand-teritiary;
+$brand-name-font:                                 $base-heading-font-family-alternate !default;
+
+:host {
+    position: fixed;
+    width: 100%;
+    top: 0px;;
+    left: 0px;
+    z-index: 1000;
+    background-color: $application-menu-background-color;
+    padding: 0px;
+    margin: 0;
+    border-bottom: 1px solid #E3E5E6;
+    border-top: 1px solid #E3E5E6;
+    border-radius: 0px 0px 5px 5px;
+    z-index: 1005;
+
+    .nav {
+        display: block;
+        justify-content: center;
+        height: 100%;
+        position: relative;
+        padding: 0;
+
+        .brand-bar {
+            height: 25px;
+            float: right;
+            margin-right: 5px;
+
+            img {
+                margin-top: 3px;
+            }
+        }
+
+        .brand-name {
+            float: left;
+            font-family: $brand-name-font;
+            margin-top: -2px;
+            font-weight: $application-menu-brand-weight;
+            color: $application-menu-brand-color;
+        }
+
+        ul {
+            float: left;
+            bottom: 0;
+            margin: 0px auto 0px auto;
+            padding: 0px;
+        }
+
+        ul::ng-deep {
+            > li {
+                float: left;
+                list-style: none;
+                margin-right: 3px;
+                cursor: pointer;
+            }
+        }
+    }
+}
diff --git a/src/app/components/app/applicationMenu.ts b/src/app/components/app/applicationMenu.ts
@@ -0,0 +1,15 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+    selector: 'xn-application-menu',
+    templateUrl: 'applicationMenu.html',
+    styleUrls: ['applicationMenu.scss'],
+})
+export class ApplicationMenuComponent {
+
+    @Input()
+    public brandLogoSource: string;
+
+    @Input()
+    public brandName: string;
+}
diff --git a/src/app/components/app/mainMenu.html b/src/app/components/app/mainMenu.html
@@ -1,4 +1,4 @@
-<xn-menu-header [brandName]="'dmnmgr'" [brandLogoSource]="'assets/logo.png'" (outsideClick)="onMenuOutsideClick()">
+<xn-application-menu [brandName]="'dmnmgr'" [brandLogoSource]="'assets/logo.png'" (outsideClick)="onMenuOutsideClick()">
     <li class="menu">
         <xn-button (click)="toggleMenuVisible()"
                    (mouseenter)="openMenu('fileMenuVisible')"
@@ -216,4 +216,4 @@
             </ul>
         </xn-button>
     </li>
-</xn-menu-header>
+</xn-application-menu>
diff --git a/src/app/components/app/mainMenu.scss b/src/app/components/app/mainMenu.scss
@@ -1,79 +1,57 @@
-@import 'variables';
-@import 'mixins';
+@import "variables";
+@import "mixins";
 
 xn-menu-header {
     padding: 0;
 }
 
 :host::ng-deep {
-    xn-menu-header {
-        border-top: 1px solid #E3E5E6;
-        border-bottom: 1px solid #E3E5E6;
-    }
-    xn-menu-header .nav {
+    .sub-menu {
+        position: absolute;
+        top: 29px;
+        left: -1px;
+        display: block;
+        float: none;
+        background-color: #333;
+        z-index: 2006;
+        margin: 0;
         padding: 0;
 
-        ul {
-            float: left;
-
-            li {
-                margin-right: 3px;
-            }
+        .sub-menu-container {
+            @include shadow(0px 3px 5px 1px rgba(68, 68, 68, 0.45));
         }
 
-        .brand-bar {
-            float: right;
-            padding-right: 6px;
-            padding-top: 0px;
+        li {
+            width: 200px;
+            position: relative;
+            padding: 10px;
+            list-style: none;
+            margin: 0;
+            background-color: #f9f9f9;
+        }
 
-            img {
-                margin-top: 3px;
-            }
+        li.section-divider {
+            padding-top: 0;
+            padding-bottom: 0;
+            z-index: -1;
+            margin-top: -10px;
         }
-    }
-}
 
-.sub-menu {
-    position: absolute;
-    top: 29px;
-    left: -1px;
-    display: block;
-    float: none;
-    background-color: #333;
-    z-index: 2006;
+        li:not(.section-divider):hover {
+            background-color: $brand-teritiary;
+        }
 
-    .sub-menu-container {
-        @include shadow(0px 3px 5px 1px rgba(68, 68, 68, 0.45));
+        li:last-child {
+            border-bottom: none;
+        }
     }
 
-    li {
-        width: 200px;
-        position: relative;
-        padding: 10px;
-        list-style: none;
+    .sub-sub-menu {
+        padding: 0;
         margin: 0;
-        background-color: #f9f9f9;
-    }
-
-    li.section-divider {
-        padding-top: 0;
-        padding-bottom: 0;
+        position: absolute;
+        top: 0px;
+        left: 100%;
         z-index: -1;
-        margin-top: -10px;
-    }
-
-    li:not(.section-divider):hover {
-        background-color: $brand-teritiary;
     }
-
-    li:last-child {
-        border-bottom: none;
-    }
-}
-
-.sub-sub-menu {
-    position: absolute;
-    top: 0px;
-    left: 100%;
-    z-index: -1;
 }
diff --git a/src/app/components/components.ts b/src/app/components/components.ts
@@ -26,6 +26,7 @@ import { ALL_DOCUMENTATION_COMPONENTS } from './documentation/documentationCompo
 import { NewBranchDialogComponent } from './dialogs/newBranchDialog';
 import { FooterFlyinComponent } from './footerBar/footerFlyin';
 import { ChangelogDialogComponent } from './dialogs/changelogDialog';
+import { ApplicationMenuComponent } from './app/applicationMenu';
 
 export const ALL_COMPONENTS = [
     DmnModellerComponent,
@@ -55,5 +56,6 @@ export const ALL_COMPONENTS = [
     NewBranchDialogComponent,
     FooterFlyinComponent,
     ChangelogDialogComponent,
+    ApplicationMenuComponent,
     ...ALL_DOCUMENTATION_COMPONENTS,
 ];
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
@@ -68,41 +68,10 @@ $default-link-hover-color:                      $brand-teritiary;
 
 $container-xl:                                  960px;
 $container-horizontal-spacearound:              0px;
-$header-height:                                 10px;
-$responsive-header-height:                      10px;
-$xn-menu-header-height:                         $header-height;
-$xn-menu-header-height-responsive:              $responsive-header-height;
-
-// header
-
-$xn-menu-header-background-color:               #fff;
-$xn-menu-header-padding-left:                   20px;
-$xn-menu-header-padding-right:                  20px;
-$xn-menu-header-padding-bottom:                 9px;
-$xn-menu-header-padding-top:                    5px;
-$xn-menu-header-right:                          initial;
-$xn-menu-header-left:                           50%;
-$xn-menu-header-transform:                      translateX(-50%);
-$xn-menu-header-nav-layout:                     block;
-$xn-menu-header-shadow:                         none;
-$xn-menu-header-brand-weight:                   900;
-$xn-menu-header-brand-color:                    $brand-teritiary;
-
-$menu-brand-bar-float:                          left;
-$menu-list-position:                            initial;
-$menu-list-float:                               right;
-
-$menu-item-color:                               $brand-primary;
-$menu-item-hover-color:                         $brand-primary;
 
 // Scroll to top
 
-$scroll-to-top-button-background-color:         $brand-secondary;
-$scroll-to-top-button-text-color:               $brand-white;
-
 $input-form-background-color: transparent;
 
-
-
 @import "../../node_modules/getbase/src/scss/base/_variables.scss";
 @import "../../node_modules/@xnoname/web-components/module/styles/_variables.scss";
diff --git a/src/scss/site.scss b/src/scss/site.scss
@@ -21,15 +21,6 @@ body {
     }
 }
 
-xn-menu-header .nav li a {
-    margin-right: 5px;
-}
-
-xn-menu-header {
-    border-radius: 0px 0px 5px 5px;
-    z-index: 1005;
-}
-
 .full-content-height {
     height: calc(100% - (#{$header-height} + 15px));
 }