cupcakearmy/ora
1
0
Fork 0
mirror of https://github.com/cupcakearmy/ora.git synced 2024-12-22 08:06:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

options now on svelte too

Browse Source
This commit is contained in:
cupcakearmy 2020-09-19 01:58:28 +02:00
parent 1bd1913145
commit c7d89a598d
No known key found for this signature in database
GPG Key ID: D28129AE5654D9D9
4 changed files with 75 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/options/App.svelte Normal file
View File

@ -0,0 +1,54 @@
<script>
import { onMount } from 'svelte'
import browser from 'webextension-polyfill'
import { dashboard } from '../shared/utils'
const DEFAULT = {
retention: 90,
}
let settings = DEFAULT
onMount(async () => {
load()
})
async function load() {
settings = {
...DEFAULT,
...(await browser.storage.local.get()),
}
}
function save() {
return browser.storage.local.set(settings)
}
async function reset() {
await browser.storage.local.clear()
await load()
}
</script>
<main class="p-4">
<a href={dashboard} target="_blank"><button class="btn btn-primary btn-lg">Dashboard</button></a>
<form class="max-w-sm mt-5" on:submit|preventDefault={save}>
<div class="form-group">
<label class="form-label">
Retention <small>(Days)</small>
<input
id="retention"
class="form-input"
type="number"
min="3"
max="365"
step="1"
bind:value={settings.retention} />
</label>
<button type="reset" class="btn" on:click={reset}>Reset</button>
<button type="submit" class="btn btn-primary">Save</button>
</div>
</form>
</main>

7
src/options/main.css
View File

@ -1,7 +0,0 @@
main {
padding: 2em 1em;
}
form {
max-width: 25em;
}

18
src/shared/index.html Normal file
View File

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link href="../../node_modules/spectre.css/dist/spectre.min.css" rel="stylesheet" />
<link href="../../node_modules/tailwindcss/dist/tailwind.css" rel="stylesheet" />
<style>
#root {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<div id="root" />
<script src="./main.js"></script>
</body>
</html>

3
src/shared/main.js Normal file
View File

@ -0,0 +1,3 @@
import App from './App.svelte'
new App({ target: window.document.getElementById('root') })