yellow team mailing list archive

[Matthew Scott <matthew.scott@xxxxxxxxxxxxx>]

Matthew Scott has proposed merging lp:~makyo/juju-gui/menu-positioning into lp:juju-gui.

Requested reviews:
  Juju GUI Hackers (juju-gui)

For more details, see:
https://code.launchpad.net/~makyo/juju-gui/menu-positioning/+merge/131384

Render menus more intelligently

Menus are rendered to the right or left of the service node depending on which side of the environment view they are on, and the menus track better with scrolling (around the arrow rather than around the top of the menu).

https://codereview.appspot.com/6766052/

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

=== added file 'app/assets/images/icons/icon_shadow_triangle_right.png'
Binary files app/assets/images/icons/icon_shadow_triangle_right.png	1970-01-01 00:00:00 +0000 and app/assets/images/icons/icon_shadow_triangle_right.png	2012-10-25 12:07:23 +0000 differ
=== modified file 'app/views/environment.js'
--- app/views/environment.js	2012-10-20 18:16:19 +0000
+++ app/views/environment.js	2012-10-25 12:07:23 +0000
@@ -1286,6 +1286,9 @@
             .range([0, width]);
           this.yscale.domain([-height / 2, height / 2])
             .range([height, 0]);
+
+          this.width = width;
+          this.height = height;
         },
 
         /*
@@ -1298,8 +1301,29 @@
               tr = this.zoom.translate(),
               z = this.zoom.scale();
           if (service) {
-            cp.setStyle('top', service.y * z + tr[1]);
-            cp.setStyle('left', service.x * z + service.w * z + tr[0]);
+            var cp_width = cp.getClientRect().width,
+                menu_left = service.x * z + service.w * z / 2 <
+                this.width * z / 2,
+                service_center = service.getRelativeCenter();
+            if (menu_left) {
+              cp.removeClass('left');
+              cp.addClass('right');
+            } else {
+              cp.removeClass('right');
+              cp.addClass('left');
+            }
+            // Set the position of the div in the following way:
+            // top: aligned to the scaled/panned service minus the
+            //   location of the tip of the arrow (68px down the menu,
+            //   via css) such that the arrow always points at the service.
+            // left: aligned to the scaled/panned service; if the
+            //   service is left of the midline, display it to the
+            //   right, and vice versa.
+            cp.setStyles({
+              'top': service.y * z + tr[1] + (service_center[1] * z) - 68,
+              'left': service.x * z +
+                  (menu_left ? service.w * z : -(cp_width)) + tr[0]
+            });
           }
         },
 

=== modified file 'lib/views/stylesheet.less'
--- lib/views/stylesheet.less	2012-10-24 14:56:12 +0000
+++ lib/views/stylesheet.less	2012-10-25 12:07:23 +0000
@@ -177,11 +177,17 @@
     .triangle {
         position: absolute;
         top: 62px;
-        left: -12px;
         width: 12px;
         line-height: 21px;
+        background-repeat: no-repeat;
+    }
+    &.left .triangle {
+        right: -12px;
+        background-image: url(/juju-ui/assets/images/icons/icon_shadow_triangle_right.png);
+    }
+    &.right .triangle {
+        left: -12px;
         background-image: url(/juju-ui/assets/images/icons/icon_shadow_triangle.png);
-        background-repeat: no-repeat;
     }
 
     .menu-title {