diff --git a/frontend/components/base/base-badge/BaseBadge.vue b/frontend/components/base/base-badge/BaseBadge.vue index 098e2b3e6a..fe7c255f9b 100644 --- a/frontend/components/base/base-badge/BaseBadge.vue +++ b/frontend/components/base/base-badge/BaseBadge.vue @@ -42,6 +42,7 @@ export default { border: 1px solid $black-37; border-radius: $border-radius-rounded; margin: 0; + color: $black-54; @include font-size(12px); @include line-height(12px); &.--clickable { diff --git a/frontend/components/feedback-task/settings/SettingsFields.vue b/frontend/components/feedback-task/settings/SettingsFields.vue index 7d769c1e78..462d7ca63c 100644 --- a/frontend/components/feedback-task/settings/SettingsFields.vue +++ b/frontend/components/feedback-task/settings/SettingsFields.vue @@ -101,9 +101,6 @@ export default { h4 { margin: 0; } - p { - color: $black-54; - } } &__group { diff --git a/frontend/components/feedback-task/settings/SettingsMetadata.vue b/frontend/components/feedback-task/settings/SettingsMetadata.vue index 74f8669863..df5cb378fe 100644 --- a/frontend/components/feedback-task/settings/SettingsMetadata.vue +++ b/frontend/components/feedback-task/settings/SettingsMetadata.vue @@ -124,9 +124,6 @@ export default { h4 { margin: 0; } - p { - color: $black-54; - } .badge { margin-inline: 0 auto; } diff --git a/frontend/plugins/directives/tooltip.directive.js b/frontend/plugins/directives/tooltip.directive.js index a764cbc025..7b182ff5a8 100644 --- a/frontend/plugins/directives/tooltip.directive.js +++ b/frontend/plugins/directives/tooltip.directive.js @@ -21,7 +21,7 @@ Vue.directive("tooltip", { backgroundColor, borderColor, color, - width = 208, + width = content.length < 40 ? 100 : 400, tooltipPosition = TOOLTIP_DIRECTION.BOTTOM, } = binding.value; @@ -60,12 +60,7 @@ Vue.directive("tooltip", { tooltip = initTooltipStyle(tooltip, backgroundColor, borderColor, width); // NOTE - init tooltip position - tooltip = initTooltipPosition( - tooltip, - tooltipPosition, - elementOffset, - width - ); + tooltip = initTooltipPosition(tooltip, tooltipPosition, elementOffset); // NOTE - add the tooltip to the element and add event listener to the close icon element.appendChild(tooltip); @@ -77,12 +72,7 @@ Vue.directive("tooltip", { tooltip.style.display = "flex"; tooltip.setAttribute("tooltip-visible", "true"); elementOffset = initElementOffset(element); - tooltip = initTooltipPosition( - tooltip, - tooltipPosition, - elementOffset, - width - ); + tooltip = initTooltipPosition(tooltip, tooltipPosition, elementOffset); }; element.closeTooltip = () => { @@ -120,12 +110,12 @@ Vue.directive("tooltip", { tooltip.style.visibility = "visible"; } elementOffset = initElementOffset(element); - tooltip = initTooltipPosition( - tooltip, - tooltipPosition, - elementOffset, - width - ); + tooltip = initTooltipPosition(tooltip, tooltipPosition, elementOffset); + }; + + element.resize = function () { + elementOffset = initElementOffset(element); + tooltip = initTooltipPosition(tooltip, tooltipPosition, elementOffset); }; // NOTE - init all eventListeners @@ -177,6 +167,7 @@ const initEventsListener = (element, closeIcon) => { "scroll", element.scrollInParent ); + window.addEventListener("resize", element.resize); } }; @@ -197,6 +188,7 @@ const destroyEventsListener = (element) => { "scroll", element.scrollInParent ); + window.removeEventListener("resize", element.resize); }; const initTooltipStyle = ( @@ -212,7 +204,7 @@ const initTooltipStyle = ( tooltip.style.zIndex = "99999"; tooltip.style.backgroundColor = backgroundColor; tooltip.style.borderRadius = "5px"; - tooltip.style.padding = "16px"; + tooltip.style.padding = "20px 8px 8px 8px"; tooltip.style.boxShadow = "0 8px 20px 0 rgba(0,0,0,.2)"; tooltip.style.transition = "opacity 0.3s ease 0.2s"; tooltip.style.border = `2px ${borderColor} solid`; @@ -220,51 +212,72 @@ const initTooltipStyle = ( return tooltip; }; const initTooltipHeaderStyle = (tooltipHeader) => { - tooltipHeader.style.display = "flex"; - tooltipHeader.style.justifyContent = "flex-end"; - tooltipHeader.style.marginBottom = "8px"; + tooltipHeader.style.position = "absolute"; + tooltipHeader.style.top = "4px"; + tooltipHeader.style.right = "4px"; tooltipHeader.innerHTML = - ''; + ''; return tooltipHeader; }; const initTooltipTriangleStyle = (tooltipTriangle) => { + tooltipTriangle.setAttribute("class", "triangle"); tooltipTriangle.style.position = "absolute"; - tooltipTriangle.style.left = "50%"; - tooltipTriangle.style.transform = "translateX(-50%)"; - tooltipTriangle.style.top = "0"; return tooltipTriangle; }; const initTooltipTriangleInnerStyle = (tooltipTriangleInner) => { tooltipTriangleInner.style.position = "relative"; tooltipTriangleInner.style.width = "0"; tooltipTriangleInner.style.height = "0"; - tooltipTriangleInner.style.top = "-10px"; tooltipTriangleInner.style.borderBottom = "10px solid white"; tooltipTriangleInner.style.borderRight = "10px solid transparent"; tooltipTriangleInner.style.borderLeft = "10px solid transparent"; return tooltipTriangleInner; }; -const initTooltipPosition = ( - tooltip, - tooltipPosition, - elementOffset, - width -) => { +const initTooltipPosition = (tooltip, tooltipPosition, elementOffset) => { + const tooltipOffset = initElementOffset(tooltip); + const tooltipTriangle = tooltip.querySelector(".triangle"); + const tooltipTriangleOffset = initElementOffset(tooltipTriangle); const margin = 8; + const rightSideOutOfViewport = + window.innerWidth <= elementOffset.right + tooltipOffset.width / 2; + const bottomSideoutOfViewport = + window.innerHeight <= elementOffset.bottom + tooltipOffset.height; switch (tooltipPosition.toUpperCase()) { case TOOLTIP_DIRECTION.BOTTOM: - tooltip.style.top = `${ - elementOffset.y + elementOffset.height + margin - }px`; - tooltip.style.left = `${ - elementOffset.left - width / 2 + elementOffset.width / 2 - }px`; + tooltip.style.left = rightSideOutOfViewport + ? `${ + elementOffset.left - + tooltipOffset.width + + elementOffset.width + + tooltipTriangleOffset.width + }px` + : `${ + elementOffset.left - + tooltipOffset.width / 2 + + elementOffset.width / 2 + }px`; + tooltipTriangle.style.left = rightSideOutOfViewport ? "100%" : "50%"; + tooltipTriangle.style.marginLeft = rightSideOutOfViewport + ? `-${tooltipTriangleOffset.width * 2}px` + : `-${tooltipTriangleOffset.width / 2}px`; + + tooltip.style.top = bottomSideoutOfViewport + ? `${elementOffset.y - tooltipOffset.height - margin}px` + : `${elementOffset.y + elementOffset.height + margin}px`; + + tooltipTriangle.style.transform = bottomSideoutOfViewport + ? "rotateX(180deg)" + : ""; + tooltipTriangle.style.top = bottomSideoutOfViewport + ? "100%" + : `-${tooltipTriangleOffset.height}px`; break; default: // tooltip direction is unknown } + return tooltip; };