sudacode/mokuro-reader
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Start implementing new styles

Browse Source
This commit is contained in:
ZXY101
2023-09-05 10:03:44 +02:00
parent 3f17b601e5
commit 90796e4ae9
5 changed files with 95 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/lib/components/Button.svelte
View File

@@ -1,50 +0,0 @@
<script lang="ts">
type ButtonType = 'primary' | 'secondary' | 'tertiary' | 'danger';
export let variant: ButtonType = 'primary';
</script>
<button class={variant} {...$$restProps} on:click>
<slot />
</button>
<style lang="scss">
@mixin button(
$bg-color: $primary-color,
$color: $secondary-color,
$active-color: $primary-accent-color
) {
border-style: none;
border-radius: 6px;
padding: 2px 10px 2px 10px;
font-family: $font-family;
height: 40px;
max-height: 40px;
font-weight: bold;
color: $color;
border: 1px solid;
background-color: $bg-color;
&:hover {
cursor: pointer;
}
&:active {
background-color: $active-color;
}
}
.primary {
@include button();
}
.secondary {
@include button($secondary-color, $primary-color, $secondary-accent-color);
}
.tertiary {
@include button(transparent, $secondary-color, $primary-accent-color);
}
.danger {
@include button($danger-accent-color, $danger-color, $danger-active-color);
}
</style>

82
src/lib/components/NavBar.svelte
View File

@@ -1,14 +1,39 @@
<script lang="ts"> <script lang="ts">
import { Navbar, NavBrand, Modal, Button } from 'flowbite-svelte'; import {
import { UserSettingsSolid, UploadSolid } from 'flowbite-svelte-icons'; Navbar,
NavBrand,
Modal,
Drawer,
Button,
CloseButton,
Checkbox,
Toggle,
Select,
Input,
Label
} from 'flowbite-svelte';
import {
UserSettingsSolid,
UploadSolid,
InfoCircleSolid,
ArrowRightOutline
} from 'flowbite-svelte-icons';
import FileUpload from './FileUpload.svelte'; import FileUpload from './FileUpload.svelte';
import { processFiles } from '$lib/upload'; import { processFiles } from '$lib/upload';
import { afterNavigate } from '$app/navigation'; import { afterNavigate } from '$app/navigation';
import { page } from '$app/stores'; import { page } from '$app/stores';
import { sineIn } from 'svelte/easing';
let transitionParams = {
x: 320,
duration: 200,
easing: sineIn
};
let promise: Promise<void>; let promise: Promise<void>;
let modal = false; let modal = false;
let isReader = false; let drawer = true;
let isReader = true;
async function onUpload(files: FileList) { async function onUpload(files: FileList) {
promise = processFiles(files).then(() => { promise = processFiles(files).then(() => {
@@ -19,6 +44,14 @@
afterNavigate(() => { afterNavigate(() => {
isReader = $page.route.id === '/[manga]/[volume]'; isReader = $page.route.id === '/[manga]/[volume]';
}); });
let selected = 'us';
let countries = [
{ value: 'us', name: 'auto' },
{ value: 'ca', name: 'Canada' },
{ value: 'fr', name: 'France' }
];
</script> </script>
<div class="relative z-10"> <div class="relative z-10">
@@ -27,12 +60,51 @@
<span class="text-xl font-semibold dark:text-white">Mokuro</span> <span class="text-xl font-semibold dark:text-white">Mokuro</span>
</NavBrand> </NavBrand>
<div class="flex md:order-2 gap-5"> <div class="flex md:order-2 gap-5">
<UserSettingsSolid class="hover:text-cyan-300" /> <UserSettingsSolid class="hover:text-primary-700" on:click={() => (drawer = false)} />
<UploadSolid class="hover:text-cyan-300" on:click={() => (modal = true)} /> <UploadSolid class="hover:text-primary-700" on:click={() => (modal = true)} />
</div> </div>
</Navbar> </Navbar>
{#if isReader}
<UserSettingsSolid
class="hover:text-primary-700 absolute right-5 top-5 opacity-10 hover:opacity-100"
on:click={() => (drawer = false)}
/>
{/if}
</div> </div>
<Drawer
placement="right"
transitionType="fly"
width="lg:w-1/4 md:w-1/2 w-full"
{transitionParams}
bind:hidden={drawer}
id="sidebar1"
>
<div class="flex items-center">
<h5 id="drawer-label" class="inline-flex items-center mb-4 text-base font-semibold">
<UserSettingsSolid class="w-4 h-4 mr-2.5" />Settings
</h5>
<CloseButton on:click={() => (drawer = true)} class="mb-4 dark:text-white" />
</div>
<div class="flex flex-col gap-5">
<Toggle size="small">Right to left</Toggle>
<Toggle size="small">Display two pages</Toggle>
<Toggle size="small">First page is cover</Toggle>
<Toggle size="small">OCR enabled</Toggle>
<Toggle size="small">Display box outlines</Toggle>
<Toggle size="small">Editable text</Toggle>
<Toggle size="small">Toggle boxes on click</Toggle>
<div>
<Label>Fontsize:</Label>
<Select items={countries} bind:value={selected} />
</div>
<div>
<Label>Background color:</Label>
<Input type="color" />
</div>
</div>
</Drawer>
<Modal title="Upload" bind:open={modal} outsideclose> <Modal title="Upload" bind:open={modal} outsideclose>
{#await promise} {#await promise}
<h2 class="justify-center flex">Loading...</h2> <h2 class="justify-center flex">Loading...</h2>

28
src/lib/components/Reader/MangaPage.svelte
View File

@@ -2,6 +2,8 @@
import type { Page } from '$lib/types'; import type { Page } from '$lib/types';
export let page: Page; export let page: Page;
export let left: () => void;
export let right: () => void;
let bold = false; let bold = false;
@@ -38,14 +40,10 @@
return textBox; return textBox;
}); });
export let src; export let src: Blob;
</script> </script>
<div style:--bold={fontWeight}> <div>
<div class="bold">
<label>Bold</label>
<input bind:checked={bold} type="checkbox" placeholder="????" />
</div>
<img draggable="false" src={URL.createObjectURL(src)} alt="img" /> <img draggable="false" src={URL.createObjectURL(src)} alt="img" />
{#each textBoxes as { left, top, width, height, lines, fontSize, writingMode }} {#each textBoxes as { left, top, width, height, lines, fontSize, writingMode }}
<div <div
@@ -63,6 +61,16 @@
</div> </div>
<div /> <div />
{/each} {/each}
<button
on:click={left}
class={`left-0 top-0 absolute h-full w-[200%]`}
style:margin-left={page.img_width * -2 + 'px'}
/>
<button
on:click={right}
class={`right-0 top-0 absolute h-full w-[200%]`}
style:margin-right={page.img_width * -2 + 'px'}
/>
</div> </div>
<style> <style>
@@ -71,14 +79,6 @@
margin: 0 auto; margin: 0 auto;
} }
.bold {
position: absolute;
color: #000;
right: 10px;
bottom: 10px;
z-index: 99;
}
.text-box { .text-box {
color: black; color: black;
padding: 0; padding: 0;

23
src/lib/components/Reader/Reader.svelte
View File

@@ -1,7 +1,6 @@
<script lang="ts"> <script lang="ts">
import { currentManga, currentVolume } from '$lib/catalog'; import { currentVolume } from '$lib/catalog';
import Button from '$lib/components/Button.svelte'; import { Panzoom } from '$lib/panzoom';
import { Panzoom, zoomOriginal } from '$lib/panzoom';
import MangaPage from './MangaPage.svelte'; import MangaPage from './MangaPage.svelte';
const volume = $currentVolume; const volume = $currentVolume;
@@ -19,22 +18,8 @@
} }
</script> </script>
{#if volume} {#if volume && pages}
<div>
<Button on:click={zoomOriginal}>Reset Zoom</Button>
<Button on:click={left}>{'<'}</Button>
<Button on:click={right}>{'>'}</Button>
</div>
<Panzoom> <Panzoom>
<MangaPage page={pages[page - 1]} src={Object.values(volume?.files)[page - 1]} /> <MangaPage page={pages[page - 1]} src={Object.values(volume?.files)[page - 1]} {left} {right} />
</Panzoom> </Panzoom>
{/if} {/if}
<style>
div {
position: absolute;
bottom: 10px;
left: 10px;
z-index: 1;
}
</style>

16
src/lib/components/Snackbar.svelte
View File

@@ -1,24 +1,8 @@
<script lang="ts"> <script lang="ts">
import { snackbarStore } from '$lib/util/snackbar'; import { snackbarStore } from '$lib/util/snackbar';
import { Toast } from 'flowbite-svelte'; import { Toast } from 'flowbite-svelte';
import { CheckCircleSolid, FireOutline } from 'flowbite-svelte-icons';
import { fade, fly } from 'svelte/transition';
</script> </script>
{#if $snackbarStore?.message && $snackbarStore?.visible} {#if $snackbarStore?.message && $snackbarStore?.visible}
<Toast position="bottom-right">{$snackbarStore?.message}</Toast> <Toast position="bottom-right">{$snackbarStore?.message}</Toast>
{/if} {/if}
<style lang="scss">
div {
position: fixed;
right: 10px;
bottom: 10px;
padding: 20px;
border-radius: 6px;
border: 1px solid $secondary-color;
min-width: 250px;
display: flex;
z-index: 2;
}
</style>