Update project structure

2026-05-12 15:58:38 -05:00 · 2017-05-10 17:42:52 -04:00
parent 5553a6bcda
commit 725fd15519
82 changed files with 134 additions and 1078 deletions
@@ -0,0 +1,30 @@
+.at-Popover-icon {
+    .at-mixin-ButtonIcon();  
+    font-size: @at-font-size-3x;
+    padding: 0 0 0 @at-space-2x;
+    margin: 0;
+}
+
+.at-Popover-container {
+    visibility: hidden;
+    opacity: 0;
+    color: @at-white;
+    background-color: @at-gray-dark-4x;
+    max-width: @at-popover-width;
+    padding: @at-space-4x;
+    height: auto;
+    position: fixed;
+    z-index: 2000;
+    margin: 0 0 0 @at-space-6x;
+    border-radius: @at-border-radius;
+    box-shadow: 0 5px 10px rgba(0,0,0, 0.2);
+    transition: opacity .15s linear;
+}
+
+.at-Popover-arrow {
+    color: @at-gray-dark-4x;
+    position: fixed;
+    z-index: 1999;
+    padding: 0;
+    margin: -@at-space 0 0 0;
+}
@@ -0,0 +1,72 @@
+let pathService;
+
+function link (scope, el, attr) {
+    let icon = el[0];
+    let popover = icon.getElementsByClassName('at-Popover-container')[0];
+
+    el.on('click', createDisplayListener(icon, popover));
+}
+
+function createDisplayListener (icon, popover) {
+    return event => {
+        let arrow = popover.getElementsByClassName('at-Popover-arrow')[0];
+
+        let iPos = icon.getBoundingClientRect();
+        let pPos = popover.getBoundingClientRect();
+
+        let wHeight = window.clientHeight;
+        let pHeight = pPos.height;
+
+        let cx = Math.floor(iPos.left + (iPos.width / 2));
+        let cy = Math.floor(iPos.top + (iPos.height / 2));
+
+        if (cy < (pHeight / 2)) {
+            popover.style.top = '10px';
+        } else {
+            popover.style.top = (cy - pHeight / 2) + 'px';
+        }
+
+        popover.style.left = cx + 'px';
+
+        arrow.style.top = iPos.top + 'px'; 
+        arrow.style.left = iPos.left + 20 + 'px'; 
+
+        popover.style.visibility = 'visible';
+        popover.style.opacity = 1;
+
+        let dismissListener = createDismissListener(popover);
+
+        window.addEventListener('mousedown', dismissListener);
+        window.addEventListener('resize', dismissListener);
+    };
+}
+
+function createDismissListener (popover) {
+    return function dismissListener () {
+        popover.style.visibility = 'hidden';
+        popover.style.opacity = 0;
+
+        window.removeEventListener('mousedown', dismissListener);
+    };
+}
+
+function atPopover (_pathService_) {
+    pathService = _pathService_;
+
+    return {
+        restrict: 'E',
+        replace: true,
+        transclude: true,
+        templateUrl: pathService.getPartialPath('components/popover/popover'),
+        link,
+        scope: {
+            config: '='
+        }
+    };
+}
+
+atPopover.$inject = [
+    'PathService'
+];
+
+export default atPopover;
@@ -0,0 +1,11 @@
+<div ng-show="config" class="at-Popover">
+    <span class="at-Popover-icon">
+        <i class="fa fa-question-circle"></i>
+    </span>
+    <div class="at-Popover-container">
+        <div class="at-Popover-arrow">
+            <i class="fa fa-caret-left fa-2x"></i>
+        </div>
+        <div class="at-Popover-content">{{ config.text }}</div>
+    </div>
+</div>