web/dialogs: add saving method dialog
This commit is contained in:
wukko
parent
7411f358d2
commit
a9f9a3e342
7 changed files with 230 additions and 10 deletions
|
|
@ -4,6 +4,9 @@
|
|||
"button.reset": "reset",
|
||||
"button.done": "done",
|
||||
"button.downloadAudio": "download audio",
|
||||
"button.download": "download",
|
||||
"button.share": "share",
|
||||
"button.copy": "copy",
|
||||
|
||||
"reset.title": "reset all settings?",
|
||||
"reset.body": "are you sure you want to reset all settings? this action is immediate and irreversible.",
|
||||
|
|
@ -11,5 +14,7 @@
|
|||
"picker.title": "select what to save",
|
||||
"picker.description.desktop": "click an item to save it. images can also be saved via the right click menu.",
|
||||
"picker.description.phone": "press an item to save it. images can also be saved with a long press.",
|
||||
"picker.description.ios": "press an item to save it with a shortcut. images can also be saved with a long press."
|
||||
"picker.description.ios": "press an item to save it with a shortcut. images can also be saved with a long press.",
|
||||
|
||||
"saving.title": "choose how to save"
|
||||
}
|
||||
|
|
|
|||
31
web/src/components/buttons/VerticalActionButton.svelte
Normal file
31
web/src/components/buttons/VerticalActionButton.svelte
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
<script lang="ts">
|
||||
export let id: string;
|
||||
export let click = () => {
|
||||
alert("no function assigned");
|
||||
};
|
||||
export let fill = false;
|
||||
export let elevated = false;
|
||||
</script>
|
||||
|
||||
<button id="button-{id}" class="button vertical" class:fill class:elevated on:click={click}>
|
||||
<slot></slot>
|
||||
</button>
|
||||
|
||||
<style>
|
||||
.button.vertical {
|
||||
flex-direction: column;
|
||||
line-height: 1;
|
||||
padding: var(--padding);
|
||||
gap: calc(var(--padding) / 2);
|
||||
}
|
||||
|
||||
.button.vertical.fill {
|
||||
width: 100%;
|
||||
padding: var(--padding) 0;
|
||||
}
|
||||
|
||||
.button.vertical :global(svg) {
|
||||
stroke-width: 1.8px;
|
||||
color: var(--secondary);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -3,6 +3,7 @@
|
|||
|
||||
import SmallDialog from "$components/dialog/SmallDialog.svelte";
|
||||
import PickerDialog from "$components/dialog/PickerDialog.svelte";
|
||||
import SavingDialog from "$components/dialog/SavingDialog.svelte";
|
||||
|
||||
$: backdropVisible = $dialogs.length > 0;
|
||||
</script>
|
||||
|
|
@ -10,10 +11,13 @@
|
|||
<div id="dialog-holder">
|
||||
{#each $dialogs as dialog}
|
||||
{@const { type, ...data } = dialog}
|
||||
|
||||
{#if type === "small"}
|
||||
<SmallDialog {...data} />
|
||||
{:else if dialog.type === "picker"}
|
||||
{:else if type === "picker"}
|
||||
<PickerDialog {...data} />
|
||||
{:else if type === "saving"}
|
||||
<SavingDialog {...data} />
|
||||
{/if}
|
||||
{/each}
|
||||
<div id="dialog-backdrop" class:visible={backdropVisible}></div>
|
||||
|
|
|
|||
139
web/src/components/dialog/SavingDialog.svelte
Normal file
139
web/src/components/dialog/SavingDialog.svelte
Normal file
|
|
@ -0,0 +1,139 @@
|
|||
<script lang="ts">
|
||||
import { t } from "$lib/i18n/translations";
|
||||
|
||||
import { copyURL, openURL, shareURL } from "$lib/download";
|
||||
|
||||
import DialogContainer from "$components/dialog/DialogContainer.svelte";
|
||||
|
||||
import Meowbalt from "$components/misc/Meowbalt.svelte";
|
||||
import DialogButtons from "$components/dialog/DialogButtons.svelte";
|
||||
import DialogBackdropClose from "$components/dialog/DialogBackdropClose.svelte";
|
||||
import VerticalActionButton from "$components/buttons/VerticalActionButton.svelte";
|
||||
|
||||
import IconCopy from "@tabler/icons-svelte/IconCopy.svelte";
|
||||
import IconShare2 from "@tabler/icons-svelte/IconShare2.svelte";
|
||||
import IconDownload from "@tabler/icons-svelte/IconDownload.svelte";
|
||||
import IconFileDownload from "@tabler/icons-svelte/IconFileDownload.svelte";
|
||||
|
||||
export let id: string;
|
||||
export let url: string;
|
||||
|
||||
let close: () => void;
|
||||
</script>
|
||||
|
||||
<DialogContainer {id} bind:close>
|
||||
<div class="dialog-body popup-body">
|
||||
<div class="meowbalt-container">
|
||||
<Meowbalt emotion="question" />
|
||||
</div>
|
||||
<div class="dialog-inner-container">
|
||||
<div class="popup-header">
|
||||
<IconFileDownload />
|
||||
<h2 class="popup-title" tabindex="-1">
|
||||
{$t("dialog.saving.title")}
|
||||
</h2>
|
||||
</div>
|
||||
<div class="action-buttons">
|
||||
<VerticalActionButton
|
||||
id="save-download"
|
||||
fill
|
||||
elevated
|
||||
click={() => openURL(url)}
|
||||
>
|
||||
<IconDownload />
|
||||
{$t("dialog.button.download")}
|
||||
</VerticalActionButton>
|
||||
<VerticalActionButton
|
||||
id="save-share"
|
||||
fill
|
||||
elevated
|
||||
click={async () => await shareURL(url)}
|
||||
>
|
||||
<IconShare2 />
|
||||
{$t("dialog.button.share")}
|
||||
</VerticalActionButton>
|
||||
<VerticalActionButton
|
||||
id="save-copy"
|
||||
fill
|
||||
elevated
|
||||
click={async () => copyURL(url)}
|
||||
>
|
||||
<IconCopy />
|
||||
{$t("dialog.button.copy")}
|
||||
</VerticalActionButton>
|
||||
</div>
|
||||
</div>
|
||||
<DialogButtons
|
||||
buttons={[
|
||||
{
|
||||
text: $t("dialog.button.done"),
|
||||
main: true,
|
||||
action: () => {},
|
||||
},
|
||||
]}
|
||||
closeFunc={close}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<DialogBackdropClose closeFunc={close} />
|
||||
</DialogContainer>
|
||||
|
||||
<style>
|
||||
.popup-body,
|
||||
.dialog-inner-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--padding);
|
||||
}
|
||||
|
||||
.dialog-inner-container {
|
||||
overflow-y: scroll;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.popup-body {
|
||||
text-align: center;
|
||||
max-width: 340px;
|
||||
width: calc(100% - var(--padding) - var(--dialog-padding) * 2);
|
||||
max-height: 50%;
|
||||
margin: calc(var(--padding) / 2);
|
||||
}
|
||||
|
||||
.meowbalt-container {
|
||||
position: absolute;
|
||||
top: -126px;
|
||||
right: 0;
|
||||
/* simulate meowbalt being behind the popup */
|
||||
clip-path: inset(0px 0px 14px 0px);
|
||||
}
|
||||
|
||||
.popup-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: calc(var(--padding) / 2);
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
.popup-header :global(svg) {
|
||||
height: 21px;
|
||||
width: 21px;
|
||||
}
|
||||
|
||||
.popup-title {
|
||||
color: var(--secondary);
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
.popup-title:focus-visible {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: calc(var(--padding) / 2);
|
||||
overflow-x: scroll;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -21,11 +21,14 @@
|
|||
object-fit: cover;
|
||||
}
|
||||
|
||||
.think,
|
||||
.error {
|
||||
height: 160px;
|
||||
}
|
||||
|
||||
.question {
|
||||
height: 140px;
|
||||
}
|
||||
|
||||
.error {
|
||||
margin-left: 25px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,41 @@
|
|||
import { device } from "$lib/device";
|
||||
import { get } from "svelte/store";
|
||||
|
||||
export const downloadFile = (url: string) => {
|
||||
if (device.is.iOS) {
|
||||
return navigator?.share({ url }).catch(() => {});
|
||||
} else {
|
||||
import { app, device } from "$lib/device";
|
||||
import settings from "$lib/state/settings";
|
||||
|
||||
import { createDialog } from "$lib/dialogs";
|
||||
|
||||
export const openURL = (url: string) => {
|
||||
return window.open(url, "_blank");
|
||||
}
|
||||
};
|
||||
|
||||
export const shareURL = async (url: string) => {
|
||||
try {
|
||||
return await navigator?.share({ url });
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
export const copyURL = async (url: string) => {
|
||||
try {
|
||||
return await navigator?.clipboard.writeText(url);
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
export const downloadFile = (url: string) => {
|
||||
const savingPreference = get(settings).save.downloadPopup;
|
||||
if (savingPreference) {
|
||||
createDialog({
|
||||
type: "saving",
|
||||
id: "saving",
|
||||
url
|
||||
})
|
||||
} else if (device.is.iOS && app.is.installed) {
|
||||
return shareURL(url);
|
||||
} else {
|
||||
return openURL(url);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,6 @@ export type DialogPickerItem = {
|
|||
|
||||
type Dialog = {
|
||||
id: string,
|
||||
buttons?: DialogButton[],
|
||||
};
|
||||
|
||||
type SmallDialog = Dialog & {
|
||||
|
|
@ -27,11 +26,18 @@ type SmallDialog = Dialog & {
|
|||
title?: string,
|
||||
bodyText?: string,
|
||||
bodySubText?: string,
|
||||
buttons?: DialogButton[],
|
||||
};
|
||||
|
||||
type PickerDialog = Dialog & {
|
||||
type: "picker",
|
||||
items?: DialogPickerItem[],
|
||||
buttons?: DialogButton[],
|
||||
};
|
||||
|
||||
export type DialogInfo = SmallDialog | PickerDialog;
|
||||
type SavingDialog = Dialog & {
|
||||
type: "saving",
|
||||
url: string,
|
||||
};
|
||||
|
||||
export type DialogInfo = SmallDialog | PickerDialog | SavingDialog;
|
||||
|
|
|
|||
Loading…
Reference in a new issue