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 {
--
Mailing list: https://launchpad.net/~yellow
Post to : [email protected]
Unsubscribe : https://launchpad.net/~yellow
More help : https://help.launchpad.net/ListHelp
