Преглед изворни кода

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…
Откажи
Сачувај