[REF] web: update arrow directions & SCSS revamp
Prior this commit, the popover arrow was in raw SCSS and used only the four basic directions (top, right, bottom, left). After this commit, the popover uses the Bootstrap arrow and this arrow can also use the additional directions defined in `position_hooks.js`. It also revamp the SCSS of the component. task-2748120 closes odoo/odoo#83646 Signed-off-by: Adrien Dieudonné (adr) <adr@odoo.com>
This commit is contained in:
Brieuc-brd
@@ -6,15 +6,41 @@ const { Component } = owl;
|
||||
|
||||
export class Popover extends Component {
|
||||
setup() {
|
||||
usePosition(this.props.target, "popper", {
|
||||
margin: 16,
|
||||
usePosition(this.props.target, {
|
||||
onPositioned: this.onPositioned,
|
||||
position: this.props.position,
|
||||
});
|
||||
}
|
||||
onPositioned(el, { direction, variant }) {
|
||||
const position = `${direction[0]}${variant[0]}`;
|
||||
el.classList.add(`o-popper-position--${position}`);
|
||||
el.classList.add(`bs-popover-${direction}`, `o-popover--${position}`);
|
||||
const arrowEl = el.firstElementChild;
|
||||
switch (position) {
|
||||
case "tm": // top-middle
|
||||
case "bm": // bottom-middle
|
||||
arrowEl.classList.add("start-0", "end-0", "mx-auto");
|
||||
break;
|
||||
case "lm": // left-middle
|
||||
case "rm": // right-middle
|
||||
arrowEl.classList.add("top-0", "bottom-0", "my-auto");
|
||||
break;
|
||||
case "ts": // top-start
|
||||
case "bs": // bottom-start
|
||||
arrowEl.classList.add("end-auto");
|
||||
break;
|
||||
case "te": // top-end
|
||||
case "be": // bottom-end
|
||||
arrowEl.classList.add("start-auto");
|
||||
break;
|
||||
case "ls": // left-start
|
||||
case "rs": // right-start
|
||||
arrowEl.classList.add("bottom-auto");
|
||||
break;
|
||||
case "le": // left-end
|
||||
case "re": // right-end
|
||||
arrowEl.classList.add("top-auto");
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,153 +1,54 @@
|
||||
/*!rtl:begin:ignore*/
|
||||
@keyframes slide-top {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-5%);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
@keyframes slide-top {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-5%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-right {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(5%);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(5%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-bottom {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(5%);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(5%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-left {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(-5%);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(-5%);
|
||||
}
|
||||
}
|
||||
|
||||
.o_popover {
|
||||
$border-color: gray("300");
|
||||
$bg-color: gray("200");
|
||||
$arrow-pad: 0px;
|
||||
$arrow-size: 8px;
|
||||
$animation-time: 0.2s;
|
||||
max-width: 100vw;
|
||||
@each $direction in (top, right, bottom, left) {
|
||||
&.bs-popover-#{$direction} {
|
||||
animation: 0.2s slide-#{$direction};
|
||||
}
|
||||
}
|
||||
|
||||
z-index: 1060;
|
||||
border: 1px solid $border-color;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
|
||||
&.o-popover--ts .arrow, &.o-popover--bs .arrow {
|
||||
left: $popover-border-radius;
|
||||
}
|
||||
|
||||
&.o-popper-position {
|
||||
&--tm {
|
||||
animation: $animation-time slide-top;
|
||||
margin-top: $arrow-size;
|
||||
&.o-popover--te .arrow, &.o-popover--be .arrow {
|
||||
right: $popover-border-radius;
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
margin-left: -$arrow-size;
|
||||
border: $arrow-size solid transparent;
|
||||
border-top-color: $bg-color;
|
||||
}
|
||||
|
||||
&::before {
|
||||
margin-top: 1px;
|
||||
border-top-color: $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
&--rm {
|
||||
animation: $animation-time slide-right;
|
||||
margin-left: -$arrow-size;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 100%;
|
||||
margin-top: -$arrow-size;
|
||||
border: $arrow-size solid transparent;
|
||||
border-right-color: $bg-color;
|
||||
}
|
||||
|
||||
&::before {
|
||||
margin-right: 1px;
|
||||
border-right-color: $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
&--bm {
|
||||
animation: $animation-time slide-bottom;
|
||||
margin-top: -$arrow-size;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
margin-left: -$arrow-size;
|
||||
border: $arrow-size solid transparent;
|
||||
border-bottom-color: $bg-color;
|
||||
}
|
||||
|
||||
&::before {
|
||||
margin-bottom: 1px;
|
||||
border-bottom-color: $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
&--lm {
|
||||
animation: $animation-time slide-left;
|
||||
margin-left: $arrow-size;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 100%;
|
||||
margin-top: -$arrow-size;
|
||||
border: $arrow-size solid transparent;
|
||||
border-left-color: $bg-color;
|
||||
}
|
||||
|
||||
&::before {
|
||||
margin-left: 1px;
|
||||
border-left-color: $border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.o-popover--ls .arrow, &.o-popover--rs .arrow {
|
||||
top: $popover-border-radius;
|
||||
}
|
||||
|
||||
&.o-popover--le .arrow, &.o-popover--re .arrow {
|
||||
bottom: $popover-border-radius;
|
||||
}
|
||||
}
|
||||
/*!rtl:end:ignore*/
|
||||
|
||||
@@ -2,10 +2,11 @@
|
||||
<templates xml:space="preserve">
|
||||
|
||||
<t t-name="web.PopoverWowl" owl="1">
|
||||
<div role="tooltip" class="o_popover"
|
||||
<div role="tooltip" class="o_popover popover mw-100 shadow-sm"
|
||||
t-att-class="props.popoverClass"
|
||||
t-ref="popper"
|
||||
>
|
||||
<div class="arrow"/>
|
||||
<t t-slot="default" />
|
||||
</div>
|
||||
</t>
|
||||
|
||||
Reference in New Issue
Block a user