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

openstack_dashboard/static/dashboard/scss/components/_context_selection.scss

@@ -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;
-}
-

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;
+}

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;
+  }
+}

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";

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">
+    <a class="disabled dropdown-selected">
-      {{ domain_name }}
+      <span class="fa fa-check dropdown-selected-icon"></span>
-      <span class="fa fa-check"></span>
+      <span class="dropdown-title">
+        {{ domain_name }}
+      </span>
     </a>
   </li>
 </ul>

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">
+    <a class="{% if project.enabled and project.id == project_id %} dropdown-selected{% endif %}"
-      {{ project.name }}
+       href="{% url 'switch_tenants' project.id %}?next={{ dashboard_url }}"
-      {% if project.enabled and project.id == project_id %}
+       target="_self">
-      <span class="fa fa-check"></span>
+      <span class="fa fa-check dropdown-selected-icon"></span>
-      {% endif %}
+      <span class="dropdown-title">
+        {{ project.name }}
+      </span>
     </a>
   </li>
   {% endfor %}

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 %}

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

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";

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 {
+  // Specificity required
-    width: auto;
+  .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

openstack_dashboard/themes/default/horizon/components/_navbar.scss

@@ -0,0 +1,3 @@
+.context-delimiter {
+  font-size: $context-delimiter-size;
+}

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: (

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 {

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;

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;
+}

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;
+      }
+    }
+  }
+}