ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-04-21 01:21:19 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Info Service] Render info bubble after positioning

Browse Source 
Render info bubble after positioning with the popupService,
to apply arrow classes appropriately.
This commit is contained in:
Victor Woeltjen 2015-10-02 10:21:42 -07:00
parent bebe53820f
commit 73dc16d398
2 changed files with 16 additions and 12 deletions
platform/commonUI/inspect/src
InfoConstants.js
services
InfoService.js

3
platform/commonUI/inspect/src/InfoConstants.js

@ -42,7 +42,8 @@ define({
offsetY: -26
},
BUBBLE_MOBILE_POSITION: [ 0, -25 ],
// Max width and margins allowed for bubbles; defined in /platform/commonUI/general/res/sass/_constants.scss
// Max width and margins allowed for bubbles;
// defined in /platform/commonUI/general/res/sass/_constants.scss
BUBBLE_MARGIN_LR: 10,
BUBBLE_MAX_WIDTH: 300
});

25
platform/commonUI/inspect/src/services/InfoService.js

@ -57,20 +57,13 @@ define(
var $compile = this.$compile,
$rootScope = this.$rootScope,
scope = $rootScope.$new(),
span = $compile('<span></span>')(scope),
bubbleSpaceLR = InfoConstants.BUBBLE_MARGIN_LR +
InfoConstants.BUBBLE_MAX_WIDTH,
options,
popup,
bubble;
// Pass model & container parameters into the scope
scope.bubbleModel = content;
scope.bubbleTemplate = templateKey;
scope.bubbleTitle = title;
// Create the context menu
bubble = $compile(BUBBLE_TEMPLATE)(scope);
options = Object.create(OPTIONS);
options.marginX = -bubbleSpaceLR;
@ -81,13 +74,23 @@ define(
options = {};
}
popup = this.popupService.display(bubble, position, options);
popup = this.popupService.display(span, position, options);
// Pass model & container parameters into the scope
scope.bubbleModel = content;
scope.bubbleTemplate = templateKey;
scope.bubbleTitle = title;
// Style the bubble according to how it was positioned
scope.bubbleLayout = [
popup.goesLeft() ? 'arw-right' : 'arw-left',
popup.goesUp() ? 'arw-btm' : 'arw-top'
popup.goesUp() ? 'arw-btm' : 'arw-top',
popup.goesLeft() ? 'arw-right' : 'arw-left'
].join(' ');
scope.bubbleLayout = 'arw-top arw-left';
// Create the info bubble, now that we know how to
// point the arrow...
bubble = $compile(BUBBLE_TEMPLATE)(scope);
span.append(bubble);
// Return a function to dismiss the info bubble
return function dismiss() {