Restyled sidebar to resemble UX guidelines

Partially-Implements: blueprint navigation-styling
Closes-Bug: #1365680

Change-Id: I37e603ee5ba310ba5f18b69df4c1cd6fa529c1d9

horizon/static/horizon/js/horizon.accordion_nav.js

@@ -79,7 +79,7 @@ horizon.addInitFunction(function() {
   });
 
   // panel selection
-  $('.nav_accordion > dd > ul > li > a').click(function() {
+  $('.nav_accordion > dd > div > ul > li > a').click(function() {
     horizon.modals.modal_spinner(gettext("Loading"));
   });
 

horizon/templates/base.html

@@ -26,8 +26,12 @@
             {% include 'horizon/common/_sidebar.html' %}
           {% endblock %}
           <div id='content_body'>
-            {% block page_header %}{% endblock %}
+            <div class="row">
-            {% block main %}{% endblock %}
+              <div class="col-xs-12">
+                {% block page_header %}{% endblock %}
+                {% block main %}{% endblock %}
+              </div>
+            </div>
           </div>
         </div>
       </div>

horizon/templates/horizon/_accordion_nav.html

@@ -1,40 +1,42 @@
 {% load horizon i18n %}
 {% load url from future %}
 
-<div>
+<dl class="nav_accordion">
-  <dl class="nav_accordion">
+{% for dashboard, panel_info in components %}
-  {% for dashboard, panel_info in components %}
+  {% if user|has_permissions:dashboard %}
-    {% if user|has_permissions:dashboard %}
+    {% if dashboard.supports_tenants and request.user.authorized_tenants or not dashboard.supports_tenants %}
-      {% if dashboard.supports_tenants and request.user.authorized_tenants or not dashboard.supports_tenants %}
+      <dt {% if current.slug == dashboard.slug %}class="active"{% endif %}>
-        <dt {% if current.slug == dashboard.slug %}class="active"{% endif %}>
+        {{ dashboard.name }}
-          <div>{{ dashboard.name }}</div>
+        <span class="glyphicon pull-right"></span>
-        </dt>
+      </dt>
-        {% if current.slug == dashboard.slug %}
+      {% if current.slug == dashboard.slug %}
-        <dd>
+      <dd>
-        {% else %}
+      {% else %}
-        <dd style="display:none;">
+      <dd style="display:none;">
-        {% endif %}
-        {% for heading, panels in panel_info.iteritems %}
-          {% with panels|has_permissions_on_list:user as filtered_panels %}
-          {% if filtered_panels %}
-            {% if heading %}
-            <div><h4><div>{{ heading }}</div></h4>
-            {% endif %}
-            <ul>
-            {% for panel in filtered_panels %}
-              <li><a href="{{ panel.get_absolute_url }}" {% if current.slug == dashboard.slug and current_panel == panel.slug %}class="active"{% endif %} tabindex="{{ forloop.counter }}" >{{ panel.name }}</a></li>
-            {% endfor %}
-            </ul>
-            {% if heading %}
-              </div>
-            {% endif %}
-          {% endif %}
-          {% endwith %}
-        {% endfor %}
-        </dd>
       {% endif %}
+      {% for heading, panels in panel_info.iteritems %}
+        {% with panels|has_permissions_on_list:user as filtered_panels %}
+        {% if filtered_panels %}
+          {% if heading %}
+          <div>
+            <h4>
+              {{ heading }}
+              <span class="glyphicon pull-right"></span>
+            </h4>
+          {% endif %}
+          <ul>
+          {% for panel in filtered_panels %}
+            <li><a href="{{ panel.get_absolute_url }}" {% if current.slug == dashboard.slug and current_panel == panel.slug %}class="active"{% endif %} tabindex="{{ forloop.counter }}" >{{ panel.name }}</a></li>
+          {% endfor %}
+          </ul>
+          {% if heading %}
+            </div>
+          {% endif %}
+        {% endif %}
+        {% endwith %}
+      {% endfor %}
+      </dd>
     {% endif %}
-  {% endfor %}
+  {% endif %}
-  </dl>
+{% endfor %}
-</div>
+</dl>
-

openstack_dashboard/static/dashboard/scss/_accordion_nav.scss

@@ -1,100 +1,103 @@
-$accordionBorderColor: #e5e5e5;
+$accordionBorderColor: #aeb0b2;
+
+@mixin sidebar_toggle_icon {
+  & > span {
+    transition: all .3s ease 0s;
+    @extend .glyphicon-chevron-down;
+    &:before {
+      font-size: .6em;
+      line-height: 18px;
+      vertical-align: middle;
+    }
+  }
+  &.active > span {
+    -ms-transform: rotate(180deg); /* IE 9 */
+    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
+    transform: rotate(180deg);
+  }
+}
 
 .nav_accordion {
   color: #6e6e6e;
   margin: 0px 0px;
   dt, dd {
-    padding: 10px 0 10px 0;
     line-height: 18px;
     h4 {
-      border: 1px solid #bbbbbb;
+      padding: .5em 0 .3em 0;
-      border-right: 0;
+      margin: 0 1.2em .5em 1.2em;
-      border-bottom: 0;
+      border-bottom: 3px solid #c0c1c2;
-      background-color: #f0f0f0;
+      font-size: $font-size-base;
-      background-repeat: no-repeat;
+      line-height: $line-height-base;
-      background-position: 96% center;
-      background-image: url("../img/right_droparrow.png");
-      padding: 10px 0 10px 0;
-      line-height: 16px;
-      margin-top: 0;
-      margin-bottom: 0;
       color: #6e6e6e;
       font-weight: bold;
       text-rendering: optimizelegibility;
-      max-width: 217px;
-      padding-right: 16px;
       cursor: pointer;
-      div {
+      @include sidebar_toggle_icon();
-        color: #6e6e6e;
+      transition: all .3s ease 0s;
-        font-size: 14px;
+      &:hover{
-        margin: 0 0 0 14px;
+        border-color: darken(#c0c1c2, 10%)
-        display: block;
+      }
-        font-weight: bold;
+    }
-        outline: none;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        max-width: 177px; } }
-    h4.active {
-      border-bottom: 1px solid #bbbbbb;
-      background-image: url("../img/drop_arrow.png"); }
-    a {
-      color: #6e6e6e;
-      font-size: 16px;
-      margin: 0 0 0 14px;
-      padding: 0;
-      display: block;
-      font-weight: bold;
-      outline: none;
-      text-decoration: none; }
     ul {
       list-style: none outside none;
-      margin: 10px 0 0;
+      margin: 0;
       padding: 0;
-      width: 222px; }
+    }
     li {
+      &:not(:first-child) a {
+        margin-top: .2em;
+      }
+      &:not(:last-child) a {
+        margin-bottom: .2em;
+      }
       a {
-        width: 209px;
+        color: #6e6e6e;
-        padding: 10px;
+        padding: .7em 1.2em;
+        outline: none;
+        text-decoration: none;
         display: block;
-        line-height: 18px;
+        font-size: 1.2em;
-        margin-left: 20px;
+        text-align: right;
-        font-weight: normal;
+        transition: all .3s ease 0s;
-        font-size: 13px; }
+        &.active, &:hover {
-      a.active {
+          color: #d93c27;
-        background: white;
+        }
-        border-top: 2px solid $accordionBorderColor;
+        &.active {
-        border-left: 4px solid #d93c27;
+          background: white;
-        border-bottom: 2px solid $accordionBorderColor;
+          border-top: 1px solid $accordionBorderColor;
-        margin-left: 19px;
+          border-left: 4px solid #d93c27;
-        border-radius: 5px 0 0 5px; }
+          border-bottom: 1px solid $accordionBorderColor;
-      a:last-child {
+          -webkit-box-shadow: -3px 2px 6px -3px #C7C7C7;
-        margin-bottom: 8px; } } }
+          box-shadow: -3px 3px 6px -3px #C7C7C7;
+        }
+      }
+    }
+  }
   dd {
     padding: 0;
-    margin-left: 9px;
+    border-bottom: 1px solid #bbbbbb;
-    font-size: 12px; }
+    div {
+      &:first-child h4 {
+        margin-top: .5em;
+      }
+      &:last-child h4:not(.active) {
+        margin-bottom: 1em;
+      }
+    }
+  }
   dt {
-    border-top: 1px solid #bbbbbb;
+    &:first-child { border-top: 1px solid #bbbbbb; }
-    background-color: $accordionBorderColor;
+    border-bottom: 1px solid #bbbbbb;
-    background-repeat: no-repeat;
+    padding: .5em 1.2em;
-    background-position: 96% center;
-    background-image: url("../img/right_droparrow.png");
-    padding-right: 16px;
     max-width: 231px;
     cursor: pointer;
-    div {
+    @include sidebar_toggle_icon();
-      color: #6e6e6e;
+    transition: all .3s ease 0s;
-      font-size: 14px;
+    &.active {
-      margin: 0 0 0 14px;
+      background-color: #e3e4e6;
-      padding: 0;
+    }
-      font-weight: bold;
+    &:hover{
-      outline: none;
+      background-color: darken(#e3e4e6, 3%)
-      overflow: hidden;
+    }
-      text-overflow: ellipsis;
+  }
-      max-width: 201px; } }
+}
-  dt.active {
-    background-image: url("../img/drop_arrow.png"); }
-  dt:first-child {
-    border-top: 0; }
-  dt a {
-    text-decoration: none; } }

openstack_dashboard/static/dashboard/scss/_variables.scss

@@ -52,3 +52,5 @@ $rbrowser-header-background-color: $gray-lighter;
 $rbrowser-footer-background-color: #f1f1f1;
 // Note: the content-wrapper background colors are determined by
 //       .table-striped-datatable styles.
+
+$sidebar-width: 220px;

openstack_dashboard/static/dashboard/scss/horizon.scss

@@ -43,6 +43,11 @@
 
 body {
   background-color: $body-bg;
+  &:not(#splash) {
+    background-image: url('../img/sidebar_bg.png');
+    background-repeat: repeat-y;
+    background-position: -200px top;
+  }
   color: $text-color;
   min-width: 900px;
 }
@@ -142,12 +147,14 @@ h2 {
 
 .sidebar {
   background-color: $sidebar-background-color;
-  border-width: 0 6px 5px 0;
+  padding-top: 20px;
-  border-color: $border-color;
+  margin-left: -$sidebar-width;
-  border-style: solid;
+  left: $sidebar-width;
-  border-radius: 0 0 5px 0;
+  width: $sidebar-width;
-  float: left;
+  position: absolute;
-  min-width: 236px;
+  z-index: 0;
+  -webkit-box-shadow:inset -3px 2px 6px -2px #C7C7C7, inset -1px 0 0 0 #cccccc;
+  box-shadow:inset -3px 2px 6px -2px #C7C7C7, inset -1px 0 0 0 #cccccc;
 }
 
 .sidebar h4 {
@@ -1063,8 +1070,8 @@ tr.terminated {
 }
 
 #content_body {
-  padding-left: 255px;
+  padding-left: $sidebar-width + 15px;
-  padding-right: 25px;
+  padding-right: 15px;
 }
 
 .tab_wrapper {
@@ -1238,10 +1245,6 @@ div .flavor_table {
   width: 160px;
 }
 
-#main_content .row {
-  margin: 10px 0 20px;
-}
-
 #main_content .row:last-child {
   margin-bottom: 0;
 }