From ca0c86bde5100a33310515fc791dc9a4acb64f09 Mon Sep 17 00:00:00 2001 From: Brieuc-brd Date: Fri, 28 Jan 2022 08:07:19 +0000 Subject: [PATCH] [REF] web: update arrow directions & SCSS revamp MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- addons/web/static/src/core/popover/popover.js | 32 +++- .../web/static/src/core/popover/popover.scss | 169 ++++-------------- .../web/static/src/core/popover/popover.xml | 3 +- 3 files changed, 66 insertions(+), 138 deletions(-) diff --git a/addons/web/static/src/core/popover/popover.js b/addons/web/static/src/core/popover/popover.js index 81919be74cd..9eb7960a52a 100644 --- a/addons/web/static/src/core/popover/popover.js +++ b/addons/web/static/src/core/popover/popover.js @@ -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; + } } } diff --git a/addons/web/static/src/core/popover/popover.scss b/addons/web/static/src/core/popover/popover.scss index 0a0769d421b..f7714dc33d7 100644 --- a/addons/web/static/src/core/popover/popover.scss +++ b/addons/web/static/src/core/popover/popover.scss @@ -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*/ diff --git a/addons/web/static/src/core/popover/popover.xml b/addons/web/static/src/core/popover/popover.xml index 92e87b434e4..2e057bef5bd 100644 --- a/addons/web/static/src/core/popover/popover.xml +++ b/addons/web/static/src/core/popover/popover.xml @@ -2,10 +2,11 @@ -