launchpad-reviewers team mailing list archive
-
launchpad-reviewers team
-
Mailing list archive
-
Message #06466
[Merge] lp:~huwshimi/maas/interface-elements into lp:maas
Huw Wilkins has proposed merging lp:~huwshimi/maas/interface-elements into lp:maas.
Requested reviews:
Launchpad code reviewers (launchpad-reviewers)
For more details, see:
https://code.launchpad.net/~huwshimi/maas/interface-elements/+merge/94093
Apologies for the large amount of changes in this branch. There are also a lot of dummy elements included (such as on the node listing page), hopefully we can somehow keep track of what's actually working.
Changes include:
- Form styling for errors, help etc.
- Improved buttons and alignment
- Table styles
- Pagination styles
- Sidebar styles
- Dashboard MaaS name edit for styles
- Node listing page design
Probably a bunch of other little things I can't remember right now.
--
https://code.launchpad.net/~huwshimi/maas/interface-elements/+merge/94093
Your team Launchpad code reviewers is requested to review the proposed merge of lp:~huwshimi/maas/interface-elements into lp:maas.
=== modified file 'src/maasserver/static/css/base.css'
--- src/maasserver/static/css/base.css 2012-02-20 06:06:01 +0000
+++ src/maasserver/static/css/base.css 2012-02-22 07:10:23 +0000
@@ -5,3 +5,8 @@
body {
background: #2C001E url(../img/bg_dots.png) repeat top center;
}
+table {
+ width: 100%;
+ border-collapse: collapse;
+ border-spacing: 0;
+ }
=== added file 'src/maasserver/static/css/components/blocks.css'
--- src/maasserver/static/css/components/blocks.css 1970-01-01 00:00:00 +0000
+++ src/maasserver/static/css/components/blocks.css 2012-02-22 07:10:23 +0000
@@ -0,0 +1,9 @@
+.block {
+ border: 0 solid #e5e2e0;
+ padding-bottom: 15px;
+ margin-bottom: 15px;
+ }
+.block.full-width {
+ width: 100%;
+ border-bottom-width: 1px;
+ }
=== added file 'src/maasserver/static/css/components/pagination.css'
--- src/maasserver/static/css/components/pagination.css 1970-01-01 00:00:00 +0000
+++ src/maasserver/static/css/components/pagination.css 2012-02-22 07:10:23 +0000
@@ -0,0 +1,11 @@
+.pagination {
+ margin: 10px 0;
+ text-align: center;
+ }
+.pagination .inactive {
+ color: #AEA79F;
+ }
+.pagination a,
+.pagination span {
+ margin: 0 5px;
+ }
=== added file 'src/maasserver/static/css/components/table_list.css'
--- src/maasserver/static/css/components/table_list.css 1970-01-01 00:00:00 +0000
+++ src/maasserver/static/css/components/table_list.css 2012-02-22 07:10:23 +0000
@@ -0,0 +1,20 @@
+table.list tr {
+ border-width: 0 0 1px 0;
+ border-style: solid;
+ border-color: #e5e2e0;
+ }
+table.list th {
+ padding: 5px;
+ }
+table.list tr.actions {
+ background-color: #f2f2f2;
+ }
+table.list tr.actions td {
+ padding: 5px 10px;
+ }
+table.list tr.actions input[type="submit"] {
+ padding: 2px 10px;
+ }
+table.list td {
+ padding: 10px 5px;
+ }
=== added file 'src/maasserver/static/css/components/title_form.css'
--- src/maasserver/static/css/components/title_form.css 1970-01-01 00:00:00 +0000
+++ src/maasserver/static/css/components/title_form.css 2012-02-22 07:10:23 +0000
@@ -0,0 +1,19 @@
+.page-title-form {
+ background: transparent url(../../img/content_tail.png) no-repeat 50px bottom;
+ }
+.page-title-form input {
+ border: 2px solid transparent;
+ background-color: transparent;
+ font-size: 36px;
+ line-height: 26px;
+ color: #fff;
+ margin: 6px 10px;
+ padding: 4px;
+ width: 97%;
+ }
+.page-title-form input:focus,
+.page-title-form input:hover {
+ border: 2px solid #5E2750;
+ background-color: #3b1832;
+ outline: none;
+ }
=== modified file 'src/maasserver/static/css/forms.css'
--- src/maasserver/static/css/forms.css 2012-02-20 06:06:01 +0000
+++ src/maasserver/static/css/forms.css 2012-02-22 07:10:23 +0000
@@ -9,11 +9,19 @@
form li.form-submit {
padding: 8px 0 0 0;
margin-bottom: 0;
+ text-align: right;
+ }
+.form-errors,
+form .errors {
+ color: #DE3E25;
}
label {
display: block;
margin-bottom: 4px;
}
+label .required {
+ color: #aea79f;
+ }
textarea,
input[type="password"],
input[type="text"] {
@@ -31,29 +39,33 @@
input[type="text"]:focus {
border-color: #000;
}
+li.error textarea,
+li.error input[type="password"],
+li.error input[type="text"] {
+ background-color: #F2CFCE;
+ }
.yui3-button,
+.button,
button,
input[type="submit"] {
- padding: 6px 30px;
+ padding: 4px 30px;
color: #fff;
- border-width: 1px 0 0 0;
- border-style: solid;
- border-color: #f4a68b;
+ border: 1px solid #ab370f;
background-color: #DD4814;
background-image: linear-gradient(bottom, rgb(199,66,18) 0%, rgb(221,74,20) 100%);
background-image: -o-linear-gradient(bottom, rgb(199,66,18) 0%, rgb(221,74,20) 100%);
background-image: -moz-linear-gradient(bottom, rgb(199,66,18) 0%, rgb(221,74,20) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(199,66,18) 0%, rgb(221,74,20) 100%);
background-image: -ms-linear-gradient(bottom, rgb(199,66,18) 0%, rgb(221,74,20) 100%);
- -webkit-box-shadow: 0 0 2px 0 #333;
- box-shadow: 0 0 2px 0 #333;
- -moz-border-radius: 14px;
- -webkit-border-radius: 14px;
- border-radius: 14px;
+ -webkit-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.3);
+ box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.3);
+ -moz-border-radius: 6px;
+ -webkit-border-radius: 6px;
+ border-radius: 6px;
text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
- font-size: 14px;
}
.yui3-button:hover,
+.button:hover,
button:hover,
input[type="submit"]:hover {
background-image: linear-gradient(bottom, rgb(199,66,18) 0%, rgb(236,94,43) 100%);
@@ -61,4 +73,14 @@
background-image: -moz-linear-gradient(bottom, rgb(199,66,18) 0%, rgb(236,94,43) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(199,66,18) 0%, rgb(236,94,43) 100%);
background-image: -ms-linear-gradient(bottom, rgb(199,66,18) 0%, rgb(236,94,43) 100%);
+ text-decoration: none;
+ }
+
+
+/******************************************************************************
+ modifier: inline-form
+*/
+.inline-form label {
+ display: inline;
+ margin-right: 4px;
}
=== modified file 'src/maasserver/static/css/import.css'
--- src/maasserver/static/css/import.css 2012-02-03 06:43:27 +0000
+++ src/maasserver/static/css/import.css 2012-02-22 07:10:23 +0000
@@ -5,3 +5,7 @@
@import url("modifiers.css");
/* components */
@import url("components/flash_messages.css");
+@import url("components/pagination.css");
+@import url("components/table_list.css");
+@import url("components/title_form.css");
+@import url("components/blocks.css");
=== modified file 'src/maasserver/static/css/layout.css'
--- src/maasserver/static/css/layout.css 2012-02-20 06:11:56 +0000
+++ src/maasserver/static/css/layout.css 2012-02-22 07:10:23 +0000
@@ -145,7 +145,7 @@
/******************************************************************************
- Modifier: modal-content
+ Content modifier: modal-content
*/
.modal-content #body {
background-color: transparent;
@@ -156,7 +156,7 @@
/******************************************************************************
- Modifier: login
+ Content modifier: login
*/
.login #content {
padding: 30px 40px;
@@ -171,6 +171,26 @@
/******************************************************************************
+ Content modifier: sidebar
+*/
+.sidebar #content {
+ padding-right: 250px;
+ }
+
+
+/******************************************************************************
+ Sidebar
+*/
+.sidebar #sidebar {
+ float: right;
+ width: 180px;
+ margin-right: -250px;
+ padding: 0 20px 10px 20px;
+ border-left: 1px solid #e5e2e0;
+ }
+
+
+/******************************************************************************
Footer
*/
#footer {
=== modified file 'src/maasserver/static/css/modifiers.css'
--- src/maasserver/static/css/modifiers.css 2012-02-21 05:50:08 +0000
+++ src/maasserver/static/css/modifiers.css 2012-02-22 07:10:23 +0000
@@ -12,8 +12,11 @@
.hidden {
display: none;
}
-table {
- width: 100%;
+.left {
+ float: left;
+ }
+.right {
+ float: right;
}
/* XXX: move this yui stuff somewhere more sensible */
/* panel */
@@ -40,6 +43,10 @@
.yui3-widget-button-wrapper {
width: 100%;
}
+.yui3-widget-button-wrapper .spinner {
+ float: right;
+ margin: 8px 10px 0 0;
+ }
.yui3-panel .yui3-button {
float: right;
}
=== modified file 'src/maasserver/static/img/favicon.ico'
Binary files src/maasserver/static/img/favicon.ico 2012-01-27 10:30:52 +0000 and src/maasserver/static/img/favicon.ico 2012-02-22 07:10:23 +0000 differ
=== modified file 'src/maasserver/static/js/node_add.js'
--- src/maasserver/static/js/node_add.js 2012-02-21 18:20:40 +0000
+++ src/maasserver/static/js/node_add.js 2012-02-22 07:10:23 +0000
@@ -183,7 +183,7 @@
*/
initializeNodes: function() {
// Prepare spinnerNode.
- this.spinnerNode = Y.Node.create('<img />')
+ this.spinnerNode = Y.Node.create('<img class="spinner" />')
.set('src', MAAS_config.uris.statics + 'img/spinner.gif');
// Prepare logged-off error message.
this.loggedOffNode = Y.Node.create('<span />')
=== modified file 'src/maasserver/templates/maasserver/base.html'
--- src/maasserver/templates/maasserver/base.html 2012-02-21 23:29:11 +0000
+++ src/maasserver/templates/maasserver/base.html 2012-02-22 07:10:23 +0000
@@ -86,9 +86,15 @@
{% endif %}
</ul>
{% if user.is_authenticated %}
- <h1 id="page-title">{% block page-title %}{% endblock %}</h1>
+ {% block page-title-block %}
+ <h1 id="page-title">{% block page-title %}{% endblock %}</h1>
+ {% endblock %}
{% endif %}
- <div id="content">{% block content %}{% endblock %}</div>
+ <div id="content">
+ <div id="sidebar">{% block sidebar %}{% endblock %}</div>
+ {% block content %}{% endblock %}
+ <div class="clear"></div>
+ </div>
</div>
<div id="footer">
<img src="{{ STATIC_URL }}img/ubuntu_logo_footer.png" alt="Ubuntu" />
=== added file 'src/maasserver/templates/maasserver/form_field.html'
--- src/maasserver/templates/maasserver/form_field.html 1970-01-01 00:00:00 +0000
+++ src/maasserver/templates/maasserver/form_field.html 2012-02-22 07:10:23 +0000
@@ -0,0 +1,11 @@
+<li class="{{ field.html_name }}{% if field.errors %} error{% endif %}">
+ <label for="id_{{ field.html_name }}">
+ {{ field.label }}
+ {% if field.field.required %}
+ <span class="required">(required)</span>
+ {% endif %}
+ </label>
+ {{ field }}
+ <span class="help">{% if field.help_text %}{{ field.help_text }}{% endif %}</span>
+ {% if field.errors %}<span class="errors">{{ field.errors }}</span>{% endif %}
+</li>
=== modified file 'src/maasserver/templates/maasserver/index.html'
--- src/maasserver/templates/maasserver/index.html 2012-02-21 10:50:07 +0000
+++ src/maasserver/templates/maasserver/index.html 2012-02-22 07:10:23 +0000
@@ -2,7 +2,6 @@
{% block nav-active-index %}active{% endblock %}
{% block title %}Dashboard{% endblock %}
-{% block page-title %}Dashboard{% endblock %}
{% block html_includes %}{% include "maasserver/snippets.html" %}
{% endblock %}
@@ -23,7 +22,8 @@
var add_node_link = Y.Node.create('<a />')
.set('id', 'addnode')
.set('text', "Add node")
- .set('href', '#');
+ .set('href', '#')
+ .addClass('button');
Y.one('#content').append(add_node_link);
add_node_link.on('click', Y.maas.node_add.showAddNodeWidget);
});
@@ -32,5 +32,15 @@
</script>
{% endblock %}
+{% block page-title-block %}
+ {% if user.is_superuser %}
+ <form action="" method="" class="page-title-form">
+ <input type="text" value="{{ global_options.site_name }}" title="Edit the name of this MaaS" />
+ </form>
+ {% else %}
+ <h1 id="page-title">{% include "maasserver/site_title.html" %}</h1>
+ {% endif %}
+{% endblock %}
+
{% block content %}
{% endblock %}
=== modified file 'src/maasserver/templates/maasserver/node_list.html'
--- src/maasserver/templates/maasserver/node_list.html 2012-02-21 23:10:17 +0000
+++ src/maasserver/templates/maasserver/node_list.html 2012-02-22 07:10:23 +0000
@@ -2,8 +2,10 @@
{% block nav-active-node-list %}active{% endblock %}
{% block title %}Nodes{% endblock %}
-{% block page-title %}{{ node_list|length }} nodes in {% include "maasserver/site_title.html" %}{% endblock %}
+{% block page-title %}{{ node_list|length }} node{{ node_list|length|pluralize }} in {% include "maasserver/site_title.html" %}{% endblock %}
{% block site-switcher %}{% endblock %}
+{% block layout-modifiers %}sidebar{% endblock %}
+{% block header-search %}{% endblock %}
{% block html_includes %}{% include "maasserver/snippets.html" %}
{% endblock %}
@@ -20,32 +22,60 @@
</script>
{% endblock %}
+
+{% block sidebar %}
+ <h3>Filters</h3>
+ <form action="" method="get">
+ <ul>
+ <li><label for=""><input type="checkbox" checked="checked" id="" /> Pooled</label></li>
+ <li><label for=""><input type="checkbox" checked="checked" id="" /> Reserved</label></li>
+ <li><label for=""><input type="checkbox" checked="checked" id="" /> Allocated</label></li>
+ <li><label for=""><input type="checkbox" checked="checked" id="" /> Declared</label></li>
+ <li><label for=""><input type="checkbox" checked="checked" id="" /> Retired</label></li>
+ </ul>
+ </form>
+{% endblock %}
+
{% block content %}
- <h2>{{ node_list|length }} node{{ node_list|length|pluralize }} in this cluster</h2>
+ <form action="" method="get" class="block full-width inline-form">
+ <label for="list-search">Search nodes</label> <input type="text" name="query" id="list-search" value="" /><input type="submit" value="Search" />
+ </form>
{% if node_list|length %}
- <table>
- <thead>
- <tr>
- <th>System ID</th>
- <th>Hostname</th>
- <th>MAC</th>
- <th>Status</th>
- </tr>
- </thead>
- {% for node in node_list %}
- <tr class="node {% cycle 'even' 'odd' %}">
- <td class="node-system_id">{{ node.system_id }}</td>
- <td>{{ node.hostname }}</td>
- <td>
- {{ node.macaddress_set.reverse|first }}
- {% if node.macaddress_set.count > 1 %}
- ,… ({{ node.macaddress_set.count|add:"-1" }} more MAC Address(es))
- {% endif %}
+ <form action="" method="post">
+ <table class="list">
+ <thead>
+ <tr>
+ <th></th>
+ <th>Hostname</th>
+ <th>MAC</th>
+ <th>Status</th>
+ </tr>
+ </thead>
+ <tr class="actions">
+ <td colspan="4">
+ Action
+ <select>
+ <option>Lorem ipsum</option>
+ </select>
+ <input type="submit" value="Go" />
</td>
- <td>{{ node.display_status }}</td>
</tr>
- {% endfor %}
- </table>
+ {% for node in node_list %}
+ <tr class="node {% cycle 'even' 'odd' %}">
+ <td><input type="checkbox" />
+ <td><a href="{{ node.get_absolute_url }}">{{ node.hostname }}</a></td>
+ <td>
+ {{ node.macaddress_set.reverse|first }}
+ {% if node.macaddress_set.count > 1 %}
+ ({{ node.macaddress_set.count|add:"-1" }} more MAC Address{{ node.macaddress_set.count|add:"-1"|pluralize }})
+ {% endif %}
+ </td>
+ <td><a href="">{{ node.display_status }}</a></td>
+ </tr>
+ {% endfor %}
+ </table>
+ </form>
{% endif%}
- <a id="addnode" href="#">Add node</a>
+ {% include "maasserver/pagination.html" %}
+ <a id="addnode" href="#" class="button right">Add node</a>
{% endblock %}
=== added file 'src/maasserver/templates/maasserver/pagination.html'
--- src/maasserver/templates/maasserver/pagination.html 1970-01-01 00:00:00 +0000
+++ src/maasserver/templates/maasserver/pagination.html 2012-02-22 07:10:23 +0000
@@ -0,0 +1,7 @@
+<div class="pagination">
+ <span class="inactive">FIRST</span>
+ <span class="inactive">PREVIOUS</span>
+ <span>1-50 of 237</span>
+ <a href="">NEXT</a>
+ <a href="">LAST</a>
+</div>
=== modified file 'src/maasserver/templates/maasserver/settings.html'
--- src/maasserver/templates/maasserver/settings.html 2012-02-20 11:02:48 +0000
+++ src/maasserver/templates/maasserver/settings.html 2012-02-22 07:10:23 +0000
@@ -32,13 +32,14 @@
</ul>
<div>
<div id="users">
- <table>
+ <h2>Users and keys</h2>
+ <table class="list">
<thead>
<tr>
- <th>User</th>
- <th>Is superuser?</th>
+ <th>ID</th>
<th>Number of nodes in use</th>
- <th>Last login</th>
+ <th>Last seen</th>
+ <th>MaaS Admin</th>
<th></th>
</tr>
</thead>
@@ -51,13 +52,13 @@
{{ user_item.username }}
</a>
</td>
+ <td>{{ user_item.node_set.count }}</td>
+ <td>{{ user_item.last_login }}</td>
<td>
{% if user_item.is_superuser %}
<img src="{{ STATIC_URL }}img/yes.png" />
{% endif %}
</td>
- <td>{{ user_item.node_set.count }}</td>
- <td>{{ user_item.last_login }}</td>
<td>
<a href="{% url 'accounts-edit' user_item.username %}"
title="Edit user {{ user_item.username }}">
=== modified file 'src/maasserver/templates/registration/login.html'
--- src/maasserver/templates/registration/login.html 2012-02-20 06:06:01 +0000
+++ src/maasserver/templates/registration/login.html 2012-02-22 07:10:23 +0000
@@ -18,13 +18,15 @@
{% block content %}
<h2>Login</h2>
{% if form.errors %}
- <p>Your username and password didn't match. Please try again.</p>
+ <p class="form-errors">Your username and password didn't match. Please try again.</p>
{% endif %}
<form method="post" action="{% url 'django.contrib.auth.views.login' %}">
<input type="hidden" name="next" value="{{ next }}" />
<ul>
- {{ form.as_ul }}
+ {% for field in form %}
+ {% include "maasserver/form_field.html" %}
+ {% endfor %}
<li class="form-submit"><input type="submit" value="Login" /></li>
</ul>
</form>
