Many dropdown actions are white text on white background

A recent CSS change has made many of the table actions (both row and
table) invisible, as they are white text on a white background.

This change was caused by two separate reviews merging around the
same time that had adverse affects on each other.

Closes-bug: #1572213

Change-Id: I78a12c4ed435fe22db0845b428b7229a6882e4f0

horizon/templates/horizon/common/_data_table_action.html

@@ -3,14 +3,13 @@
   {% if action.method != "GET" %}
     <button {{ action.attr_string_nc|safe }}
       class="
-        {% if is_single %}btn {% endif %}
         {% if is_small %}btn-sm{% endif %}
         {% for class in action.get_default_classes %}
           {{ class }}
         {% endfor %}
         {% if action.action_type %}
           btn-{{ action.action_type }}
-        {% endif %}"
+        {% endif %} btn"
       name="action"
       {% if action.help_text %}
         help_text="{{ action.help_text }}"
@@ -33,7 +32,7 @@
     </button>
   {% else %}
     <a {{ action.attr_string_nc|safe }}
-      class="{% if is_single %}btn btn-default {% endif %}{% if is_small %}btn-sm {% endif %}{{ action.get_final_css|safe }}"
+      class="btn {% if is_single %}btn-default {% endif %}{% if is_small %}btn-sm {% endif %}{{ action.get_final_css|safe }}"
       {% if is_table_action %}
         href="{{ action.get_link_url }}"
         title="{{ action.verbose_name }}">

openstack_dashboard/contrib/developer/static/dashboard/developer/theme-preview/theme-preview.html

@@ -290,12 +290,6 @@
 
           <div class="btn-group">
             <button translate type="button" class="btn btn-default">5</button>
-            <button translate type="button" class="btn btn-default">6</button>
-            <button translate type="button" class="btn btn-default">7</button>
-          </div>
-
-          <div class="btn-group">
-            <button translate type="button" class="btn btn-default">8</button>
             <div class="btn-group">
               <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                 {$ 'Dropdown' | translate $}
@@ -308,6 +302,46 @@
                </ul>
             </div>
           </div>
+
+          <div class="btn-group">
+            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+              {$ 'Actions' | translate $}
+              <span class="fa fa-caret-down"></span>
+            </button>
+            <ul class="dropdown-menu">
+              <li>
+                <a class="btn btn-default" translate href="#">Default Anchor</a>
+              </li>
+              <li>
+                <button class="btn btn-default" translate href="#">Default Button</button>
+              </li>
+              <li>
+                <a class="btn btn-primary" translate href="#">Primary Anchor</a>
+              </li>
+              <li>
+                <button class="btn btn-primary" translate href="#">Primary Button</button>
+              </li>
+              <li>
+                <a class="btn btn-info" translate href="#">Info Anchor</a>
+              </li>
+              <li>
+                <button class="btn btn-info" translate href="#">Info Button</button>
+              </li>
+              <li>
+                <a class="btn btn-warning" translate href="#">Warning Anchor</a>
+              </li>
+              <li>
+                <button class="btn btn-warning" translate href="#">Warning Button</button>
+              </li>
+              <li>
+                <a class="btn btn-danger" translate href="#">Danger Anchor</a>
+              </li>
+              <li>
+                <button class="btn btn-danger" translate href="#">Danger Button</button>
+              </li>
+            </ul>
+          </div>
+
         </div>
       </div>
 

openstack_dashboard/static/dashboard/scss/_mixins.scss

@@ -29,7 +29,7 @@
 }
 
 // Mixin for the dropdown button styling of the table action rows
-@mixin table-action-button($class, $color, $hover-bg, $hover-color: $color) {
+@mixin dropdown-button($class, $color, $hover-bg, $hover-color: $color) {
   &.btn-#{$class} {
     color: $color;
 
@@ -37,8 +37,8 @@
     &.active,
     &:active,
     &:hover {
-      color: $hover-bg;
+      color: $hover-color;
-      background: $hover-color;
+      background: $hover-bg;
     }
   }
 }

openstack_dashboard/static/dashboard/scss/components/_dropdowns.scss

@@ -1,19 +1,17 @@
-/* Table Dropdowns */
+/* Dropdown Actions */
 /* Unfortunately, we want to style a button in a dropdown
    the same way that we style an anchor.  This isn't possible
    in the current Bootstrap:
        https://github.com/twbs/bootstrap/issues/10248
-   Until it is, wrap all buttons with anchors ...
-   and we have this workaround.
 */
 
 /* Specificity required */
-.table_actions_menu .dropdown-menu > li > button,
+.dropdown-menu > li > .btn {
-.actions_column .dropdown-menu > li > button {
   border: none;
+  box-shadow: none;
+  border-radius: 0;
   margin: 0; // prevent the form-inline styles from messing with margin
-  padding: 3px 20px; // Hardcoded in Bootstrap also, see _dropdowns.scss
+  padding: $dropdown-item-padding-vertical $dropdown-item-padding-horizontal;
-  color: $dropdown-link-color;
   white-space: nowrap; // prevent links from breaking onto new lines
   min-width: 100%;
   text-align: left;
@@ -26,8 +24,6 @@
   &:hover,
   &:focus {
     text-decoration: none;
-    color: $dropdown-link-hover-color;
-    background-color: $dropdown-link-hover-bg;
   }
 
   &.disabled,
@@ -38,11 +34,11 @@
     @include box-shadow(none);
   }
 
-  @include table-action-button('default', $btn-default-bg, $btn-default-color);
+  @include dropdown-button('default', $dropdown-link-color, $dropdown-link-hover-bg);
-  @include table-action-button('primary', $btn-primary-bg, $btn-danger-color);
+  @include dropdown-button('primary', $btn-primary-bg, $btn-primary-bg, $btn-primary-color);
-  @include table-action-button('info', $btn-info-bg, $btn-danger-color);
+  @include dropdown-button('info', $btn-info-bg, $btn-info-bg, $btn-info-color);
-  @include table-action-button('warning', $btn-warning-bg, $btn-danger-color);
+  @include dropdown-button('warning', $btn-warning-bg, $btn-warning-bg, $btn-warning-color);
-  @include table-action-button('danger', $btn-danger-bg, $btn-danger-color);
+  @include dropdown-button('danger', $btn-danger-bg, $btn-danger-bg, $btn-danger-color);
 }
 
 .table_actions {

openstack_dashboard/static/dashboard/scss/horizon.scss

@@ -19,6 +19,7 @@
 @import "components/charts";
 @import "components/checkboxes";
 @import "components/datepicker";
+@import "components/dropdowns";
 @import "components/forms";
 @import "components/help_panel";
 @import "components/icons";
@@ -36,7 +37,6 @@
 @import "components/resource_topology";
 @import "components/selection_menu";
 @import "components/sidebar";
-@import "components/table_actions";
 @import "components/tables";
 @import "components/transfer_tables";
 @import "components/wizard";

openstack_dashboard/themes/material/static/horizon/_styles.scss

@@ -1,13 +1,13 @@
 @import "icons";
-@import "components/context_selection";
-@import "components/messages";
 @import "components/checkboxes";
+@import "components/context_selection";
+@import "components/dropdowns";
 @import "components/hamburger";
 @import "components/help_panel";
 @import "components/magic_search";
+@import "components/messages";
 @import "components/navbar";
 @import "components/sidebar";
-@import "components/table_actions";
 
 .login .splash-logo {
   width: 215px;

openstack_dashboard/themes/material/static/horizon/components/_dropdowns.scss

@@ -0,0 +1,9 @@
+@import '/dashboard/scss/mixins';
+
+/* Specificity required */
+.dropdown-menu > li > .btn {
+  @include dropdown-button('primary', $btn-primary-bg, $dropdown-link-hover-bg, $btn-primary-bg);
+  @include dropdown-button('info', $btn-info-bg, $dropdown-link-hover-bg, $btn-info-bg);
+  @include dropdown-button('warning', $btn-warning-bg, $dropdown-link-hover-bg, $btn-warning-bg);
+  @include dropdown-button('danger', $btn-danger-bg, $dropdown-link-hover-bg, $btn-danger-bg);
+}

openstack_dashboard/themes/material/static/horizon/components/_table_actions.scss

@@ -1,11 +0,0 @@
-@import '/dashboard/scss/mixins';
-
-/* Specificity required */
-.table_actions_menu .dropdown-menu > li > button,
-.actions_column .dropdown-menu > li > button {
-  @include table-action-button('default', $btn-default-bg, $btn-default-bg, $dropdown-link-hover-bg);
-  @include table-action-button('primary', $btn-primary-bg, $btn-primary-bg, $dropdown-link-hover-bg);
-  @include table-action-button('info', $btn-info-bg, $btn-info-bg, $dropdown-link-hover-bg);
-  @include table-action-button('warning', $btn-warning-bg, $btn-warning-bg, $dropdown-link-hover-bg);
-  @include table-action-button('danger', $btn-danger-bg, $btn-danger-bg, $dropdown-link-hover-bg);
-}