[changed] uses CSS to position Popover caret

CloudDeepTeam · May 12, 2015 · 906dde4 · 906dde4
1 parent 391b6b7
commit 906dde4
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,10 @@
 
 - `IMPROVED` #556 调整 `select` 在 Firefox 下的样式（Thx to @photino）。
 
+**JS:**
+
+- `CHANGED` 使用 CSS 定位 Popover 箭头。
+
 ### 2015.05 W1
 
 **Web 组件：**

diff --git a/js/ui.popover.js b/js/ui.popover.js
@@ -93,7 +93,7 @@ Popover.prototype.sizePopover = function sizePopover() {
   $popover.css({left: '', top: ''}).removeClass('am-popover-left ' +
   'am-popover-right am-popover-top am-popover-bottom');
 
-  $popCaret.css({left: '', top: ''});
+  // $popCaret.css({left: '', top: ''});
 
   if (popTotalHeight - spacing < triggerRect.top + spacing) {
     // Popover on the top of trigger
@@ -134,7 +134,7 @@ Popover.prototype.sizePopover = function sizePopover() {
     }
 
     diff = diff - popLeft;
-    $popCaret.css({left: (popWidth / 2 - popCaretSize + diff) + 'px'});
+    // $popCaret.css({left: (popWidth / 2 - popCaretSize + diff) + 'px'});
 
   } else if (popPosition === 'middle') {
     popLeft = triggerOffset.left - popWidth - popCaretSize;
@@ -148,7 +148,7 @@ Popover.prototype.sizePopover = function sizePopover() {
       popLeft = winWidth - popWidth - 5;
       $popover.removeClass('am-popover-left').addClass('am-popover-right');
     }
-    $popCaret.css({top: (popHeight / 2 - popCaretSize / 2) + 'px'});
+    // $popCaret.css({top: (popHeight / 2 - popCaretSize / 2) + 'px'});
   }
 
   // Apply position style

diff --git a/less/ui.popover.less b/less/ui.popover.less
@@ -62,13 +62,12 @@
   background: @popover-bg;
   padding: 8px;
   z-index: 110;
-  .scrollable();
+  // .scrollable();
   .hook-popover-inner;
 }
 
 .@{ns}popover-caret {
   position: absolute;
-  left: 5px;
   top: 0;
   z-index: 100;
   .caret-up(8px, @popover-bg);
@@ -85,6 +84,12 @@
     top: -8px;
   }
 
+  .@{ns}popover-top &,
+  .@{ns}popover-bottom & {
+    left: 50%;
+    margin-left: -8px;
+  }
+
   .@{ns}popover-left & {
     top: auto;
     left: auto;
@@ -97,6 +102,12 @@
     left: -12px;
     transform: rotate(-90deg);
   }
+
+  .@{ns}popover-left &,
+  .@{ns}popover-right & {
+    top: 50%;
+    margin-top: -4px;
+  }
 }