Added fine-grained choices to Snapping options popover (#1730)

* Added Customised Snapping

* Fix snapping choice to Anchors; clean up popover menu code

---------

Co-authored-by: Keavon Chambers <keavon@keavon.com>
This commit is contained in:
Shyam Jayakannan
2024-04-18 09:54:15 +05:30
committed by GitHub
parent 3019cc7253
commit 67ba5bcecf
13 changed files with 318 additions and 135 deletions

View File

@@ -134,13 +134,8 @@
{/if}
{@const popoverButton = narrowWidgetProps(component.props, "PopoverButton")}
{#if popoverButton}
<PopoverButton {...exclude(popoverButton, ["header", "text", "optionsWidget"])}>
<TextLabel bold={true}>{popoverButton.header}</TextLabel>
{#if popoverButton.optionsWidget?.length}
<WidgetLayout layout={{ layout: popoverButton.optionsWidget, layoutTarget: layoutTarget }} />
{:else}
<TextLabel multiline={true}>{popoverButton.text}</TextLabel>
{/if}
<PopoverButton {...exclude(popoverButton, ["popoverLayout"])}>
<WidgetLayout layout={{ layout: popoverButton.popoverLayout, layoutTarget: layoutTarget }} />
</PopoverButton>
{/if}
{@const radioInput = narrowWidgetProps(component.props, "RadioInput")}

View File

@@ -75,6 +75,16 @@
.floating-menu {
left: 50%;
bottom: 0;
.floating-menu-content > :first-child:not(:has(:not(.text-label))),
.floating-menu-content > :first-child:not(:has(:not(.checkbox-input))) {
margin-top: -8px;
}
.floating-menu-content > :last-child:not(:has(:not(.text-label))),
.floating-menu-content > :last-child:not(:has(:not(.checkbox-input))) {
margin-bottom: -8px;
}
}
}
</style>

View File

@@ -870,17 +870,13 @@ export class PopoverButton extends WidgetProps {
disabled!: boolean;
// Body
header!: string;
text!: string;
@Transform(({ value }: { value: string }) => value || undefined)
tooltip!: string | undefined;
popoverMinWidth: number | undefined;
// Body
popoverLayout!: LayoutGroup[];
optionsWidget: LayoutGroup[] | undefined;
popoverMinWidth: number | undefined;
}
export type RadioEntryData = {
@@ -1086,7 +1082,7 @@ function hoistWidgetHolder(widgetHolder: any): Widget {
props.kind = kind;
if (kind === "PopoverButton") {
props.optionsWidget = props.optionsWidget.map(createLayoutGroup);
props.popoverLayout = props.popoverLayout.map(createLayoutGroup);
}
const { widgetId } = widgetHolder;
@@ -1136,8 +1132,8 @@ export function patchWidgetLayout(layout: /* &mut */ WidgetLayout, updates: Widg
if ("rowWidgets" in targetLayout) return targetLayout.rowWidgets[index];
if ("layout" in targetLayout) return targetLayout.layout[index];
if (targetLayout instanceof Widget) {
if (targetLayout.props.kind === "PopoverButton" && targetLayout.props instanceof PopoverButton && targetLayout.props.optionsWidget) {
return targetLayout.props.optionsWidget[index];
if (targetLayout.props.kind === "PopoverButton" && targetLayout.props instanceof PopoverButton && targetLayout.props.popoverLayout) {
return targetLayout.props.popoverLayout[index];
}
// eslint-disable-next-line no-console
console.error("Tried to index widget");