openstack/horizon
Code Issues Proposed changes

Default theme lacks support for dropup menus

Browse Source 
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
This commit is contained in:
Diana Whitten 2016-05-19 12:10:22 -07:00
parent 4e384db0cf
commit 2679c3864a
4 changed files with 51 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

5
openstack_dashboard/static/dashboard/scss/components/_icons.scss
View File

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

68
openstack_dashboard/themes/default/bootstrap/components/_dropdowns.scss
View File

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

1
openstack_dashboard/themes/material/static/horizon/_icons.scss
View File

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