瀏覽代碼

ref(popover): allow for popover content from the right (#3302)

* ref(popover): allow for popover content from the right

Popovers contents can display to the left of the trigger
and above the trigger. Add the ability to display to the
right of the trigger my adding mouseover padding. This
may be needed for tile view, depending on where the triggers
are located.

* squash: abstract common css proprties into placeholder class
j8
virtuacoplenny 6 年之前
父節點
當前提交
a36b341865
共有 2 個檔案被更改,包括 13 行新增2 行删除
  1. 12
    2
      css/_popover.scss
  2. 1
    0
      react/features/base/popover/components/Popover.web.js

+ 12
- 2
css/_popover.scss 查看文件

10
     right: 0;
10
     right: 0;
11
     width: 100%;
11
     width: 100%;
12
 }
12
 }
13
-.popover-mousemove-padding-right {
13
+
14
+%vertical-popover-padding {
14
     height: 100%;
15
     height: 100%;
15
     position: absolute;
16
     position: absolute;
16
-    right: -20;
17
     top: 0;
17
     top: 0;
18
     width: 40px;
18
     width: 40px;
19
 }
19
 }
20
 
20
 
21
+.popover-mousemove-padding-left {
22
+    @extend %vertical-popover-padding;
23
+    left: -20px;
24
+}
25
+
26
+.popover-mousemove-padding-right {
27
+    @extend %vertical-popover-padding;
28
+    right: -20px;
29
+}
30
+
21
 /**
31
 /**
22
  * An invisible element is added to the top of the popover to ensure the mouse
32
  * An invisible element is added to the top of the popover to ensure the mouse
23
  * stays over the popover when the popover's height is shrunk, which would then
33
  * stays over the popover when the popover's height is shrunk, which would then

+ 1
- 0
react/features/base/popover/components/Popover.web.js 查看文件

11
  */
11
  */
12
 const DIALOG_TO_PADDING_POSITION = {
12
 const DIALOG_TO_PADDING_POSITION = {
13
     'left': 'popover-mousemove-padding-right',
13
     'left': 'popover-mousemove-padding-right',
14
+    'right': 'popover-mousemove-padding-left',
14
     'top': 'popover-mousemove-padding-bottom'
15
     'top': 'popover-mousemove-padding-bottom'
15
 };
16
 };
16
 
17
 

Loading…
取消
儲存