thepaperpilot/Planar-Pioneers
1
0
Fork 0
mirror of https://github.com/thepaperpilot/Planar-Pioneers.git synced 2024-11-25 01:41:44 +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 21f49756dc
commit 962e789e1d
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

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

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

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

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

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