Skip to content

feat(popover): behavior and design #472

Merged
merged 4 commits into from
Jun 3, 2020
Merged

feat(popover): behavior and design #472

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ac415fb
feat(popover): Popover ux changes discussion
LeonVay Jun 3, 2020
36be0e6
feat(popover): Popover ux changes discussion
LeonVay Jun 3, 2020
3474109
feat(popover): Popover ux changes discussion
LeonVay Jun 3, 2020
23761a1
feat(popover): Popover ux changes discussion
LeonVay Jun 3, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/mosaic-dev/popover/template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -249,4 +249,4 @@ <h3>Configuration:</h3>
</div>
</div>

</div>
</div>
17 changes: 17 additions & 0 deletions packages/mosaic/popover/popover.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -267,8 +267,18 @@ export function getMcPopoverInvalidPositionError(position: string) {
}

const VIEWPORT_MARGIN: number = 8;

/* Constant distance between popover container border
* corner according to popover placement and middle of arrow
* */
const POPOVER_ARROW_BORDER_DISTANCE: number = 20; // tslint:disable-line

/* Constant value for min height and width of anchor element used for popover.
* Set as POPOVER_ARROW_BORDER_DISTANCE multiplied by 2
* plus 2px border for both sides of element. Used in check of position management.
* */
const ANCHOR_MIN_HEIGHT_WIDTH: number = 44; // tslint:disable-line

@Directive({
selector: '[mcPopover]',
exportAs: 'mcPopover',
Expand Down Expand Up @@ -582,6 +592,13 @@ export class McPopover implements OnInit, OnDestroy {

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';
}
Expand Down
6 changes: 3 additions & 3 deletions packages/mosaic/popover/popover.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -151,7 +151,7 @@ $mc-popover-large-width: 640px;

.mc-popover_placement-right-top .mc-popover__arrow {
left: $popover-arrow-distance;
top: 20px;
top: 18px;
margin-top: -$popover-arrow-width;
}

Expand All @@ -169,7 +169,7 @@ $mc-popover-large-width: 640px;

.mc-popover_placement-left-top .mc-popover__arrow {
right: $popover-arrow-distance;
top: 20px;
top: 18px;
margin-top: -$popover-arrow-width;
}

Expand Down