yellow team mailing list archive

[Matthew Scott <matthew.scott@xxxxxxxxxxxxx>]

Reviewers: mp+131325_code.launchpad.net,

Message:
Please take a look.

Description:
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

(do not edit description out of merge proposal)


Please review this at https://codereview.appspot.com/6765050/

Affected files:
   A [revision details]
   M app/templates/ambiguousRelationList.handlebars
   M app/views/environment.js
   M lib/views/stylesheet.less


Index: [revision details]
=== added file '[revision details]'
--- [revision details]	2012-01-01 00:00:00 +0000
+++ [revision details]	2012-01-01 00:00:00 +0000
@@ -0,0 +1,2 @@
+Old revision: bac@xxxxxxxxxxxxx-20121024150124-vpxxa2uyzt403n5s
+New revision: matthew.scott@xxxxxxxxxxxxx-20121025072125-bu4yfx6oamsvac3c

Index: app/templates/ambiguousRelationList.handlebars
=== modified file 'app/templates/ambiguousRelationList.handlebars'
--- app/templates/ambiguousRelationList.handlebars	2012-10-20 18:16:19 +0000
+++ app/templates/ambiguousRelationList.handlebars	2012-10-22 19:58:07 +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>


Index: app/views/environment.js
=== 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:21:25 +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.


Index: lib/views/stylesheet.less
=== 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:19:02 +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; }





-- 
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.