From 9e506d1005cb7155b76191bd30dd459730810f87 Mon Sep 17 00:00:00 2001 From: Diana Whitten Date: Tue, 19 Apr 2016 16:35:10 -0700 Subject: [PATCH] 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/common/_data_table_action.html | 5 +- .../theme-preview/theme-preview.html | 46 ++++++++++++++++--- .../static/dashboard/scss/_mixins.scss | 6 +-- .../{_table_actions.scss => _dropdowns.scss} | 24 ++++------ .../static/dashboard/scss/horizon.scss | 2 +- .../material/static/horizon/_styles.scss | 6 +-- .../static/horizon/components/_dropdowns.scss | 9 ++++ .../horizon/components/_table_actions.scss | 11 ----- 8 files changed, 68 insertions(+), 41 deletions(-) rename openstack_dashboard/static/dashboard/scss/components/{_table_actions.scss => _dropdowns.scss} (60%) create mode 100644 openstack_dashboard/themes/material/static/horizon/components/_dropdowns.scss delete mode 100644 openstack_dashboard/themes/material/static/horizon/components/_table_actions.scss diff --git a/horizon/templates/horizon/common/_data_table_action.html b/horizon/templates/horizon/common/_data_table_action.html index 35638aa8f5..cd4426f1e5 100644 --- a/horizon/templates/horizon/common/_data_table_action.html +++ b/horizon/templates/horizon/common/_data_table_action.html @@ -3,14 +3,13 @@ {% if action.method != "GET" %} - - - - -
-
+ +
+ + +
+ diff --git a/openstack_dashboard/static/dashboard/scss/_mixins.scss b/openstack_dashboard/static/dashboard/scss/_mixins.scss index f1da155d54..d0ab30e762 100644 --- a/openstack_dashboard/static/dashboard/scss/_mixins.scss +++ b/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; - background: $hover-color; + color: $hover-color; + background: $hover-bg; } } } \ No newline at end of file diff --git a/openstack_dashboard/static/dashboard/scss/components/_table_actions.scss b/openstack_dashboard/static/dashboard/scss/components/_dropdowns.scss similarity index 60% rename from openstack_dashboard/static/dashboard/scss/components/_table_actions.scss rename to openstack_dashboard/static/dashboard/scss/components/_dropdowns.scss index 9222580ada..7807894937 100644 --- a/openstack_dashboard/static/dashboard/scss/components/_table_actions.scss +++ b/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, -.actions_column .dropdown-menu > li > button { +.dropdown-menu > li > .btn { 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 - color: $dropdown-link-color; + padding: $dropdown-item-padding-vertical $dropdown-item-padding-horizontal; 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 table-action-button('primary', $btn-primary-bg, $btn-danger-color); - @include table-action-button('info', $btn-info-bg, $btn-danger-color); - @include table-action-button('warning', $btn-warning-bg, $btn-danger-color); - @include table-action-button('danger', $btn-danger-bg, $btn-danger-color); + @include dropdown-button('default', $dropdown-link-color, $dropdown-link-hover-bg); + @include dropdown-button('primary', $btn-primary-bg, $btn-primary-bg, $btn-primary-color); + @include dropdown-button('info', $btn-info-bg, $btn-info-bg, $btn-info-color); + @include dropdown-button('warning', $btn-warning-bg, $btn-warning-bg, $btn-warning-color); + @include dropdown-button('danger', $btn-danger-bg, $btn-danger-bg, $btn-danger-color); } .table_actions { diff --git a/openstack_dashboard/static/dashboard/scss/horizon.scss b/openstack_dashboard/static/dashboard/scss/horizon.scss index 68cabe2de6..b1b68fb117 100644 --- a/openstack_dashboard/static/dashboard/scss/horizon.scss +++ b/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"; diff --git a/openstack_dashboard/themes/material/static/horizon/_styles.scss b/openstack_dashboard/themes/material/static/horizon/_styles.scss index e2f54f84d0..868dbf538c 100644 --- a/openstack_dashboard/themes/material/static/horizon/_styles.scss +++ b/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; diff --git a/openstack_dashboard/themes/material/static/horizon/components/_dropdowns.scss b/openstack_dashboard/themes/material/static/horizon/components/_dropdowns.scss new file mode 100644 index 0000000000..040feda0d7 --- /dev/null +++ b/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); +} \ No newline at end of file diff --git a/openstack_dashboard/themes/material/static/horizon/components/_table_actions.scss b/openstack_dashboard/themes/material/static/horizon/components/_table_actions.scss deleted file mode 100644 index bfe06ce084..0000000000 --- a/openstack_dashboard/themes/material/static/horizon/components/_table_actions.scss +++ /dev/null @@ -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); -} \ No newline at end of file