openstack/deb-horizon
Code Issues Proposed changes

Horizon Context Selection should be to the right

Browse Source 
An unintended result of a recent refactor left the context picker css
without any love. The refactor of the topbar needs to have style
parity to its previous incantation.

It was noted that the design for the current context selection is not
a good pattern to follow for responsive design.  The menu grows
horizontally, which will make it difficult to see on smaller screens
as well as when it is displayed in the now responsive topbar.  The
original design still applies to larger screens, but now on smaller
screens, the menu will fall back to a vertically growing responsive
menu.

The nav-header color has been changed, because it was also the same
color as the 'disabled' nav item state, which was confusing.

Refactoring of the some of the context_selection.py code was required
in order to support wrapping the menus in <li> tagss without needing
to change their corresponding HTML files.  Since the files can be
used as templatetag templates outside of _header.html, it was best to
keep them as stand alone <ul> lists.

Change-Id: I6e7c7b6fed08d215bcf83941da1bf90b40cd17b2
closes-bug: #1483910
partially implements bp: bootstrap-html-standards
This commit is contained in:
Diana Whitten 2015-08-11 15:14:21 -07:00
parent c4d7ecb0b6
commit 97939292eb
11 changed files with 151 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -198,3 +198,9 @@ $members-list-border: 1px solid $gray-light !default;
$members-list-item-width: 130px !default;
$members-list-item-max-width: 327px !default;
$members-list-roles-width: 125px !default;
// Mimics the padding in _dropdowns.scss
// Not sure why this is hardcoded :-/
// https://github.com/twbs/bootstrap/issues/13443
$dropdown-item-padding-vertical: 3px;
$dropdown-item-padding-horizontal: 20px;

42
openstack_dashboard/static/dashboard/scss/components/_context_selection.scss Normal file
View File

@ -0,0 +1,42 @@
.context-selection {
& > li > ul {
padding: 0;
& > li {
&.dropdown-header,
& > a {
padding: $dropdown-item-padding-vertical $dropdown-item-padding-horizontal $dropdown-item-padding-vertical $dropdown-item-padding-horizontal*1.5;
}
&.dropdown-header {
color: $brand-primary;
}
&:not(.dropdown-header):hover {
background-color: $dropdown-link-hover-bg;
cursor: pointer;
}
& > a {
position: relative;
color: $navbar-default-color;
text-decoration: none;
display: inline-block;
width: 100%;
& > .fa.fa-check {
float: left;
position: absolute;
left: $dropdown-item-padding-horizontal/2;
line-height: $line-height-computed;
}
}
}
}
.disabled {
cursor: not-allowed;
color: $dropdown-link-disabled-color;
}
}

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

@ -20,6 +20,7 @@
@import "components/charts";
@import "components/workflow";
@import "components/network_topology";
@import "components/context_selection";
@import "/framework/framework";

24
openstack_dashboard/templates/_header.html
View File

@ -20,15 +20,37 @@
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown context-selection">
<li class="dropdown">
<a href="#" class="dropdown-toggle" role="button" aria-expanded="false">
{% show_overview %}
<span class="fa fa-caret-down"></span>
</a>
<ul class="dropdown-menu context-selection">
{% comment %}
is_multidomain is only available through an assignment tag pulled in through context_selection
{% endcomment %}
{% is_multidomain as domain_supported %}
{% if domain_supported %}
<li>
{% show_domain_list %}
</li>
{% endif %}
<li>
{% show_project_list %}
</li>
{% comment %}
is_multi_region is only available through an assignment tag pulled in through context_selection
{% endcomment %}
{% is_multi_region as multi_region %}
{% if multi_region %}
<li>
{% show_region_list %}
</li>
{% endif %}
</ul>
</li>
</ul>
{% include "horizon/common/_region_selector.html" %}

3
openstack_dashboard/templates/context_selection/_domain_list.html
View File

@ -1,5 +1,5 @@
{% load i18n %}
{% if domain_supported %}
<ul>
<li class="dropdown-header">{% trans "Domains:" %}</li>
<li>
@ -9,4 +9,3 @@
</a>
</li>
</ul>
{% endif %}

2
openstack_dashboard/templates/context_selection/_project_list.html
View File

@ -2,7 +2,7 @@
{% load url from future %}
{% with dashboard_url=request.horizon.dashboard.get_absolute_url %}
<ul class="dropdown-menu">
<ul>
<li class="dropdown-header">{% trans "Projects:" %}</li>
{% for project in projects %}
<li>

2
openstack_dashboard/templates/context_selection/_region_list.html
View File

@ -1,7 +1,6 @@
{% load i18n %}
{% load url from future %}
{% if multi_region %}
{% with panel_url=request.horizon.panel.get_absolute_url %}
<ul>
<li class="dropdown-header">{% trans "Regions:" %}</li>
@ -17,4 +16,3 @@
{% endfor %}
</ul>
{% endwith %}
{% endif %}

26
openstack_dashboard/templatetags/context_selection.py
View File

@ -23,6 +23,10 @@ from openstack_dashboard.api import keystone
register = template.Library()
def is_multi_region_configured(request):
return len(request.user.available_services_regions) > 1
def is_multidomain_supported():
return (keystone.VERSIONS.active >= 3 and
getattr(settings,
@ -30,6 +34,18 @@ def is_multidomain_supported():
False))
@register.assignment_tag(takes_context=True)
def is_multi_region(context):
if 'request' not in context:
return False
return is_multi_region_configured(context['request'])
@register.assignment_tag
def is_multidomain():
return is_multidomain_supported()
@register.inclusion_tag('context_selection/_overview.html',
takes_context=True)
def show_overview(context):
@ -39,8 +55,7 @@ def show_overview(context):
context = {'domain_supported': is_multidomain_supported(),
'domain_name': request.user.user_domain_name,
'project_name': request.user.project_name,
'multi_region':
len(request.user.available_services_regions) > 1,
'multi_region': is_multi_region_configured(request),
'region_name': request.user.services_region,
'request': request}
@ -54,8 +69,7 @@ def show_domain_list(context):
if 'request' not in context:
return {}
request = context['request']
context = {'domain_supported': is_multidomain_supported(),
'domain_name': request.user.user_domain_name,
context = {'domain_name': request.user.user_domain_name,
'request': request}
return context
@ -82,9 +96,7 @@ def show_region_list(context):
if 'request' not in context:
return {}
request = context['request']
context = {'multi_region':
len(request.user.available_services_regions) > 1,
'region_name': request.user.services_region,
context = {'region_name': request.user.services_region,
'regions': sorted(request.user.available_services_regions),
'request': request}
return context

2
openstack_dashboard/themes/default/bootstrap/_variables.scss
View File

@ -242,7 +242,7 @@ $dropdown-link-active-bg: $component-active-bg !default;
$dropdown-link-disabled-color: $gray-light !default;
//** Text color for headers within dropdown menus.
$dropdown-header-color: $gray-light !default;
$dropdown-header-color: $gray !default;
//** Deprecated `$dropdown-caret-color` as of v3.1.0
$dropdown-caret-color: #000 !default;

1
openstack_dashboard/themes/default/horizon/_styles.scss
View File

@ -1,5 +1,6 @@
@import '/bootstrap/scss/bootstrap/mixins/_vendor-prefixes.scss';
@import 'components/_context_selection';
@import 'components/sidebar';
.navbar-brand {

53
openstack_dashboard/themes/default/horizon/components/_context_selection.scss Normal file
View File

@ -0,0 +1,53 @@
//Keep the native bootstrap experience for smaller screens
@media(min-width: $screen-sm) {
.context-selection {
width: auto;
padding: 0;
& > li {
display: table-cell;
padding: $padding-xs-horizontal 0;
& > ul > li {
&.dropdown-header,
& > a {
padding: $dropdown-item-padding-vertical $dropdown-item-padding-horizontal*2 $dropdown-item-padding-vertical $dropdown-item-padding-horizontal;
}
&.dropdown-header {
color: $dropdown-header-color;
}
& > a {
display: inline-block;
width: 100%;
& > .fa.fa-check {
left: unset;
float: unset;
padding-left: $dropdown-item-padding-horizontal/2;
}
}
}
&:not(:last-child) {
border-right: 1px solid $gray-light;
}
}
}
.open .context-selection {
display: table;
// display: table pushes down our little arrow a single pixel
&:before {
top: -($font-size-small/2);
}
&:after {
top: -($font-size-small/2) + 1;
}
}
}