launchpad-reviewers team mailing list archive

[Huw Wilkins <huw.wilkins@xxxxxxxxxxxxx>]

Huw Wilkins has proposed merging lp:~huwshimi/maas/panel-replacement into lp:maas with lp:~huwshimi/maas/design-integration as a prerequisite.

Requested reviews:
  Launchpad code reviewers (launchpad-reviewers)

For more details, see:
https://code.launchpad.net/~huwshimi/maas/panel-replacement/+merge/92418

This branch switches out the yui overlay for a yui panel. This allows the popup form to be modal and be animated amongst other things.

In the process (and to get some things working) I modified some of the code to add buttons, title etc. to the way the panel exposes, rather than manually injecting and adding listeners etc.
-- 
https://code.launchpad.net/~huwshimi/maas/panel-replacement/+merge/92418
Your team Launchpad code reviewers is requested to review the proposed merge of lp:~huwshimi/maas/panel-replacement into lp:maas.

=== modified file 'src/maasserver/static/css/forms.css'
--- src/maasserver/static/css/forms.css	2012-02-10 06:38:19 +0000
+++ src/maasserver/static/css/forms.css	2012-02-10 06:38:19 +0000
@@ -31,6 +31,7 @@
 input[type="text"]:focus {
     border-color: #000;
     }
+.yui3-button,
 button,
 input[type="submit"] {
     padding: 6px 30px;
@@ -52,6 +53,7 @@
     text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
     font-size: 14px;
     }
+.yui3-button:hover,
 button:hover,
 input[type="submit"]:hover {
     background-image: linear-gradient(bottom, rgb(199,66,18) 0%, rgb(236,94,43) 100%);
@@ -60,3 +62,12 @@
     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%);
     }
+.yui3-button.link-button {
+    color: #dd4814;
+    border: none;
+    background: none;
+    text-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    font-size: 13px;
+    }

=== modified file 'src/maasserver/static/css/layout.css'
--- src/maasserver/static/css/layout.css	2012-02-10 06:38:19 +0000
+++ src/maasserver/static/css/layout.css	2012-02-10 06:38:19 +0000
@@ -17,6 +17,7 @@
 #header-wrapper {
     /* Need to set relative so the box shadow appears over content divs */
     position: relative;
+    z-index: 3;
     min-height: 64px;
     background-color: #dd4814;
     -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);

=== modified file 'src/maasserver/static/css/modifiers.css'
--- src/maasserver/static/css/modifiers.css	2012-02-01 16:57:23 +0000
+++ src/maasserver/static/css/modifiers.css	2012-02-10 06:38:19 +0000
@@ -7,15 +7,27 @@
     clear: both;
     }
 
-.yui3-overlay {
+/* XXX: move this yui stuff somewhere more sensible */
+.yui3-widget-mask {
+    background-color: #000;
+    opacity: 0.3;
+    }
+.yui3-panel {
     background-color: #FFF;
-    padding: 10px;
-    border: 1px solid #000;
-    }
-.overlay {
-    }
-.overlay-close {
-    float: right;
-    }
-.overlay-header {
+    padding: 104px 80px 50px 80px;
+    -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 15px 0 rgba(0,0,0,1);
+    box-shadow: 0 0 15px 0 rgba(0,0,0,1);
+    }
+.yui3-widget-hd {
+    margin-bottom: 30px;
+    font-size: 24px;
+    }
+.yui3-widget-ft {
+    margin-top: 30px;
+    }
+.yui3-panel .yui3-button {
+    margin-right: 20px;
     }

=== modified file 'src/maasserver/static/js/node_add.js'
--- src/maasserver/static/js/node_add.js	2012-02-10 06:38:19 +0000
+++ src/maasserver/static/js/node_add.js	2012-02-10 06:38:19 +0000
@@ -39,7 +39,7 @@
     }
 };
 
-Y.extend(AddNodeWidget, Y.Overlay, {
+Y.extend(AddNodeWidget, Y.Panel, {
 
     /**
      * Create an input field to add a MAC Address.
@@ -54,6 +54,22 @@
         field.set('id', field.get('id') + form_nb);
         return Y.Node.create('<p />').append(field);
     },
+    /**
+     * Hide the panel.
+     *
+     * @method hidePanel
+     */
+    hidePanel: function() {
+        var self = this;
+        this.get('boundingBox').transition({
+            duration: 0.5,
+            top: '-400px'
+        },
+        function () {
+            self.hide();
+            self.destroy();
+        });
+    },
 
     addMacField: function() {
         if (this.get('nb_mac_fields') === 1) {
@@ -92,9 +108,6 @@
             .addClass('add-mac-form')
             .set('href', '#')
             .set('text', "Add additional MAC address");
-        var addnode_button = Y.Node.create('<button />')
-            .addClass('add-node-button')
-            .set('text', "Add node");
         var operation = Y.Node.create('<input />')
             .set('type', 'hidden')
             .set('name', 'op')
@@ -107,8 +120,7 @@
             .append(operation)
             .append(Y.Node.create(this.add_macaddress))
             .append(macaddress_add_link)
-            .append(Y.Node.create(this.add_node))
-            .append(addnode_button);
+            .append(Y.Node.create(this.add_node));
         return addnodeform;
     },
 
@@ -123,8 +135,8 @@
     * @method showSpinner
     */
     showSpinner: function() {
-        var button = this.get('srcNode').one('.add-node-button');
-        button.insert(this.spinnerNode, 'after');
+        var buttons = this.get('srcNode').one('.yui3-widget-button-wrapper');
+        buttons.append(this.spinnerNode);
     },
 
     /**
@@ -140,27 +152,8 @@
         // Load form snippets.
         this.add_macaddress = Y.one('#add-macaddress').getContent();
         this.add_node = Y.one('#add-node').getContent();
-        // Create overlay's content.
-        var closenode = Y.Node.create('<a />')
-            .set('href', '#')
-            .addClass('overlay-close')
-            .set('text', "Close");
-        this.headernode = Y.Node.create('<div />')
-            .addClass('overlay-header')
-            .set('text', "Add Node")
-            .append(closenode)
-            .append(Y.Node.create('<div />')
-                .addClass('clear'));
-        this.set('headerContent', this.headernode);
+        // Create panel's content.
         this.set('bodyContent', this.createForm());
-        this.set('footerContent', "");
-       // Center overlay.
-        this.set(
-            'align',
-            {points: [
-              Y.WidgetPositionAlign.CC,
-              Y.WidgetPositionAlign.CC]
-            });
        // Prepare spinnerNode.
         this.spinnerNode = Y.Node.create('<img />')
             .set('src', MAAS_config.uris.statics + 'img/spinner.gif');
@@ -169,20 +162,10 @@
     bindUI: function() {
         var self = this;
         this.get(
-            'headerContent').one('.overlay-close').on('click', function(e) {
-            e.preventDefault();
-            self.destroy();
-        });
-        this.get(
             'bodyContent').one('.add-mac-form').on('click', function(e) {
             e.preventDefault();
             self.addMacField();
         });
-        this.get(
-            'bodyContent').one('.add-node-button').on('click', function(e) {
-            e.preventDefault();
-            self.sendAddNodeRequest();
-        });
     },
 
     addNode: function(node) {
@@ -199,7 +182,7 @@
                 start:  Y.bind(self.showSpinner, self),
                 success: function(id, out) {
                     self.addNode(JSON.parse(out.response));
-                    self.destroy();
+                    self.hidePanel();
                 },
                 failure: function(id, out) {
                     if (out.status === 400) {
@@ -264,9 +247,45 @@
     if (destroy) {
         module._add_node_singleton.destroy();
     }
-    module._add_node_singleton = new AddNodeWidget();
-    module._add_node_singleton.render();
+    var cfg = {
+        headerContent: "Add node",
+        buttons: [
+                {
+                    value: 'Add node',
+                    section: 'footer',
+                    action: function (e) {
+                        e.preventDefault();
+                        this.sendAddNodeRequest();
+                    }
+                },
+                {
+                    value: 'Cancel',
+                    section: 'footer',
+                    classNames: 'link-button',
+                    action: function (e) {
+                        e.preventDefault();
+                        this.hidePanel();
+                    }
+                }
+            ],
+        align: {node:'',
+                points: [Y.WidgetPositionAlign.BC, Y.WidgetPositionAlign.TC]},
+        modal: true,
+        zIndex: 2,
+        visible: true,
+        render: true,
+        hideOn: []
+        };
+    module._add_node_singleton = new AddNodeWidget(cfg);
+    module._add_node_singleton.get('boundingBox').transition({
+        duration: 0.5,
+        top: '0px'
+    });
+    /* We need to set the focus late as the widget wants to set the focus on 
+       the bounding box.
+    */
+    module._add_node_singleton.get('boundingBox').one('input[type=text]').focus();
 };
 
-}, '0.1', {'requires': ['io', 'node', 'overlay', 'event', 'event-custom', 'transition']}
+}, '0.1', {'requires': ['io', 'node', 'panel', 'event', 'event-custom', 'transition']}
 );

=== modified file 'src/maasserver/static/js/tests/test_node_add.js'
--- src/maasserver/static/js/tests/test_node_add.js	2012-02-03 14:39:50 +0000
+++ src/maasserver/static/js/tests/test_node_add.js	2012-02-10 06:38:19 +0000
@@ -34,18 +34,18 @@
 
     testSingletonReCreation: function() {
         module.showAddNodeWidget();
-        var overlay = module._add_node_singleton;
+        var panel = module._add_node_singleton;
 
         // Make sure that a second call to showAddNodeWidget destroys
         // the old widget and creates a new one.
         var destroyed = false;
-        overlay.on("destroy", function(){
+        panel.on("destroy", function(){
             destroyed = true;
         });
         module.showAddNodeWidget();
         Y.Assert.isTrue(destroyed);
         Y.Assert.isNotNull(module._add_node_singleton);
-        Y.Assert.areNotSame(overlay, namespace._add_node_singleton);
+        Y.Assert.areNotSame(panel, namespace._add_node_singleton);
     }
 
 }));
@@ -61,9 +61,9 @@
         });
         this.mockIO(mockXhr, module);
         module.showAddNodeWidget();
-        var overlay = module._add_node_singleton;
-        overlay.get('srcNode').one('#id_hostname').set('value', 'host');
-        var button = overlay.get('srcNode').one('button');
+        var panel = module._add_node_singleton;
+        panel.get('srcNode').one('#id_hostname').set('value', 'host');
+        var button = panel.get('srcNode').one('.yui3-button');
         button.simulate('click');
         Y.Mock.verify(mockXhr);
     },
@@ -75,9 +75,9 @@
         };
         this.mockIO(mockXhr, module);
         module.showAddNodeWidget();
-        var overlay = module._add_node_singleton;
-        overlay.get('srcNode').one('#id_hostname').set('value', 'host');
-        var button = overlay.get('srcNode').one('button');
+        var panel = module._add_node_singleton;
+        panel.get('srcNode').one('#id_hostname').set('value', 'host');
+        var button = panel.get('srcNode').one('.yui3-button');
 
         var fired = false;
         this.registerListener(