mirror of
https://github.com/imputnet/cobalt.git
synced 2024-12-29 11:06:10 +00:00
web/SavingDialog: add ios saving tutorial
This commit is contained in:
wukko
parent
a613f1402d
commit
53eb052fe6
|
|
@ -5,5 +5,8 @@
|
|||
"download.think": "processing the link...",
|
||||
"download.check": "verifying download...",
|
||||
"download.done": "downloading done",
|
||||
"download.error": "downloading error"
|
||||
"download.error": "downloading error",
|
||||
|
||||
"tutorial.shortcut.photos": "add photos shortcut",
|
||||
"tutorial.shortcut.files": "add files shortcut"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,5 +10,14 @@
|
|||
"services.title": "supported services",
|
||||
"services.title_show": "show supported services",
|
||||
"services.title_hide": "hide supported services",
|
||||
"services.disclaimer": "cobalt is not affiliated with any of the services listed above."
|
||||
"services.disclaimer": "cobalt is not affiliated with any of the services listed above.",
|
||||
|
||||
"tutorial.title": "how to save on ios?",
|
||||
"tutorial.intro": "to save media conveniently on ios, you'll need to use a companion siri shortcut from the share sheet.",
|
||||
"tutorial.step.1": "add companion siri shortcuts:",
|
||||
"tutorial.step.2": "press the \"share\" button in cobalt's saving dialog.",
|
||||
"tutorial.step.3": "select the respective shortcut in the share sheet.",
|
||||
"tutorial.outro": "these shortcuts will work only from the cobalt app, sharing links from other apps will not work.",
|
||||
"tutorial.shortcut.photos": "to photos",
|
||||
"tutorial.shortcut.files": "to files"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
|
||||
import Meowbalt from "$components/misc/Meowbalt.svelte";
|
||||
import DialogButtons from "$components/dialog/DialogButtons.svelte";
|
||||
import SavingTutorial from "$components/dialog/SavingTutorial.svelte";
|
||||
import VerticalActionButton from "$components/buttons/VerticalActionButton.svelte";
|
||||
|
||||
import IconShare2 from "@tabler/icons-svelte/IconShare2.svelte";
|
||||
|
|
@ -15,7 +16,6 @@
|
|||
import IconFileDownload from "@tabler/icons-svelte/IconFileDownload.svelte";
|
||||
|
||||
import CopyIcon from "$components/misc/CopyIcon.svelte";
|
||||
|
||||
export let id: string;
|
||||
export let url: string;
|
||||
export let bodyText: string = "";
|
||||
|
|
@ -37,6 +37,7 @@
|
|||
<div class="meowbalt-container">
|
||||
<Meowbalt emotion="question" />
|
||||
</div>
|
||||
|
||||
<div class="dialog-inner-container">
|
||||
<div class="popup-header">
|
||||
<IconFileDownload />
|
||||
|
|
@ -83,13 +84,17 @@
|
|||
{$t("button.copy")}
|
||||
</VerticalActionButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if bodyText}
|
||||
<div class="body-text">
|
||||
{bodyText}
|
||||
</div>
|
||||
{/if}
|
||||
{#if device.is.iOS}
|
||||
<SavingTutorial />
|
||||
{/if}
|
||||
|
||||
{#if bodyText}
|
||||
<div class="body-text">
|
||||
{bodyText}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<DialogButtons
|
||||
buttons={[
|
||||
|
|
@ -121,7 +126,7 @@
|
|||
.popup-body {
|
||||
max-width: 340px;
|
||||
width: calc(100% - var(--padding) - var(--dialog-padding) * 2);
|
||||
max-height: 50%;
|
||||
max-height: 70%;
|
||||
margin: calc(var(--padding) / 2);
|
||||
}
|
||||
|
||||
|
|
@ -159,7 +164,7 @@
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: calc(var(--padding) / 2);
|
||||
overflow-x: scroll;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.body-text {
|
||||
|
|
|
|||
160
web/src/components/dialog/SavingTutorial.svelte
Normal file
160
web/src/components/dialog/SavingTutorial.svelte
Normal file
|
|
@ -0,0 +1,160 @@
|
|||
<script lang="ts">
|
||||
import { siriShortcuts } from "$lib/env";
|
||||
import { t } from "$lib/i18n/translations";
|
||||
|
||||
import IconPlus from "@tabler/icons-svelte/IconPlus.svelte";
|
||||
import IconFlower from "@tabler/icons-svelte/IconFlower.svelte";
|
||||
import IconFolder from "@tabler/icons-svelte/IconFolder.svelte";
|
||||
|
||||
let tutorialExpanded = false;
|
||||
</script>
|
||||
|
||||
<div id="saving-tutorial" class:expanded={tutorialExpanded}>
|
||||
<button
|
||||
id="tutorial-button"
|
||||
class="button elevated"
|
||||
on:click={() => {
|
||||
tutorialExpanded = !tutorialExpanded;
|
||||
}}
|
||||
>
|
||||
<div class="expand-icon">
|
||||
<IconPlus />
|
||||
</div>
|
||||
{$t("save.tutorial.title")}
|
||||
</button>
|
||||
|
||||
{#if tutorialExpanded}
|
||||
<div class="body-text tutorial-body">
|
||||
<div>
|
||||
{$t("save.tutorial.intro")}
|
||||
</div>
|
||||
|
||||
<div class="numbered-list">
|
||||
<li>
|
||||
{$t("save.tutorial.step.1")}
|
||||
<div class="shortcut-list">
|
||||
<a
|
||||
class="button elevated shortcut"
|
||||
href={siriShortcuts.photos}
|
||||
aria-label={$t(
|
||||
"a11y.save.tutorial.shortcut.photos"
|
||||
)}
|
||||
>
|
||||
<IconFlower />
|
||||
{$t("save.tutorial.shortcut.photos")}
|
||||
</a>
|
||||
<a
|
||||
class="button elevated shortcut"
|
||||
href={siriShortcuts.files}
|
||||
aria-label={$t(
|
||||
"a11y.save.tutorial.shortcut.files"
|
||||
)}
|
||||
>
|
||||
<IconFolder />
|
||||
{$t("save.tutorial.shortcut.files")}
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
{$t("save.tutorial.step.2")}
|
||||
</li>
|
||||
<li>
|
||||
{$t("save.tutorial.step.3")}
|
||||
</li>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{$t("save.tutorial.outro")}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#saving-tutorial {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--button-elevated);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
#tutorial-button {
|
||||
font-size: 13px;
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.expand-icon {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.expand-icon :global(svg) {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
stroke-width: 2px;
|
||||
color: var(--secondary);
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.expanded .expand-icon {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.tutorial-body *:not(.shortcut) {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
white-space: pre-wrap;
|
||||
user-select: text;
|
||||
-webkit-user-select: text;
|
||||
}
|
||||
|
||||
.tutorial-body {
|
||||
color: var(--secondary);
|
||||
padding: var(--padding);
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
.tutorial-body,
|
||||
.numbered-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--padding);
|
||||
}
|
||||
|
||||
.numbered-list {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
.numbered-list li {
|
||||
margin-block: 0;
|
||||
}
|
||||
|
||||
.shortcut-list {
|
||||
display: flex;
|
||||
padding-top: 6px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.shortcut {
|
||||
flex-direction: column;
|
||||
background: var(--button-elevated-hover);
|
||||
width: 100%;
|
||||
gap: 3px;
|
||||
text-decoration: none;
|
||||
font-size: 13px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.shortcut :global(svg) {
|
||||
height: 21px;
|
||||
width: 21px;
|
||||
stroke-width: 1.5px;
|
||||
stroke: var(--secondary);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -43,7 +43,12 @@ const donate = {
|
|||
}
|
||||
};
|
||||
|
||||
const siriShortcuts = {
|
||||
photos: "https://www.icloud.com/shortcuts/14e9aebf04b24156acc34ceccf7e6fcd",
|
||||
files: "https://www.icloud.com/shortcuts/2134cd9d4d6b41448b2201f933542b2e",
|
||||
}
|
||||
|
||||
const apiURL = "https://api.cobalt.tools";
|
||||
|
||||
export { donate, apiURL, contacts, partners };
|
||||
export { donate, apiURL, contacts, partners, siriShortcuts };
|
||||
export default variables;
|
||||
|
|
|
|||
Loading…
Reference in a new issue