updated the visualize navbar to use the new <navbar> element

src/kibana/apps/visualize/editor.html

@@ -1,83 +1,73 @@
  <div ng-controller="VisualizeEditor" class="vis-editor">
 
   <div ng-if="!appEmbedded">
-    <nav class="navbar navbar-default navbar-static-top">
-      <div class="container-fluid">
-        <div ng-if="vis.title" class="navbar-header pull-left">
-          <span class="navbar-brand">
-            {{vis.title}}
-          </span>
+    <navbar>
+      <span ng-if="!!vis.title" class="name" ng-bind="vis.title"></span>
+
+      <form ng-submit="doVisualize()" class="fill">
+        <div class="input-group">
+          <input
+            placeholder="Search..."
+            type="text"
+            class="form-control"
+            ng-model="state.query">
+          <span class="input-group-addon" ng-click="doVisualize()"><span class="fa fa-search"></span></span>
         </div>
 
-        <ul class="nav navbar-nav pull-right">
-          <li><a ng-click="startOver()" class="navbar-link"><i class="fa fa-file-o"></i></a></li>
-          <li><a ng-click="toggleSave()" class="navbar-link"><i class="fa fa-save"></i></a></li>
-          <li><a ng-click="toggleLoad()" class="navbar-link"><i class="fa fa-folder-open"></i></a></li>
-          <li><a ng-click="toggleShare()" class="navbar-link"><i class="fa fa-code"></i></a></li>
-          <li><a class="navbar-link" ng-click="doVisualize()"><i class="fa fa-refresh"></i></a></li>
-        </ul>
+        <div ng-if="linked && !unlinking"
+          ng-dblclick="unlink()"
+          tooltip="Double click to unlink this visualization from the saved search"
+          class="bitty-modal visualize-linked">
+          <i class="fa fa-link"></i>
+          &nbsp;
+          This visualization is linked to a saved search: <b>{{ vis.savedSearchId | json}}</b> <a href="#/discover/{{ vis.savedSearchId | uriescape }}"><i class="fa fa-pencil" tooltip="Click here to edit the linked saved search"></i></a>
+        </div>
 
-        <form ng-submit="doVisualize()" ng-class="{ 'navbar-form': true, 'first': !vis.title }">
-          <div class="form-group">
-            <div class="input-group">
-              <input
-                placeholder="Search..."
-                type="text"
-                class="form-control ng-pristine ng-valid"
-                ng-model="state.query">
-              <span class="input-group-addon" ng-click="doVisualize()"><span class="fa fa-search"></span></span>
+        <div ng-if="linked && unlinking" ng-click="doneUnlinking()" class="bitty-modal">
+          <i class="fa fa-chain-broken"></i> Unlinked!
+        </div>
+      </form>
 
-              <div ng-if="linked && !unlinking"
-                ng-dblclick="unlink()"
-                tooltip="Double click to unlink this visualization from the saved search"
-                class="bitty-modal visualize-linked">
-                <i class="fa fa-link"></i>
-                &nbsp;
-                This visualization is linked to a saved search: <b>{{ vis.savedSearchId | json}}</b> <a href="#/discover/{{ vis.savedSearchId | uriescape }}"><i class="fa fa-pencil" tooltip="Click here to edit the linked saved search"></i></a>
-              </div>
-
-              <div ng-if="linked && unlinking" ng-click="doneUnlinking()" class="bitty-modal">
-                <i class="fa fa-chain-broken"></i> Unlinked!
-              </div>
-            </div>
-          </div>
-        </form>
+      <div class="button-group">
+        <a ng-click="startOver()" class="btn"><i class="fa fa-file-o"></i></a>
+        <a ng-click="toggleSave()" class="btn"><i class="fa fa-save"></i></a>
+        <a ng-click="toggleLoad()" class="btn"><i class="fa fa-folder-open"></i></a>
+        <a ng-click="toggleShare()" class="btn"><i class="fa fa-code"></i></a>
+        <a ng-click="doVisualize()" class="btn"><i class="fa fa-refresh"></i></a>
       </div>
-    </nav>
+    </navbar>
     <config
       config-template="configTemplate"
       config-object="conf">
     </config>
-    <div class="container-fluid">
-      <div class="row vis-editor-content">
-        <div class="vis-sidebar">
-          <div class="sidebar-container">
-            <form class="sidebar-list" ng-submit="doVisualize()">
-              <ul class="list-unstyled">
-                <li ng-repeat="category in visConfigCategories.displayOrder" class="sidebar-item">
-                  <vis-config-category
-                    vis="vis"
-                    category="vis[category.name]"
-                    fields="fields">
-                  </vis-config-category>
-                </li>
-                <li class="sidebar-item">
-                  <div
-                    ng-click="doVisualize()"
-                    ng-if="vis.dirty"
-                    ng-disabled="httpActive.length"
-                    class="sidebar-item-button success">
-                    Apply
-                  </div>
-                </li>
-              </ul>
-            </form>
-          </div>
-        </div>
-        <div class="vis-canvas">
-          <vis-canvas><visualize vis="vis"></visualize></vis-canvas>
+    <div class="vis-editor-content">
+      <div class="vis-sidebar">
+        <div class="sidebar-container">
+          <form class="sidebar-list" ng-submit="doVisualize()">
+            <ul class="list-unstyled">
+              <li ng-repeat="category in visConfigCategories.displayOrder" class="sidebar-item">
+                <vis-config-category
+                  vis="vis"
+                  category="vis[category.name]"
+                  fields="fields">
+                </vis-config-category>
+              </li>
+              <li class="sidebar-item">
+                <div
+                  ng-click="doVisualize()"
+                  ng-if="vis.dirty"
+                  ng-disabled="httpActive.length"
+                  class="sidebar-item-button success">
+                  Apply
+                </div>
+              </li>
+            </ul>
+          </form>
         </div>
       </div>
+      <div class="vis-canvas">
+        <vis-canvas><visualize vis="vis"></visualize></vis-canvas>
+      </div>
     </div>
   </div>
 

src/kibana/apps/visualize/styles/main.css

@@ -70,9 +70,6 @@
 }
 @media (min-width: 992px) {
   .vis-editor-content {
-    margin-left: -16px;
-    margin-right: -16px;
-    margin-top: -1px;
     display: flex;
     -webkit-flex-direction: row;
     -moz-flex-direction: row;

src/kibana/apps/visualize/styles/main.less

@@ -5,9 +5,6 @@
 
 @media (min-width: @screen-md-min) {
   .vis-editor-content {
-    margin-left: -16px;
-    margin-right: -16px;
-    margin-top: -1px;
     display: flex;
     .flex-direction(row);
     .justify-content(flex-start);

src/kibana/styles/_navbar.less

@@ -0,0 +1,63 @@
+navbar {
+  max-height: @navbar-collapse-max-height;
+  margin-bottom: @navbar-margin-bottom;
+  // top and bottom padding are normally calcuated and stored in @navbar-padding-vertical, but flexbox
+  padding: @padding-base-vertical @navbar-padding-horizontal;
+  color: @navbar-default-color;
+  background-color: @navbar-default-bg;
+
+  border-style: solid;
+  border-color: @navbar-default-border;
+  border-width: 0 0 1px;
+
+  z-index: @zindex-navbar;
+
+  a {
+    color: @navbar-default-link-color;
+
+    &:hover {
+      color: @navbar-default-link-hover-color;
+      background-color: @navbar-default-link-hover-bg;
+    }
+
+    &:active {
+      color: @navbar-default-link-active-color;
+      background-color: @navbar-default-link-active-bg;
+    }
+
+    &:disabled {
+      color: @navbar-default-link-disabled-color;
+      background-color: @navbar-default-link-disabled-bg;
+    }
+  }
+
+  // TODO: do these apply?
+  // @navbar-default-toggle-hover-bg:            darken(@navbar-default-bg, 10%);
+  // @navbar-default-toggle-icon-bar-bg:         #fff;
+  // @navbar-default-toggle-border-color:        darken(@navbar-default-bg, 10%);
+
+  .flex-display();
+  // TODO: prefix mixin
+  flex-flow: row wrap;
+  align-items: center;
+
+  > .navbar-brand,
+  > .button-group {
+    .flex(0, 0, auto);
+  }
+
+  > .name {
+    font-size: @font-size-large;
+    max-width: @screen-sm;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding-right: @navbar-padding-horizontal;
+  }
+
+  > .fill {
+    .flex(1, 1, @screen-sm);
+  }
+}
+
+

src/kibana/styles/main.css

@@ -4897,7 +4897,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
   background-color: transparent;
 }
 .navbar-default .navbar-text {
-  color: #777777;
+  color: #ffffff;
 }
 .navbar-default .navbar-nav > li > a {
   color: #ffffff;
@@ -6999,6 +6999,77 @@ paginate .paginate-content {
   -ms-flex-basis: auto;
   flex-basis: auto;
 }
+navbar {
+  max-height: 340px;
+  margin-bottom: 0px;
+  padding: 5px 15px;
+  color: #ffffff;
+  background-color: #46525d;
+  border-style: solid;
+  border-color: #303840;
+  border-width: 0 0 1px;
+  z-index: 1000;
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -ms-box;
+  display: -webkit-flex;
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+}
+navbar a {
+  color: #ffffff;
+}
+navbar a:hover {
+  color: #31c471;
+  background-color: transparent;
+}
+navbar a:active {
+  color: #ffffff;
+  background-color: #303840;
+}
+navbar a:disabled {
+  color: #cccccc;
+  background-color: transparent;
+}
+navbar > .navbar-brand,
+navbar > .button-group {
+  -webkit-flex-grow: 0;
+  -moz-flex-grow: 0;
+  -ms-flex-grow: 0;
+  flex-grow: 0;
+  -webkit-flex-shrink: 0;
+  -moz-flex-shrink: 0;
+  -ms-flex-shrink: 0;
+  flex-shrink: 0;
+  -webkit-flex-basis: auto;
+  -moz-flex-basis: auto;
+  -ms-flex-basis: auto;
+  flex-basis: auto;
+}
+navbar > .name {
+  font-size: 19px;
+  max-width: 768px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding-right: 15px;
+}
+navbar > .fill {
+  -webkit-flex-grow: 1;
+  -moz-flex-grow: 1;
+  -ms-flex-grow: 1;
+  flex-grow: 1;
+  -webkit-flex-shrink: 1;
+  -moz-flex-shrink: 1;
+  -ms-flex-shrink: 1;
+  flex-shrink: 1;
+  -webkit-flex-basis: 768px;
+  -moz-flex-basis: 768px;
+  -ms-flex-basis: 768px;
+  flex-basis: 768px;
+}
 html,
 body {
   height: 100%;
@@ -7098,7 +7169,7 @@ notifications {
   background-color: transparent;
 }
 .config .navbar-text {
-  color: #777777;
+  color: #ffffff;
 }
 .config .navbar-nav > li > a {
   color: #ffffff;
@@ -7340,7 +7411,7 @@ table td .fa {
 .sidebar-container .sidebar-list .sidebar-list-header {
   padding-left: 10px;
   padding-right: 10px;
-  color: #777777;
+  color: #ffffff;
   border: 1px solid rgba(0, 0, 0, 0);
 }
 .sidebar-container .sidebar-list .sidebar-item {

src/kibana/styles/main.less

@@ -21,6 +21,9 @@
 // Pagniation directive
 @import "./_pagination.less";
 
+// custom navbar style
+@import "./_navbar.less";
+
 @fa-font-path: "../../bower_components/font-awesome/fonts";
 
 html,

src/kibana/styles/theme/_variables.less

@@ -333,7 +333,7 @@
 @navbar-padding-vertical:          ((@navbar-height - @line-height-computed) / 2);
 @navbar-collapse-max-height:       340px;
 
-@navbar-default-color:             #777;
+@navbar-default-color:             #fff;
 @navbar-default-bg:                @brand-primary;
 @navbar-default-border:            darken(@brand-primary, 10%);