openstack/horizon
Code Issues Proposed changes

Basic Tabs now inherit from a Bootstrap Theme

Browse Source 
Tabs were pretty basic.  For the most, tabs were using the standard
styles nicely, except when embedded inside of a modal. There was a
lot of adding padding and removing padding to the tab-content and
modal container.  This has been cleaned up.

Also, the 'asterisk' that is used to show when a tab has required
information for a workflow was changed to an icon font.

Many unused styles were removed from horizon.scss.

Partially-Implements: blueprint horizon-theme-css-reorg
Partially-Implements: blueprint bootstrap-html-standards

Change-Id: I929de0ae31a3c2cca9e332956eed755c4e279f3d
This commit is contained in:
Diana Whitten 2015-11-16 15:04:17 -07:00
parent e71602479d
commit b4295a7df7
7 changed files with 33 additions and 183 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
doc/source/topics/customizing.rst
View File

@ -129,6 +129,7 @@ full use of the Bootstrap theme architecture.
* Tables_
* Login_
* Tabs_
Step 1
------
@ -147,10 +148,8 @@ more useful ones include:
tools will provide the ``variables.less`` file, which will need to be
converted to ``_variables.scss``
.. _Top Navbar:
The Top Navbar
--------------
Top Navbar
----------
The top navbar in Horizon now uses a native Bootstrap ``navbar``. There are a
number of variables that can be used to customize this element. Please see the
@ -165,17 +164,13 @@ The top navbar is now responsive on smaller screens. When the window size hits
your ``$screen-sm`` value, the topbar will compress into a design that is
better suited for small screens.
.. _Side Nav:
The Side Nav
------------
Side Nav
--------
The side navigation component has been refactored to use the native Stacked
Pills element from Bootstrap. See **Pills** section of your variables file
for specific variables to customize.
.. _Pie Charts:
Pie Charts
----------
@ -186,8 +181,6 @@ Since there is no native element in Bootstrap specifically for pie charts,
the look and feel of the charts are inheriting from other elements of the
theme. Please see ``_pie_charts.scss`` for specifics.
.. _Tables:
Tables
------
@ -217,6 +210,13 @@ The modal login experience, as used when switching regions, uses a standard
Bootstrap dialog. See the **Modals** section of your variables file for
specific variables to customize.
Tabs
----
The standard tabs make use of the native Bootstrap tab markup.
See **Tabs** section of your variables file for variables to customize.
Bootswatch and Material Design
------------------------------

2
horizon/templates/horizon/_nav_list.html
View File

@ -1,6 +1,6 @@
{% load horizon i18n %}
<div class='clearfix'>
<div>
<ul class="nav nav-tabs" role="tablist">
{% for component in components %}
{% if user|has_permissions:component %}

15
horizon/templates/horizon/common/_workflow.html
View File

@ -1,5 +1,7 @@
{% load i18n %}
{% with workflow.get_entry_point as entry_point %}
<div class="workflow {{ layout|join:' ' }}" data-backdrop="{{ modal_backdrop }}">
<form {{ workflow.attr_string|safe }} action="{{ workflow.get_absolute_url }}" {% if add_to_field %}data-add-to-field="{{ add_to_field }}"{% endif %} method="POST"{% if workflow.multipart %} enctype="multipart/form-data"{% endif %}>{% csrf_token %}
{% if REDIRECT_URL %}<input type="hidden" name="{{ workflow.redirect_param_name }}" value="{{ REDIRECT_URL }}"/>{% endif %}
@ -11,12 +13,15 @@
<h3 class="modal-title">{{ workflow.name }}</h3>
{% endblock %}
</div>
<div class="modal-body clearfix">
<div class="modal-body">
{% block modal-body %}
<ul class="nav nav-tabs{% if workflow.wizard %} wizard-tabs{% endif %}" role="tablist">
{% for step in workflow.steps %}
<li class="{% if entry_point == step.slug %}active{% endif %}{% if step.has_errors %} error{% endif %}{% if step.has_required_fields %} required{% endif %}">
<a href="#{{ step.get_id }}" data-toggle="tab" data-target="#{{ step.get_id }}">{{ step }}</a>
<a href="#{{ step.get_id }}" data-toggle="tab" data-target="#{{ step.get_id }}">
{{ step }}
{% if step.has_required_fields %}<span class="hz-icon-required fa fa-asterisk"></span>{% endif %}
</a>
</li>
{% endfor %}
</ul>
@ -37,10 +42,10 @@
{% if workflow.wizard %}
<div class="row">
<div class="col-sm-6 back">
<button type="button" class="btn btn-default button-previous">&laquo; {% trans "Back" %}</button>
<button type="button" class="btn btn-default button-previous">&laquo; {% trans "Back" %}</button>
</div>
<div class="col-sm-6 next">
<button type="button" class="btn btn-primary button-next">{% trans "Next" %} &raquo;</button>
<button type="button" class="btn btn-primary button-next">{% trans "Next" %} &raquo;</button>
<button type="submit" class="btn btn-primary button-final">{{ workflow.finalize_button_name }}</button>
</div>
</div>
@ -54,7 +59,9 @@
</div>
</form>
</div>
{% endwith %}
{% block modal-js %}
{% if workflow.wizard %}
<script type="text/javascript">

2
horizon/test/tests/templatetags.py
View File

@ -114,7 +114,7 @@ class TemplateTagTests(test.TestCase):
def test_horizon_main_nav(self):
text = "{% horizon_main_nav %}"
expected = """
<div class='clearfix'>
<div>
<ul class=\"nav nav-tabs\" role=\"tablist\">
<li>
<a href=\"/cats/\" tabindex='1'>Cats</a>

7
openstack_dashboard/static/dashboard/scss/components/_workflow.scss
View File

@ -91,4 +91,11 @@
color: $workflow-color-label-error;
}
}
.nav-tabs .hz-icon-required {
font-size: 50%;
vertical-align: top;
color: $brand-primary;
}
}

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

@ -161,50 +161,6 @@ a.current_item:hover h4 {
height: 125px;
}
.usage_block {
background: #e8f8ff;
color: #84b6c5;
border: 1px solid #afe3fb;
border-radius: 5px;
float: left;
width: 29%;
margin-right: 5%;
min-height: 125px;
}
.usage_block.last {
margin-right: 0;
}
.usage_block h3 {
background: #cef0ff;
color: #4fa5bf;
font-weight: normal;
padding: 0 0 0 10px;
border-bottom: 1px solid #c6e7f5;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.usage_block ul {
margin: 10px;
}
.usage_block .quantity {
font-size: 25px;
}
.usage_block li {
font-size: 11px;
margin: 0 0 15px 0;
}
.usage_block .unit{
font-size: 11px;
text-transform: uppercase;
padding: 0 0 0 1px;
}
.main_nav {
list-style: none;
width: 222px;
@ -593,72 +549,8 @@ tr.terminated {
color: #999999;
}
#instance_tabs {
float: left;
width: 100%;
border-bottom: 1px solid #e1e1e1;
}
#instance_tabs li a {
background: #f2f2f2;
display: block;
font-size: 14px;
float: left;
padding: 5px 10px;
margin-right: 10px;
border: 1px solid #e1e1e1;
border-bottom: none;
}
#instance_tabs li.active a {
background: #fff;
padding-bottom: 8px;
margin-bottom: -5px;
}
#main_content {
min-width: $main-content-min-width;
.nav-tabs {
border-bottom: 1px solid $nav-tabs-border-color;
border-top: none;
> li {
margin-bottom: -1px;
margin-top: 0;
> a {
margin-right: 0;
border-radius: 0;
padding: 5px 14px;
&:hover {
border-color: $nav-tabs-link-hover-border-color $nav-tabs-link-hover-border-color $nav-tabs-border-color;
}
}
&.active > a {
&,
&:hover,
&:focus {
border-color: $nav-tabs-border-color $nav-tabs-border-color #fff;
outline: none;
}
}
}
}
.tab-content {
padding: 10px;
}
.workflow .modal-body {
padding-left: 0;
padding-right: 0;
.tab-content {
border-left: 0 none;
border-right: 0 none;
border-bottom: 0 none;
padding-top: 10px;
}
}
}
.javascript_disabled_alert {
@ -679,65 +571,8 @@ tr.terminated {
word-wrap: break-word;
}
.nav-tabs a {
cursor: pointer;
}
.nav-tabs li.error a {
color: $brand-danger;
}
.nav-tabs li.error a:after {
content: "*";
}
.nav-tabs li.required a:after,
form .form-group.required > label:after,
form .form-field.required > label:after {
content: "*";
font-weight: bold;
line-height: 0;
padding-left: 4px;
color: $brand-primary;
}
/* Region selector in header */
#region_selector {
position: absolute;
z-index: 9999;
right: 0;
top: 24px;
}
#region_selector a {
margin-left: 0;
}
#region_selector ul{
float: left;
margin-left: 5px;
padding-right: 21px;
width: 125px;
}
#region_selector ul:hover a {
display: block;
}
#region_selector li a {
padding: 3px 3px 3px 5px;
display: none;
background: #e1e1e1;
margin-top: -10px;
}
#region_selector li:first-child p{
background: #ededed url(../img/drop_arrow.png) no-repeat 106px 9px !important;
display: block;
border: 1px solid #e1e1e1;
padding: 5px;
}
iframe {
border: none;
}

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

@ -54,6 +54,7 @@ $icon-swap: (
share-square-o: 'share',
link: 'link-variant',
exchange: 'swap-horizontal',
asterisk: 'star',
);
@each $fa-icon, $mdi-icon in $icon-swap {