From fd75e8c0a919fe8c88eb354de1c52a2a0b0ca2b3 Mon Sep 17 00:00:00 2001
From: Michael Krotscheck <krotscheck@gmail.com>
Date: Thu, 17 Mar 2016 08:50:59 -0700
Subject: [PATCH] Adjusted flow for header elements

The header components now flow in accordance to the approved
UI. The search bar extneds to the entire remaining width of the
screen, and small adjustments have been made to the title
to offer more space in smaller form factors. It was necessary
to move the branding into header.html, in order to permit
proper column sizing (nesting them created weird padding issues).

Note that this UI doesn't work too well on a mobile screen -
that experience should probably receive its own treatment.

http://git.openstack.org/cgit/openstack/openstack-ux/plain/mocks/Ironic%20Standalone%20-%2007%20March%202016.pdf

Change-Id: I1b1f8f9bb4f9f9e79b86260be3a554274d8c44ed
---
 app/css/bootstrap.scss             | 11 ++++
 app/js/modules/ironic/module.js    |  3 ++
 app/view/ironic/config_header.html | 11 ++++
 app/view/ironic/header.html        | 85 +++++++++++++++++-------------
 app/view/ironic/index.html         | 12 +----
 5 files changed, 74 insertions(+), 48 deletions(-)
 create mode 100644 app/view/ironic/config_header.html

diff --git a/app/css/bootstrap.scss b/app/css/bootstrap.scss
index 9577d66..f9004d9 100644
--- a/app/css/bootstrap.scss
+++ b/app/css/bootstrap.scss
@@ -8,3 +8,14 @@
   right: $grid-gutter-width / 2;
   bottom: $padding-base-horizontal;
 }
+
+// Navbar form that respects the column-grid
+.navbar-form-grid {
+  margin-left: -$navbar-padding-horizontal;
+  margin-right: -$navbar-padding-horizontal;
+  padding: 8px $navbar-padding-horizontal;
+  border-top: 1px solid transparent;
+  border-bottom: 1px solid transparent;
+  $shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
+  @include box-shadow($shadow);
+}
diff --git a/app/js/modules/ironic/module.js b/app/js/modules/ironic/module.js
index e518d7a..027c9d7 100644
--- a/app/js/modules/ironic/module.js
+++ b/app/js/modules/ironic/module.js
@@ -107,6 +107,9 @@ angular.module('ironic', ['ui.router', 'ui.bootstrap', 'ironic.util', 'ironic.ap
       .state('root.config', {
         url: '/config',
         views: {
+          header: {
+            templateUrl: 'view/ironic/config_header.html'
+          },
           main: {
             templateUrl: 'view/ironic/config.html',
             controller: 'ConfigurationController as ctrl'
diff --git a/app/view/ironic/config_header.html b/app/view/ironic/config_header.html
new file mode 100644
index 0000000..45ff7d0
--- /dev/null
+++ b/app/view/ironic/config_header.html
@@ -0,0 +1,11 @@
+<div class="row">
+  <div class="navbar-header col-lg-3 col-xs-2">
+    <a class="navbar-brand text-nowrap"
+       href="#/ironic"
+       active-path="^\/ironic$">
+      <i class="of of-openstack"></i>
+      <span class="hidden-sm hidden-md hidden-xs">OpenStack</span>
+      Bare Metal
+    </a>
+  </div>
+</div>
diff --git a/app/view/ironic/header.html b/app/view/ironic/header.html
index 42b0eac..6c257ce 100644
--- a/app/view/ironic/header.html
+++ b/app/view/ironic/header.html
@@ -1,39 +1,50 @@
-<ul class="nav navbar-nav navbar-left">
-  <li uib-dropdown is-open="status.isopen">
-    <a href="#"
-       uib-dropdown-toggle
-       data-toggle="dropdown">
-      {{headerCtrl.currentConfiguration.name}}
-      <span class="caret"></span>
+<div class="row">
+  <div class="navbar-header col-lg-3 col-xs-2">
+    <a class="navbar-brand text-nowrap"
+       href="#"
+       active-path="^\/ironic$">
+      <i class="of of-openstack"></i>
+      <span class="hidden-sm hidden-md hidden-xs">OpenStack</span>
+      Bare Metal
     </a>
-    <ul class="dropdown-menu">
-      <li class="dropdown-header">Switch to...</li>
-      <li ng-repeat="cloud in headerCtrl.configurations">
-        <a href="#"
-           ng-click="headerCtrl.switchCloud(cloud)">
-          <i class="fa fa-cloud"></i>&nbsp;
-          {{cloud.name}}
-        </a>
-      </li>
-      <li class="divider"></li>
-      <li>
-        <a href="#/config" class="text-muted">
-          <i class="fa fa-gear"></i>
-          Manage
-        </a>
-      </li>
-    </ul>
-  </li>
-</ul>
-<form class="navbar-form navbar-right" role="search">
-  <div class="form-group">
-    <input type="text"
-           class="form-control"
-           placeholder="Search"
-           disabled
-      />
   </div>
-  <button type="submit" class="btn btn-default" disabled>
-    Submit
-  </button>
-</form>
+  <ul class="nav navbar-nav col-xs-2">
+    <li uib-dropdown is-open="status.isopen">
+      <a href="#"
+         uib-dropdown-toggle
+         data-toggle="dropdown"
+         class="text-nowrap">
+        {{headerCtrl.currentConfiguration.name}}
+        <span class="caret"></span>
+      </a>
+      <ul class="dropdown-menu">
+        <li class="dropdown-header">Switch to...</li>
+        <li ng-repeat="cloud in headerCtrl.configurations">
+          <a href="#"
+             ng-click="headerCtrl.switchCloud(cloud)">
+            <i class="fa fa-cloud"></i>&nbsp;
+            {{cloud.name}}
+          </a>
+        </li>
+        <li class="divider"></li>
+        <li>
+          <a href="#/config" class="text-muted">
+            <i class="fa fa-gear"></i>
+            Manage
+          </a>
+        </li>
+      </ul>
+    </li>
+  </ul>
+  <div class="nav navbar-form-grid col-lg-7 col-xs-8">
+      <div class="col-xs-9 col-sm-10">
+        <input type="text"
+               class="form-control"
+               placeholder="Search"
+               disabled/>
+      </div>
+      <button type="submit" class="btn btn-default col-xs-3 col-sm-2" disabled>
+        Submit
+      </button>
+  </div>
+</div>
diff --git a/app/view/ironic/index.html b/app/view/ironic/index.html
index 0b595c8..6c36308 100644
--- a/app/view/ironic/index.html
+++ b/app/view/ironic/index.html
@@ -1,15 +1,5 @@
 <nav class="navbar navbar-default navbar-fixed-top">
-  <div class="container-fluid">
-    <div class="navbar-header">
-      <a class="navbar-brand"
-         href="#/ironic"
-         active-path="^\/ironic$">
-        <i class="of of-openstack"></i>
-        OpenStack Bare Metal
-      </a>
-    </div>
-    <div ui-view="header"></div>
-  </div>
+  <div class="container-fluid" ui-view="header"></div>
 </nav>
 
 <div class="container-fluid" ui-view="main"></div>