web/DialogButton: add "link" buttons

This commit is contained in:
dumbmoron 2024-10-12 17:36:28 +00:00
parent fe1d17ba8d
commit 0b06299da0
No known key found for this signature in database
2 changed files with 31 additions and 15 deletions

View file

@ -23,7 +23,16 @@
onDestroy(() => clearInterval(interval)); onDestroy(() => clearInterval(interval));
} }
</script> </script>
{#if button.link}
<a
class="button elevated link-button"
class:color={button.color}
class:active={button.main}
href={button.link}
>
{button.text}
</a>
{:else}
<button <button
class="button elevated popup-button {button.color}" class="button elevated popup-button {button.color}"
class:color={button.color} class:color={button.color}
@ -36,8 +45,14 @@
> >
{button.text}{seconds ? ` (${seconds})` : ""} {button.text}{seconds ? ` (${seconds})` : ""}
</button> </button>
{/if}
<style> <style>
.link-button {
text-decoration: none;
font-weight: 500;
width: 100%;
}
.popup-button { .popup-button {
width: 100%; width: 100%;
height: 40px; height: 40px;

View file

@ -6,7 +6,8 @@ export type DialogButton = {
color?: "red", color?: "red",
main: boolean, main: boolean,
timeout?: number, // milliseconds timeout?: number, // milliseconds
action: () => unknown | Promise<unknown> action: () => unknown | Promise<unknown>,
link?: string
} }
export type SmallDialogIcons = "warn-red"; export type SmallDialogIcons = "warn-red";