openstack
/
horizon
Code Issues Proposed changes

Merge "Restyled topbar to resemble UX guidelines"

This commit is contained in:
Jenkins 2014-11-10 19:17:54 +00:00 committed by Gerrit Code Review
parent bb7fa11c76 fca44e6642
commit 0771f61b17
8 changed files with 133 additions and 195 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
horizon/templates/_header.html
View File

@ -4,7 +4,7 @@
<div id="user_info" class="pull-right">
<span>{% blocktrans with username=request.user.username %}Logged in as: {{ username }}{% endblocktrans %}</span>
{% if HORIZON_CONFIG.help_url %}
<a href="{{ HORIZON_CONFIG.help_url }}" target="_new">{% trans "Help" %}</a>
<a href="{{ HORIZON_CONFIG.help_url }}" target="_blank">{% trans "Help" %}</a>
{% endif %}
<a href="{% url 'logout' %}">{% trans "Sign Out" %}</a>
</div>

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

@ -1,11 +1,11 @@
{% load url from future %}
{% if regions.support %}
<div id="region_switcher" class="dropdown switcher_bar" tabindex='1'>
<a class="dropdown-toggle" data-toggle="dropdown" href="#region_switcher">
<button class="btn btn-default btn-topnav dropdown-toggle" data-toggle="dropdown">
{{ regions.current.name }}
</a>
<ul id="region_list" class="dropdown-menu">
<li class='divider'></li>
<span class="caret"></span>
</button>
<ul id="region_list" class="dropdown-menu topbar-dropdown-menu">
{% 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>

BIN
openstack_dashboard/static/dashboard/img/logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 3.2 KiB

75
openstack_dashboard/static/dashboard/scss/_context_selection.scss
View File

@ -1,75 +0,0 @@
.context-selection {
display: inline-block;
.dropdown-toggle {
border: none;
background: transparent;
font-size: $font-size-base;
color: $gray;
.context-overview {
padding: 0 0.25em;
}
}
.dropdown-menu {
padding: 0;
}
.dropdown-header {
font-size: $font-size-small
}
.context-lists {
display: table;
padding: 0.5em 1em;
}
.footer {
width: 100%;
margin-top: 1em;
padding: 0.4em 1em;
background: whitesmoke;
border-top: 1px solid $gray-light;
text-align: right;
}
.disabled {
cursor: not-allowed;
color: $gray-light;
}
a {
cursor: pointer;
text-decoration: none;
white-space: nowrap;
}
em {
font-size: $font-size-large;
font-weight: bold;
vertical-align: middle;
}
ul {
display: table-cell;
padding-left: 1em;
li {
padding-left: 0;
font-size: $font-size-base;
text-overflow: ellipsis;
overflow: hidden;
max-width: 160px;
}
li .glyphicon-ok {
margin-left: 0.2em;
}
}
ul:not(:last-child) {
border-right: 1px solid $gray-light;
}
}

97
openstack_dashboard/static/dashboard/scss/components/_topbar.scss Normal file
View File

@ -0,0 +1,97 @@
.topbar {
background: $gray-lighter;
border-bottom: 1px solid $gray-light;
padding-right: 15px;
h1.brand {
display: inline-block;
width: 222px;
margin: 0 0 0 10px;
a {
background: url(../img/logo.png) left center no-repeat;
display: block;
text-indent: -9999px;
}
}
.switcher_bar {
@import "/dashboard/scss/context_selection";
display: inline-block;
vertical-align: top;
font-size: 0px;
.btn.btn-topnav{
@include button-size(8px, $padding-base-horizontal, $font-size-base, $line-height-base, 0);
@include button-variant($btn-default-color, $gray-lighter, $gray-lighter);
&:hover, &:active {
@include box-shadow(none);
}
}
.dropdown-menu.topbar-dropdown-menu {
border-radius: 0;
&:before, &:after {
position: absolute;
display: inline-block;
content: '';
}
&:before {
top: -7px;
left: 9px;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-left: 7px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.2);
}
&:after {
top: -6px;
left: 10px;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
border-left: 6px solid transparent;
}
&.pull-right:before {
left: auto;
right: 9px;
}
&.pull-right:after {
left: auto;
right: 10px;
}
}
.context-selection {
.dropdown-menu {
padding: 0;
}
.context-lists {
display: table;
width: 100%;
ul {
display: table-cell;
padding: .5em 0;
li {
a {
@extend .dropdown-menu > li > a;
}
}
&:not(:last-child) {
border-right: 1px solid $gray-light;
}
}
}
.footer {
padding: 0.4em 1em;
background: whitesmoke;
border-top: 1px solid $gray-light;
text-align: right;
}
.disabled {
cursor: not-allowed;
color: $gray-light;
}
}
}
}

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

@ -11,6 +11,7 @@ $modal-md: 732px;
// Components
@import "components/resource_browser";
@import "components/topbar";
/* new clearfix */
@ -86,91 +87,6 @@ dt {
font-weight: bold;
}
.topbar {
background: $gray-lighter;
// How to convert to SCSS?
//#gradient > {
// +vertical($body-bg, $gray-lighter);
//}
border-bottom: 1px solid $gray-light;
padding: 10px 0px 15px 0px;
}
.topbar .switcher_bar {
display: inline-block;
height: auto;
width: 160px;
max-width: 160px;
background-position: 140px center;
margin-bottom: 0;
margin-right: 10px;
padding: 0;
background-image: url(../img/drop_arrow.png);
background-color: $gray-lighter;
background-repeat: no-repeat;
border: 1px solid $gray-light;
border-bottom-color: darken($gray-light, 10%);
border-radius: 4px;
// How to convert to SCSS?
// @include box-shadow(inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
ul#tenant_list a {
max-width: 160px;
overflow: hidden;
text-overflow: ellipsis;
}
}
.topbar .switcher_bar a {
margin-left: 0;
display: block;
}
.topbar .switcher_bar ul {
width: 130px;
}
.topbar .switcher_bar div {
padding: 2px 10px 1px;
line-height: 20px;
color: $gray;
text-decoration: none;
overflow: hidden;
padding-right: 32px;
text-overflow: ellipsis;
}
.topbar .context-box {
display: inline;
@import "_context_selection";
}
.hide_image {
background-image: none !important;
}
#profile_editor_switcher {
width:auto;
max-width: 200px;
vertical-align: top;
white-space: nowrap;
background-image: url(../img/profile_drop.png);
background-repeat: no-repeat;
background-position: right center;
}
#user_info {
margin: auto 10px;
padding-bottom: 15px;
padding-right: 25px;
}
#user_info > a {
color: $text-color;
margin-left: 15px;
line-height: 20px;
font-size: 13px !important;
}
.page-header {
margin: 0 0 5px 0;
padding: 10px 0 5px 0;
@ -228,9 +144,6 @@ h2 {
margin-top: 190px;
}
.container-fluid {
padding-left: 0;
}
.sidebar {
background-color: $sidebar-background-color;
@ -255,25 +168,11 @@ h2 {
background-color: $body-bg;
}
h1.brand {
width: 100%;
margin: 0;
}
h1.brand a {
background: url(../img/logo.png) top left no-repeat;
display: block;
float: left;
width: 216px;
height: 35px;
text-indent: -9999px;
margin-left: 16px;
}
/* Tenant Dropdown */
a.current_item {
width: 163px;
float: left;

39
openstack_dashboard/templates/_header.html
View File

@ -4,12 +4,12 @@
<h1 class="brand"><a href="{% site_branding_link %}">{% site_branding %}</a></h1>
<div class="context-box">
<div class="switcher_bar">
<div class="dropdown context-selection">
<button class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
<button class="btn btn-default btn-topnav dropdown-toggle" data-toggle="dropdown">
{% show_overview %}
</button>
<div class="dropdown-menu">
<div class="dropdown-menu topbar-dropdown-menu">
<div class="context-lists">
{% show_domain_list %}
{% show_project_list %}
@ -25,19 +25,36 @@
<div id="user_info" class="pull-right">
<div id="profile_editor_switcher" class="dropdown switcher_bar" tabindex='1'>
<a class="dropdown-toggle" data-toggle="dropdown" href="#profile_editor_switcher">
<div>{{ request.user.username }}</div>
</a>
<ul id="editor_list" class="dropdown-menu">
<li class='divider'></li>
<li><a href="{% url 'horizon:settings:user:index' %}">{% trans "Settings" %}</a></li>
<button class="btn btn-default btn-topnav dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-user"></span>
{{ request.user.username }}
<span class="caret"></span>
</button>
<ul id="editor_list" class="dropdown-menu topbar-dropdown-menu pull-right">
<li>
<a href="{% url 'horizon:settings:user:index' %}">
<span class="glyphicon glyphicon-cog"></span>
{% trans "Settings" %}
</a>
</li>
{% if HORIZON_CONFIG.help_url %}
<li><a href="{{ HORIZON_CONFIG.help_url }}" target="_new">{% trans "Help" %}</a></li>
<li>
<a href="{{ HORIZON_CONFIG.help_url }}" target="_blank">
<span class="glyphicon glyphicon-question-sign"></span>
{% trans "Help" %}
</a>
</li>
{% endif %}
<li class="divider"></li>
<li>
<a href="{% url 'logout' %}">
<span class="glyphicon glyphicon-log-out"></span>
{% trans "Sign Out" %}
</a>
</li>
</ul>
</div>
<a href="{% url 'logout' %}">{% trans "Sign Out" %}</a>
{% include "horizon/common/_region_selector.html" %}
</div>

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

@ -2,11 +2,11 @@
<span class="context-overview">
{% if domain_supported %}
<span>{{ domain_name }}</span>
<em>&middot;</em>
<strong>&middot;</strong>
{% endif %}
<span>{{ project_name }}</span>
{% if multi_region %}
<em>&middot;</em>
<strong>&middot;</strong>
<span>{{ region_name }}</span>
{% endif %}
</span>