frame preview component

This commit is contained in:
AnActualEmerald 2022-09-01 01:08:38 -04:00
parent aae2047f44
commit b789cc6917
Signed by: emerald
GPG Key ID: CC76D6B296CAC8B0
7 changed files with 67 additions and 13 deletions

41
package-lock.json generated
View File

@ -15,6 +15,7 @@
"@tauri-apps/cli": "^1.0.5",
"@tsconfig/svelte": "^3.0.0",
"@types/node": "^18.7.10",
"sass": "^1.54.8",
"svelte": "^3.49.0",
"svelte-check": "^2.8.0",
"svelte-preprocess": "^4.10.7",
@ -968,6 +969,12 @@
"node": ">= 0.4.0"
}
},
"node_modules/immutable": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
"integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==",
"dev": true
},
"node_modules/import-fresh": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@ -1392,6 +1399,23 @@
"rimraf": "^2.5.2"
}
},
"node_modules/sass": {
"version": "1.54.8",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.54.8.tgz",
"integrity": "sha512-ib4JhLRRgbg6QVy6bsv5uJxnJMTS2soVcCp9Y88Extyy13A8vV0G1fAwujOzmNkFQbR3LvedudAMbtuNRPbQww==",
"dev": true,
"dependencies": {
"chokidar": ">=3.0.0 <4.0.0",
"immutable": "^4.0.0",
"source-map-js": ">=0.6.2 <2.0.0"
},
"bin": {
"sass": "sass.js"
},
"engines": {
"node": ">=12.0.0"
}
},
"node_modules/sorcery": {
"version": "0.10.0",
"resolved": "https://registry.npmjs.org/sorcery/-/sorcery-0.10.0.tgz",
@ -2200,6 +2224,12 @@
"function-bind": "^1.1.1"
}
},
"immutable": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
"integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==",
"dev": true
},
"import-fresh": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@ -2489,6 +2519,17 @@
"rimraf": "^2.5.2"
}
},
"sass": {
"version": "1.54.8",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.54.8.tgz",
"integrity": "sha512-ib4JhLRRgbg6QVy6bsv5uJxnJMTS2soVcCp9Y88Extyy13A8vV0G1fAwujOzmNkFQbR3LvedudAMbtuNRPbQww==",
"dev": true,
"requires": {
"chokidar": ">=3.0.0 <4.0.0",
"immutable": "^4.0.0",
"source-map-js": ">=0.6.2 <2.0.0"
}
},
"sorcery": {
"version": "0.10.0",
"resolved": "https://registry.npmjs.org/sorcery/-/sorcery-0.10.0.tgz",

View File

@ -14,15 +14,16 @@
"@tauri-apps/api": "^1.0.2"
},
"devDependencies": {
"@types/node": "^18.7.10",
"@sveltejs/vite-plugin-svelte": "^1.0.1",
"@tauri-apps/cli": "^1.0.5",
"@tsconfig/svelte": "^3.0.0",
"@types/node": "^18.7.10",
"sass": "^1.54.8",
"svelte": "^3.49.0",
"svelte-check": "^2.8.0",
"svelte-preprocess": "^4.10.7",
"tslib": "^2.4.0",
"typescript": "^4.6.4",
"vite": "^3.0.2",
"@tauri-apps/cli": "^1.0.5"
"vite": "^3.0.2"
}
}

View File

@ -15,7 +15,7 @@ tauri-build = { version = "1.0.0", features = [] }
[dependencies]
serde_json = "1.0"
serde = { version = "1.0", features = ["derive"] }
tauri = { version = "1.0.0", features = ["fs-create-dir", "fs-read-dir", "fs-read-file", "fs-write-file", "macos-private-api", "window-set-decorations"] }
tauri = { version = "1.0.0", features = ["fs-create-dir", "fs-read-dir", "fs-read-file", "fs-write-file", "macos-private-api", "window-minimize", "window-set-max-size", "window-set-min-size", "window-unminimize"] }
cpal = "0.14.0"
ray_format = {path = "../ray_format", version = "~0.1.0"}

View File

@ -20,7 +20,10 @@
"writeFile": true
},
"window": {
"setDecorations": true
"setMinSize": true,
"setMaxSize": true,
"minimize": true,
"unminimize": true
}
},
"bundle": {

View File

@ -5,7 +5,7 @@
</script>
<main style:background-color="blue">
<main style:background-color="lightblue">
<MainView />
</main>

View File

@ -1,11 +1,13 @@
<script lang="ts">
import { appWindow } from "@tauri-apps/api/window";
import { appWindow, PhysicalSize } from "@tauri-apps/api/window";
import { onMount } from "svelte";
import { fly } from "svelte/transition";
import FramePreview from "../components/FramePreview.svelte";
let transparent = false;
onMount(async () => {
await appWindow.setMinSize(new PhysicalSize(720, 600));
await appWindow.onFocusChanged(({ payload: focused }) => {
transparent = !focused;
});
@ -15,19 +17,23 @@
<div class="container" class:transparent>
{#if !transparent}
<div transition:fly="{{ duration: 200, x: -200, opacity: 100}}" class="frames" >
<p> 1 </p>
<p> 2 </p>
<p> 3 </p>
<p> 4 </p>
{#each [0, 1, 2, 3] as i}
<FramePreview index={i} />
{/each}
</div>
{/if}
</div>
<style>
.frames {
align-items: left;
position: absolute;
top: 20px;
left: 20px;
top: 5vh;
left: 30px;
bottom: 5vh;
display: flex;
justify-content: space-between;
flex-direction: column;
}

View File

@ -4,4 +4,7 @@ export default {
// Consult https://github.com/sveltejs/svelte-preprocess
// for more information about preprocessors
preprocess: sveltePreprocess(),
css: css => {
css.write('public/bundle.css');
}
};