Context Picker should inherit BS dropdown styles
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:
parent
4493ade2f0
commit
0bfca75f45
@ -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;
|
|
||||||
}
|
|
||||||
|
|
@ -32,3 +32,9 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.context-delimiter {
|
||||||
|
font-size: $padding-small-vertical;
|
||||||
|
vertical-align: middle;
|
||||||
|
padding-right: $padding-small-vertical;
|
||||||
|
padding-left: $padding-small-vertical;
|
||||||
|
}
|
||||||
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
@ -20,7 +20,6 @@
|
|||||||
// Dashboard Components
|
// Dashboard Components
|
||||||
@import "components/bar_charts";
|
@import "components/bar_charts";
|
||||||
@import "components/charts";
|
@import "components/charts";
|
||||||
@import "components/context_selection";
|
|
||||||
@import "components/datepicker";
|
@import "components/datepicker";
|
||||||
@import "components/forms";
|
@import "components/forms";
|
||||||
@import "components/inline_edit";
|
@import "components/inline_edit";
|
||||||
@ -35,6 +34,7 @@
|
|||||||
@import "components/quota";
|
@import "components/quota";
|
||||||
@import "components/resource_browser";
|
@import "components/resource_browser";
|
||||||
@import "components/resource_topology";
|
@import "components/resource_topology";
|
||||||
|
@import "components/selection_menu";
|
||||||
@import "components/sidebar";
|
@import "components/sidebar";
|
||||||
@import "components/table_actions";
|
@import "components/table_actions";
|
||||||
@import "components/tables";
|
@import "components/tables";
|
||||||
|
@ -1,11 +1,13 @@
|
|||||||
{% load i18n %}
|
{% load i18n %}
|
||||||
|
|
||||||
<ul>
|
<ul class="dropdown-menu">
|
||||||
<li class="dropdown-header">{% trans "Domains:" %}</li>
|
<li class="dropdown-header">{% trans "Domains:" %}</li>
|
||||||
<li>
|
<li>
|
||||||
<a class="disabled">
|
<a class="disabled dropdown-selected">
|
||||||
{{ domain_name }}
|
<span class="fa fa-check dropdown-selected-icon"></span>
|
||||||
<span class="fa fa-check"></span>
|
<span class="dropdown-title">
|
||||||
|
{{ domain_name }}
|
||||||
|
</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
@ -1,15 +1,17 @@
|
|||||||
{% load i18n %}
|
{% load i18n %}
|
||||||
|
|
||||||
{% with dashboard_url=request.horizon.dashboard.get_absolute_url %}
|
{% with dashboard_url=request.horizon.dashboard.get_absolute_url %}
|
||||||
<ul>
|
<ul class="dropdown-menu">
|
||||||
<li class="dropdown-header">{% trans "Projects:" %}</li>
|
<li class="dropdown-header">{% trans "Projects:" %}</li>
|
||||||
{% for project in projects %}
|
{% for project in projects %}
|
||||||
<li>
|
<li>
|
||||||
<a href="{% url 'switch_tenants' project.id %}?next={{ dashboard_url }}" target="_self">
|
<a class="{% if project.enabled and project.id == project_id %} dropdown-selected{% endif %}"
|
||||||
{{ project.name }}
|
href="{% url 'switch_tenants' project.id %}?next={{ dashboard_url }}"
|
||||||
{% if project.enabled and project.id == project_id %}
|
target="_self">
|
||||||
<span class="fa fa-check"></span>
|
<span class="fa fa-check dropdown-selected-icon"></span>
|
||||||
{% endif %}
|
<span class="dropdown-title">
|
||||||
|
{{ project.name }}
|
||||||
|
</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
@ -1,12 +1,12 @@
|
|||||||
{% load i18n %}
|
{% load i18n %}
|
||||||
|
|
||||||
{% with panel_url=request.horizon.panel.get_absolute_url %}
|
{% with panel_url=request.horizon.panel.get_absolute_url %}
|
||||||
<ul>
|
<ul class="dropdown-menu">
|
||||||
<li class="dropdown-header">{% trans "Regions:" %}</li>
|
<li class="dropdown-header">{% trans "Regions:" %}</li>
|
||||||
{% for region in regions %}
|
{% for region in regions %}
|
||||||
<li>
|
<li>
|
||||||
<a href="{% url 'switch_services_region' region %}?next={{ panel_url }}" target="_self">
|
<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 %}
|
{% if region == region_name %}
|
||||||
<span class="fa fa-check"></span>
|
<span class="fa fa-check"></span>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
@ -9,7 +9,7 @@
|
|||||||
{% show_overview %}
|
{% show_overview %}
|
||||||
<span class="fa fa-caret-down"></span>
|
<span class="fa fa-caret-down"></span>
|
||||||
</a>
|
</a>
|
||||||
<ul class="dropdown-menu context-selection">
|
<ul class="dropdown-menu context-selection selection-menu">
|
||||||
|
|
||||||
{% comment %}
|
{% comment %}
|
||||||
is_multidomain is only available through an assignment tag pulled in through context_selection
|
is_multidomain is only available through an assignment tag pulled in through context_selection
|
||||||
|
@ -3,6 +3,7 @@
|
|||||||
@import "components/breadcrumb_header";
|
@import "components/breadcrumb_header";
|
||||||
@import "components/context_selection";
|
@import "components/context_selection";
|
||||||
@import "components/messages";
|
@import "components/messages";
|
||||||
|
@import "components/navbar";
|
||||||
@import "components/pie_charts";
|
@import "components/pie_charts";
|
||||||
@import "components/quota";
|
@import "components/quota";
|
||||||
@import "components/sidebar";
|
@import "components/sidebar";
|
||||||
|
@ -1,44 +1,36 @@
|
|||||||
//Keep the native bootstrap experience for smaller screens
|
//Keep the native bootstrap experience for smaller screens
|
||||||
@media(min-width: $screen-sm) {
|
@media(min-width: $screen-sm) {
|
||||||
|
|
||||||
.context-selection {
|
// Specificity required
|
||||||
width: auto;
|
.context-selection.dropdown-menu {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
& > li {
|
& > li {
|
||||||
display: table-cell;
|
display: table-cell;
|
||||||
|
vertical-align: top;
|
||||||
padding: $padding-xs-horizontal 0;
|
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) {
|
&:not(:last-child) {
|
||||||
border-right: 1px solid $gray-light;
|
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;
|
||||||
|
|
||||||
// display: table pushes down our little arrow a single pixel
|
// display: table pushes down our little arrow a single pixel
|
||||||
|
@ -0,0 +1,3 @@
|
|||||||
|
.context-delimiter {
|
||||||
|
font-size: $context-delimiter-size;
|
||||||
|
}
|
@ -8,7 +8,7 @@ $mdi-font-path: $static_url + "/horizon/lib/mdi/fonts";
|
|||||||
|
|
||||||
.fa {
|
.fa {
|
||||||
@extend .mdi;
|
@extend .mdi;
|
||||||
font-size: 1.3em;
|
font-size: $mdi-icon-size;
|
||||||
}
|
}
|
||||||
|
|
||||||
$icon-swap: (
|
$icon-swap: (
|
||||||
|
@ -3,6 +3,8 @@
|
|||||||
@import "components/messages";
|
@import "components/messages";
|
||||||
@import "components/hamburger";
|
@import "components/hamburger";
|
||||||
@import "components/magic_search";
|
@import "components/magic_search";
|
||||||
|
@import "components/navbar";
|
||||||
|
@import "components/selection_menu";
|
||||||
@import "components/sidebar";
|
@import "components/sidebar";
|
||||||
|
|
||||||
.login .splash-logo {
|
.login .splash-logo {
|
||||||
|
@ -3,3 +3,5 @@ $hamburger-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
|
|||||||
$sidebar-animation: $hamburger-transition;
|
$sidebar-animation: $hamburger-transition;
|
||||||
|
|
||||||
$alert-shadow: 2px 2px 4px rgba(0, 0, 0, .4);
|
$alert-shadow: 2px 2px 4px rgba(0, 0, 0, .4);
|
||||||
|
|
||||||
|
$mdi-icon-size: 1.3em;
|
||||||
|
@ -0,0 +1,5 @@
|
|||||||
|
.context-delimiter {
|
||||||
|
@extend .mdi-stop;
|
||||||
|
color: $gray-light;
|
||||||
|
font-size: $font-size-small;
|
||||||
|
}
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user