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