mirror of
https://github.com/bitwarden/browser
synced 2025-12-12 22:33:35 +00:00
151 lines
3.5 KiB
TypeScript
151 lines
3.5 KiB
TypeScript
import { ConnectedPosition } from "@angular/cdk/overlay";
|
|
|
|
const ORIGIN_OFFSET_PX = 14;
|
|
const OVERLAY_OFFSET_PX = 24;
|
|
|
|
export type PositionIdentifier =
|
|
| "right-start"
|
|
| "right-center"
|
|
| "right-end"
|
|
| "left-start"
|
|
| "left-center"
|
|
| "left-end"
|
|
| "below-start"
|
|
| "below-center"
|
|
| "below-end"
|
|
| "above-start"
|
|
| "above-center"
|
|
| "above-end";
|
|
|
|
export interface DefaultPosition extends ConnectedPosition {
|
|
id: PositionIdentifier;
|
|
}
|
|
|
|
export const defaultPositions: DefaultPosition[] = [
|
|
/**
|
|
* The order of these positions matters. The Popover component will use
|
|
* the first position that fits within the viewport.
|
|
*/
|
|
|
|
// Popover opens to right of trigger
|
|
{
|
|
id: "right-start",
|
|
offsetX: ORIGIN_OFFSET_PX,
|
|
offsetY: -OVERLAY_OFFSET_PX,
|
|
originX: "end",
|
|
originY: "center",
|
|
overlayX: "start",
|
|
overlayY: "top",
|
|
panelClass: ["bit-popover-right", "bit-popover-right-start"],
|
|
},
|
|
{
|
|
id: "right-center",
|
|
offsetX: ORIGIN_OFFSET_PX,
|
|
originX: "end",
|
|
originY: "center",
|
|
overlayX: "start",
|
|
overlayY: "center",
|
|
panelClass: ["bit-popover-right", "bit-popover-right-center"],
|
|
},
|
|
{
|
|
id: "right-end",
|
|
offsetX: ORIGIN_OFFSET_PX,
|
|
offsetY: OVERLAY_OFFSET_PX,
|
|
originX: "end",
|
|
originY: "center",
|
|
overlayX: "start",
|
|
overlayY: "bottom",
|
|
panelClass: ["bit-popover-right", "bit-popover-right-end"],
|
|
},
|
|
// ... to left of trigger
|
|
{
|
|
id: "left-start",
|
|
offsetX: -ORIGIN_OFFSET_PX,
|
|
offsetY: -OVERLAY_OFFSET_PX,
|
|
originX: "start",
|
|
originY: "center",
|
|
overlayX: "end",
|
|
overlayY: "top",
|
|
panelClass: ["bit-popover-left", "bit-popover-left-start"],
|
|
},
|
|
{
|
|
id: "left-center",
|
|
offsetX: -ORIGIN_OFFSET_PX,
|
|
originX: "start",
|
|
originY: "center",
|
|
overlayX: "end",
|
|
overlayY: "center",
|
|
panelClass: ["bit-popover-left", "bit-popover-left-center"],
|
|
},
|
|
{
|
|
id: "left-end",
|
|
offsetX: -ORIGIN_OFFSET_PX,
|
|
offsetY: OVERLAY_OFFSET_PX,
|
|
originX: "start",
|
|
originY: "center",
|
|
overlayX: "end",
|
|
overlayY: "bottom",
|
|
panelClass: ["bit-popover-left", "bit-popover-left-end"],
|
|
},
|
|
// ... below trigger
|
|
{
|
|
id: "below-center",
|
|
offsetY: ORIGIN_OFFSET_PX,
|
|
originX: "center",
|
|
originY: "bottom",
|
|
overlayX: "center",
|
|
overlayY: "top",
|
|
panelClass: ["bit-popover-below", "bit-popover-below-center"],
|
|
},
|
|
{
|
|
id: "below-start",
|
|
offsetX: -OVERLAY_OFFSET_PX,
|
|
offsetY: ORIGIN_OFFSET_PX,
|
|
originX: "center",
|
|
originY: "bottom",
|
|
overlayX: "start",
|
|
overlayY: "top",
|
|
panelClass: ["bit-popover-below", "bit-popover-below-start"],
|
|
},
|
|
{
|
|
id: "below-end",
|
|
offsetX: OVERLAY_OFFSET_PX,
|
|
offsetY: ORIGIN_OFFSET_PX,
|
|
originX: "center",
|
|
originY: "bottom",
|
|
overlayX: "end",
|
|
overlayY: "top",
|
|
panelClass: ["bit-popover-below", "bit-popover-below-end"],
|
|
},
|
|
// ... above trigger
|
|
{
|
|
id: "above-center",
|
|
offsetY: -ORIGIN_OFFSET_PX,
|
|
originX: "center",
|
|
originY: "top",
|
|
overlayX: "center",
|
|
overlayY: "bottom",
|
|
panelClass: ["bit-popover-above", "bit-popover-above-center"],
|
|
},
|
|
{
|
|
id: "above-start",
|
|
offsetX: -OVERLAY_OFFSET_PX,
|
|
offsetY: -ORIGIN_OFFSET_PX,
|
|
originX: "center",
|
|
originY: "top",
|
|
overlayX: "start",
|
|
overlayY: "bottom",
|
|
panelClass: ["bit-popover-above", "bit-popover-above-start"],
|
|
},
|
|
{
|
|
id: "above-end",
|
|
offsetX: OVERLAY_OFFSET_PX,
|
|
offsetY: -ORIGIN_OFFSET_PX,
|
|
originX: "center",
|
|
originY: "top",
|
|
overlayX: "end",
|
|
overlayY: "bottom",
|
|
panelClass: ["bit-popover-above", "bit-popover-above-end"],
|
|
},
|
|
];
|