thepaperpilot/Planar-Pioneers
1
0
Fork 0
mirror of https://github.com/thepaperpilot/Planar-Pioneers.git synced 2024-11-22 00:21:31 +00:00
Code Issues Releases Activity Actions

Added way to customize board action confirmation label

Browse source
This commit is contained in:
thepaperpilot 2023-04-22 23:13:26 -05:00
parent 536db8bf9f
commit 4a1abb7231
3 changed files with 18 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/features/boards/BoardNode.vue
View file

@ -120,7 +120,7 @@
<transition name="fade" appear>
<g v-if="label">
<text
:fill="label.color || titleColor"
:fill="label.color ?? titleColor"
class="node-title"
:class="{ pulsing: label.pulsing }"
:y="-size - 20"
@ -132,10 +132,11 @@
<transition name="fade" appear>
<text
v-if="isSelected && selectedAction"
:fill="titleColor"
:fill="confirmationLabel.color ?? titleColor"
class="node-title"
:class="{ pulsing: confirmationLabel.pulsing }"
:y="size + 75"
>Tap again to confirm</text
>{{ confirmationLabel.text }}</text
>
</transition>
</g>
@ -220,6 +221,14 @@ const label = computed(
getNodeProperty(unref(props.selectedAction)!.tooltip, unref(props.node))
: null) ?? getNodeProperty(props.nodeType.value.label, unref(props.node))
);
const confirmationLabel = computed(() =>
getNodeProperty(
unref(props.selectedAction)?.confirmationLabel ?? {
text: "Tap again to confirm"
},
unref(props.node)
)
);
const size = computed(() => getNodeProperty(props.nodeType.value.size, unref(props.node)));
const progress = computed(
() => getNodeProperty(props.nodeType.value.progress, unref(props.node)) ?? 0

1
src/features/boards/BoardNodeAction.vue
View file

@ -1,7 +1,6 @@
<template>
<transition name="actions" appear>
<g v-if="isSelected && actions">
<!-- TODO move to separate file -->
<g
v-for="(action, index) in actions"
:key="action.id"

6
src/features/boards/board.ts
View file

@ -188,6 +188,8 @@ export interface BoardNodeActionOptions {
fillColor?: NodeComputable<string>;
/** The tooltip text to display for the action. */
tooltip: NodeComputable<NodeLabel>;
/** The confirmation label that appears under the action. */
confirmationLabel?: NodeComputable<NodeLabel>;
/** An array of board node links associated with the action. They appear when the action is focused. */
links?: NodeComputable<BoardNodeLink[]>;
/** A function that is called when the action is clicked. */
@ -209,6 +211,7 @@ export type BoardNodeAction<T extends BoardNodeActionOptions> = Replace<
icon: GetComputableType<T["icon"]>;
fillColor: GetComputableType<T["fillColor"]>;
tooltip: GetComputableType<T["tooltip"]>;
confirmationLabel: GetComputableTypeWithDefault<T["confirmationLabel"], NodeLabel>;
links: GetComputableType<T["links"]>;
}
>;
@ -218,6 +221,7 @@ export type GenericBoardNodeAction = Replace<
BoardNodeAction<BoardNodeActionOptions>,
{
visibility: NodeComputable<Visibility | boolean>;
confirmationLabel: NodeComputable<NodeLabel>;
}
>;
@ -420,6 +424,8 @@ export function createBoard<T extends BoardOptions>(
processComputable(action, "icon");
processComputable(action, "fillColor");
processComputable(action, "tooltip");
processComputable(action, "confirmationLabel");
setDefault(action, "confirmationLabel", { text: "Tap again to confirm" });
processComputable(action, "links");
}
}