blitzwing/cobalt-7
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

web/SavingDialog: add ios saving tutorial

Browse source
This commit is contained in:
wukko 2024-09-09 00:10:21 +06:00
parent a613f1402d
commit 53eb052fe6
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
5 changed files with 194 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
web/i18n/en/a11y/save.json
View file

@ -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"
}

11
web/i18n/en/save.json
View file

@ -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"
}

23
web/src/components/dialog/SavingDialog.svelte
View file

@ -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
View 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>

7
web/src/lib/env.ts
View file

@ -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;