yellow team mailing list archive

[Matthew Scott <matthew.scott@xxxxxxxxxxxxx>]

Matthew Scott has proposed merging lp:~makyo/juju-gui/ambiguous-minors into lp:juju-gui.

Requested reviews:
  Juju GUI Hackers (juju-gui)

For more details, see:
https://code.launchpad.net/~makyo/juju-gui/ambiguous-minors/+merge/131325

Ambiguous relation improvements

Ambiguous relations sorted in menu; relations aren't indented; cancel button says 'Cancel' and is styled; click to add relation is fixed; pending relation line shown with click to add relation, and lingers when menu is open.
-- 
https://code.launchpad.net/~makyo/juju-gui/ambiguous-minors/+merge/131325
Your team Juju GUI Hackers is requested to review the proposed merge of lp:~makyo/juju-gui/ambiguous-minors into lp:juju-gui.

=== modified file 'app/templates/ambiguousRelationList.handlebars'
--- app/templates/ambiguousRelationList.handlebars	2012-10-20 18:16:19 +0000
+++ app/templates/ambiguousRelationList.handlebars	2012-10-25 07:25:33 +0000
@@ -10,5 +10,5 @@
         </li>
         {{/relationslist}}
     </ul>
-    <button class="cancel btn-danger btn">None</button>
+    <button class="cancel btn-danger btn">Cancel</button>
 </div>

=== modified file 'app/views/environment.js'
--- app/views/environment.js	2012-10-20 18:16:19 +0000
+++ app/views/environment.js	2012-10-25 07:25:33 +0000
@@ -468,7 +468,7 @@
                 self.get('container').all('.environment-menu.active')
                   .removeClass('active');
                 self.service_click_actions.toggleControlPanel(null, self);
-                self.cancelRelationBuild();
+                //self.cancelRelationBuild();
               })
             .on('drag', function(d, i) {
                 if (self.buildingRelation) {
@@ -1074,8 +1074,6 @@
           var rect = self.get('potential_drop_point_rect');
           var endpoint = self.get('potential_drop_point_service');
 
-          // Get rid of our drag line
-          self.dragline.remove();
           self.buildingRelation = false;
           self.cursorBox = null;
 
@@ -1141,6 +1139,11 @@
         },
 
         cancelRelationBuild: function() {
+          if (this.dragline) {
+            // Get rid of our drag line
+            this.dragline.remove();
+            this.dragline = null;
+          }
           this.set('currentServiceClickAction', 'toggleControlPanel');
           this.show(this.vis.selectAll('.service'))
                   .classed('selectable-service', false);
@@ -1297,7 +1300,7 @@
               service = this.get('active_service'),
               tr = this.zoom.translate(),
               z = this.zoom.scale();
-          if (service) {
+          if (service && cp) {
             cp.setStyle('top', service.y * z + tr[1]);
             cp.setStyle('left', service.x * z + service.w * z + tr[0]);
           }
@@ -1451,12 +1454,13 @@
            * create the relation if not.
            */
           ambiguousAddRelationCheck: function(m, view, context) {
-            var endpoints = view.get('addRelationStart_possibleEndpoints'),
+            var endpoints = view
+                  .get('addRelationStart_possibleEndpoints')[m.id],
                 container = view.get('container');
 
-            if (endpoints[m.id].length === 1) {
+            if (endpoints.length === 1) {
               // Create a relation with the only available endpoint.
-              var ep = endpoints[m.id][0],
+              var ep = endpoints[0],
                   endpoints_item = [
                     [ep[0].service, {
                       name: ep[0].name,
@@ -1469,6 +1473,25 @@
               return;
             }
 
+            // Sort the endpoints alphabetically by relation name.
+            endpoints = endpoints.sort(function(a, b) {
+              return a[0].name + a[1].name < b[0].name + b[1].name;
+            });
+
+            // Create a pending line if it doesn't exist, as in the case of
+            // clicking to add relation.
+            if (!view.dragline) {
+              var dragline = view.vis.insert('line', '.service')
+                  .attr('class', 'relation pending-relation dragline'),
+                  points = m.getConnectorPair(
+                      view.get('addRelationStart_service'));
+              dragline.attr('x1', points[0][0])
+                .attr('y1', points[0][1])
+                .attr('x2', points[1][0])
+                .attr('y2', points[1][1]);
+              view.dragline = dragline;
+            }
+
             // Display menu with available endpoints.
             var menu = container.one('#ambiguous-relation-menu');
             if (menu.one('.menu')) {
@@ -1476,7 +1499,7 @@
             }
 
             menu.append(Templates
-                .ambiguousRelationList({endpoints: endpoints[m.id]}));
+                .ambiguousRelationList({endpoints: endpoints}));
 
             // For each endpoint choice, bind an an event to 'click' to
             // add the specified relation.

=== modified file 'lib/views/stylesheet.less'
--- lib/views/stylesheet.less	2012-10-24 14:56:12 +0000
+++ lib/views/stylesheet.less	2012-10-25 07:25:33 +0000
@@ -202,7 +202,7 @@
             border-bottom: 1px #5f594f solid;
             cursor: pointer;
             line-height: 32px;
-            padding: 5px 5px 5px 42px;
+            padding: 5px 5px 5px 5px;
             border-radius: @border_radius;
             -moz-border-radius: @border_radius;
             -webkit-border-radius: @border_radius;
@@ -235,6 +235,10 @@
 
     }
 
+    &#service-menu ul li {
+        padding-left: 42px;
+    }
+
 }
 
 charms.thumbnails.li { height:4em; }