frame preview component
parent
aae2047f44
commit
b789cc6917
|
@ -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",
|
||||
|
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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"}
|
||||
|
||||
|
|
|
@ -20,7 +20,10 @@
|
|||
"writeFile": true
|
||||
},
|
||||
"window": {
|
||||
"setDecorations": true
|
||||
"setMinSize": true,
|
||||
"setMaxSize": true,
|
||||
"minimize": true,
|
||||
"unminimize": true
|
||||
}
|
||||
},
|
||||
"bundle": {
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
</script>
|
||||
|
||||
<main style:background-color="blue">
|
||||
<main style:background-color="lightblue">
|
||||
<MainView />
|
||||
</main>
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
@ -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');
|
||||
}
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue