x/tuskar-ui
Code Issues Proposed changes

Fixed broken settings CSS sprite in topbar; Relocated dashboard settings bits.

Browse Source 
The gear icon sprite in the header had a completely broken hover state, was misaligned, and didn't highlight correctly when on the settings page. This patch fixes those UI problems.

In addition, URL pattern and accompanying template have been moved to a logically consolidated home within the dashboard structure.
This commit is contained in:
Gabriel Hurley 2011-10-19 17:51:36 -07:00
parent 045b1b08b6
commit efdb1d7d02
6 changed files with 79 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
django-openstack/django_openstack/templates/django_openstack/dash/dashboard_settings.html
View File

@ -1,34 +0,0 @@
{% extends 'django_openstack/dash/base.html' %}
{%load i18n%}
{% block sidebar %}
{{block.super}}
{% endblock %}
{% block page_header %}
{% url dash_instances request.user.tenant_id as refresh_link %}
{# to make searchable false, just remove it from the include statement #}
{% include "django_openstack/common/_page_header.html" with title=_("Dashboard Settings") %}
{% endblock page_header %}
{% block dash_main %}
<div class="dash_block">
<div class="left">
<h3>{% trans "Dashboard User Interface Language"%}</h3>
<form action="/i18n/setlang/" method="post"> {% csrf_token %}
<p><select name="language">
{% get_language_info_list for LANGUAGES as languages %}
{% for language in languages %}
{% if language.code == LANGUAGE_CODE %}
<option selected value="{{ language.code }}">{{ language.name_local }} ({{ language.code }})</option>
{%else%}
<option value="{{ language.code }}">{{ language.name_local }} ({{ language.code }})</option>
{%endif%}
{% endfor %}
</select></p>
<input type="submit" value="{% trans "Select Language"%}" class="large-rounded" />
</form>
</div>
<div class="clear">&nbsp;</div>
</div>
{% endblock %}

44
django-openstack/django_openstack/templates/django_openstack/dash/settings.html Normal file
View File

@ -0,0 +1,44 @@
{% extends 'base.html' %}
{%load i18n%}
{% block topbar %}
{% with current_topbar="settings" %}
{{block.super}}
{% endwith %}
{% endblock %}
{% block sidebar %}
{% include 'django_openstack/dash/_sidebar.html' %}
{% endblock %}
{% block main %}
{% block page_header %}
{% url dash_instances request.user.tenant_id as refresh_link %}
{# to make searchable false, just remove it from the include statement #}
{% include "django_openstack/common/_page_header.html" with title=_("Dashboard Settings") %}
{% endblock page_header %}
{% include "_messages.html" %}
<div class='main_content'>
<div class="dash_block">
<div class="left">
<h3>{% trans "Dashboard User Interface Language"%}</h3>
<form action="/i18n/setlang/" method="post"> {% csrf_token %}
<p><select name="language">
{% get_language_info_list for LANGUAGES as languages %}
{% for language in languages %}
{% if language.code == LANGUAGE_CODE %}
<option selected value="{{ language.code }}">{{ language.name_local }} ({{ language.code }})</option>
{%else%}
<option value="{{ language.code }}">{{ language.name_local }} ({{ language.code }})</option>
{%endif%}
{% endfor %}
</select></p>
<input type="submit" value="{% trans "Select Language"%}" class="large-rounded" />
</form>
</div>
<div class="clear">&nbsp;</div>
</div>
</div>
{% endblock %}

7
django-openstack/django_openstack/urls.py
View File

@ -18,14 +18,19 @@
# License for the specific language governing permissions and limitations
# under the License.
from django.conf.urls.defaults import *
from django.conf.urls.defaults import patterns, url, include
from django.conf import settings
from django_openstack.signals import *
from django.views.generic import TemplateView
urlpatterns = patterns('',
url(r'^auth/', include('django_openstack.auth.urls')),
url(r'^dash/', include('django_openstack.dash.urls')),
url(r'^syspanel/', include('django_openstack.syspanel.urls')),
url(r'^settings/$', TemplateView.as_view(
template_name='django_openstack/dash/settings.html'),
name='dashboard_settings')
)
# import urls from modules

51
openstack-dashboard/dashboard/static/dashboard/css/style.css
View File

@ -95,8 +95,8 @@ input[type="submit"]:active { background-position: 0 -105px; }
}
#main a.action_link:hover, #main input.action_input:hover {
background: #6fa267;
text-decoration: none;
background: #6fa267;
text-decoration: none;
}
#main input.action_input {
@ -118,7 +118,7 @@ input[type="submit"]:active { background-position: 0 -105px; }
min-width: 1024px;
width: 100%;
height: 45px;
float: left;
float: left;
}
h1 {
@ -135,7 +135,7 @@ h1 a{
}
#main_nav {
background: #f3f8fa;
background-color: #f3f8fa;
text-transform: uppercase;
min-width: 800px;
width: 84%;
@ -151,7 +151,7 @@ h1 a{
#main_nav li a {
color: #8eacb7;
font-size: 12px;
font-size: 12px;
margin: -10px 0 0 0;
padding: 5px 10px 0;
float: left;
@ -161,7 +161,7 @@ h1 a{
height: 33px;
}
#main_nav li a.active { border-top: 5px solid #8eacb7; }
#main_nav li a:hover { background: #dff2fa; }
#main_nav li a:hover { background-color: #dff2fa; }
/* Tenant Dropdown */
@ -174,7 +174,7 @@ h1 a{
height: 38px;
margin: -45px 0 0 0;
padding: 5px 0 0 0;
float: right;
float: right;
border: 1px solid #d6e4d9;
}
@ -203,11 +203,16 @@ h1 a{
#drop_btn:hover { background-color: #bfdec6; }
#settings_btn {
background: url(../images/gears_small.png) no-repeat center center;
background-image: url(../images/gears_small.png);
background-repeat: no-repeat;
background-position: center top;
width: 23px;
height: 29px;
}
#settings_btn:hover { background-color: #bfdec6; }
#settings_btn:hover {
background-color: #bfdec6;
text-decoration: none;
}
a#current_tenant {
background: #f3faf3;
@ -302,7 +307,7 @@ li.title h4{
}
#page_header h2 span { color: #6a6a6a; }
#page_header .right {
#page_header .right {
float: right;
margin-right: 20px;
}
@ -389,7 +394,7 @@ label.refreshOption {
font-size: 20px;
}
table.wide {
table.wide {
width: 100%;
margin: 0 0 25px 0;
}
@ -494,23 +499,23 @@ td#actions input[type="submit"]:hover { text-decoration: underline; }
border-radius: 5px;
}
.message_box, .status_box.info {
.message_box, .status_box.info {
background-color: #e8f8ff;
color: #7ab6c5;
border-color: #9ac7dc;
}
.message_box.success {
.message_box.success {
background-color: #e9ffe8;
color: #7ec67b;
border-color: #9edd9b;
}
.message_box.warning {
.message_box.warning {
background-color: #ffffe8;
color: #d1b12d;
border-color: #ffe37b;
}
.message_box.error {
.message_box.error {
background-color: #ffdbdc;
color: #ff8080;
border-color: #ff9a99;
@ -519,7 +524,7 @@ td#actions input[type="submit"]:hover { text-decoration: underline; }
.message_box h2 {
float: left;
min-width: 120px;
padding: 20px 20px 20px 20px;
padding: 20px 20px 20px 20px;
}
.message_box.info h2 { color: #2a7380; border-color: #9ac7dc; }
@ -549,19 +554,19 @@ td#actions input[type="submit"]:hover { text-decoration: underline; }
border-radius: 5px;
}
.status_box.good {
.status_box.good {
background-color: #e9ffe8;
color: #7ec67b;
border-color: #9edd9b;
}
.status_box.medium {
.status_box.medium {
background-color: #ffffe8;
color: #eada83;
border-color: #ffe37b;
}
.status_box.bad {
.status_box.bad {
background-color: #ffdbdc;
color: #ff8080;
border-color: #ff9a99;
@ -573,7 +578,7 @@ td#actions input[type="submit"]:hover { text-decoration: underline; }
.status_box.medium .status { background: url(../images/status_sprite.png) no-repeat 6px -90px; }
.status_box.bad .status { background: url(../images/status_sprite.png) no-repeat 6px -186px; }
.status_box.small {
.status_box.small {
width: 100%;
min-width: 360px;
margin: 0 0 25px 0;
@ -624,7 +629,7 @@ td#actions input[type="submit"]:hover { text-decoration: underline; }
text-align: center;
}
.status_box p.avail span, .status_box p.used span {
.status_box p.avail span, .status_box p.used span {
font-size: 10px;
margin-top: -5px;
text-transform: uppercase;
@ -674,7 +679,7 @@ td#actions input[type="submit"]:hover { text-decoration: underline; }
font-size: 11px;
}
#date_form {
#date_form {
width: 502px;
margin: 18px 0 25px 22px;
}
@ -842,7 +847,7 @@ input:focus, textarea:focus {
float: left;
position: relative;
border: 1px solid #d2dce1;
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.2);
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

2
openstack-dashboard/dashboard/templates/_topbar.html
View File

@ -11,7 +11,7 @@
{% else %}
NOT _LOGGED_IN_TOPBAR
{% endif %}
<li><a id="settings_btn" href="{% url dashboard_settings %}">&nbsp;</a></li>
<li><a id="settings_btn" {% if current_topbar == "settings" %} class="active" {% endif %} href="{% url dashboard_settings %}">&nbsp;</a></li>
</ul>
<div id="user_bar">

4
openstack-dashboard/dashboard/urls.py
View File

@ -28,7 +28,6 @@ from django.conf import settings
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
from django.views import generic as generic_views
import django.views.i18n
from django.views.generic.simple import direct_to_template
from django_openstack import urls as django_openstack_urls
@ -39,9 +38,6 @@ urlpatterns = patterns('',
url(r'^syspanel/$', 'django_openstack.syspanel.views.instances.usage',
name='syspanel_overview'),
url(r'^i18n/', include('django.conf.urls.i18n')),
url(r'^settings/$', direct_to_template,
{'template': 'django_openstack/dash/dashboard_settings.html'},
name='dashboard_settings')
)
# Development static app and project media serving using the staticfiles app.