Merge lp:~huwshimi/juju-gui/new-header into lp:juju-gui/experimental

[Huw Wilkins]

Updated header to match the new design.

CHANGES:
Moved header css to own file.
Renamed classes and removed HTML that were specific Bootstrap.
Updated tests.
Set main header to use an id as there should only ever be one.
Updated colours and positioning to new design.
Added new logo file. Will update this again when we have an SVG of it.
Removed unnecessary HTML and made more semantically correct.
Re-ordered CSS to make more sense with the corresponding HTML and made it
more consistent.
Removed old image files.

TODO:
The new header is not yet responsive. That probably isn't worth doing until
we've moved the charm panel and removed the link and search from the header.
The notification button still uses Bootstrap and has not yet been styled
as per the new design.

Unmerged revisions

464. By Huw Wilkins on 2013-03-28

Styled header to match new design.

=== modified file 'app/app.js'
--- app/app.js	2013-03-26 16:09:53 +0000
+++ app/app.js	2013-03-28 06:55:24 +0000
@@ -403,7 +403,7 @@
 
       // Halts the default navigation on the juju logo to allow us to show
       // the real root view without namespaces
-      var navNode = Y.one('#nav-brand-env');
+      var navNode = Y.one('#header-brand');
       // Tests won't have this node.
       if (navNode) {
         navNode.on('click', function(e) {

=== removed file 'app/assets/images/alert_icon.png'
Binary files app/assets/images/alert_icon.png	2012-09-20 18:42:45 +0000 and app/assets/images/alert_icon.png	1970-01-01 00:00:00 +0000 differ
=== added file 'app/assets/images/header_nav_border.jpg'
Binary files app/assets/images/header_nav_border.jpg	1970-01-01 00:00:00 +0000 and app/assets/images/header_nav_border.jpg	2013-03-28 06:55:24 +0000 differ
=== added file 'app/assets/images/juju_logo_header.png'
Binary files app/assets/images/juju_logo_header.png	1970-01-01 00:00:00 +0000 and app/assets/images/juju_logo_header.png	2013-03-28 06:55:24 +0000 differ
=== removed file 'app/assets/images/top_bar.png'
Binary files app/assets/images/top_bar.png	2012-09-20 18:42:45 +0000 and app/assets/images/top_bar.png	1970-01-01 00:00:00 +0000 differ
=== modified file 'app/index.html'
--- app/index.html	2013-03-26 16:09:53 +0000
+++ app/index.html	2013-03-28 06:55:24 +0000
@@ -74,46 +74,35 @@
       <div id="viewport-wrapper">
         <div id="vp-left-border"></div>
         <div id="viewport">
-            <div class="navbar">
-              <div id="nav-brand-env">
-                <span>
-                  <a class="brand" href="/">
-                    <i class="sprite juju_logo" title="Juju GUI"></i>
-                  </a>
-                </span>
-                <span class="nav-container">
-                  <span class="nav-section">
-                    <i class="sprite environment_icon"></i>
-                    <span id="environment-name"></span>
-                    <span id="provider-type" class="provider-type"></span>
-                  </span>
-                </span>
-              </div>
-              <div id="nav-alerts-charms">
-                <span class="nav-container">
-                  <span class="nav-section">
-                    <i class="sprite alert_icon"></i>
-                    Alerts
-                    <span id="notifications"></span>
-                  </span>
-                </span>
-                <span class="nav-container">
-                  <span class="nav-section active-border">
-                    <a href="/logout/" id="logout-trigger">Logout</a>
-                  </span>
-                </span>
-                <span class="nav-container" id="charm-search-trigger-container">
-                  <span class="nav-section active-border">
-                    <span id="charm-search-trigger">
-                      <i id="charm-search-icon" class="sprite charm_icon"></i>
-                      Charms
-                      <i id="charm-search-chevron" class="sprite chevron_down"></i>
-                    </span>
-                    <input type="text" id="charm-search-field"
-                     required="required" placeholder="Search for a charm" />
-                  </span>
-                </span>
-              </div>
+            <div id="header">
+              <div id="header-brand">
+                <a class="brand" href="/">
+                  <i class="sprite juju_logo_header" title="Juju GUI"></i>
+                </a>
+                <i class="sprite environment_icon"></i>
+                <span id="environment-name"></span>
+                <span id="provider-type" class="provider-type"></span>
+              </div>
+              <ul id="header-nav" class="nav">
+                <li>
+                  <span id="notifications"></span>
+                  Alerts
+                </li>
+                <li>
+                  <a href="/logout/" id="logout-trigger">Logout</a>
+                </li>
+                <li id="charm-search-trigger-container">
+                  <span id="charm-search-trigger">
+                    <i id="charm-search-icon" class="sprite charm_icon"></i>
+                    Charms
+                    <i id="charm-search-chevron"
+                       class="sprite chevron_down"></i>
+                  </span>
+                  <input type="text" id="charm-search-field"
+                   required="required" placeholder="Search for a charm" />
+                </li>
+              </ul>
+              <div class="gutter"></div>
             </div>
 
             <div id="content">

=== modified file 'app/views/service.js'
--- app/views/service.js	2013-03-26 21:13:04 +0000
+++ app/views/service.js	2013-03-28 06:55:24 +0000
@@ -398,7 +398,7 @@
               viewContainer = container.one('.view-container');
           if (viewContainer) {
             Y.fire('beforePageSizeRecalculation');
-            var navbarHeight = getHeight(Y.one('.navbar')),
+            var navbarHeight = getHeight(Y.one('#header')),
                 windowHeight = container.get('winHeight'),
                 headerHeight = getHeight(container.one(
                     '.service-header-partial')),

=== modified file 'app/views/utils.js'
--- app/views/utils.js	2013-03-26 21:13:04 +0000
+++ app/views/utils.js	2013-03-28 06:55:24 +0000
@@ -988,7 +988,7 @@
     var containerHeight = Y.one('body').get(
         primary ? 'winHeight' : 'docHeight'),
         bottomNavbar = Y.one('.bottom-navbar'),
-        navbar = Y.one('.navbar'),
+        navbar = Y.one('#header'),
         viewport = Y.one('#viewport'),
         result = {height: minheight || 0, width: minwidth || 0};
     if (containerHeight && navbar && viewport) {

=== added directory 'lib/views/base'
=== added file 'lib/views/base/header.less'
--- lib/views/base/header.less	1970-01-01 00:00:00 +0000
+++ lib/views/base/header.less	2013-03-28 06:55:24 +0000
@@ -0,0 +1,94 @@
+#header {
+    position: relative;
+    height: 76px;
+    margin: -87px 0 0 0;
+    padding-top: 12px;
+    background-color: #505050;
+    border-bottom: 2px solid #606060;
+    color: @navbar-color;
+
+    #header-brand {
+        float: left;
+        margin: 0 0 12px 20px;
+
+        .brand {
+            display: inline-block;
+            margin-right: 26px;
+            padding: 0;
+        }
+        .provider-type {
+            font-size: 0.7em;
+        }
+    }
+    #header-nav {
+        float: right;
+        margin: 3px 18px 0 0;
+
+        li {
+            display: inline-block;
+            padding: 6px 21px;
+            background: transparent
+                        url(/juju-ui/assets/images/header_nav_border.jpg)
+                        repeat-y top left;
+
+            #charm-search-trigger {
+                cursor: pointer;
+            }
+            #logout-trigger {
+                display: inline-block;
+                padding: 3px 0 7px 0;
+            }
+            #notifications {
+                position: relative;
+            }
+            .btn {
+                margin: 0 5px;
+            }
+            input {
+                height: 23px;
+                width: 128px;
+                background: url(/juju-ui/assets/images/searchbox_icon.png)
+                            no-repeat 4px 4px whiteSmoke;
+                margin: -3px 10px 0 10px;
+                padding: 3px 3px 3px 26px;
+                font-style: italic;
+                font-size: 0.9em;
+
+                &:valid {
+                    background: white;
+                    padding: 3px;
+                    width: 151px;
+                    font-style: normal;
+                    font-size: 1em;
+                }
+                &:focus {
+                    color: gray;
+                    border-color: rgba(82, 168, 236, 0.8);
+                    outline: 0;
+                    outline: thin dotted 9;
+                    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
+                                0 0 8px rgba(82, 168, 236, 0.6);
+                }
+            }
+            #charm-search-trigger-container {
+                width: @charm-panel-width - 39px;
+                white-space: nowrap;
+                border-left: 1px solid transparent;
+                &.active-border {
+                    border-left-color: darkgray;
+                    .create-box-shadow(inset 1px 0 0 lightgray);
+                }
+            }
+            a, a:hover, a:visited, a:active {
+                color: @navbar-color;
+                text-decoration: none;
+            }
+        }
+    }
+    .gutter {
+        clear: both;
+        height: 16px;
+        background-color: #404040;
+        border-top: 2px solid #000;
+    }
+}

=== modified file 'lib/views/stylesheet.less'
--- lib/views/stylesheet.less	2013-03-27 03:08:15 +0000
+++ lib/views/stylesheet.less	2013-03-28 06:55:24 +0000
@@ -21,7 +21,7 @@
 @charm-panel-configure-color: #2F2A27;
 @charm-panel-padding-left: 10px;
 @charm-panel-width: 292px;
-@navbar-color: #2D2D2D!important;
+@navbar-color: #eeeeee;
 
 
 body {
@@ -108,102 +108,6 @@
     }
 }
 
-.navbar {
-    margin-top: -87px;
-    margin-bottom: 0;
-    height: 87px;
-    min-width: 800px;
-    background: url(/juju-ui/assets/images/top_bar.png) repeat-x;
-    padding: 0;
-    position: relative;
-    color: @navbar-color;
-    .brand {
-        margin: 12px 26px 6px 10px;
-        padding: 0;
-    }
-    > div {
-        padding: 0;
-        .nav-container {
-            display: inline-block;
-            height: 44px;
-            margin: 2px 0 0 0;
-            padding: 20px 0 4px;
-            &#charm-search-trigger-container {
-                width: @charm-panel-width;
-                white-space: nowrap;
-                border-left: 1px solid transparent;
-                &.active-border {
-                    border-left-color: darkgray;
-                    .create-box-shadow(inset 1px 0 0 lightgray);
-                }
-            }
-            .nav-section {
-                border-left: 1px solid transparent;
-                &.active-border {
-                    border-left-color: lightgray;
-                }
-                display: inline-block;
-                padding: 4px 10px;
-                #charm-search-trigger {
-                    cursor: pointer;
-                }
-                #logout-trigger {
-                    display: inline-block;
-                    padding: 5px 0 8px 5px;
-                }
-                .btn {
-                    margin: 0 5px;
-                }
-                input {
-                    height: 23px;
-                    width: 128px;
-                    background: url(/juju-ui/assets/images/searchbox_icon.png)
-                                no-repeat 4px 4px whiteSmoke;
-                    margin: 0 10px;
-                    padding: 3px 3px 3px 26px;
-                    font-style: italic;
-                    font-size: 0.9em;
-                    &:valid {
-                        background: white;
-                        padding: 3px;
-                        width: 151px;
-                        font-style: normal;
-                        font-size: 1em;
-                    }
-                    &:focus {
-                        color: gray;
-                        border-color: rgba(82, 168, 236, 0.8);
-                        outline: 0;
-                        outline: thin dotted 9;
-                        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
-                                    0 0 8px rgba(82, 168, 236, 0.6);
-                    }
-                }
-                a, a:hover, a:visited, a:active {
-                    color: @navbar-color;
-                    text-decoration: none;
-                }
-            }
-        }
-        span:first-child .nav-section {
-            border-left: none;
-            padding: 0 6px;
-        }
-        &#nav-alerts-charms {
-            float: right;
-            .nav-container:first-child .nav-section {
-                position: relative;
-            }
-        }
-        &#nav-brand-env .nav-container {
-            float: left;
-            .provider-type {
-                font-size: 0.7em;
-            }
-        }
-    }
-}
-
 .bottom-navbar {
     min-width: 800px;
     height: 50px;
@@ -818,7 +722,7 @@
     &.charm-filter-picker {
         left: 11px;
         padding-bottom: 5px;
-        @top: 0px;
+        @top: 4px;
         top: @top;
         .create-picker(270px, @top, @top, initial);
         .picker-expanded .picker-list {
@@ -1639,6 +1543,9 @@
     }
 }
 
+/** Base **/
+@import "base/header.less";
+
 /** SubApps **/
 @import "browser/main.less";
 

=== modified file 'test/test_application_notifications.js'
--- test/test_application_notifications.js	2013-03-25 15:04:06 +0000
+++ test/test_application_notifications.js	2013-03-28 06:55:24 +0000
@@ -248,7 +248,7 @@
 
   it('should add a notification for "permissionDenied" exceptions (app)',
       function() {
-        var logoNode = Y.Node.create('<div id="nav-brand-env"></div>');
+        var logoNode = Y.Node.create('<div id="header-brand"></div>');
         Y.one('body').append(logoNode);
         var app = new juju.App();
         app.env.fire('permissionDenied', {title: 'title', message: 'message'});

=== modified file 'test/test_environment_view.js'
--- test/test_environment_view.js	2013-03-26 16:09:53 +0000
+++ test/test_environment_view.js	2013-03-28 06:55:24 +0000
@@ -625,7 +625,7 @@
        function() {
          // The height of a navbar is used in calculating the viewport size,
          // so add a temporary one to the DOM
-         var navbar = Y.Node.create('<div class="navbar" ' +
+         var navbar = Y.Node.create('<div id="header" ' +
              'style="height:70px;">Navbar</div>');
          Y.one('body').append(navbar);
          var viewport = Y.Node.create('<div id="viewport" ' +

=== modified file 'test/test_notifications.js'
--- test/test_notifications.js	2013-03-20 20:40:10 +0000
+++ test/test_notifications.js	2013-03-28 06:55:24 +0000
@@ -72,7 +72,7 @@
       juju = Y.namespace('juju');
       models = Y.namespace('juju.models');
       views = Y.namespace('juju.views');
-      logoNode = Y.Node.create('<div id="nav-brand-env"></div>');
+      logoNode = Y.Node.create('<div id="header-brand"></div>');
       Y.one('body').append(logoNode);
       done();
     });
@@ -188,7 +188,7 @@
 
   it('must be able to include and show object links', function() {
     var container = Y.Node.create('<div id="test">'),
-        logoNode = Y.Node.create('<div id="nav-brand-env"></div>'),
+        logoNode = Y.Node.create('<div id="header-brand"></div>'),
         conn = new(Y.namespace('juju-tests.utils')).SocketStub(),
         env = juju.newEnvironment({conn: conn}),
         app = new Y.juju.App({env: env, container: container}),