External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-07 17:37:37 -02:30
Code Issues Packages Projects Releases Wiki Activity

Fix flickering on mouseenter

Browse Source
This commit is contained in:
gconsidine
2017-07-07 18:04:32 -04:00
committed by Marliana Lara
parent a868dfb2f2
commit abb8cd1405
3 changed files with 28 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
awx/ui/client/lib/components/popover/_index.less
View File

@@ -10,7 +10,7 @@
.at-mixin-ButtonIcon(); .at-mixin-ButtonIcon();
color: @at-color-icon-popover; color: @at-color-icon-popover;
font-size: @at-font-size-icon; font-size: @at-font-size-icon;
padding: 0; padding: 1px;
margin: 0; margin: 0;
} }

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

@@ -5,6 +5,7 @@ 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; const DEFAULT_REFRESH_DELAY = 50;
const DEFAULT_RESET_ON_EXIT = false;
function atPopoverLink (scope, el, attr, controllers) { function atPopoverLink (scope, el, attr, controllers) {
let popoverController = controllers[0]; let popoverController = controllers[0];
@@ -39,6 +40,12 @@ function AtPopoverController () {
scope.popover.position = scope.popover.position || DEFAULT_POSITION; scope.popover.position = scope.popover.position || DEFAULT_POSITION;
scope.popover.icon = scope.popover.icon || DEFAULT_ICON; scope.popover.icon = scope.popover.icon || DEFAULT_ICON;
scope.popover.on = scope.popover.on || DEFAULT_ACTION; scope.popover.on = scope.popover.on || DEFAULT_ACTION;
scope.popover.resetOnExit = scope.popover.resetOnExit || DEFAULT_RESET_CONTENT;
if (scope.popover.resetOnExit) {
scope.originalText = scope.popover.text;
scope.originalTitle = scope.popover.title;
}
icon.addEventListener(scope.popover.on, vm.createDisplayListener()); icon.addEventListener(scope.popover.on, vm.createDisplayListener());
@@ -59,12 +66,22 @@ function AtPopoverController () {
vm.dismiss(); vm.dismiss();
window.removeEventListener(scope.popover.on, vm.dismissListener); if (scope.popover.on === 'mouseenter') {
icon.removeEventListener('mouseleave', vm.dismissListener);
} else {
window.addEventListener(scope.popover.on, vm.dismissListener);
}
window.removeEventListener('resize', vm.dismissListener); window.removeEventListener('resize', vm.dismissListener);
}; };
}; };
vm.dismiss = () => { vm.dismiss = (refresh) => {
if (refresh && scope.popover.resetOnExit) {
scope.popover.text = scope.originalText;
scope.popover.title = scope.originalTitle;
}
vm.open = false; vm.open = false;
popover.style.visibility = 'hidden'; popover.style.visibility = 'hidden';
@@ -96,7 +113,12 @@ function AtPopoverController () {
vm.dismissListener = vm.createDismissListener(event); vm.dismissListener = vm.createDismissListener(event);
window.addEventListener(scope.popover.on, vm.dismissListener); if (scope.popover.on === 'mouseenter') {
icon.addEventListener('mouseleave', vm.dismissListener);
} else {
window.addEventListener(scope.popover.on, vm.dismissListener);
}
window.addEventListener('resize', vm.dismissListener); window.addEventListener('resize', vm.dismissListener);
}; };
}; };
@@ -106,7 +128,7 @@ function AtPopoverController () {
return; return;
} }
vm.dismiss(); vm.dismiss(true);
window.setTimeout(vm.display, DEFAULT_REFRESH_DELAY); window.setTimeout(vm.display, DEFAULT_REFRESH_DELAY);
}; };

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

@@ -1,6 +1,6 @@
<div ng-show="popover.text" class="at-Popover" ng-class="{ 'at-Popover--inline': popover.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': popover.on === 'mouseover'}"> ng-class="{ 'at-Popover-icon--defaultCursor': popover.on === 'mouseenter' && !popover.click }">
<i class="fa {{ popover.icon }}"></i> <i class="fa {{ popover.icon }}"></i>
</span> </span>
<div class="at-Popover-container"> <div class="at-Popover-container">