shaba/awx
1
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2024-11-01 16:51:11 +03:00
Code Releases Activity

Add refresh ability to popover on text change

Browse Source
This commit is contained in:
gconsidine 2017-07-07 17:19:07 -04:00 committed by Marliana Lara
parent 452950ab61
commit a868dfb2f2
3 changed files with 88 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
awx/ui/client/lib/components/input/label.partial.html
View File

@ -1,7 +1,7 @@
<label class="at-InputLabel"> <label class="at-InputLabel">
<span ng-if="state.required" class="at-InputLabel-required">*</span> <span ng-if="state.required" class="at-InputLabel-required">*</span>
<span class="at-InputLabel-name">{{::state.label}}</span> <span class="at-InputLabel-name">{{::state.label}}</span>
<at-popover position="right" on="mouseover" state="state"></at-popover> <at-popover state="state"></at-popover>
<span ng-if="state._displayHint" class="at-InputLabel-hint">{{::state._hint}}</span> <span ng-if="state._displayHint" class="at-InputLabel-hint">{{::state._hint}}</span>
<div ng-if="state._displayPromptOnLaunch" class="at-InputLabel-checkbox pull-right"> <div ng-if="state._displayPromptOnLaunch" class="at-InputLabel-checkbox pull-right">
<label class="at-InputLabel-checkboxLabel"> <label class="at-InputLabel-checkboxLabel">

126
awx/ui/client/lib/components/popover/popover.directive.js
View File

@ -4,6 +4,7 @@ const DEFAULT_ICON = 'fa fa-question-circle';
const DEFAULT_ALIGNMENT = 'inline'; const DEFAULT_ALIGNMENT = 'inline';
const DEFAULT_ARROW_HEIGHT = 16; const DEFAULT_ARROW_HEIGHT = 16;
const DEFAULT_PADDING = 10; const DEFAULT_PADDING = 10;
const DEFAULT_REFRESH_DELAY = 50;
function atPopoverLink (scope, el, attr, controllers) { function atPopoverLink (scope, el, attr, controllers) {
let popoverController = controllers[0]; let popoverController = controllers[0];
@ -11,7 +12,10 @@ function atPopoverLink (scope, el, attr, controllers) {
let popover = container.getElementsByClassName('at-Popover-container')[0]; let popover = container.getElementsByClassName('at-Popover-container')[0];
let icon = container.getElementsByTagName('i')[0]; let icon = container.getElementsByTagName('i')[0];
popoverController.init(scope, container, icon, popover); let done = scope.$watch('state', () => {
popoverController.init(scope, container, icon, popover);
done();
});
} }
function AtPopoverController () { function AtPopoverController () {
@ -27,16 +31,22 @@ function AtPopoverController () {
icon = _icon_; icon = _icon_;
popover = _popover_; popover = _popover_;
scope.state.popover = scope.state.popover || {}; scope.popover = scope.state.popover || {};
vm.inline = scope.state.popover.inline || DEFAULT_ALIGNMENT; scope.popover.text = scope.state.help_text || scope.popover.text;
vm.position = scope.state.popover.position || DEFAULT_POSITION; scope.popover.title = scope.state.label || scope.popover.title;
vm.icon = scope.state.popover.icon || DEFAULT_ICON; scope.popover.inline = scope.popover.inline || DEFAULT_ALIGNMENT;
vm.text = scope.state.popover.text || scope.state.help_text; scope.popover.position = scope.popover.position || DEFAULT_POSITION;
vm.title = scope.state.popover.title || scope.state.label; scope.popover.icon = scope.popover.icon || DEFAULT_ICON;
vm.on = scope.state.popover.on || DEFAULT_ACTION; scope.popover.on = scope.popover.on || DEFAULT_ACTION;
icon.addEventListener(vm.on, vm.createDisplayListener()); icon.addEventListener(scope.popover.on, vm.createDisplayListener());
scope.$watch('popover.text', vm.refresh);
if (scope.popover.click) {
icon.addEventListener('click', scope.popover.click);
}
}; };
vm.createDismissListener = (createEvent) => { vm.createDismissListener = (createEvent) => {
@ -47,16 +57,20 @@ function AtPopoverController () {
return; return;
} }
vm.open = false; vm.dismiss();
popover.style.visibility = 'hidden'; window.removeEventListener(scope.popover.on, vm.dismissListener);
popover.style.opacity = 0;
window.removeEventListener(vm.on, vm.dismissListener);
window.removeEventListener('resize', vm.dismissListener); window.removeEventListener('resize', vm.dismissListener);
}; };
}; };
vm.dismiss = () => {
vm.open = false;
popover.style.visibility = 'hidden';
popover.style.opacity = 0;
};
vm.isClickWithinPopover = (event, popover) => { vm.isClickWithinPopover = (event, popover) => {
let box = popover.getBoundingClientRect(); let box = popover.getBoundingClientRect();
@ -78,39 +92,59 @@ function AtPopoverController () {
event.stopPropagation(); event.stopPropagation();
vm.open = true; vm.display();
let arrow = popover.getElementsByClassName('at-Popover-arrow')[0];
arrow.style.lineHeight = `${DEFAULT_ARROW_HEIGHT}px`;
arrow.children[0].style.lineHeight = `${DEFAULT_ARROW_HEIGHT}px`;
let pos = {
icon: icon.getBoundingClientRect(),
popover: popover.getBoundingClientRect(),
windowHeight: window.innerHeight,
};
pos.cx = Math.floor(pos.icon.left + (pos.icon.width / 2));
pos.cy = Math.floor(pos.icon.top + (pos.icon.height / 2));
if (vm.position === 'right') {
vm.displayRight(arrow, pos);
} else if (vm.position === 'top') {
vm.displayTop(arrow, pos);
}
popover.style.visibility = 'visible';
popover.style.opacity = 1;
vm.dismissListener = vm.createDismissListener(event); vm.dismissListener = vm.createDismissListener(event);
window.addEventListener(vm.on, vm.dismissListener); window.addEventListener(scope.popover.on, vm.dismissListener);
window.addEventListener('resize', vm.dismissListener); window.addEventListener('resize', vm.dismissListener);
}; };
}; };
vm.displayRight = (arrow, pos) => { vm.refresh = () => {
if (!vm.open) {
return;
}
vm.dismiss();
window.setTimeout(vm.display, DEFAULT_REFRESH_DELAY);
};
vm.getPositions = () => {
let arrow = popover.getElementsByClassName('at-Popover-arrow')[0];
arrow.style.lineHeight = `${DEFAULT_ARROW_HEIGHT}px`;
arrow.children[0].style.lineHeight = `${DEFAULT_ARROW_HEIGHT}px`;
let data = {
arrow,
icon: icon.getBoundingClientRect(),
popover: popover.getBoundingClientRect(),
windowHeight: window.innerHeight
};
data.cx = Math.floor(data.icon.left + (data.icon.width / 2));
data.cy = Math.floor(data.icon.top + (data.icon.height / 2));
return data;
};
vm.display = () => {
vm.open = true;
let positions = vm.getPositions();
popover.style.visibility = 'visible';
popover.style.opacity = 1;
if (scope.popover.position === 'right') {
vm.displayRight(positions);
} else if (scope.popover.position === 'top') {
vm.displayTop(positions);
}
};
vm.displayRight = (pos) => {
let arrowTop = Math.floor((pos.cy - (pos.icon.height / 2))); let arrowTop = Math.floor((pos.cy - (pos.icon.height / 2)));
let arrowLeft = pos.cx + DEFAULT_PADDING; let arrowLeft = pos.cx + DEFAULT_PADDING;
@ -123,22 +157,22 @@ function AtPopoverController () {
popoverTop = Math.floor((pos.cy - pos.popover.height / 2)); popoverTop = Math.floor((pos.cy - pos.popover.height / 2));
} }
arrow.style.top = `${arrowTop}px`; pos.arrow.style.top = `${arrowTop}px`;
arrow.style.left = `${arrowLeft}px`; pos.arrow.style.left = `${arrowLeft}px`;
popover.style.top = `${popoverTop}px`; popover.style.top = `${popoverTop}px`;
popover.style.left = `${popoverLeft}px`; popover.style.left = `${popoverLeft}px`;
}; };
vm.displayTop = (arrow, pos) => { vm.displayTop = (pos) => {
let arrowTop = pos.icon.top - pos.icon.height; let arrowTop = pos.icon.top - pos.icon.height;
let arrowLeft = Math.floor(pos.icon.right - pos.icon.width - (arrow.style.width / 2)); let arrowLeft = Math.floor(pos.icon.right - pos.icon.width - (pos.arrow.style.width / 2));
let popoverTop = pos.icon.top - pos.popover.height - DEFAULT_PADDING; let popoverTop = pos.icon.top - pos.popover.height - DEFAULT_PADDING;
let popoverLeft = Math.floor(pos.cx - (pos.popover.width / 2)); let popoverLeft = Math.floor(pos.cx - (pos.popover.width / 2));
arrow.style.top = `${arrowTop}px`; pos.arrow.style.top = `${arrowTop}px`;
arrow.style.left = `${arrowLeft}px`; pos.arrow.style.left = `${arrowLeft}px`;
popover.style.top = `${popoverTop}px`; popover.style.top = `${popoverTop}px`;
popover.style.left = `${popoverLeft}px`; popover.style.left = `${popoverLeft}px`;

14
awx/ui/client/lib/components/popover/popover.partial.html
View File

@ -1,16 +1,16 @@
<div ng-show="vm.text" class="at-Popover" ng-class="{ 'at-Popover--inline': vm.inline }"> <div ng-show="popover.text" class="at-Popover" ng-class="{ 'at-Popover--inline': popover.inline }">
<span class="at-Popover-icon" <span class="at-Popover-icon"
ng-class="{'at-Popover-icon--defaultCursor': vm.on === 'mouseover'}"> ng-class="{'at-Popover-icon--defaultCursor': popover.on === 'mouseover'}">
<i class="fa {{ vm.icon }}"></i> <i class="fa {{ popover.icon }}"></i>
</span> </span>
<div class="at-Popover-container"> <div class="at-Popover-container">
<div class="at-Popover-arrow"> <div class="at-Popover-arrow">
<i ng-if="vm.position === 'right'" class="fa fa-caret-left fa-2x"></i> <i ng-if="popover.position === 'right'" class="fa fa-caret-left fa-2x"></i>
<i ng-if="vm.position === 'top'" class="fa fa-caret-down fa-2x"></i> <i ng-if="popover.position === 'top'" class="fa fa-caret-down fa-2x"></i>
</div> </div>
<div class="at-Popover-content"> <div class="at-Popover-content">
<h4 class="at-Popover-title">{{ vm.title }}</h4> <h4 ng-if="popover.title" class="at-Popover-title">{{ popover.title }}</h4>
<p class="at-Popover-text">{{ vm.text }}</p> <p ng-if="popover.text" class="at-Popover-text">{{ popover.text }}</p>
</div> </div>
</div> </div>
</div> </div>