yellow team mailing list archive

[Matthew Scott <matthew.scott@xxxxxxxxxxxxx>]

Reviewers: mp+131384_code.launchpad.net,

Message:
Please take a look.

Description:
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://code.launchpad.net/~makyo/juju-gui/menu-positioning/+merge/131384

(do not edit description out of merge proposal)


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

Affected files:
   A [revision details]
   A app/assets/images/icons/icon_shadow_triangle_right.png
   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: gary.poster@xxxxxxxxxxxxx-20121025082731-3nnxhrlmedf0psy9
+New revision: matthew.scott@xxxxxxxxxxxxx-20121025120501-2qcyvd3q73qmb5hp

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 12:05:01 +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]
+            });
            }
          },



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 12:03:04 +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 {


Index: app/assets/images/icons/icon_shadow_triangle_right.png
=== 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:04:24  
+0000 differ




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