Moar Header (#630)

* header styling

* Fix refresh with no project (#627)

* k8s header style

* remove or

app/authenticated/route.js

@@ -200,9 +200,11 @@ export default Ember.Route.extend(Subscribe, {
 
     refreshKubernetes() {
       var model = this.get('controller.model');
-      this.loadKubernetes(model.get('project')).then((hash) => {
-        model.setProperties(hash);
-      });
+      if ( model.get('project') ) {
+        this.loadKubernetes(model.get('project')).then((hash) => {
+          model.setProperties(hash);
+        });
+      }
     },
 
     switchNamespace(namespaceId) {

app/components/form-engine-opts/component.js

@@ -5,7 +5,7 @@ export default Ember.Component.extend({
   machine: null,
   settings: Ember.inject.service(),
 
-  didInitAttrs() {
+  didReceiveAttrs() {
     if ( !this.get('machine.engineInstallUrl') )
     {
       this.set('machine.engineInstallUrl', this.get(`settings.${C.SETTING.ENGINE_URL}`) || '');

app/components/page-header-environment/template.hbs

@@ -1,6 +1,6 @@
 {{#if project}}
-  <div class="dropdown btn-group project-btn {{if isKubernetesTab 'alt'}}">
-    <button role="button" class="btn btn-link dropdown-toggle text-left clip" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+  <div class="dropdown btn-group project-btn  {{if isKubernetesTab 'alt'}}">
+    <button role="button" class="btn btn-link dropdown-toggle text-left" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
       <span class="clip"><i class="{{project.icon}} icon-fw"></i>&nbsp;{{project.displayName}}</span>
       <i class="icon icon-chevron-down"></i>
       <span class="sr-only">Toggle Dropdown</span>
@@ -45,9 +45,11 @@
 {{/if}}
 
 {{#if (and isKubernetesTab k8s.namespace)}}
-  <div class="dropdown btn-group project-btn">
+  <div class="dropdown btn-group project-btn kub-btn">
     <button role="button" type="button" class="btn btn-link dropdown-toggle text-left clip" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-      <i class="icon icon-thumbnails icon-fw"></i>&nbsp;{{k8s.namespace.displayName}}
+      <span class="clip">      
+        <i class="icon icon-thumbnails icon-fw"></i>&nbsp;{{k8s.namespace.displayName}}
+      </span>
       <i class="icon icon-chevron-down"></i>
       <span class="sr-only">Toggle Dropdown</span>
       <label>Namespace</label>

app/components/page-header-user/template.hbs

@@ -1,4 +1,4 @@
-<button class="user-toggle btn-link" role="button" id="user-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="User Menu: {{session.user}}">
+<button class="dropdown user-toggle btn-link" role="button" id="user-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="User Menu: {{session.user}}">
   {{#if accessEnabled}}
     {{identity-avatar link=false identity=access.identity}}
     <i class="icon icon-chevron-down"></i>

app/components/page-header/template.hbs

@@ -35,7 +35,7 @@
                   aria-haspopup="true"
                   aria-expanded="false"
                 }}
-                  {{item.label}} <span class="caret"/>
+                  {{item.label}} <span class="icon icon-chevron-down"/>
                   <ul class="dropdown-menu">
                     {{#each item.submenu as |subitem|}}
                       {{#if subitem.divider}}

app/services/session.js

@@ -14,8 +14,6 @@ export default Ember.Service.extend(BrowserStore, {
       var old = event.originalEvent.oldValue;
       var neu = event.originalEvent.newValue;
 
-      console.log('Change', key, '=', old, '->', neu);
-
       if ( old !== neu )
       {
         this.notifyPropertyChange(key);

app/styles/layout/_header.scss

@@ -26,6 +26,10 @@
   UL.nav LI.dropdown:hover UL.dropdown-menu {
     display: block;
     margin-top: 0;
+
+    li a {
+      text-transform: none;
+    }
   }
 }
 
@@ -71,8 +75,9 @@ HEADER {
         font-size      : 13px;
         display        : block;
 
-        &:hover {
+        &:hover, &:focus {
           color: $lightTeal;
+          background: rgba(0,0,0,.15);
         }
 
         &.active,
@@ -93,94 +98,33 @@ HEADER {
       }
     }
 
-    .dropdown {
-      &.open {
-        &.icon-chevron-down {
-          transform:rotate(-180deg);
-        }
-      }
-
-      .icon-chevron-down {
-        transition: ease all 350ms;
-        font-size: .75em;
-      }
-
-      .dropdown-toggle {
-        &.project-btn {
-          padding: 0;
-        }
-
-        max-width: 100%;
-        color: $top-row-link;
-
-        &:focus {
-          outline: 5px auto -webkit-focus-ring-color !important;
-          outline-offset: -2px;
-        }
-      }
-
-      .user-toggle {
-        cursor: pointer;
-        position: relative;
-        color: $top-row-link;
-        display: inline-block;
-        height: 40px;
-        z-index: 1001; // These have to be > 990 for bootstrap on touch devices
-      }
-
-
-      .project-menu {
-        max-height: 300px;
-        width: 300px;
-        overflow-y: auto;
-        box-shadow: none;
-        background: $dropdown-bg ;
-        color: $dropdown-link-color;
-        margin: 0;
-        border-radius: 0 0 2px 2px;
-
-        > LI > A {
-          color: $dropdown-link-color;
-
-          &:hover {
-            color: $dropdown-link-hover-color;
-            background: $dropdown-link-hover-bg;
-          }
-        }
-
-        & > LI.selected > A,
-        & > LI.selected > A:hover,
-        & > LI.selected > A:focus {
-          color: $greenTwoDark
-        }
-
-        .dropdown-header {
-          color: $lightGray;
-          padding: 5px 20px;
-        }
-
-        .divider {
-          background: black;
-        }
-
-        .theme-toggle {
-          padding: 5px 20px;
-
-          BUTTON {
-            width: 86px;
-          }
-        }
-      }
-    }
-
-    .user-btn {
-      vertical-align: top;
+    .user-menu {
+      max-height: 300px;
+      width: 300px;
+      overflow-y: auto;
+      box-shadow: none;
+      background: #fff;
+      color: #334851;
+      margin: 0;
+      border-radius: 0 0 2px 2px;
     }
 
     .user-menu {
       padding-top: 0;
-      width: 250px;
       border-radius: 2px;
+
+      & .theme-toggle, .dropdown-header {
+        padding: 5px 20px;
+
+        & button {
+          width: 86px;
+        }
+      }
+    }
+
+
+   .user-btn {
+      vertical-align: top;
     }
 
     .user-noauth,
@@ -242,7 +186,36 @@ HEADER {
       max-width: 200px;
       height: $navbar-height;
       color: white;
-      border-right: dotted 2px rgba($logo-bg,.5);
+      background: $primaryDark;
+      position: relative;
+
+      span {
+        color: white;
+      }
+
+      &:after {
+        content: "";
+        border-color: transparent transparent transparent $primaryDark;
+        border-style: solid;
+        border-width: 8px;
+        position: absolute;
+        right: -16px;
+        top: 33%;
+        z-index: 2;
+      }
+
+      &.kub-btn {
+        background: rgba($primaryDark,.5);
+        left: -4px;
+
+        &:after {
+          border-color: transparent transparent transparent rgba($primaryDark,.5);
+        }
+
+        span {
+          color: white;
+        }
+      }
 
       .btn {
         text-transform: inherit;
@@ -250,11 +223,12 @@ HEADER {
 
         &.dropdown-toggle {
           line-height: inherit !important;
-          height: auto !important;
+          height: 45px !important;
 
             &:focus {
               outline: -webkit-focus-ring-color auto 5px !important;
             }
+
         }
 
         & * {

app/styles/pages/_guide.scss

@@ -0,0 +1,331 @@
+/*sidebar layout*/
+/*!
+ * Start Bootstrap - Simple Sidebar HTML Template (http://startbootstrap.com)
+ * Code licensed under the Apache License v2.0.
+ * For details, see http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+/* Toggle Styles */
+
+#wrapper {
+    padding-left: 0;
+    -webkit-transition: all 0.5s ease;
+    -moz-transition: all 0.5s ease;
+    -o-transition: all 0.5s ease;
+    transition: all 0.5s ease;
+}
+
+#wrapper.toggled {
+    padding-left: 250px;
+}
+
+#sidebar-wrapper {
+    z-index: 1000;
+    position: fixed;
+    left: 250px;
+    width: 0;
+    height: 100%;
+    margin-left: -250px;
+    overflow-y: auto;
+    background: #fff;
+    -webkit-transition: all 0.5s ease;
+    -moz-transition: all 0.5s ease;
+    -o-transition: all 0.5s ease;
+    transition: all 0.5s ease;
+}
+
+#wrapper.toggled #sidebar-wrapper {
+    width: 250px;
+}
+
+#page-content-wrapper {
+    width: 100%;
+    position: absolute;
+    padding: 15px;
+}
+
+#wrapper.toggled #page-content-wrapper {
+    position: absolute;
+    margin-right: -250px;
+}
+
+/* Sidebar Styles */
+
+.sidebar-nav {
+    position: absolute;
+    top: 0;
+    width: 250px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.sidebar-nav li {
+    text-indent: 20px;
+    line-height: 40px;
+}
+
+.sidebar-nav li a {
+    display: block;
+    text-decoration: none;
+    color: #999999;
+}
+
+.sidebar-nav li a:hover {
+    text-decoration: none;
+    color: #fff;
+    background: rgba(255,255,255,0.2);
+}
+
+.sidebar-nav li a:active,
+.sidebar-nav li a:focus {
+    text-decoration: none;
+}
+
+.sidebar-nav > .sidebar-brand {
+    height: 65px;
+    font-size: 18px;
+    line-height: 60px;
+    background: $primary;
+}
+
+.sidebar-nav > .sidebar-brand a {
+    color: #fff;
+}
+
+.sidebar-nav > .sidebar-brand a:hover {
+    color: #fff;
+    background: none;
+}
+
+@media(min-width:768px) {
+    #wrapper {
+        padding-left: 250px;
+    }
+
+    #wrapper.toggled {
+        padding-left: 0;
+    }
+
+    #sidebar-wrapper {
+        width: 250px;
+    }
+
+    #wrapper.toggled #sidebar-wrapper {
+        width: 0;
+    }
+
+    #page-content-wrapper {
+        padding: 20px;
+        position: relative;
+    }
+
+    #wrapper.toggled #page-content-wrapper {
+        position: relative;
+        margin-right: 0;
+    }
+}
+
+.well {
+  margin: 0 0 2.5% 0;
+}
+
+.primary {
+  background-color: $primary;
+}
+
+.primaryDark {
+  background-color: $primaryDark;
+}
+
+.red {
+  background-color: $red;
+}
+
+.redDark {
+  background-color: $redDark;
+}
+
+.redTwo {
+  background-color: $redTwo;
+}
+
+.redTwoDark {
+  background-color: $redTwoDark;
+}
+
+.orange {
+  background-color: $orange;
+}
+
+.orangeDark {
+  background-color: $orangeDark;
+}
+
+.yellow {
+  background-color: $yellow;
+}
+
+.yellowDark {
+  background-color: $yellowDark;
+}
+
+.yellowTwo {
+  background-color: $yellowTwo;
+}
+
+.yellowTwoDark {
+  background-color: $yellowTwoDark;
+}
+
+.green {
+  background-color: $green;
+}
+
+.greenDark {
+  background-color: $greenDark;
+}
+
+.greenTwo {
+  background-color: $greenTwo;
+}
+
+.greenTwoDark {
+  background-color: $greenTwoDark;
+}
+
+.navy {
+  background-color: $navy;
+}
+
+.navyDark {
+  background-color: $navyDark;
+}
+
+.navyTwo {
+  background-color: $navyTwo;
+}
+
+.navyTwoDark {
+  background-color: $navyTwoDark;
+}
+
+.blue {
+  background-color: $blue;
+}
+
+.blueDark {
+  background-color: $blueDark;
+}
+
+.blueTwo {
+  background-color: $blueTwo;
+}
+
+.blueTwoDark {
+  background-color: $blueTwoDark;
+}
+
+.teal {
+  background-color: $teal;
+}
+
+.tealDark {
+  background-color: $tealDark;
+}
+
+.tealTwo {
+  background-color: $tealTwo;
+}
+
+.tealTwoDark {
+  background-color: $tealTwoDark;
+}
+
+.lightTeal {
+  background-color: $lightTeal;
+}
+
+.lightTealDark {
+  background-color: $lightTealDark;
+}
+
+.black {
+  background-color: $black;
+}
+
+.blackDark {
+  background-color: $blackDark;
+}
+
+.darkestGray {
+  background-color: $darkestGray;
+}
+
+.darkestGrayDark {
+  background-color: $darkestGrayDark;
+}
+
+.darkestGrayTwo {
+  background-color: $darkestGrayTwo;
+}
+
+.darkestGrayTwoDark {
+  background-color: $darkestGrayTwoDark;
+}
+
+.midGray {
+  background-color: $midGray;
+}
+
+.midGrayDark {
+  background-color: $midGrayDark;
+}
+
+.midGrayTwo {
+  background-color: $midGrayTwo;
+}
+
+.midGrayTwoDark {
+  background-color: $midGrayTwoDark;
+}
+
+.lightGray {
+  background-color: $lightGray;
+}
+
+.lightGrayDark {
+  background-color: $lightGrayDark;
+}
+
+.lightGrayTwo {
+  background-color: $lightGrayTwo;
+}
+
+.lightGrayTwoDark {
+  background-color: $lightGrayTwoDark;
+}
+
+.colordot {
+  height: 75px;
+  width: 75px;
+  border-radius: 90px;
+  position: relative;
+  margin: 0 auto;
+}
+
+.halfdot {
+  width: 50%;
+  height: 75px;
+  border-radius: 0 90px 90px 0;
+  position: absolute;
+  right: 0;
+}
+
+
+/*icons*/
+#icons .icon {
+  font-size: 32px;
+  line-height: 1.5em;
+  letter-spacing: 10px;
+}

app/styles/themes/_light.scss

@@ -34,7 +34,7 @@ $top-row-link-active                 : $primary;
 $bottom-row                          : white;
 $bottom-row-link                     : $midGrayDark;
 $bottom-row-link-active              : $primary;
-$logo-bg                             : $primaryDark;
+$logo-bg                             : darken($primaryDark, 5%);
 
 /*footer*/
 $footer                              : $lightGray;

app/styles/vendors/_bootstrap-tweak.scss

@@ -489,10 +489,14 @@ HR {
 }
 
 .dropdown-menu {
-  @include box-shadow(0 2px 2px rgba(0,0,0,0.1));
+  @include box-shadow(0px 1px 10px rgba(0, 0, 0, 0.15));
+  border: 0;
   max-height: 300px;
   overflow-y: auto;
   background-color: $dropdown-bg;
+  text-transform: none;
+  padding: 0;
+  margin: 0;
   // color: $input-color;
   &.dropdown-menu-right {
     left: auto;
@@ -509,9 +513,15 @@ HR {
   }
 
   & > li > a {
+    padding: 5px 15px;
     cursor: pointer;
     cursor: hand;
     color: $dropdown-link-color;
+
+    &:hover {
+      background-color: $lightGrayTwo;
+      color: $primary;
+    }
   }
 
   & > li.selected > a,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "private": true,
   "directories": {
     "doc": "doc",