From 4b5886d2764ccc05ab9e41b94cda9cdf4f16e2fa Mon Sep 17 00:00:00 2001
From: Diana Whitten <hurgleburgler@gmail.com>
Date: Sun, 24 Jan 2016 21:10:56 -0700
Subject: [PATCH] Branding: Nav icon spacing should use css

The padding around the Top Nav Bar's Dropdown Icons have been done
with actual text spaces, instead of relying on padding that is set
via css. This makes it very difficult to customize the padding
around these elements at a global level.

Some contextual classes have been added for ease of branding-level
customization.

Change-Id: I6768135351637db8a950a4b44366880817ce2df3
Closes-bug: #1537608
---
 .../templates/horizon/common/_region_selector.html |  2 +-
 .../scss/components/_context_selection.scss        |  2 ++
 .../static/dashboard/scss/components/_navbar.scss  | 14 ++++++++++++++
 .../templates/context_selection/_overview.html     |  6 +++---
 .../templates/context_selection/_region_list.html  |  2 +-
 .../templates/header/_user_menu.html               |  2 +-
 6 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/horizon/templates/horizon/common/_region_selector.html b/horizon/templates/horizon/common/_region_selector.html
index 63762eb957..c6672c37c7 100644
--- a/horizon/templates/horizon/common/_region_selector.html
+++ b/horizon/templates/horizon/common/_region_selector.html
@@ -1,6 +1,6 @@
 {% if regions.support %}
   <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
-    {{ regions.current.name }}
+    <span class="region-title">{{ regions.current.name }}</span>
     <span class="fa fa-caret-down"></span>
   </a>
   <ul id="region_list" class="dropdown-menu dropdown-menu-right">
diff --git a/openstack_dashboard/static/dashboard/scss/components/_context_selection.scss b/openstack_dashboard/static/dashboard/scss/components/_context_selection.scss
index 8dfe592c01..1f52e7c0c6 100644
--- a/openstack_dashboard/static/dashboard/scss/components/_context_selection.scss
+++ b/openstack_dashboard/static/dashboard/scss/components/_context_selection.scss
@@ -45,5 +45,7 @@
 .context-delimiter {
   font-size: $padding-small-vertical;
   vertical-align: middle;
+  padding-right: $padding-small-vertical;
+  padding-left: $padding-small-vertical;
 }
 
diff --git a/openstack_dashboard/static/dashboard/scss/components/_navbar.scss b/openstack_dashboard/static/dashboard/scss/components/_navbar.scss
index 6ef813e7e8..ee36b789bb 100644
--- a/openstack_dashboard/static/dashboard/scss/components/_navbar.scss
+++ b/openstack_dashboard/static/dashboard/scss/components/_navbar.scss
@@ -17,4 +17,18 @@
   .navbar {
     margin-bottom: 1px;
   }
+
+  .dropdown-toggle > .fa {
+    padding-left: $padding-small-vertical;
+    padding-right: $padding-small-vertical;
+
+    &:first-child {
+      padding-left: 0;
+    }
+
+    &:last-child {
+      padding-right: 0;
+    }
+  }
 }
+
diff --git a/openstack_dashboard/templates/context_selection/_overview.html b/openstack_dashboard/templates/context_selection/_overview.html
index 2a3191bdb0..a16bd9fd5b 100644
--- a/openstack_dashboard/templates/context_selection/_overview.html
+++ b/openstack_dashboard/templates/context_selection/_overview.html
@@ -1,12 +1,12 @@
 <span class="fa fa-list-alt"></span>
 <span class="context-overview">
   {% if domain_supported %}
-  <span class="context-domain"> {{ domain_name }} </span>
+  <span class="context-domain">{{ domain_name }}</span>
   <span class="fa fa-circle context-delimiter"></span>
   {% endif %}
-  <span class="context-project"> {{ project_name }} </span>
+  <span class="context-project">{{ project_name }}</span>
   {% if multi_region %}
   <span class="fa fa-circle context-delimiter"></span>
-  <span class="context-region"> {{ region_name }} </span>
+  <span class="context-region">{{ region_name }}</span>
   {% endif %}
 </span>
diff --git a/openstack_dashboard/templates/context_selection/_region_list.html b/openstack_dashboard/templates/context_selection/_region_list.html
index 1033f1ddf1..22c0acefe3 100644
--- a/openstack_dashboard/templates/context_selection/_region_list.html
+++ b/openstack_dashboard/templates/context_selection/_region_list.html
@@ -6,7 +6,7 @@
   {% for region in regions %}
   <li>
     <a href="{% url 'switch_services_region' region %}?next={{ panel_url }}" target="_self">
-      {{ region }}
+      <span class="region-name">{{ region }}</span>
       {% if region == region_name %}
       <span class="fa fa-check"></span>
       {% endif %}
diff --git a/openstack_dashboard/templates/header/_user_menu.html b/openstack_dashboard/templates/header/_user_menu.html
index 083c8a8352..ecea4a06ab 100644
--- a/openstack_dashboard/templates/header/_user_menu.html
+++ b/openstack_dashboard/templates/header/_user_menu.html
@@ -7,7 +7,7 @@
 {% endif %}
     <a data-toggle="dropdown" href="#" class="dropdown-toggle" role="button" aria-expanded="false">
       <span class="fa fa-user"></span>
-      {{ request.user.username }}
+      <span class="user-name">{{ request.user.username }}</span>
       <span class="fa fa-caret-down"></span>
     </a>
     <ul id="editor_list" class="dropdown-menu dropdown-menu-right">