leomurca/embroidery-viewer
leomurca/embroidery-viewer
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Create FileList component

Browse source
This commit is contained in:
Leonardo Murça 2022-11-18 12:11:06 -03:00
parent 70edf6f11e
commit 5f8b7415a7
3 changed files with 48 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/lib/CardList.svelte
View file

@ -5,15 +5,17 @@
let canvasRefs = []; let canvasRefs = [];
</script> </script>
<div id="container" style="width: 100%; heigth: 100vh;"> {#if files.length !== 0}
{#each Array.from(files) as file, i} <div id="container" style="width: 100%; heigth: 100vh;">
<div class="canvas-container"> {#each Array.from(files) as file, i}
<canvas bind:this={canvasRefs[i]} class="canvas" /> <div class="canvas-container">
<p>{file.name}</p> <canvas bind:this={canvasRefs[i]} class="canvas" />
</div> <p>{file.name}</p>
{canvasRefs[i] && startFileRead(file, canvasRefs[i])} </div>
{/each} {canvasRefs[i] && startFileRead(file, canvasRefs[i])}
</div> {/each}
</div>
{/if}
<style> <style>
#container { #container {

33
src/lib/FileList.svelte Normal file
View file

@ -0,0 +1,33 @@
<script>
export let files = [];
</script>
{#if files.length !== 0}
<div id="selected-files-container">
<h2>Selected files:</h2>
{#each Array.from(files) as file}
<div id="selected-file-card">
<p>{file.name} ({file.size / 1000} kb)</p>
</div>
{/each}
</div>
{/if}
<style>
#selected-file-card {
border: 1px solid #000;
width: 500px;
padding-left: 15px;
margin-top: 10px;
}
@media only screen and (max-device-width: 812px) {
#selected-files-container {
width: 100%;
}
#selected-file-card {
width: 100%;
}
}
</style>

31
src/lib/FileViewer.svelte
View file

@ -1,5 +1,6 @@
<script> <script>
import CardList from "./CardList.svelte"; import CardList from "./CardList.svelte";
import FileList from "./FileList.svelte";
let files; let files;
let filesRendered = false; let filesRendered = false;
@ -82,19 +83,10 @@
<input type="submit" value="Render files" /> <input type="submit" value="Render files" />
</form> </form>
{#if files && files.length !== 0 && !filesRendered} {#if filesRendered}
<div id="selected-files-container">
<h2>Selected files:</h2>
{#each Array.from(files) as file}
<div id="selected-file-card">
<p>{file.name} ({file.size / 1000} kb)</p>
</div>
{/each}
</div>
{/if}
{#if files && files.length !== 0 && filesRendered}
<CardList {files} /> <CardList {files} />
{:else}
<FileList {files} />
{/if} {/if}
<style> <style>
@ -116,13 +108,6 @@
display: none; display: none;
} }
#selected-file-card {
border: 1px solid #000;
width: 500px;
padding-left: 15px;
margin-top: 10px;
}
#dropzone:hover { #dropzone:hover {
cursor: pointer; cursor: pointer;
border: 5px dotted #05345f; border: 5px dotted #05345f;
@ -137,13 +122,5 @@
#dropzone { #dropzone {
width: 100%; width: 100%;
} }
#selected-files-container {
width: 100%;
}
#selected-file-card {
width: 100%;
}
} }
</style> </style>