openstack
/
horizon
Code Issues Proposed changes

Dropdowns should have a consistent design 

While working on making various dropdowns in Horizon Bootstrap
compliant, it was noticed that there are two distinct types of
dropdowns currently being used in Horizon.  This creates some style
inconsitencies.  This consolidates the styles so that it will be
easier to make the component theme-ready.

Partially-Implements: blueprint horizon-theme-css-reorg

Change-Id: Ib2be3fef3af01fcf85163f24cabb835e23ca2aff
This commit is contained in:
Diana Whitten 2015-10-07 14:24:37 -07:00
parent 1b4d0406e7
commit 94464af154
10 changed files with 92 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
horizon/templates/horizon/client_side/_membership.html
View File

@ -14,9 +14,14 @@
<span class="roles_display">[[roles_label]]</span>
<span class="fa fa-caret-down"></span>
</a>
<ul class="dropdown-menu role_dropdown clearfix">
<ul class="dropdown-menu dropdown-menu-right role_dropdown">
[[#roles]]
<li data-role-id="[[role_id]]"><i class="fa fa-check"></i> [[role_name]]</li>
<li data-role-id="[[role_id]]">
<a target="_blank">
<span class="fa fa-check"></span>
[[role_name]]
</a>
</li>
[[/roles]]
</ul>
</li>

6
horizon/templates/horizon/common/_data_table_row_actions_dropdown.html
View File

@ -9,10 +9,10 @@
<a class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" href="#">
<span class="fa fa-caret-down"></span>
</a>
<ul class="dropdown-menu row_actions dropdown-menu-right clearfix">
<ul class="dropdown-menu row_actions dropdown-menu-right">
{% else %}
<li class="clearfix">
{% include "horizon/common/_data_table_row_action_dropdown.html" %}
<li>
{% include "horizon/common/_data_table_row_action_dropdown.html" %}
</li>
{% endif %}
{% if forloop.last %}

4
horizon/templates/horizon/common/_data_table_table_actions.html
View File

@ -48,9 +48,9 @@
{% endif %}
<span class="fa fa-caret-down"></span>
</a>
<ul class="dropdown-menu clearfix">
<ul class="dropdown-menu dropdown-menu-right">
{% for action in table_actions_menu %}
<li class="clearfix">
<li>
{% include "horizon/common/_data_table_table_action.html" %}
</li>
{% endfor %}

8
horizon/templates/horizon/common/_region_selector.html
View File

@ -4,10 +4,14 @@
{{ regions.current.name }}
<span class="fa fa-caret-down"></span>
</a>
<ul id="region_list" class="dropdown-menu topbar-dropdown-menu">
<ul id="region_list" class="dropdown-menu dropdown-menu-right">
{% for region in regions.available %}
{% if region.name != regions.current.name %}
<li><a class="ajax-modal" href="{% url 'login' %}?region={{ region.endpoint|urlencode }}">{{ region.name }}</a></li>
<li>
<a class="ajax-modal" href="{% url 'login' %}?region={{ region.endpoint|urlencode }}">
{{ region.name }}
</a>
</li>
{% endif %}
{% endfor %}
</ul>

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

@ -1314,9 +1314,18 @@ label.log-length {
.members, .available_members {
padding: 0;
.btn-primary {
@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
}
// reset nav-pills display to block
ul.nav-pills {
display: block;
& > li > a {
border-radius: $border-radius-base;
}
}
ul.btn-group {
margin-left:0;
@ -1371,33 +1380,23 @@ label.log-length {
}
}
/* Role dropdown menus */
.role_dropdown li {
cursor: pointer;
background: none;
float: none;
display: block;
padding: 5px 10px;
color: #000;
text-align: left;
border-radius: 0;
border: 0 none;
@include box-shadow(none);
z-index: 99999;
&:hover {
background-color: #cdcdcd;
}
i {
opacity: 0;
}
&.selected i {
opacity: 1;
}
}
.dropdown-menu.role_dropdown {
.role_dropdown {
right: 0;
left: auto;
& > li {
.fa-check {
visibility: hidden;
}
&.selected .fa-check {
visibility: visible;
}
}
}
.nav .role_options {
float: right;
}

2
openstack_dashboard/templates/_header.html
View File

@ -60,7 +60,7 @@
{{ request.user.username }}
<span class="fa fa-caret-down"></span>
</a>
<ul id="editor_list" class="dropdown-menu">
<ul id="editor_list" class="dropdown-menu dropdown-menu-right">
<li>
<a href="{% url 'horizon:settings:user:index' %}">
<span class="fa fa-cog"></span>

3
openstack_dashboard/themes/default/bootstrap/_styles.scss
View File

@ -1,2 +1,3 @@
@import 'components/dropdowns';
@import 'components/navbar';
@import 'components/navs';
@import 'components/navbar';

46
openstack_dashboard/themes/default/bootstrap/components/_dropdowns.scss Normal file
View File

@ -0,0 +1,46 @@
@mixin dropdown_arrow($size, $offset) {
&:before, &:after {
position: absolute;
content: '';
}
// 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);
}
&: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;
}
}
.dropdown-menu {
@include dropdown_arrow($dropdown-arrow-size, $dropdown-arrow-offset);
}
.dropdown-menu-right {
@include dropdown_arrow_right($dropdown-arrow-size, $dropdown-arrow-offset);
}

53
openstack_dashboard/themes/default/bootstrap/components/_navbar.scss
View File

@ -1,10 +1,3 @@
// These are helper variables for this file only.
// They inherit from bootstrap/variables and should
// scope to only this logic for overriding the native
// bootstrap navbar.
$navbar-dropdown-arrow-size: $font-size-small / 2;
$navbar-dropdown-arrow-offset: $padding-small-horizontal;
.navbar-brand {
display: block;
padding: 0 $padding-small-horizontal;
@ -31,50 +24,4 @@ $navbar-dropdown-arrow-offset: $padding-small-horizontal;
li > .dropdown-menu {
margin-top: 2px;
}
@media (min-width:$screen-sm) {
// Sets default values for upper arrow on navbar dropdowns
.dropdown-menu {
&:before, &:after {
position: absolute;
content: '';
}
}
// Defaults the arrow to the left side
.dropdown-menu {
&:before {
top: ($navbar-dropdown-arrow-size + 1) * -1;
left: $navbar-dropdown-arrow-offset - 1;
border-right: $navbar-dropdown-arrow-size + 1 solid transparent;
border-bottom: $navbar-dropdown-arrow-size + 1 solid $dropdown-border;
border-left: $navbar-dropdown-arrow-size + 1 solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.2);
}
&:after {
top: -$navbar-dropdown-arrow-size;
left: $navbar-dropdown-arrow-offset;
border-right: $navbar-dropdown-arrow-size solid transparent;
border-bottom: $navbar-dropdown-arrow-size solid $body-bg;
border-left: $navbar-dropdown-arrow-size solid transparent;
}
}
}
}
// Changes the arrow to the right side for .navbar-right items
.navbar-right .dropdown-menu {
&:before, &:after {
left: auto;
}
&:before {
right: $navbar-dropdown-arrow-offset - 1;
}
&:after {
right: $navbar-dropdown-arrow-offset;
}
}

3
openstack_dashboard/themes/default/horizon/_variables.scss
View File

@ -4,3 +4,6 @@ $sidebar-background-color: $table-bg-accent;
$sidebar-active-color: #d93c27;
$sidebar-active-indicator-width: $caret-width-base;
$sidebar-active-box-shadow: -3px 3px 6px -3px;
$dropdown-arrow-size: $font-size-small / 2;
$dropdown-arrow-offset: $padding-small-horizontal;