Merge "Modal fixes - 2 columns, padding, header, membership"
This commit is contained in:
Jenkins
Gerrit Code Review
commit
f128c896e7
|
|
@ -1,7 +1,7 @@
|
|||
{% load horizon i18n %}
|
||||
|
||||
<div class='clearfix'>
|
||||
<ul class="nav nav-tabs">
|
||||
<ul class="nav nav-tabs" role="tablist">
|
||||
{% for component in components %}
|
||||
{% if user|has_permissions:component %}
|
||||
<li{% if current.slug == component.slug %} class="active"{% endif %}>
|
||||
|
|
|
|||
|
|
@ -4,19 +4,19 @@
|
|||
{% block id %}membership_template{% endblock %}
|
||||
|
||||
{% block template %}{% spaceless %}{% jstemplate %}
|
||||
<ul class="nav nav-pills btn-group">
|
||||
<ul class="nav nav-pills btn-group btn-group-sm">
|
||||
<li class="member" data-[[step_slug]]-id="[[data_id]]">
|
||||
<span class="display_name">[[display_name]]</span>
|
||||
</li>
|
||||
<li class="active"><a class="btn btn-primary" href="#add_remove">[[text]]</a></li>
|
||||
<li class="dropdown role_options">
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
||||
<a class="dropdown-toggle btn btn-default" data-toggle="dropdown" href="#">
|
||||
<span class="roles_display">[[roles_label]]</span>
|
||||
<b class="caret"></b>
|
||||
<span class="caret"></span>
|
||||
</a>
|
||||
<ul class="dropdown-menu role_dropdown clearfix">
|
||||
[[#roles]]
|
||||
<li data-role-id="[[role_id]]"><i class="icon-ok"></i> [[role_name]]</li>
|
||||
<li data-role-id="[[role_id]]"><i class="fa fa-check"></i> [[role_name]]</li>
|
||||
[[/roles]]
|
||||
</ul>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<div class="modal-content">
|
||||
<div class='modal-header'>
|
||||
<a class='close' data-dismiss='modal'>×</a>
|
||||
<h3>[[title]]</h3>
|
||||
<h3 class="modal-title">[[title]]</h3>
|
||||
</div>
|
||||
<div class='modal-body'>
|
||||
[[body]]
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
{% block header %}
|
||||
<div class="modal-header">
|
||||
{% if hide %}<a href="#" class="close" data-dismiss="modal">×</a>{% endif %}
|
||||
<h3>{% block modal-header %}{{ modal_header }}{% endblock %}</h3>
|
||||
<h3 class="modal-title">{% block modal-header %}{{ modal_header }}{% endblock %}</h3>
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% block content %}
|
||||
|
|
@ -18,4 +18,4 @@
|
|||
</div>
|
||||
</div>
|
||||
{% block modal-js %}
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -26,13 +26,15 @@
|
|||
</div>
|
||||
{% endif %}
|
||||
{% block modal-body %}
|
||||
<div class="left">
|
||||
<fieldset>
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<fieldset>
|
||||
{% include "horizon/common/_form_fields.html" %}
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="right">
|
||||
{% block modal-body-right %}{% endblock %}
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
{% block modal-body-right %}{% endblock %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,12 +8,12 @@
|
|||
<div class="modal-header">
|
||||
{% block modal-header %}
|
||||
{% if modal %}<a href="#" class="close" data-dismiss="modal">×</a>{% endif %}
|
||||
<h3>{{ workflow.name }}</h3>
|
||||
<h3 class="modal-title">{{ workflow.name }}</h3>
|
||||
{% endblock %}
|
||||
</div>
|
||||
<div class="modal-body clearfix">
|
||||
{% block modal-body %}
|
||||
<ul class="nav nav-tabs{% if workflow.wizard %} wizard-tabs{% endif %}">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,9 @@
|
|||
<noscript><h3>{{ step }}</h3></noscript>
|
||||
<table class="table-fixed">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="actions">
|
||||
{% include "horizon/common/_form_fields.html" %}
|
||||
</td>
|
||||
<td class="help_text">
|
||||
{{ step.get_help_text }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
{% include "horizon/common/_form_fields.html" %}
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
{{ step.get_help_text }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,37 +5,42 @@
|
|||
<div class="membership {{ step.slug }}_membership dropdown_fix" data-show-roles="{{ step.show_roles }}">
|
||||
<div class="header">
|
||||
<div class="help_text">{{ step.help_text }}</div>
|
||||
<div class="left">
|
||||
<div class="fake_table fake_table_header fake_{{ step.slug }}_table">
|
||||
<span class="members_title">{{ step.available_list_title }}</span>
|
||||
<div class="form-group has-feedback">
|
||||
<input type="text" name="available_{{ step.slug }}_filter" id="available_{{ step.slug }}" class="filter {{ step.slug }}_filter form-control input-sm" placeholder="{% trans "Filter" %}">
|
||||
<span class="fa fa-search search-icon form-control-feedback"></span>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<div class="fake_table fake_table_header fake_{{ step.slug }}_table clearfix">
|
||||
<span class="members_title">{{ step.available_list_title }}</span>
|
||||
<div class="form-group has-feedback">
|
||||
<input type="text" name="available_{{ step.slug }}_filter" id="available_{{ step.slug }}" class="filter {{ step.slug }}_filter form-control input-sm" placeholder="{% trans "Filter" %}">
|
||||
<span class="fa fa-search search-icon form-control-feedback"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="fake_table fake_table_header fake_{{ step.slug }}_table">
|
||||
<span class="members_title">{{ step.members_list_title }}</span>
|
||||
<div class="form-group has-feedback">
|
||||
<input type="text" name="{{ step.slug }}_members_filter" id="{{ step.slug }}_members" class="filter {{ step.slug }}_filter form-control input-sm" placeholder="{% trans "Filter" %}">
|
||||
<span class="fa fa-search search-icon form-control-feedback"></span>
|
||||
<div class="col-xs-6">
|
||||
<div class="fake_table fake_table_header fake_{{ step.slug }}_table clearfix">
|
||||
<span class="members_title">{{ step.members_list_title }}</span>
|
||||
<div class="form-group has-feedback">
|
||||
<input type="text" name="{{ step.slug }}_members_filter" id="{{ step.slug }}_members" class="filter {{ step.slug }}_filter form-control input-sm" placeholder="{% trans "Filter" %}">
|
||||
<span class="fa fa-search search-icon form-control-feedback"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="left filterable {{ step.slug }}_filterable">
|
||||
<div class="fake_table fake_{{ step.slug }}_table" id="available_{{ step.slug }}">
|
||||
<ul class="available_members available_{{ step.slug }}"></ul>
|
||||
<ul class="no_results" id="no_available_{{ step.slug }}"><li>{{ step.no_available_text }}</li></ul>
|
||||
<div class="row">
|
||||
<div class="col-xs-6 filterable {{ step.slug }}_filterable">
|
||||
<div class="fake_table fake_{{ step.slug }}_table" id="available_{{ step.slug }}">
|
||||
<ul class="available_members available_{{ step.slug }}"></ul>
|
||||
<ul class="no_results" id="no_available_{{ step.slug }}"><li>{{ step.no_available_text }}</li></ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="right filterable {{ step.slug }}_filterable">
|
||||
<div class="fake_table fake_{{ step.slug }}_table" id="{{ step.slug }}_members">
|
||||
<ul class="members {{ step.slug }}_members"></ul>
|
||||
<ul class="no_results" id="no_{{ step.slug }}_members"><li>{{ step.no_members_text }}</li></ul>
|
||||
<div class="col-xs-6 filterable {{ step.slug }}_filterable">
|
||||
<div class="fake_table fake_{{ step.slug }}_table" id="{{ step.slug }}_members">
|
||||
<ul class="members {{ step.slug }}_members"></ul>
|
||||
<ul class="no_results" id="no_{{ step.slug }}_members"><li>{{ step.no_members_text }}</li></ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -115,7 +115,7 @@ class TemplateTagTests(test.TestCase):
|
|||
text = "{% horizon_main_nav %}"
|
||||
expected = """
|
||||
<div class='clearfix'>
|
||||
<ul class=\"nav nav-tabs\">
|
||||
<ul class=\"nav nav-tabs\" role=\"tablist\">
|
||||
<li>
|
||||
<a href=\"/cats/\" tabindex='1'>Cats</a>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -9,30 +9,23 @@
|
|||
|
||||
{% block modal-header %}{% trans "Create An Image" %}{% endblock %}
|
||||
|
||||
{% block modal-body %}
|
||||
<div class="left">
|
||||
<fieldset>
|
||||
{% include "horizon/common/_form_fields.html" %}
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="right">
|
||||
<h3>{% trans "Description:" %}</h3>
|
||||
<p>
|
||||
{% if HORIZON_IMAGES_ALLOW_UPLOAD %}
|
||||
{% trans "Images can be provided via an HTTP URL or be uploaded from your local file system. Compressed image binaries are supported (.zip and .tar.gz.)" %}
|
||||
{% else %}
|
||||
{% trans "Currently only images available via an HTTP URL are supported. The image location must be accessible to the Image Service. Compressed image binaries are supported (.zip and .tar.gz.)" %}
|
||||
{% endif %}
|
||||
</p>
|
||||
<p>
|
||||
<strong>{% trans "Please note: " %}</strong>
|
||||
{% if HORIZON_IMAGES_ALLOW_UPLOAD %}
|
||||
{% trans "If you select an image via an HTTP URL, the Image Location field MUST be a valid and direct URL to the image binary; it must also be accessible to the Image Service. URLs that redirect or serve error pages will result in unusable images." %}
|
||||
{% else %}
|
||||
{% trans "The Image Location field MUST be a valid and direct URL to the image binary. URLs that redirect or serve error pages will result in unusable images." %}
|
||||
{% endif %}
|
||||
</p>
|
||||
</div>
|
||||
{% block modal-body-right %}
|
||||
<h3>{% trans "Description:" %}</h3>
|
||||
<p>
|
||||
{% if HORIZON_IMAGES_ALLOW_UPLOAD %}
|
||||
{% trans "Images can be provided via an HTTP URL or be uploaded from your local file system. Compressed image binaries are supported (.zip and .tar.gz.)" %}
|
||||
{% else %}
|
||||
{% trans "Currently only images available via an HTTP URL are supported. The image location must be accessible to the Image Service. Compressed image binaries are supported (.zip and .tar.gz.)" %}
|
||||
{% endif %}
|
||||
</p>
|
||||
<p>
|
||||
<strong>{% trans "Please note: " %}</strong>
|
||||
{% if HORIZON_IMAGES_ALLOW_UPLOAD %}
|
||||
{% trans "If you select an image via an HTTP URL, the Image Location field MUST be a valid and direct URL to the image binary; it must also be accessible to the Image Service. URLs that redirect or serve error pages will result in unusable images." %}
|
||||
{% else %}
|
||||
{% trans "The Image Location field MUST be a valid and direct URL to the image binary. URLs that redirect or serve error pages will result in unusable images." %}
|
||||
{% endif %}
|
||||
</p>
|
||||
{% endblock %}
|
||||
|
||||
{% block modal-footer %}
|
||||
|
|
|
|||
|
|
@ -7,16 +7,9 @@
|
|||
|
||||
{% block modal-header %}{% trans "Update Image" %}{% endblock %}
|
||||
|
||||
{% block modal-body %}
|
||||
<div class="left">
|
||||
<fieldset>
|
||||
{% include "horizon/common/_form_fields.html" %}
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="right">
|
||||
<h3>{% trans "Description:" %}</h3>
|
||||
<p>{% trans "Edit the image details." %}</p>
|
||||
</div>
|
||||
{% block modal-body-right %}
|
||||
<h3>{% trans "Description:" %}</h3>
|
||||
<p>{% trans "Edit the image details." %}</p>
|
||||
{% endblock %}
|
||||
|
||||
{% block modal-footer %}
|
||||
|
|
|
|||
|
|
@ -747,25 +747,16 @@ form label {
|
|||
}
|
||||
|
||||
.static_page {
|
||||
float: left;
|
||||
float: left; //should be removed (jtomasek)
|
||||
background-color: $body-bg; //should be removed (jtomasek)
|
||||
> form {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
width: 342px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.left form {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.right {
|
||||
float: left;
|
||||
width: 342px;
|
||||
// should be removed and replaced by row + col-sm-6 in template
|
||||
.left, .right {
|
||||
@extend .col-sm-6;
|
||||
}
|
||||
|
||||
.clear {
|
||||
|
|
@ -1071,6 +1062,7 @@ tr.terminated {
|
|||
border-left: 0 none;
|
||||
border-right: 0 none;
|
||||
border-bottom: 0 none;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
#content_body {
|
||||
|
|
@ -1249,10 +1241,6 @@ div .flavor_table {
|
|||
width: 160px;
|
||||
}
|
||||
|
||||
#main_content .row:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.version_label {
|
||||
position: relative;
|
||||
text-align: right;
|
||||
|
|
@ -1425,97 +1413,80 @@ label.log-length {
|
|||
.membership {
|
||||
min-height: 200px;
|
||||
|
||||
/* Buttons */
|
||||
.btn-group {
|
||||
margin-left:0px;
|
||||
padding: 3px 10px;
|
||||
margin-bottom: 0px;
|
||||
border: 1px solid $gray-light;
|
||||
border-bottom: none;
|
||||
}
|
||||
.btn-group .active {
|
||||
float: right;
|
||||
}
|
||||
a.btn-primary:hover {
|
||||
background-color: $link-hover-color;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.help_text {
|
||||
margin-left: 5px;
|
||||
margin-bottom: 15px;
|
||||
width: 650px;
|
||||
}
|
||||
.members_title {
|
||||
color: $gray;
|
||||
font-weight: bold;
|
||||
float: left;
|
||||
line-height: 30px;
|
||||
width: 160px;
|
||||
}
|
||||
input[type="text"]:disabled + span.search-icon {
|
||||
color: $gray-light;
|
||||
}
|
||||
|
||||
.fake_table_header {
|
||||
background-color: $body-bg;
|
||||
padding: 10px;
|
||||
padding: 8px;
|
||||
border: 1px solid $table-border-color;
|
||||
border-bottom: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 'Fake table' body */
|
||||
.fake_table {
|
||||
> ul {
|
||||
padding: 0;
|
||||
&.no_results {
|
||||
border: 1px solid $table-border-color;
|
||||
padding: 10px;
|
||||
.members_title {
|
||||
color: $gray;
|
||||
font-weight: bold;
|
||||
float: left;
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
input.filter {
|
||||
width: 120px;
|
||||
float: right;
|
||||
&[type="text"]:disabled {
|
||||
background-color: $gray-lighter;
|
||||
& + span.search-icon {
|
||||
color: $gray-light;
|
||||
}
|
||||
}
|
||||
ul.btn-group:hover {
|
||||
background-color: $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control-feedback { top: 0; }
|
||||
.no_results {
|
||||
border: 1px solid $table-border-color;
|
||||
padding: 9px 10px 8px 10px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* Member lists */
|
||||
.update_members_filterable {
|
||||
overflow-y: auto;
|
||||
height: 500px;
|
||||
}
|
||||
.member {
|
||||
text-align: left;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.members ul.btn-group,
|
||||
.available_members ul.btn-group {
|
||||
display: block;
|
||||
&.nav-pills > li > a {
|
||||
padding: 6px 11px;
|
||||
.members, .available_members {
|
||||
padding: 0;
|
||||
// reset nav-pills display to block
|
||||
ul.nav-pills {
|
||||
display: block;
|
||||
}
|
||||
ul.btn-group {
|
||||
margin-left:0px;
|
||||
padding: 3px;
|
||||
margin-bottom: 0px;
|
||||
border: 1px solid $gray-light;
|
||||
border-bottom: none;
|
||||
&.last_stripe {
|
||||
border-bottom: 1px solid $table-border-color;
|
||||
}
|
||||
&.light_stripe {
|
||||
background-color: white;
|
||||
}
|
||||
&.dark_stripe {
|
||||
background-color: $table-bg-odd;
|
||||
}
|
||||
&:hover {
|
||||
background-color: $border-color;
|
||||
}
|
||||
li.member {
|
||||
padding: 6px 10px 5px 10px;
|
||||
}
|
||||
li.active {
|
||||
float: right;
|
||||
a:hover {
|
||||
background-color: $link-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.dark_stripe {
|
||||
background-color: $table-bg-odd;
|
||||
}
|
||||
.light_stripe {
|
||||
background-color: white;
|
||||
}
|
||||
.last_stripe {
|
||||
border-bottom: 1px solid $table-border-color;
|
||||
}
|
||||
.has-feedback {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
/* List filtering */
|
||||
.filter {
|
||||
width: 130px;
|
||||
}
|
||||
.form-control-feedback {
|
||||
top:0;
|
||||
}
|
||||
|
||||
/* Role dropdown menus */
|
||||
.role_dropdown li {
|
||||
cursor: pointer;
|
||||
|
|
@ -1529,19 +1500,12 @@ label.log-length {
|
|||
border: 0 none;
|
||||
@include box-shadow(none);
|
||||
z-index: 99999;
|
||||
i {
|
||||
@extend .glyphicon;
|
||||
&:before { content: "\e013"; }
|
||||
opacity: 0;
|
||||
display: inline-block;
|
||||
width: 14px;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
vertical-align: text-top;
|
||||
}
|
||||
&:hover {
|
||||
background-color: #cdcdcd;
|
||||
}
|
||||
i {
|
||||
opacity: 0;
|
||||
}
|
||||
&.selected i {
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -1552,7 +1516,6 @@ label.log-length {
|
|||
}
|
||||
.nav .role_options {
|
||||
float: right;
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,23 +1,11 @@
|
|||
@import '_variables';
|
||||
|
||||
.workflow {
|
||||
ul.nav-tabs {
|
||||
padding: 0 13px;
|
||||
}
|
||||
|
||||
td {
|
||||
&.actions {
|
||||
vertical-align: top;
|
||||
width: 308px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
&.help_text {
|
||||
vertical-align: top;
|
||||
width: 340px;
|
||||
padding-left: 10px;
|
||||
border-left: 1px solid $border-color;
|
||||
}
|
||||
.tab-content {
|
||||
border-left: 0 none;
|
||||
border-right: 0 none;
|
||||
border-bottom: 0 none;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
fieldset > table {
|
||||
|
|
|
|||
Loading…
Reference in New Issue