yellow team mailing list archive

[Matthew Scott <matthew.scott@xxxxxxxxxxxxx>]

Matthew Scott has proposed merging lp:~makyo/juju-gui/remove-sub-rels into lp:juju-gui.

Requested reviews:
  Juju GUI Hackers (juju-gui)

For more details, see:
https://code.launchpad.net/~makyo/juju-gui/remove-sub-rels/+merge/131725

Add functionality for removing subordinate rels

Since subordinate relations were only visible on hover before, there was no means of removing one.  Now, if you click on the subordinate relation indicator on the side of the subordinate, the relations will persist, allowing you to delete them.  This is a toggle: click again to re-hide the relations.

https://codereview.appspot.com/6782063/

-- 
https://code.launchpad.net/~makyo/juju-gui/remove-sub-rels/+merge/131725
Your team Juju GUI Hackers is requested to review the proposed merge of lp:~makyo/juju-gui/remove-sub-rels into lp:juju-gui.

=== modified file 'app/views/environment.js'
--- app/views/environment.js	2012-10-26 06:35:16 +0000
+++ app/views/environment.js	2012-10-27 08:04:21 +0000
@@ -134,7 +134,22 @@
             },
             mouseleave: function(d, self) {
               // Remove 'active' class from all subordinate relations.
-              self.removeSVGClass('.subordinate-rel-group', 'active');
+              if (!self.keepSubRelationsVisible) {
+                self.removeSVGClass('.subordinate-rel-group', 'active');
+              }
+            },
+            click: function(d, self) {
+              // Toggle the visibility of the relations (for removal)
+              if (self.keepSubRelationsVisible) {
+                self.removeSVGClass('.subordinate-rel-group', 'active');
+                self.keepSubRelationsVisible = false;
+                self.removeSVGClass(Y.one(this).one('.sub-rel-count'),
+                    'active');
+              } else {
+                self.keepSubRelationsVisible = true;
+                self.addSVGClass(Y.one(this).one('.sub-rel-count'),
+                    'active');
+              }
             }
           },
           '.service-status': {
@@ -385,8 +400,10 @@
         },
 
         serviceClick: function(d, self) {
-          // Ignore if we clicked on a control panel image.
-          if (self.hasSVGClass(d3.event.target, 'cp-button')) {
+          // Ignore if we clicked outside the actual service node.
+          var container = self.get('container'),
+              mouse_coords = d3.mouse(container.one('svg').getDOMNode());
+          if (!d.containsPoint(mouse_coords, self.zoom)) {
             return;
           }
           // Get the current click action

=== modified file 'lib/views/stylesheet.less'
--- lib/views/stylesheet.less	2012-10-26 06:33:29 +0000
+++ lib/views/stylesheet.less	2012-10-27 08:04:21 +0000
@@ -402,6 +402,12 @@
         fill: #4f4f4f;
         font-family: @font-family;
         font-size: 1.2em;
+
+        &.active {
+            font-style: italic;
+            font-weight: bold;
+            fill: #3333cc;
+        }
     }
 
     .exposed-indicator {