openstack/horizon
Code Issues Proposed changes

Many dropdown actions are white text on white background

Browse Source 
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
This commit is contained in:
Diana Whitten 2016-04-19 16:35:10 -07:00
parent 457e0483b0
commit 9e506d1005
8 changed files with 68 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
horizon/templates/horizon/common/_data_table_action.html
View File

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

46
openstack_dashboard/contrib/developer/static/dashboard/developer/theme-preview/theme-preview.html
View File

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

6
openstack_dashboard/static/dashboard/scss/_mixins.scss
View File

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

24
openstack_dashboard/static/dashboard/scss/components/_table_actions.scss → openstack_dashboard/static/dashboard/scss/components/_dropdowns.scss
View File

@ -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 {

2
openstack_dashboard/static/dashboard/scss/horizon.scss
View File

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

6
openstack_dashboard/themes/material/static/horizon/_styles.scss
View File

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

9
openstack_dashboard/themes/material/static/horizon/components/_dropdowns.scss Normal file
View File

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

11
openstack_dashboard/themes/material/static/horizon/components/_table_actions.scss
View File

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