openstack/horizon
Code Issues Proposed changes

Context Picker should inherit BS dropdown styles

Browse Source 
The first step in the dynamic theme effort requires that the context
selection picker inherit properly from a dropdown menu, so that the
styles can be shared and the experience is matched.

Dynamic themes will use the 'select' experience of the context menu
but from within the user menu, so it was necessary to match the
experiences to minimize duplicated code.

The style of the context menu was extremely dependant on DOM structure
and therefore difficult to customize. This has been simplified by using
classes and attempting to keep specificity as low as possible.

Change-Id: Idb9e8f5c1d246688418f68e12fb53f094c01ea34
Partially-implements: blueprint horizon-dynamic-theme
Partially-Implements: blueprint bootstrap-html-standards
This commit is contained in:
Diana Whitten 2016-01-24 16:57:02 -07:00
parent 4493ade2f0
commit 0bfca75f45
16 changed files with 124 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
openstack_dashboard/static/dashboard/scss/components/_context_selection.scss
View File

@ -1,51 +0,0 @@
.context-selection {
& > li > ul {
padding: 0;
& > li {
white-space: nowrap;
&.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: $dropdown-link-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;
}
}
.context-delimiter {
font-size: $padding-small-vertical;
vertical-align: middle;
padding-right: $padding-small-vertical;
padding-left: $padding-small-vertical;
}

6
openstack_dashboard/static/dashboard/scss/components/_navbar.scss
View File

@ -32,3 +32,9 @@
}
}
.context-delimiter {
font-size: $padding-small-vertical;
vertical-align: middle;
padding-right: $padding-small-vertical;
padding-left: $padding-small-vertical;
}

52
openstack_dashboard/static/dashboard/scss/components/_selection_menu.scss Normal file
View File

@ -0,0 +1,52 @@
// FYI Note (hurgleburgler)
// The Selection Menu is not a normal drop down element
// This menu can contain other dropdown menus, and will
// treat them as a selection group element.
// The context menu shows this functionality.
// This drop down is composed of other <ul> drop down lists.
// Because of this fact, it is necessary to inherit
// class="dropdown" for the children elements to obtain
// their necessary styles, but we must remove the default
// styles for .dropdown on the inner <ul> itself.
.selection-menu {
// Pass along the style of a disabled anchor
.disabled {
cursor: not-allowed;
color: $dropdown-link-disabled-color;
}
// Remove all styles from an inside dropdown
.dropdown-menu {
border: medium none;
box-shadow: none;
display: block;
position: relative;
float: none;
// Remove any possible arrows on the dropdown box
&:before,
&:after {
border: none;
position: relative;
}
// Pad the icon with 2 * icon size
& > li > a {
padding-left: 2em;
}
}
// Hide the icon by default if its not selected
.dropdown-selected-icon {
display: none;
}
.dropdown-selected .dropdown-selected-icon {
display: inline;
position: absolute;
left: .5em;
line-height: $line-height-computed;
}
}

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

@ -20,7 +20,6 @@
// Dashboard Components
@import "components/bar_charts";
@import "components/charts";
@import "components/context_selection";
@import "components/datepicker";
@import "components/forms";
@import "components/inline_edit";
@ -35,6 +34,7 @@
@import "components/quota";
@import "components/resource_browser";
@import "components/resource_topology";
@import "components/selection_menu";
@import "components/sidebar";
@import "components/table_actions";
@import "components/tables";

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

@ -1,11 +1,13 @@
{% load i18n %}
<ul>
<ul class="dropdown-menu">
<li class="dropdown-header">{% trans "Domains:" %}</li>
<li>
<a class="disabled">
{{ domain_name }}
<span class="fa fa-check"></span>
<a class="disabled dropdown-selected">
<span class="fa fa-check dropdown-selected-icon"></span>
<span class="dropdown-title">
{{ domain_name }}
</span>
</a>
</li>
</ul>

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

@ -1,15 +1,17 @@
{% load i18n %}
{% with dashboard_url=request.horizon.dashboard.get_absolute_url %}
<ul>
<ul class="dropdown-menu">
<li class="dropdown-header">{% trans "Projects:" %}</li>
{% for project in projects %}
<li>
<a href="{% url 'switch_tenants' project.id %}?next={{ dashboard_url }}" target="_self">
{{ project.name }}
{% if project.enabled and project.id == project_id %}
<span class="fa fa-check"></span>
{% endif %}
<a class="{% if project.enabled and project.id == project_id %} dropdown-selected{% endif %}"
href="{% url 'switch_tenants' project.id %}?next={{ dashboard_url }}"
target="_self">
<span class="fa fa-check dropdown-selected-icon"></span>
<span class="dropdown-title">
{{ project.name }}
</span>
</a>
</li>
{% endfor %}

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

@ -1,12 +1,12 @@
{% load i18n %}
{% with panel_url=request.horizon.panel.get_absolute_url %}
<ul>
<ul class="dropdown-menu">
<li class="dropdown-header">{% trans "Regions:" %}</li>
{% for region in regions %}
<li>
<a href="{% url 'switch_services_region' region %}?next={{ panel_url }}" target="_self">
<span class="region-name">{{ region }}</span>
<span class="region-name dropdown-title">{{ region }}</span>
{% if region == region_name %}
<span class="fa fa-check"></span>
{% endif %}

2
openstack_dashboard/templates/header/_context_selection.html
View File

@ -9,7 +9,7 @@
{% show_overview %}
<span class="fa fa-caret-down"></span>
</a>
<ul class="dropdown-menu context-selection">
<ul class="dropdown-menu context-selection selection-menu">
{% comment %}
is_multidomain is only available through an assignment tag pulled in through context_selection

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

@ -3,6 +3,7 @@
@import "components/breadcrumb_header";
@import "components/context_selection";
@import "components/messages";
@import "components/navbar";
@import "components/pie_charts";
@import "components/quota";
@import "components/sidebar";

44
openstack_dashboard/themes/default/horizon/components/_context_selection.scss
View File

@ -1,44 +1,36 @@
//Keep the native bootstrap experience for smaller screens
@media(min-width: $screen-sm) {
.context-selection {
width: auto;
// Specificity required
.context-selection.dropdown-menu {
padding: 0;
& > li {
display: table-cell;
vertical-align: top;
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: auto;
float: auto;
padding-left: $dropdown-item-padding-horizontal/2;
}
}
}
&:not(:last-child) {
border-right: 1px solid $gray-light;
}
}
.dropdown-menu > li > a {
padding-left: $dropdown-item-padding-horizontal;
display: flex;
}
.dropdown-title {
order: 1;
}
.dropdown-selected-icon {
position: relative;
order: 2;
}
}
.open .context-selection {
.open .dropdown-selection {
display: table;
// display: table pushes down our little arrow a single pixel

3
openstack_dashboard/themes/default/horizon/components/_navbar.scss Normal file
View File

@ -0,0 +1,3 @@
.context-delimiter {
font-size: $context-delimiter-size;
}

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

@ -8,7 +8,7 @@ $mdi-font-path: $static_url + "/horizon/lib/mdi/fonts";
.fa {
@extend .mdi;
font-size: 1.3em;
font-size: $mdi-icon-size;
}
$icon-swap: (

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

@ -3,6 +3,8 @@
@import "components/messages";
@import "components/hamburger";
@import "components/magic_search";
@import "components/navbar";
@import "components/selection_menu";
@import "components/sidebar";
.login .splash-logo {

2
openstack_dashboard/themes/material/static/horizon/_variables.scss
View File

@ -3,3 +3,5 @@ $hamburger-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
$sidebar-animation: $hamburger-transition;
$alert-shadow: 2px 2px 4px rgba(0, 0, 0, .4);
$mdi-icon-size: 1.3em;

5
openstack_dashboard/themes/material/static/horizon/components/_navbar.scss Normal file
View File

@ -0,0 +1,5 @@
.context-delimiter {
@extend .mdi-stop;
color: $gray-light;
font-size: $font-size-small;
}

16
openstack_dashboard/themes/material/static/horizon/components/_selection_menu.scss Normal file
View File

@ -0,0 +1,16 @@
.selection-menu {
.dropdown-menu > li > a {
padding-left: $mdi-icon-size*2;
}
.dropdown-selected {
.dropdown-selected-icon {
left: $mdi-icon-size/4;
@media (min-width: $screen-sm) {
color: $brand-primary;
left: $mdi-icon-size/2;
}
}
}
}