launchpad-reviewers team mailing list archive
-
launchpad-reviewers team
-
Mailing list archive
-
Message #06566
[Merge] lp:~huwshimi/maas/even-more-design-integration into lp:maas
Huw Wilkins has proposed merging lp:~huwshimi/maas/even-more-design-integration into lp:maas with lp:~huwshimi/maas/further-design-integration as a prerequisite.
Requested reviews:
Launchpad code reviewers (launchpad-reviewers)
For more details, see:
https://code.launchpad.net/~huwshimi/maas/even-more-design-integration/+merge/95509
Lots more design changes. Including:
- Improved grid blocks
- Fixed some issues with button styles
- Improved sidebar showing/hiding
- Added more sidebar styles
- Changed wording of title, messages and buttons on delete user page and repositioned buttons
- Added edit/delete buttons to view user page
- Changed secondary buttons colour to charcoal
- Styled preferences page
- Updated MaaS key adding js to match new html
- Styled help text on forms
- Set positions of save buttons on forms
--
https://code.launchpad.net/~huwshimi/maas/even-more-design-integration/+merge/95509
Your team Launchpad code reviewers is requested to review the proposed merge of lp:~huwshimi/maas/even-more-design-integration into lp:maas.
=== modified file 'src/maasserver/static/css/components/blocks.css'
--- src/maasserver/static/css/components/blocks.css 2012-03-02 06:10:24 +0000
+++ src/maasserver/static/css/components/blocks.css 2012-03-02 06:10:24 +0000
@@ -1,7 +1,6 @@
.block {
border: 0 solid #e5e2e0;
margin: 0 10px 10px 10px;
- float: left;
}
.block.first {
clear: left;
@@ -18,6 +17,23 @@
padding-bottom: 10px;
border-bottom-width: 1px;
}
+.block.auto-width {
+ display: inline-block;
+ }
+.size1,
+.size2,
+.size3,
+.size4,
+.size5,
+.size6,
+.size7,
+.size8,
+.size9,
+.size10,
+.size11,
+.size12 {
+ float: left;
+ }
.size1 {
width: 60px;
}
=== modified file 'src/maasserver/static/css/components/table_list.css'
--- src/maasserver/static/css/components/table_list.css 2012-03-02 06:10:24 +0000
+++ src/maasserver/static/css/components/table_list.css 2012-03-02 06:10:24 +0000
@@ -30,3 +30,15 @@
border-color: #dd4814;
cursor: pointer;
}
+/* ul list */
+ul.list {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ }
+ul.list li {
+ padding: 2px 0;
+ }
+ul.list .icon {
+ padding: 6px 0 0 0;
+ }
=== modified file 'src/maasserver/static/css/components/yui_panel.css'
--- src/maasserver/static/css/components/yui_panel.css 2012-03-02 06:10:24 +0000
+++ src/maasserver/static/css/components/yui_panel.css 2012-03-02 06:10:24 +0000
@@ -21,10 +21,6 @@
.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/css/forms.css'
--- src/maasserver/static/css/forms.css 2012-03-02 06:10:24 +0000
+++ src/maasserver/static/css/forms.css 2012-03-02 06:10:24 +0000
@@ -22,6 +22,10 @@
label .required {
color: #aea79f;
}
+form .help {
+ display: block;
+ color: #aea79f;
+ }
textarea,
input[type="password"],
input[type="text"] {
@@ -44,6 +48,12 @@
li.error input[type="text"] {
background-color: #F2CFCE;
}
+input[type="text"].disabled {
+ background-color: #f2f2f2;
+ }
+input[type="text"]:focus {
+ border: 1px solid #999;
+ }
a.button:hover {
text-decoration: none;
}
@@ -54,6 +64,7 @@
padding: 4px 30px;
color: #fff;
font-size: 14px;
+ text-align: center;
border: 1px solid #ab370f;
background-color: #DD4814;
background-image: linear-gradient(bottom, rgb(199,66,18) 0%, rgb(221,74,20) 100%);
@@ -61,8 +72,8 @@
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: inset 0 1px 0 0 rgba(255, 255, 255, 0.3);
- box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.3);
+ -webkit-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.2);
+ box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.2);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
@@ -78,6 +89,40 @@
background-image: -ms-linear-gradient(bottom, rgb(199,66,18) 0%, rgb(236,94,43) 100%);
text-decoration: none;
}
+.yui3-button,
+.button {
+ display: inline-block;
+ }
+
+/* Secondary buttons */
+.yui3-button.secondary,
+.button.secondary,
+button.secondary,
+input[type="submit"].secondary {
+ border-color: #262626;
+ background-color: #333;
+ background-image: linear-gradient(bottom, rgb(51,51,51) 0%, rgb(77,77,77) 100%);
+ background-image: -o-linear-gradient(bottom, rgb(51,51,51) 0%, rgb(77,77,77) 100%);
+ background-image: -moz-linear-gradient(bottom, rgb(51,51,51) 0%, rgb(77,77,77) 100%);
+ background-image: -webkit-linear-gradient(bottom, rgb(51,51,51) 0%, rgb(77,77,77) 100%);
+ background-image: -ms-linear-gradient(bottom, rgb(51,51,51) 0%, rgb(77,77,77) 100%);
+ -webkit-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
+ box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
+ }
+.yui3-button.secondary:hover,
+.button.secondary:hover,
+button.secondary:hover,
+input[type="submit"].secondary:hover {
+ background-image: linear-gradient(bottom, rgb(51,51,51) 0%, rgb(90,90,90) 100%);
+ background-image: -o-linear-gradient(bottom, rgb(51,51,51) 0%, rgb(90,90,90) 100%);
+ background-image: -moz-linear-gradient(bottom, rgb(51,51,51) 0%, rgb(90,90,90) 100%);
+ background-image: -webkit-linear-gradient(bottom, rgb(51,51,51) 0%, rgb(90,90,90) 100%);
+ background-image: -ms-linear-gradient(bottom, rgb(51,51,51) 0%, rgb(90,90,90) 100%);
+ }
+.spinner {
+ float: right;
+ margin: 8px 10px 0 0;
+ }
/******************************************************************************
=== modified file 'src/maasserver/static/css/layout.css'
--- src/maasserver/static/css/layout.css 2012-03-02 06:10:24 +0000
+++ src/maasserver/static/css/layout.css 2012-03-02 06:10:24 +0000
@@ -156,13 +156,27 @@
/******************************************************************************
Sidebar
*/
-.sidebar #sidebar {
+#sidebar {
+ display: none;
float: right;
width: 180px;
margin-right: -250px;
padding: 0 20px 10px 20px;
border-left: 1px solid #e5e2e0;
}
+.sidebar #sidebar {
+ display: block;
+ }
+#sidebar h4 {
+ font-weight: bold;
+ margin-bottom: 5px;
+ }
+#sidebar .block:first-child h4 {
+ margin-top: 0;
+ }
+#sidebar .button {
+ width: 100px;
+ }
/******************************************************************************
=== modified file 'src/maasserver/static/img/delete.png'
Binary files src/maasserver/static/img/delete.png 2012-02-14 09:28:09 +0000 and src/maasserver/static/img/delete.png 2012-03-02 06:10:24 +0000 differ
=== modified file 'src/maasserver/static/js/prefs.js'
--- src/maasserver/static/js/prefs.js 2012-02-24 17:37:01 +0000
+++ src/maasserver/static/js/prefs.js 2012-03-02 06:10:24 +0000
@@ -40,10 +40,13 @@
this.create_link = Y.Node.create('<a />')
.set('href', '#')
.set('id','create_token')
- .set('text', "Create a new API token");
+ .addClass('button')
+ .addClass('right')
+ .set('text', "+ Add MaaS key");
this.status_node = Y.Node.create('<div />')
.set('id','create_error');
this.spinnerNode = Y.Node.create('<img />')
+ .addClass('spinner')
.set('src', MaaS_config.uris.statics + 'img/spinner.gif');
this.get('srcNode').one('#token_creation_placeholder')
.append(this.create_link)
@@ -77,7 +80,7 @@
* @method deleteToken
*/
deleteToken: function(row) {
- var token_key = row.one('td').get('id');
+ var token_key = row.one('input').get('id');
var self = this;
var cfg = {
method: 'POST',
@@ -129,21 +132,22 @@
* @method addToken
*/
addToken: function(token, token_key) {
- var tbody = this.get('srcNode').one('tbody');
- var row = Y.Node.create('<tr />')
+ var list = this.get('srcNode').one('ul');
+ var row = Y.Node.create('<li />')
.addClass('bundle')
- .append(Y.Node.create('<td />')
+ .append(Y.Node.create('<a />')
+ .set('href', '#').addClass('delete-link right')
+ .append(Y.Node.create('<img />')
+ .set('title', 'Delete token')
+ .set(
+ 'src',
+ MaaS_config.uris.statics + 'img/delete.png')))
+ .append(Y.Node.create('<input />')
+ .set('type', 'text')
+ .addClass('disabled')
.set('id', token_key)
- .set('text', token))
- .append(Y.Node.create('<td />')
- .append(Y.Node.create('<a />')
- .set('href', '#').addClass('delete-link')
- .append(Y.Node.create('<img />')
- .set('title', 'Delete token')
- .set(
- 'src',
- MaaS_config.uris.statics + 'img/delete.png'))));
- tbody.append(row);
+ .set('value', token));
+ list.append(row);
this.bindDeleteRow(row);
},
=== modified file 'src/maasserver/static/js/tests/test_prefs.html'
--- src/maasserver/static/js/tests/test_prefs.html 2012-02-24 17:37:01 +0000
+++ src/maasserver/static/js/tests/test_prefs.html 2012-03-02 06:10:24 +0000
@@ -26,18 +26,22 @@
<span id="suite">maas.prefs.tests</span>
<script type="text/x-template" id="api-template">
<div id="placeholder">
- <table>
- <tbody>
- <tr class="bundle">
- <td id="tokenkey1">Sample token 1</td>
- <td><a class="delete-link" href="#">Delete</a></td>
- </tr>
- <tr class="bundle">
- <td id="tokenkey2">Sample token 2</td>
- <td><a class="delete-link" href="#">Delete</a></td>
- </tr>
- </tbody>
- </table>
+ <ul class="list">
+ <li class="bundle">
+ <a class="delete-link right" href="#">Delete</a>
+ <input type="text"
+ value="Sample token 1"
+ id="tokenkey1"
+ class="disabled" />
+ </li>
+ <li class="bundle">
+ <a class="delete-link right" href="#">Delete</a>
+ <input type="text"
+ value="Sample token 2"
+ id="tokenkey2"
+ class="disabled" />
+ </li>
+ </ul>
<p id="token_creation_placeholder">
</p>
</div>
=== modified file 'src/maasserver/static/js/tests/test_prefs.js'
--- src/maasserver/static/js/tests/test_prefs.js 2012-02-24 17:37:01 +0000
+++ src/maasserver/static/js/tests/test_prefs.js 2012-03-02 06:10:24 +0000
@@ -27,7 +27,7 @@
var create_link = widget.get('srcNode').one('#create_token');
Y.Assert.isNotNull(create_link);
Y.Assert.areEqual(
- "Create a new API token", create_link.get('text'));
+ "+ Add MaaS key", create_link.get('text'));
// The placeholder node for errors has been created.
var status_node = widget.get('srcNode').one('#create_error');
Y.Assert.isNotNull(status_node);
=== modified file 'src/maasserver/templates/maasserver/prefs.html'
--- src/maasserver/templates/maasserver/prefs.html 2012-02-28 10:42:29 +0000
+++ src/maasserver/templates/maasserver/prefs.html 2012-03-02 06:10:24 +0000
@@ -3,7 +3,6 @@
{% block nav-active-prefs %}active{% endblock %}
{% block title %}User preferences for {{ user.username }}{% endblock %}
{% block page-title %}User preferences for {{ user.username }}{% endblock %}
-{% block layout-modifiers %}sidebar{% endblock %}
{% block head %}
<script type="text/javascript">
@@ -19,41 +18,26 @@
{% block content %}
<div id="prefs">
- <div id="api">
- <h2>MaaS keys</h2>
- <p>
- An API token is the information you need to provide to a third
- party application for it to be able to access the MaaS server
- <a href="{% url 'api-doc' %}">API</a> on your behalf.
- </p>
- <p>
- You can create as many API tokens as you require.
- </p>
- <table class="list">
- <thead>
- <tr>
- <th>API tokens</th>
- <th></th>
- </tr>
- </thead>
- <tbody>
- {% for token in user.get_profile.get_authorisation_tokens %}
- <tr class="bundle">
- <td id="{{ token.key }}">
- {{ token.consumer.key }}:{{ token.key }}:{{ token.secret }}</td>
- <td>
- <a href="#" class="delete-link">
- <img title="Delete token"
- src="{{ STATIC_URL }}img/delete.png" />
- </a>
- </td>
- </tr>
- {% endfor %}
- </tbody>
- </table>
+ <div id="api" class="block size7 first">
+ <h2>Keys</h2>
+ <h3>MaaS keys</h3>
+ <ul class="list">
+ {% for token in user.get_profile.get_authorisation_tokens %}
+ <li class="bundle">
+ <a href="#" class="delete-link icon right">
+ <img title="Delete MaaS key"
+ src="{{ STATIC_URL }}img/delete.png" />
+ </a>
+ <input type="text"
+ value="{{ token.consumer.key }}:{{ token.key }}:{{ token.secret }}"
+ id="{{ token.key }}"
+ class="disabled" />
+ </li>
+ {% endfor %}
+ </ul>
<p id="token_creation_placeholder" />
</div>
- <div id="profile">
+ <div id="profile" class="block size7 first">
<h2>User details</h2>
<form action="." method="post">
<ul>
@@ -63,10 +47,9 @@
</ul>
<input type="hidden" name="profile_submit" value="1" />
<input type="submit" class="button right" value="Save" />
- <div class="clear"></div>
</form>
</div>
- <div id="password">
+ <div id="password" class="block size7 first">
<h2>Password</h2>
<form action="." method="post">
<ul>
@@ -76,7 +59,6 @@
</ul>
<input type="hidden" name="password_submit" value="1" />
<input type="submit" class="button right" value="Change password" />
- <div class="clear"></div>
</form>
</div>
</div>
=== modified file 'src/maasserver/templates/maasserver/settings.html'
--- src/maasserver/templates/maasserver/settings.html 2012-02-29 17:48:13 +0000
+++ src/maasserver/templates/maasserver/settings.html 2012-03-02 06:10:24 +0000
@@ -4,13 +4,12 @@
{% block title %}Settings{% endblock %}
{% block page-title %}Settings{% endblock %}
-{% block layout-modifiers %}sidebar{% endblock %}
{% block head %}
{% endblock %}
{% block content %}
- <div id="settings">
+ <div id="settings" class="block">
<div id="users">
<h2>Users and Keys</h2>
<table class="list">
@@ -25,7 +24,7 @@
</thead>
<tbody>
{% for user_item in user_list %}
- <tr class="user" id="{{ user_item.username }}">
+ <tr class="user {% cycle 'even' 'odd' %}" id="{{ user_item.username }}">
<td>
<a class="user"
href="{% url 'accounts-view' user_item.username %}">
@@ -61,13 +60,11 @@
{% endfor %}
</tbody>
</table>
- <br />
- <a class="button" href="{% url 'accounts-add' %}">
- <button class="button right">Add user</button>
+ <a class="button right" href="{% url 'accounts-add' %}">
+ Add user
</a>
- <div class="clear"></div>
</div>
- <div id="commissioning">
+ <div id="commissioning" class="block size7 first">
<h2>Commissioning</h2>
<form action="{% url "settings" %}" method="post">
<ul>
@@ -77,10 +74,9 @@
</ul>
<input type="hidden" name="commissioning_submit" value="1" />
<input type="submit" class="button right" value="Save" />
- <div class="clear"></div>
</form>
</div>
- <div id="ubuntu">
+ <div id="ubuntu" class="block size7 first">
<h2>Ubuntu</h2>
<form action="{% url "settings" %}" method="post">
<ul>
@@ -104,10 +100,9 @@
</ul>
<input type="hidden" name="ubuntu_submit" value="1" />
<input type="submit" class="button right" value="Save" />
- <div class="clear"></div>
</form>
</div>
- <div id="maas_and_network">
+ <div id="maas_and_network" class="block size7 first">
<h2>Network Configuration</h2>
<form action="{% url "settings" %}" method="post">
<ul>
@@ -117,7 +112,6 @@
</ul>
<input type="hidden" name="maas_and_network_submit" value="1" />
<input type="submit" class="button right" value="Save" />
- <div class="clear"></div>
</form>
</div>
</div>
=== modified file 'src/maasserver/templates/maasserver/user_confirm_delete.html'
--- src/maasserver/templates/maasserver/user_confirm_delete.html 2012-02-16 15:58:31 +0000
+++ src/maasserver/templates/maasserver/user_confirm_delete.html 2012-03-02 06:10:24 +0000
@@ -1,21 +1,22 @@
{% extends "maasserver/base.html" %}
{% block nav-active-settings %}active{% endblock %}
-{% block title %}Delete user confirmation{% endblock %}
-{% block page-title %}Delete user confirmation{% endblock %}
+{% block title %}Delete user: {{ user_to_delete.user.username }}{% endblock %}
+{% block page-title %}Delete user: {{ user_to_delete.user.username }}{% endblock %}
{% block content %}
- <h2>
- Are you sure you want to delete user {{ user_to_delete.user.username }}?
- </h2>
- <p>
- <form action="." method="post">
- <input type="hidden" name="post" value="yes" />
- <input type="submit"
- value="Yes, delete user {{ user_to_delete.user.username }}" />
-
- <a class="link-button" href="{% url 'settings' %}">Cancel</a>
- </form>
- </p>
+ <div class="block auto-width">
+ <h2>
+ Are you sure you want to delete the user "{{ user_to_delete.user.username }}"?
+ </h2>
+ <p>This action is permanent and can not be undone.</p>
+ <p>
+ <form action="." method="post">
+ <input type="hidden" name="post" value="yes" />
+ <input type="submit" value="Delete user" class="right" />
+ <a href="{% url 'settings' %}">Cancel</a>
+ </form>
+ </p>
+ </div>
{% endblock %}
=== modified file 'src/maasserver/templates/maasserver/user_edit.html'
--- src/maasserver/templates/maasserver/user_edit.html 2012-02-28 06:50:42 +0000
+++ src/maasserver/templates/maasserver/user_edit.html 2012-03-02 06:10:24 +0000
@@ -5,13 +5,13 @@
{% block page-title %}Edit User{% endblock %}
{% block content %}
- <form action="." method="post">
+ <form action="." method="post" class="block auto-width">
<ul>
{% for field in form %}
{% include "maasserver/form_field.html" %}
{% endfor %}
</ul>
- <input type="submit" value="Save user" />
- <a class="link-button" href="{% url 'settings' %}">Cancel</a>
+ <input type="submit" value="Save user" class="right" />
+ <a class="link-button" href="{% url 'settings' %}">Cancel</a>
</form>
{% endblock %}
=== modified file 'src/maasserver/templates/maasserver/user_view.html'
--- src/maasserver/templates/maasserver/user_view.html 2012-03-02 06:10:24 +0000
+++ src/maasserver/templates/maasserver/user_view.html 2012-03-02 06:10:24 +0000
@@ -3,6 +3,22 @@
{% block nav-active-settings %}active{% endblock %}
{% block title %}View user{% endblock %}
{% block page-title %}View user: {{ view_user.username }}{% endblock %}
+{% block layout-modifiers %}sidebar{% endblock %}
+
+{% block sidebar %}
+ <div class="block size3">
+ <h4>User details</h4>
+ <a href="{% url 'accounts-edit' view_user.username %}" class="button secondary">
+ Edit user
+ </a>
+ </div>
+ <div class="block size3">
+ <h4>Actions</h4>
+ <a href="{% url 'accounts-del' view_user.username %}" class="button secondary">
+ Delete user
+ </a>
+ </div>
+{% endblock %}
{% block content %}
<ul class="data-list">
