feat(common): change modal open signature and allow to hide buttons
This commit is contained in:
@@ -48,6 +48,7 @@ onUnmounted(() => {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<Buttons
|
<Buttons
|
||||||
|
v-if="state.showButtons"
|
||||||
:y-offset="state.modalButtonsYOffset"
|
:y-offset="state.modalButtonsYOffset"
|
||||||
b-label="Cancel"
|
b-label="Cancel"
|
||||||
a-label="Confirm"
|
a-label="Confirm"
|
||||||
|
|||||||
@@ -59,14 +59,19 @@ const actionateButton = async (button: (typeof selectedButton)["value"]) => {
|
|||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
const url = content.replace(/^https?:\/\//, "");
|
const url = content.replace(/^https?:\/\//, "");
|
||||||
openModal(`Open ${url}?`, async () => {
|
openModal({
|
||||||
store.pushNotification(`${verb} opened`);
|
text: `Open ${url}?`,
|
||||||
await sleep(100);
|
onConfirm: async () => {
|
||||||
await navigateTo(content, { open: { target: "_blank " } });
|
store.pushNotification(`${verb} opened`);
|
||||||
|
await sleep(100);
|
||||||
|
await navigateTo(content, { open: { target: "_blank " } });
|
||||||
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// TODO: use @activate events from common buttons
|
||||||
|
|
||||||
const QUIT_BUTTON: Rect = [31, 172, 80, 18];
|
const QUIT_BUTTON: Rect = [31, 172, 80, 18];
|
||||||
const OK_BUTTON: Rect = [144, 172, 80, 18];
|
const OK_BUTTON: Rect = [144, 172, 80, 18];
|
||||||
|
|
||||||
|
|||||||
@@ -7,4 +7,5 @@ import Menus from "./Menus/Menus.vue";
|
|||||||
<Background />
|
<Background />
|
||||||
<CommonBars />
|
<CommonBars />
|
||||||
<Menus />
|
<Menus />
|
||||||
|
<CommonConfirmationModal />
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -15,16 +15,22 @@ const state = useState("confirmationModal", () =>
|
|||||||
modalButtonsYOffset: BUTTONS_MAX_Y_OFFSET,
|
modalButtonsYOffset: BUTTONS_MAX_Y_OFFSET,
|
||||||
isVisible: false,
|
isVisible: false,
|
||||||
isClosing: false,
|
isClosing: false,
|
||||||
|
showButtons: true,
|
||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
|
|
||||||
const open = (text: string, onConfirm?: (() => void) | null) => {
|
const open = (
|
||||||
|
options: {
|
||||||
|
text: string;
|
||||||
|
} & ({ showButtons?: true; onConfirm: () => void } | { showButtons: false }),
|
||||||
|
) => {
|
||||||
gsap.killTweensOf(state.value);
|
gsap.killTweensOf(state.value);
|
||||||
state.value.text = text;
|
state.value.text = options.text;
|
||||||
state.value.onConfirm = onConfirm || null;
|
state.value.onConfirm = options.showButtons ? options.onConfirm : null;
|
||||||
state.value.isVisible = true;
|
state.value.isVisible = true;
|
||||||
state.value.isClosing = false;
|
state.value.isClosing = false;
|
||||||
state.value.isOpen = true;
|
state.value.isOpen = true;
|
||||||
|
state.value.showButtons = options.showButtons ?? false;
|
||||||
|
|
||||||
gsap
|
gsap
|
||||||
.timeline()
|
.timeline()
|
||||||
|
|||||||
Reference in New Issue
Block a user