[Chrome] Made the kibana logo the fallback if there is no logo, hide …

…the user and settings icons.
elastic · Feb 8, 2016 · 74d5f24 · 74d5f24
1 parent 9abdc62
commit 74d5f24
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 4 deletions.
diff --git a/src/ui/public/chrome/chrome.html b/src/ui/public/chrome/chrome.html
@@ -1,22 +1,27 @@
 <div class="content" chrome-context >
   <!-- TODO: These config dropdowns shouldn't be hard coded -->
   <nav class="app-links-wrapper">
+    <li
+      ng-if="!chrome.getBrand('logo')  && !chrome.getBrand('smallLogo')"
+      aria-label="{{ chrome.getAppTitle() }} Logo"
+      class="logo kibana hidden-sm"
+      ></li>
     <li
       ng-if="chrome.getBrand('logo')"
       ng-style="{ 'background': chrome.getBrand('logo') }"
       aria-label="{{ chrome.getAppTitle() }} Logo"
       class="logo hidden-sm"
       ></li>
-
     <li
       ng-if="chrome.getBrand('smallLogo')"
       ng-style="{ 'background': chrome.getBrand('smallLogo') }"
       aria-label="{{ chrome.getAppTitle() }} Logo"
       class="logo-small visible-sm hidden-xs"
       ></li>
+
     <app-switcher>
     </app-switcher>
-    <div class="bottom-apps app-links">
+    <div class="bottom-apps hide app-links">
       <div class="app-link">
         <a href="http://elastic.co">
           <div class="app-icon">

diff --git a/src/ui/public/chrome/directives/app_switcher/app_switcher.less b/src/ui/public/chrome/directives/app_switcher/app_switcher.less
@@ -8,6 +8,8 @@
 @transition-time: .65s;
 @transition-delay: .2s;
 
+body { overflow-x: hidden; }
+
 .app-links-wrapper {
   width: @as-open-width;
   position: fixed;
@@ -33,6 +35,9 @@
     height: 70px;
     width: @as-open-width;
     list-style-type: none;
+    &.kibana {
+      background: url("~ui/images/kibana.svg") center / 160px 70px no-repeat #e8488b;
+    }
   }
   .bottom-apps {
     position: absolute;

diff --git a/src/ui/public/styles/mixins.less b/src/ui/public/styles/mixins.less
@@ -10,8 +10,8 @@
     flex-shrink: 0;
   }
 }
-.real-flex-parent(@display: flex, @flow: column nowrap) {
-  display: @display;
+.real-flex-parent(@flow: column nowrap) {
+  display: flex;
   flex-flow: @flow;
 }