diff --git a/packages/mosaic-dev/popover/template.html b/packages/mosaic-dev/popover/template.html index d8f318424..5c437e165 100644 --- a/packages/mosaic-dev/popover/template.html +++ b/packages/mosaic-dev/popover/template.html @@ -249,4 +249,4 @@

Configuration:

- \ No newline at end of file + diff --git a/packages/mosaic/popover/popover.component.ts b/packages/mosaic/popover/popover.component.ts index b21452f4d..83cf3e4ff 100644 --- a/packages/mosaic/popover/popover.component.ts +++ b/packages/mosaic/popover/popover.component.ts @@ -267,7 +267,8 @@ export function getMcPopoverInvalidPositionError(position: string) { } const VIEWPORT_MARGIN: number = 8; -const POPOVER_ARROW_BORDER_DISTANCE: number = 20; // tslint:disable-line +const POPOVER_ARROW_BORDER_DISTANCE: number = 22; // tslint:disable-line +const ANCHOR_MIN_HEIGHT_WIDTH: number = 40; @Directive({ selector: '[mcPopover]', @@ -576,12 +577,19 @@ export class McPopover implements OnInit, OnDestroy { const offsets: { [key: string]: number} = { top: verticalOffset, bottom: verticalOffset, - right: horizontalOffset, - left: horizontalOffset + right: horizontalOffset + 8, + left: horizontalOffset + 8 }; const styleProperty = updatedPlacement.split(/(?=[A-Z])/)[1].toLowerCase(); + if (((styleProperty === 'top' || styleProperty === 'bottom') && + elementHeight > ANCHOR_MIN_HEIGHT_WIDTH) || + ((styleProperty === 'left' || styleProperty === 'right') && + elementWidth > ANCHOR_MIN_HEIGHT_WIDTH)) { + return; + } + if (!this.overlayRef.overlayElement.style[styleProperty]) { this.overlayRef.overlayElement.style[styleProperty] = '0px'; } diff --git a/packages/mosaic/popover/popover.scss b/packages/mosaic/popover/popover.scss index b7f4d7506..6b31c06b3 100644 --- a/packages/mosaic/popover/popover.scss +++ b/packages/mosaic/popover/popover.scss @@ -7,7 +7,7 @@ $z-index-popover: 1060; $popover-max-width: 240px; $border-radius-base: 4px; -$popover-arrow-width: 6px; +$popover-arrow-width: 4px; $popover-distance: $popover-arrow-width * 2; $popover-arrow-distance: -($popover-arrow-width + 2px); $border-size: 1px; @@ -133,13 +133,13 @@ $mc-popover-large-width: 640px; .mc-popover_placement-top-left .mc-popover__arrow { bottom: $popover-arrow-distance; - left: 20px; + left: 12px; margin-left: 0; } .mc-popover_placement-top-right .mc-popover__arrow { bottom: $popover-arrow-distance; - right: 20px; + right: 12px; margin-left: 0; } @@ -151,13 +151,13 @@ $mc-popover-large-width: 640px; .mc-popover_placement-right-top .mc-popover__arrow { left: $popover-arrow-distance; - top: 20px; + top: 17px; margin-top: -$popover-arrow-width; } .mc-popover_placement-right-bottom .mc-popover__arrow { left: $popover-arrow-distance; - bottom: 14px; // same as top placement = element.style.top + element.style.margin-top = 20px -6px + bottom: 17px; // same as top placement = element.style.top + element.style.margin-top = 20px -6px margin-top: -$popover-arrow-width; } @@ -169,13 +169,13 @@ $mc-popover-large-width: 640px; .mc-popover_placement-left-top .mc-popover__arrow { right: $popover-arrow-distance; - top: 20px; + top: 17px; margin-top: -$popover-arrow-width; } .mc-popover_placement-left-bottom .mc-popover__arrow { right: $popover-arrow-distance; - bottom: 14px; // same as top placement = element.style.top + element.style.margin-top = 20px -6px + bottom: 17px; // same as top placement = element.style.top + element.style.margin-top = 20px -6px margin-top: -$popover-arrow-width; } @@ -187,12 +187,12 @@ $mc-popover-large-width: 640px; .mc-popover_placement-bottom-left .mc-popover__arrow { top: $popover-arrow-distance; - left: 20px; + left: 12px; margin-left: 0; } .mc-popover_placement-bottom-right .mc-popover__arrow { top: $popover-arrow-distance; - right: 20px; + right: 12px; margin-left: 0; }