launchpad-reviewers team mailing list archive
-
launchpad-reviewers team
-
Mailing list archive
-
Message #06446
[Merge] lp:~huwshimi/maas/user-panel into lp:maas
Huw Wilkins has proposed merging lp:~huwshimi/maas/user-panel into lp:maas with lp:~huwshimi/maas/design-improvements as a prerequisite.
Requested reviews:
Launchpad code reviewers (launchpad-reviewers)
For more details, see:
https://code.launchpad.net/~huwshimi/maas/user-panel/+merge/93922
This adds a drop down menu to the header for user preferences and logout links etc.
The widget uses an unmodified YUI Overlay but wraps it in then maas namespace. I'm not sure if this is appropriate or if there is a better way to provide a common widget like this.
--
https://code.launchpad.net/~huwshimi/maas/user-panel/+merge/93922
Your team Launchpad code reviewers is requested to review the proposed merge of lp:~huwshimi/maas/user-panel into lp:maas.
=== modified file 'src/maasserver/static/css/modifiers.css'
--- src/maasserver/static/css/modifiers.css 2012-02-21 05:56:20 +0000
+++ src/maasserver/static/css/modifiers.css 2012-02-21 05:56:21 +0000
@@ -9,10 +9,14 @@
.clear {
clear: both;
}
+.hidden {
+ display: none;
+ }
table {
width: 100%;
}
/* XXX: move this yui stuff somewhere more sensible */
+/* panel */
.yui3-widget-mask {
background-color: #000;
opacity: 0.3;
@@ -51,3 +55,32 @@
box-shadow: none;
font-size: 13px;
}
+/* overlay */
+.yui3-overlay {
+ background-color: #fff;
+ -moz-border-radius: 0 0 6px 6px;
+ -webkit-border-radius: 0 0 6px 6px;
+ border-radius: 0 0 6px 6px;
+ -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
+ box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
+ }
+.yui3-overlay ul {
+ padding: 5px 0;
+ -webkit-box-shadow: inset 0 2px 2px 0 rgba(0,0,0,0.4);
+ box-shadow: inset 0 2px 2px 0 rgba(0,0,0,0.4);
+ }
+.yui3-overlay li {
+ float: none;
+ }
+.yui3-overlay a {
+ display: block;
+ padding: 6px 20px;
+ color: #dd4814 !important;
+ border-bottom: 1px solid #e5e2e0;
+ }
+.yui3-overlay li:last-child a {
+ border-bottom: none;
+ }
+.yui3-overlay-hidden{
+ display: none;
+ }
=== added file 'src/maasserver/static/js/tests/test_user_panel.html'
--- src/maasserver/static/js/tests/test_user_panel.html 1970-01-01 00:00:00 +0000
+++ src/maasserver/static/js/tests/test_user_panel.html 2012-02-21 05:56:21 +0000
@@ -0,0 +1,28 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
+<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en">
+ <head>
+ <title>Test maas.user_panel</title>
+
+ <!-- YUI and test setup -->
+ <script type="text/javascript" src="../yui/tests/yui/yui-min.js"></script>
+ <script type="text/javascript" src="../testing/testrunner.js"></script>
+ <script type="text/javascript" src="../testing/testing.js"></script>
+ <!-- The module under test -->
+ <script type="text/javascript" src="../user_panel.js"></script>
+ <!-- The test suite -->
+ <script type="text/javascript" src="test_user_panel.js"></script>
+ </head>
+ <body>
+ <div id="user-nav">
+ <a href="#" id="user-options-link">charliename
+ <img src="../../img/down_arrow_light.png" alt="Options arrow" />
+ </a>
+ <ul id="user-options" class="nav hidden">
+ <li><a href="/account/prefs/">Preferences</a></li>
+ <li><a href="/account/logout/">Logout</a></li>
+ </ul>
+ </div>
+
+ <span id="suite">maas.user_panel.tests</span>
+ </body>
+</html>
=== added file 'src/maasserver/static/js/tests/test_user_panel.js'
--- src/maasserver/static/js/tests/test_user_panel.js 1970-01-01 00:00:00 +0000
+++ src/maasserver/static/js/tests/test_user_panel.js 2012-02-21 05:56:21 +0000
@@ -0,0 +1,54 @@
+/* Copyright 2012 Canonical Ltd. This software is licensed under the
+ * GNU Affero General Public License version 3 (see the file LICENSE).
+ */
+
+YUI({ useBrowserConsole: true }).add('maas.user_panel.tests', function(Y) {
+
+Y.log('loading maas.user_panel.tests');
+var namespace = Y.namespace('maas.user_panel.tests');
+
+var module = Y.maas.user_panel;
+var suite = new Y.Test.Suite("maas.user_panel Tests");
+
+suite.add(new Y.maas.testing.TestCase({
+ name: 'test-user-panel-widget-singleton',
+
+ testSingletonCreation: function() {
+ Y.Assert.isNull(module._user_panel_singleton,
+ 'module._user_panel_singleton is originally null.');
+ module.createUserPanelWidget();
+ Y.Assert.isNotNull(module._user_panel_singleton,
+ 'module._user_panel_singleton is populated after the call to module.showAddNodeWidget.');
+ }
+}));
+
+suite.add(new Y.maas.testing.TestCase({
+ name: 'test-user-panel-widget-visibility',
+
+ testWidgetShowing: function() {
+ var overlay = module._user_panel_singleton;
+ Y.Assert.isFalse(overlay.get('visible'),
+ 'When created the widget should not be visible');
+
+ module.showUserPanelWidget();
+ Y.Assert.isTrue(overlay.get('visible'),
+ 'We should be able to show the panel with showAddNodeWidget');
+ },
+
+ testWidgetHiding: function() {
+ var overlay = module._user_panel_singleton;
+ Y.Assert.isTrue(overlay.get('visible'),
+ 'The widget should current be visible');
+
+ var link = Y.one('#user-options-link');
+ link.simulate('click');
+ Y.Assert.isFalse(overlay.get('visible'),
+ 'If an element outside the panel is clicked the panel should hide.');
+ }
+}));
+
+namespace.suite = suite;
+
+}, '0.1', {'requires': [
+ 'node-event-simulate', 'test', 'maas.testing', 'maas.user_panel']}
+);
=== added file 'src/maasserver/static/js/user_panel.js'
--- src/maasserver/static/js/user_panel.js 1970-01-01 00:00:00 +0000
+++ src/maasserver/static/js/user_panel.js 2012-02-21 05:56:21 +0000
@@ -0,0 +1,53 @@
+/* Copyright 2012 Canonical Ltd. This software is licensed under the
+ * GNU Affero General Public License version 3 (see the file LICENSE).
+ *
+ * Widget to show user options.
+ *
+ * @module Y.maas.user_panel
+ */
+
+YUI.add('maas.user_panel', function(Y) {
+
+Y.log('loading maas.user_panel');
+
+var module = Y.namespace('maas.user_panel');
+
+module._user_panel_singleton = null;
+
+/**
+ * Initialise a widget to display user options.
+ *
+ * @method createUserPanelWidget
+ */
+module.createUserPanelWidget = function(event) {
+ Y.Base.mix(Y.Overlay, [Y.WidgetAutohide]);
+
+ var cfg = {
+ srcNode: '#user-options',
+ align: {node:'#global-header',
+ points: [Y.WidgetPositionAlign.TR, Y.WidgetPositionAlign.BR]},
+ width: '150px',
+ zIndex: 2,
+ hideOn: [{eventName: 'clickoutside'}],
+ visible: false,
+ render: true,
+ };
+ module._user_panel_singleton = new Y.Overlay(cfg);
+ Y.one(cfg.srcNode).removeClass('hidden');
+};
+
+/**
+ * Show a widget to display user options.
+ *
+ * @method showUserPanelWidget
+ */
+module.showUserPanelWidget = function(event) {
+ // Cope with manual calls as well as event calls.
+ if (Y.Lang.isValue(event)) {
+ event.preventDefault();
+ }
+ module._user_panel_singleton.show();
+};
+
+}, '0.1', {'requires': ['overlay', 'base-build', 'widget-autohide']}
+);
=== modified file 'src/maasserver/templates/maasserver/base.html'
--- src/maasserver/templates/maasserver/base.html 2012-02-21 05:56:20 +0000
+++ src/maasserver/templates/maasserver/base.html 2012-02-21 05:56:21 +0000
@@ -8,6 +8,16 @@
<title>{% block title %}{% endblock %} | {% include "maasserver/site_title.html" %}</title>
{% block js-conf %}{% include "maasserver/js-conf.html" %}{% endblock %}
{% block head %}{% endblock %}
+ <script type="text/javascript">
+ <!--
+ YUI().use('maas.user_panel', function (Y) {
+ Y.on('load', function() {
+ var panel = Y.maas.user_panel.createUserPanelWidget()
+ Y.one('#user-options-link').on('click', Y.maas.user_panel.showUserPanelWidget);
+ });
+ });
+ // -->
+ </script>
</head>
<body class="{% block layout-modifiers %}{% endblock %}">
{% block html_includes %}{% endblock %}
@@ -16,11 +26,15 @@
{% if user.is_authenticated %}
<div class="center-page-wrapper">
<div id="global-header" class="center-page-content">
- <ul id="user-nav" class="nav">
- <li class="{% block nav-active-prefs %}{% endblock %}">
- <a href="{% url 'prefs' %}">{{ user.username }}</a></li>
- <li><a href="{% url 'logout' %}">Logout</a></li>
- </ul>
+ <div id="user-nav">
+ <a href="#" id="user-options-link">{{ user.username }}
+ <img src="{{ STATIC_URL }}img/down_arrow_light.png" alt="Options arrow" />
+ </a>
+ <ul id="user-options" class="nav hidden">
+ <li><a href="{% url 'prefs' %}">Preferences</a></li>
+ <li><a href="{% url 'logout' %}">Logout</a></li>
+ </ul>
+ </div>
{% block site-switcher %}
<a href="{% url 'index' %}" title="Return to dashboard">
{% include "maasserver/site_title.html" %}
=== modified file 'src/maasserver/templates/maasserver/js-conf.html'
--- src/maasserver/templates/maasserver/js-conf.html 2012-02-21 05:56:20 +0000
+++ src/maasserver/templates/maasserver/js-conf.html 2012-02-21 05:56:21 +0000
@@ -25,6 +25,7 @@
<script src="{{ STATIC_URL }}js/utils.js"></script>
<script src="{{ STATIC_URL }}js/node_views.js"></script>
=======
+<script type="text/javascript" src="{{ STATIC_URL }}js/user_panel.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/node_add.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/node.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/prefs.js"></script>
