Initial commit

This commit is contained in:
a 2020-08-20 22:54:14 +02:00
parent 9ede15c7b3
commit 7e66e27163
5 changed files with 153 additions and 0 deletions

View file

@ -1 +1,2 @@
*.svelte *.svelte
*.scss

18
src/frontend/common.scss Normal file
View file

@ -0,0 +1,18 @@
@mixin button {
cursor: pointer;
color: var(--text-color-3);
}
@mixin button_green {
background-color: var(--green-1);
&:hover {
background-color: var(--green-2);
}
}
@mixin button_red {
background-color: var(--red-1);
&:hover {
background-color: var(--red-2);
}
}

View file

@ -0,0 +1,62 @@
<script lang="ts">
import { Trash2Icon, EditIcon } from "svelte-feather-icons";
import { getContext } from "svelte";
import type { Flashcards } from "../../background/database";
export let cardID: IDBValidKey;
const flashcardDB = getContext<Flashcards>("flashcardDB");
$: cardPromise = flashcardDB.getCard(cardID);
</script>
<div class="container">
{#await cardPromise then card}
{#if card}
<div class="translation">
<p>{card.src}</p>
<p>{card.result}</p>
</div>
<div class="buttons">
<button class="edit">
<EditIcon />
</button>
<button class="delete">
<Trash2Icon />
</button>
</div>
{/if}
{/await}
</div>
<style lang="scss">
@use "../common";
.container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1em;
margin: 0.1em;
height: 100%;
width: calc(100%-1vw);
background-color: var(--background-color-3);
font-family: sans-serif;
}
.buttons {
display: flex;
}
button {
@include common.button;
border: 0;
height: 3em;
width: 3em;
margin: 0.3em;
border-radius: 2px;
&.edit {
@include common.button_green;
}
&.delete {
@include common.button_red;
}
}
</style>

View file

@ -0,0 +1,70 @@
<script lang="ts">
import { browser } from "webextension-polyfill-ts";
import { setContext } from "svelte";
import VirtualList from "@sveltejs/svelte-virtual-list";
import Flashcard from "./Flashcard.svelte";
/*
const onCardChange = (card: Flashcard, change: "added" | "removed") => {
switch(change){
case "added":
cards.unshift(card);
cards = cards
return
case "removed":
cards = cards.filter((c) => c.id == card.id);
default:
}
console.log(card,change);
}
*/
let cards: IDBValidKey[] = [];
(async () => {
const backgroundPage = await browser.runtime.getBackgroundPage();
const flashcardDB = backgroundPage.flashcardDB;
cards = await flashcardDB.getAllKeys();
//flashcardDB.addChangeCallback(onCardChange);
//window.addEventListener("beforeunload", () => flashcardDB.removeChangeCallback(onCardChange));
setContext("flashcardDB", flashcardDB);
})();
</script>
<main>
<div class="list-container">
<VirtualList items={cards} let:item>
<Flashcard cardID={item} />
</VirtualList>
</div>
</main>
<style lang="scss">
@use "../color_scheme.scss";
:global(html, body) {
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
margin: 0;
background-color: var(--background-color-4);
}
main {
display: flex;
flex-direction: column;
width: 600px;
max-width: 100vw;
min-height: 94vh;
background-color: var(--background-color-1);
padding: 1em;
color: var(--text-color-1);
}
.list-container {
background-color: var(--background-color-2);
height: 100%;
}
</style>

View file

@ -0,0 +1,2 @@
import App from "./Options.svelte";
new App({ target: document.body });