Reviewers: mp+131325_code.launchpad.net, Message: Please take a look.
Description: Ambiguous relation improvements Ambiguous relations sorted in menu; relations aren't indented; cancel button says 'Cancel' and is styled; click to add relation is fixed; pending relation line shown with click to add relation, and lingers when menu is open. https://code.launchpad.net/~makyo/juju-gui/ambiguous-minors/+merge/131325 (do not edit description out of merge proposal) Please review this at https://codereview.appspot.com/6765050/ Affected files: A [revision details] M app/templates/ambiguousRelationList.handlebars 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/templates/ambiguousRelationList.handlebars === modified file 'app/templates/ambiguousRelationList.handlebars' --- app/templates/ambiguousRelationList.handlebars 2012-10-20 18:16:19 +0000 +++ app/templates/ambiguousRelationList.handlebars 2012-10-22 19:58:07 +0000 @@ -10,5 +10,5 @@ </li> {{/relationslist}} </ul> - <button class="cancel btn-danger btn">None</button> + <button class="cancel btn-danger btn">Cancel</button> </div> 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 07:21:25 +0000 @@ -468,7 +468,7 @@ self.get('container').all('.environment-menu.active') .removeClass('active'); self.service_click_actions.toggleControlPanel(null, self); - self.cancelRelationBuild(); + //self.cancelRelationBuild(); }) .on('drag', function(d, i) { if (self.buildingRelation) { @@ -1074,8 +1074,6 @@ var rect = self.get('potential_drop_point_rect'); var endpoint = self.get('potential_drop_point_service'); - // Get rid of our drag line - self.dragline.remove(); self.buildingRelation = false; self.cursorBox = null; @@ -1141,6 +1139,11 @@ }, cancelRelationBuild: function() { + if (this.dragline) { + // Get rid of our drag line + this.dragline.remove(); + this.dragline = null; + } this.set('currentServiceClickAction', 'toggleControlPanel'); this.show(this.vis.selectAll('.service')) .classed('selectable-service', false); @@ -1297,7 +1300,7 @@ service = this.get('active_service'), tr = this.zoom.translate(), z = this.zoom.scale(); - if (service) { + if (service && cp) { cp.setStyle('top', service.y * z + tr[1]); cp.setStyle('left', service.x * z + service.w * z + tr[0]); } @@ -1451,12 +1454,13 @@ * create the relation if not. */ ambiguousAddRelationCheck: function(m, view, context) { - var endpoints = view.get('addRelationStart_possibleEndpoints'), + var endpoints = view + .get('addRelationStart_possibleEndpoints')[m.id], container = view.get('container'); - if (endpoints[m.id].length === 1) { + if (endpoints.length === 1) { // Create a relation with the only available endpoint. - var ep = endpoints[m.id][0], + var ep = endpoints[0], endpoints_item = [ [ep[0].service, { name: ep[0].name, @@ -1469,6 +1473,25 @@ return; } + // Sort the endpoints alphabetically by relation name. + endpoints = endpoints.sort(function(a, b) { + return a[0].name + a[1].name < b[0].name + b[1].name; + }); + + // Create a pending line if it doesn't exist, as in the case of + // clicking to add relation. + if (!view.dragline) { + var dragline = view.vis.insert('line', '.service') + .attr('class', 'relation pending-relation dragline'), + points = m.getConnectorPair( + view.get('addRelationStart_service')); + dragline.attr('x1', points[0][0]) + .attr('y1', points[0][1]) + .attr('x2', points[1][0]) + .attr('y2', points[1][1]); + view.dragline = dragline; + } + // Display menu with available endpoints. var menu = container.one('#ambiguous-relation-menu'); if (menu.one('.menu')) { @@ -1476,7 +1499,7 @@ } menu.append(Templates - .ambiguousRelationList({endpoints: endpoints[m.id]})); + .ambiguousRelationList({endpoints: endpoints})); // For each endpoint choice, bind an an event to 'click' to // add the specified relation. 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 07:19:02 +0000 @@ -202,7 +202,7 @@ border-bottom: 1px #5f594f solid; cursor: pointer; line-height: 32px; - padding: 5px 5px 5px 42px; + padding: 5px 5px 5px 5px; border-radius: @border_radius; -moz-border-radius: @border_radius; -webkit-border-radius: @border_radius; @@ -235,6 +235,10 @@ } + &#service-menu ul li { + padding-left: 42px; + } + } charms.thumbnails.li { height:4em; } -- https://code.launchpad.net/~makyo/juju-gui/ambiguous-minors/+merge/131325 Your team Juju GUI Hackers is requested to review the proposed merge of lp:~makyo/juju-gui/ambiguous-minors 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
