From 0bfca75f4506e5e9a8a4dcf5090465f013ca13e1 Mon Sep 17 00:00:00 2001
From: Diana Whitten <hurgleburgler@gmail.com>
Date: Sun, 24 Jan 2016 16:57:02 -0700
Subject: [PATCH] Context Picker should inherit BS dropdown styles

The first step in the dynamic theme effort requires that the context
selection picker inherit properly from a dropdown menu, so that the
styles can be shared and the experience is matched.

Dynamic themes will use the 'select' experience of the context menu
but from within the user menu, so it was necessary to match the
experiences to minimize duplicated code.

The style of the context menu was extremely dependant on DOM structure
and therefore difficult to customize. This has been simplified by using
classes and attempting to keep specificity as low as possible.

Change-Id: Idb9e8f5c1d246688418f68e12fb53f094c01ea34
Partially-implements: blueprint horizon-dynamic-theme
Partially-Implements: blueprint bootstrap-html-standards
---
 .../scss/components/_context_selection.scss   | 51 ------------------
 .../dashboard/scss/components/_navbar.scss    |  6 +++
 .../scss/components/_selection_menu.scss      | 52 +++++++++++++++++++
 .../static/dashboard/scss/horizon.scss        |  2 +-
 .../context_selection/_domain_list.html       | 10 ++--
 .../context_selection/_project_list.html      | 14 ++---
 .../context_selection/_region_list.html       |  4 +-
 .../templates/header/_context_selection.html  |  2 +-
 .../themes/default/horizon/_styles.scss       |  1 +
 .../components/_context_selection.scss        | 44 +++++++---------
 .../default/horizon/components/_navbar.scss   |  3 ++
 .../material/static/horizon/_icons.scss       |  2 +-
 .../material/static/horizon/_styles.scss      |  2 +
 .../material/static/horizon/_variables.scss   |  2 +
 .../static/horizon/components/_navbar.scss    |  5 ++
 .../horizon/components/_selection_menu.scss   | 16 ++++++
 16 files changed, 124 insertions(+), 92 deletions(-)
 delete mode 100644 openstack_dashboard/static/dashboard/scss/components/_context_selection.scss
 create mode 100644 openstack_dashboard/static/dashboard/scss/components/_selection_menu.scss
 create mode 100644 openstack_dashboard/themes/default/horizon/components/_navbar.scss
 create mode 100644 openstack_dashboard/themes/material/static/horizon/components/_navbar.scss
 create mode 100644 openstack_dashboard/themes/material/static/horizon/components/_selection_menu.scss

diff --git a/openstack_dashboard/static/dashboard/scss/components/_context_selection.scss b/openstack_dashboard/static/dashboard/scss/components/_context_selection.scss
deleted file mode 100644
index 1f52e7c0c..000000000
--- a/openstack_dashboard/static/dashboard/scss/components/_context_selection.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-.context-selection {
-  & > li > ul {
-    padding: 0;
-
-    & > li {
-      white-space: nowrap;
-
-      &.dropdown-header,
-      & > a {
-        padding: $dropdown-item-padding-vertical $dropdown-item-padding-horizontal $dropdown-item-padding-vertical $dropdown-item-padding-horizontal*1.5;
-      }
-
-      &.dropdown-header {
-        color: $brand-primary;
-      }
-
-      &:not(.dropdown-header):hover {
-        background-color: $dropdown-link-hover-bg;
-        cursor: pointer;
-      }
-
-      & > a {
-        position: relative;
-        color: $dropdown-link-color;
-        text-decoration: none;
-        display: inline-block;
-        width: 100%;
-
-        & > .fa.fa-check {
-          float: left;
-          position: absolute;
-          left: $dropdown-item-padding-horizontal/2;
-          line-height: $line-height-computed;
-        }
-      }
-    }
-  }
-
-  .disabled {
-    cursor: not-allowed;
-    color: $dropdown-link-disabled-color;
-  }
-}
-
-.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 ee36b789b..c9c2e7ead 100644
--- a/openstack_dashboard/static/dashboard/scss/components/_navbar.scss
+++ b/openstack_dashboard/static/dashboard/scss/components/_navbar.scss
@@ -32,3 +32,9 @@
   }
 }
 
+.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/_selection_menu.scss b/openstack_dashboard/static/dashboard/scss/components/_selection_menu.scss
new file mode 100644
index 000000000..43ef7ccbb
--- /dev/null
+++ b/openstack_dashboard/static/dashboard/scss/components/_selection_menu.scss
@@ -0,0 +1,52 @@
+// FYI Note (hurgleburgler)
+// The Selection Menu is not a normal drop down element
+//   This menu can contain other dropdown menus, and will
+//   treat them as a selection group element.
+//   The context menu shows this functionality.
+//   This drop down is composed of other <ul> drop down lists.
+//   Because of this fact, it is necessary to inherit
+//   class="dropdown" for the children elements to obtain
+//   their necessary styles, but we must remove the default
+//   styles for .dropdown on the inner <ul> itself.
+
+.selection-menu {
+
+  // Pass along the style of a disabled anchor
+  .disabled {
+    cursor: not-allowed;
+    color: $dropdown-link-disabled-color;
+  }
+
+  // Remove all styles from an inside dropdown
+  .dropdown-menu {
+    border: medium none;
+    box-shadow: none;
+    display: block;
+    position: relative;
+    float: none;
+
+    // Remove any possible arrows on the dropdown box
+    &:before,
+    &:after {
+      border: none;
+      position: relative;
+    }
+
+    // Pad the icon with 2 * icon size
+    & > li > a {
+      padding-left: 2em;
+    }
+  }
+
+  // Hide the icon by default if its not selected
+  .dropdown-selected-icon {
+    display: none;
+  }
+
+  .dropdown-selected .dropdown-selected-icon {
+    display: inline;
+    position: absolute;
+    left: .5em;
+    line-height: $line-height-computed;
+  }
+}
diff --git a/openstack_dashboard/static/dashboard/scss/horizon.scss b/openstack_dashboard/static/dashboard/scss/horizon.scss
index 92b26483f..0766f4cb7 100644
--- a/openstack_dashboard/static/dashboard/scss/horizon.scss
+++ b/openstack_dashboard/static/dashboard/scss/horizon.scss
@@ -20,7 +20,6 @@
 // Dashboard Components
 @import "components/bar_charts";
 @import "components/charts";
-@import "components/context_selection";
 @import "components/datepicker";
 @import "components/forms";
 @import "components/inline_edit";
@@ -35,6 +34,7 @@
 @import "components/quota";
 @import "components/resource_browser";
 @import "components/resource_topology";
+@import "components/selection_menu";
 @import "components/sidebar";
 @import "components/table_actions";
 @import "components/tables";
diff --git a/openstack_dashboard/templates/context_selection/_domain_list.html b/openstack_dashboard/templates/context_selection/_domain_list.html
index 1e01e5ce0..e7576b0c2 100644
--- a/openstack_dashboard/templates/context_selection/_domain_list.html
+++ b/openstack_dashboard/templates/context_selection/_domain_list.html
@@ -1,11 +1,13 @@
 {% load i18n %}
 
-<ul>
+<ul class="dropdown-menu">
   <li class="dropdown-header">{% trans "Domains:" %}</li>
   <li>
-    <a class="disabled">
-      {{ domain_name }}
-      <span class="fa fa-check"></span>
+    <a class="disabled dropdown-selected">
+      <span class="fa fa-check dropdown-selected-icon"></span>
+      <span class="dropdown-title">
+        {{ domain_name }}
+      </span>
     </a>
   </li>
 </ul>
diff --git a/openstack_dashboard/templates/context_selection/_project_list.html b/openstack_dashboard/templates/context_selection/_project_list.html
index 1b5ed9a27..25c2eab19 100644
--- a/openstack_dashboard/templates/context_selection/_project_list.html
+++ b/openstack_dashboard/templates/context_selection/_project_list.html
@@ -1,15 +1,17 @@
 {% load i18n %}
 
 {% with dashboard_url=request.horizon.dashboard.get_absolute_url %}
-<ul>
+<ul class="dropdown-menu">
   <li class="dropdown-header">{% trans "Projects:" %}</li>
   {% for project in projects %}
   <li>
-    <a href="{% url 'switch_tenants' project.id %}?next={{ dashboard_url }}" target="_self">
-      {{ project.name }}
-      {% if project.enabled and project.id == project_id %}
-      <span class="fa fa-check"></span>
-      {% endif %}
+    <a class="{% if project.enabled and project.id == project_id %} dropdown-selected{% endif %}"
+       href="{% url 'switch_tenants' project.id %}?next={{ dashboard_url }}"
+       target="_self">
+      <span class="fa fa-check dropdown-selected-icon"></span>
+      <span class="dropdown-title">
+        {{ project.name }}
+      </span>
     </a>
   </li>
   {% endfor %}
diff --git a/openstack_dashboard/templates/context_selection/_region_list.html b/openstack_dashboard/templates/context_selection/_region_list.html
index 22c0acefe..5b58a3e94 100644
--- a/openstack_dashboard/templates/context_selection/_region_list.html
+++ b/openstack_dashboard/templates/context_selection/_region_list.html
@@ -1,12 +1,12 @@
 {% load i18n %}
 
 {% with panel_url=request.horizon.panel.get_absolute_url %}
-<ul>
+<ul class="dropdown-menu">
   <li class="dropdown-header">{% trans "Regions:" %}</li>
   {% for region in regions %}
   <li>
     <a href="{% url 'switch_services_region' region %}?next={{ panel_url }}" target="_self">
-      <span class="region-name">{{ region }}</span>
+      <span class="region-name dropdown-title">{{ region }}</span>
       {% if region == region_name %}
       <span class="fa fa-check"></span>
       {% endif %}
diff --git a/openstack_dashboard/templates/header/_context_selection.html b/openstack_dashboard/templates/header/_context_selection.html
index 4cee9aa2d..6420003db 100644
--- a/openstack_dashboard/templates/header/_context_selection.html
+++ b/openstack_dashboard/templates/header/_context_selection.html
@@ -9,7 +9,7 @@
       {% show_overview %}
       <span class="fa fa-caret-down"></span>
     </a>
-    <ul class="dropdown-menu context-selection">
+    <ul class="dropdown-menu context-selection selection-menu">
 
       {% comment %}
       is_multidomain is only available through an assignment tag pulled in through context_selection
diff --git a/openstack_dashboard/themes/default/horizon/_styles.scss b/openstack_dashboard/themes/default/horizon/_styles.scss
index f45c39e2a..142f493f7 100644
--- a/openstack_dashboard/themes/default/horizon/_styles.scss
+++ b/openstack_dashboard/themes/default/horizon/_styles.scss
@@ -3,6 +3,7 @@
 @import "components/breadcrumb_header";
 @import "components/context_selection";
 @import "components/messages";
+@import "components/navbar";
 @import "components/pie_charts";
 @import "components/quota";
 @import "components/sidebar";
diff --git a/openstack_dashboard/themes/default/horizon/components/_context_selection.scss b/openstack_dashboard/themes/default/horizon/components/_context_selection.scss
index a33c3e974..798fd23f2 100644
--- a/openstack_dashboard/themes/default/horizon/components/_context_selection.scss
+++ b/openstack_dashboard/themes/default/horizon/components/_context_selection.scss
@@ -1,44 +1,36 @@
 //Keep the native bootstrap experience for smaller screens
 @media(min-width: $screen-sm) {
 
-  .context-selection {
-    width: auto;
+  // Specificity required
+  .context-selection.dropdown-menu {
     padding: 0;
 
     & > li {
       display: table-cell;
+      vertical-align: top;
       padding: $padding-xs-horizontal 0;
 
-      & > ul > li {
-
-        &.dropdown-header,
-        & > a {
-          padding: $dropdown-item-padding-vertical $dropdown-item-padding-horizontal*2 $dropdown-item-padding-vertical $dropdown-item-padding-horizontal;
-        }
-
-        &.dropdown-header {
-          color: $dropdown-header-color;
-        }
-
-        & > a  {
-          display: inline-block;
-          width: 100%;
-
-          & > .fa.fa-check {
-            left: auto;
-            float: auto;
-            padding-left: $dropdown-item-padding-horizontal/2;
-          }
-        }
-      }
-
       &:not(:last-child) {
         border-right: 1px solid $gray-light;
       }
     }
+
+    .dropdown-menu > li > a {
+      padding-left: $dropdown-item-padding-horizontal;
+      display: flex;
+    }
+
+    .dropdown-title {
+     order: 1;
+    }
+
+    .dropdown-selected-icon {
+      position: relative;
+      order: 2;
+    }
   }
 
-  .open .context-selection {
+  .open .dropdown-selection {
     display: table;
 
     // display: table pushes down our little arrow a single pixel
diff --git a/openstack_dashboard/themes/default/horizon/components/_navbar.scss b/openstack_dashboard/themes/default/horizon/components/_navbar.scss
new file mode 100644
index 000000000..ea2d2140f
--- /dev/null
+++ b/openstack_dashboard/themes/default/horizon/components/_navbar.scss
@@ -0,0 +1,3 @@
+.context-delimiter {
+  font-size: $context-delimiter-size;
+}
\ No newline at end of file
diff --git a/openstack_dashboard/themes/material/static/horizon/_icons.scss b/openstack_dashboard/themes/material/static/horizon/_icons.scss
index b77fc40dd..cf22210bb 100644
--- a/openstack_dashboard/themes/material/static/horizon/_icons.scss
+++ b/openstack_dashboard/themes/material/static/horizon/_icons.scss
@@ -8,7 +8,7 @@ $mdi-font-path: $static_url + "/horizon/lib/mdi/fonts";
 
 .fa {
   @extend .mdi;
-  font-size: 1.3em;
+  font-size: $mdi-icon-size;
 }
 
 $icon-swap: (
diff --git a/openstack_dashboard/themes/material/static/horizon/_styles.scss b/openstack_dashboard/themes/material/static/horizon/_styles.scss
index 52ef8cb83..27821691c 100644
--- a/openstack_dashboard/themes/material/static/horizon/_styles.scss
+++ b/openstack_dashboard/themes/material/static/horizon/_styles.scss
@@ -3,6 +3,8 @@
 @import "components/messages";
 @import "components/hamburger";
 @import "components/magic_search";
+@import "components/navbar";
+@import "components/selection_menu";
 @import "components/sidebar";
 
 .login .splash-logo {
diff --git a/openstack_dashboard/themes/material/static/horizon/_variables.scss b/openstack_dashboard/themes/material/static/horizon/_variables.scss
index 32d923263..4f7132350 100644
--- a/openstack_dashboard/themes/material/static/horizon/_variables.scss
+++ b/openstack_dashboard/themes/material/static/horizon/_variables.scss
@@ -3,3 +3,5 @@ $hamburger-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
 $sidebar-animation: $hamburger-transition;
 
 $alert-shadow: 2px 2px 4px rgba(0, 0, 0, .4);
+
+$mdi-icon-size: 1.3em;
diff --git a/openstack_dashboard/themes/material/static/horizon/components/_navbar.scss b/openstack_dashboard/themes/material/static/horizon/components/_navbar.scss
new file mode 100644
index 000000000..d94cfd16c
--- /dev/null
+++ b/openstack_dashboard/themes/material/static/horizon/components/_navbar.scss
@@ -0,0 +1,5 @@
+.context-delimiter {
+  @extend .mdi-stop;
+  color: $gray-light;
+  font-size: $font-size-small;
+}
\ No newline at end of file
diff --git a/openstack_dashboard/themes/material/static/horizon/components/_selection_menu.scss b/openstack_dashboard/themes/material/static/horizon/components/_selection_menu.scss
new file mode 100644
index 000000000..bb5a2f3e2
--- /dev/null
+++ b/openstack_dashboard/themes/material/static/horizon/components/_selection_menu.scss
@@ -0,0 +1,16 @@
+.selection-menu {
+  .dropdown-menu > li > a {
+    padding-left: $mdi-icon-size*2;
+  }
+
+  .dropdown-selected {
+    .dropdown-selected-icon {
+      left: $mdi-icon-size/4;
+
+      @media (min-width: $screen-sm) {
+        color: $brand-primary;
+        left: $mdi-icon-size/2;
+      }
+    }
+  }
+}