From 2679c3864a2520e312c9be9113a5b2ecf13a839f Mon Sep 17 00:00:00 2001
From: Diana Whitten <hurgleburgler@gmail.com>
Date: Thu, 19 May 2016 12:10:22 -0700
Subject: [PATCH] Default theme lacks support for dropup menus

The default theme assumes ALL dropdowns are drop'down' menus, however
Bootstrap supports dropup menus as well.  This simplies the logic in
the theme's dropdown.scss file in order to support all Bootstrap
types.

Also, added the dropup to the theme preview page for ease of testing.

Closes-bug: #1583754
Change-Id: Ib05bc59c35371dc8b2291d4a0522cf4c52047813
---
 .../theme-preview/theme-preview.html          | 12 ++--
 .../dashboard/scss/components/_icons.scss     |  5 ++
 .../bootstrap/components/_dropdowns.scss      | 68 +++++++++++--------
 .../material/static/horizon/_icons.scss       |  1 +
 4 files changed, 51 insertions(+), 35 deletions(-)

diff --git a/openstack_dashboard/contrib/developer/static/dashboard/developer/theme-preview/theme-preview.html b/openstack_dashboard/contrib/developer/static/dashboard/developer/theme-preview/theme-preview.html
index a28ee81f0b..118c50b4dd 100644
--- a/openstack_dashboard/contrib/developer/static/dashboard/developer/theme-preview/theme-preview.html
+++ b/openstack_dashboard/contrib/developer/static/dashboard/developer/theme-preview/theme-preview.html
@@ -42,8 +42,8 @@
             <ul class="nav navbar-nav">
               <li class="active"><a translate href="#">Active</a></li>
               <li><a translate href="#">Link</a></li>
-              <li class="dropdown">
-                <a href="#" class="dropdown-toggle" data-toggle="dropdown">{$ 'Dropdown' | translate $} <b class="fa fa-caret-down"></b></a>
+              <li class="dropup">
+                <a href="#" class="dropdown-toggle" data-toggle="dropdown">{$ 'Dropup' | translate $} <b class="fa fa-caret-down"></b></a>
                 <ul class="dropdown-menu">
                   <li><a translate href="#">Action</a></li>
                   <li><a translate href="#">Another action</a></li>
@@ -60,9 +60,9 @@
             </form>
             <ul class="nav navbar-nav navbar-right">
               <li><a translate href="#">Link</a></li>
-              <li class="dropdown">
-                <a href="#" class="dropdown-toggle" data-toggle="dropdown">{$ 'Dropdown' | translate $} <b class="fa fa-caret-down"></b></a>
-                <ul class="dropdown-menu">
+              <li class="dropup">
+                <a href="#" class="dropdown-toggle" data-toggle="dropdown">{$ 'Dropup' | translate $} <b class="fa fa-caret-down"></b></a>
+                <ul class="dropdown-menu dropdown-menu-right">
                   <li><a translate href="#">Action</a></li>
                   <li><a translate href="#">Another action</a></li>
                   <li><a translate href="#">Something else here</a></li>
@@ -109,7 +109,7 @@
               <li><a translate href="#">Link</a></li>
               <li class="dropdown">
                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">{$ 'Dropdown' | translate $} <b class="fa fa-caret-down"></b></a>
-                <ul class="dropdown-menu">
+                <ul class="dropdown-menu dropdown-menu-right">
                   <li><a translate href="#">Action</a></li>
                   <li><a translate href="#">Another action</a></li>
                   <li><a translate href="#">Something else here</a></li>
diff --git a/openstack_dashboard/static/dashboard/scss/components/_icons.scss b/openstack_dashboard/static/dashboard/scss/components/_icons.scss
index d6fae9a9ee..100d495869 100644
--- a/openstack_dashboard/static/dashboard/scss/components/_icons.scss
+++ b/openstack_dashboard/static/dashboard/scss/components/_icons.scss
@@ -9,3 +9,8 @@
 .active > a > .hz-icon-required {
   color: $component-active-color;
 }
+
+// Dropup menus need to reverse the arrow
+.dropup .fa-caret-down {
+  @extend .fa-caret-up;
+}
diff --git a/openstack_dashboard/themes/default/bootstrap/components/_dropdowns.scss b/openstack_dashboard/themes/default/bootstrap/components/_dropdowns.scss
index d2db4544e5..9e493240ca 100644
--- a/openstack_dashboard/themes/default/bootstrap/components/_dropdowns.scss
+++ b/openstack_dashboard/themes/default/bootstrap/components/_dropdowns.scss
@@ -1,4 +1,15 @@
-@mixin dropdown_arrow($size, $offset) {
+@mixin dropdown_arrow($size, $offset, $location, $direction) {
+
+  $opposite_location: 'top';
+  @if $location == 'top' {
+    $opposite_location: 'bottom';
+  }
+
+  $opposite_direction: 'left';
+  @if $direction == 'left' {
+    $opposite_direction: 'right';
+  }
+
   &:before, &:after {
     position: absolute;
     content: '';
@@ -6,41 +17,40 @@
 
   // Defaults the arrow to the left side
   &:before {
-    top: ($size + 1) * -1;
-    left: $offset - 1;
-    border-right: ($size + 1) solid transparent;
-    border-bottom: ($size + 1) solid $dropdown-border;
-    border-left: ($size + 1) solid transparent;
-    border-bottom-color: rgba(0, 0, 0, 0.2);
+    #{$location}: ($size + 1) * -1;
+    #{$direction}: $offset - 1;
+    #{$opposite_location}: auto;
+    #{$opposite_direction}: auto;
+    border-#{$opposite_direction}: ($size + 1) solid transparent;
+    border-#{$opposite_location}: ($size + 1) solid $dropdown-border;
+    border-#{$direction}: ($size + 1) solid transparent;
+    border-#{$location}: 0;
+    border-#{$opposite_location}-color: rgba(0, 0, 0, 0.2);
   }
   &:after {
-    top: -$size;
-    left: $offset;
-    border-right: $size solid transparent;
-    border-bottom: $size solid $body-bg;
-    border-left: $size solid transparent;
-  }
-}
-
-@mixin dropdown_arrow_right($size, $offset) {
-  @include dropdown_arrow;
-  &:before, &:after {
-    left: auto;
-  }
-
-  &:before {
-    right: $offset - 1;
-  }
-
-  &:after {
-    right: $offset;
+    #{$location}: -$size;
+    #{$direction}: $offset;
+    #{$opposite_location}: auto;
+    #{$opposite_direction}: auto;
+    border-#{$opposite_direction}: $size solid transparent;
+    border-#{$opposite_location}: $size solid $body-bg;
+    border-#{$direction}: $size solid transparent;
+    border-#{$location}: 0;
   }
 }
 
 .dropdown-menu {
-  @include dropdown_arrow($dropdown-arrow-size, $dropdown-arrow-offset);
+  @include dropdown_arrow($dropdown-arrow-size, $dropdown-arrow-offset, 'top', 'left');
 }
 
 .dropdown-menu-right {
-  @include dropdown_arrow_right($dropdown-arrow-size, $dropdown-arrow-offset);
+  @include dropdown_arrow($dropdown-arrow-size, $dropdown-arrow-offset, 'top', 'right');
+}
+
+.dropup > .dropdown-menu {
+  @include dropdown_arrow($dropdown-arrow-size, $dropdown-arrow-offset, 'bottom', 'left');
+}
+
+.dropup > .dropdown-menu-right {
+  @include dropdown_arrow($dropdown-arrow-size, $dropdown-arrow-offset, 'bottom', 'right');
 }
diff --git a/openstack_dashboard/themes/material/static/horizon/_icons.scss b/openstack_dashboard/themes/material/static/horizon/_icons.scss
index b08a892c29..a6820775ef 100644
--- a/openstack_dashboard/themes/material/static/horizon/_icons.scss
+++ b/openstack_dashboard/themes/material/static/horizon/_icons.scss
@@ -18,6 +18,7 @@ $icon-swap: (
   ban: 'block-helper',
   bars: 'menu',
   bug: 'bug',
+  caret-up: 'menu-up',
   caret-down: 'menu-down',
   check: 'check',
   chevron-down: 'chevron-down',