Skip to content

Commit

Permalink
feat(20%): studio (@vue-motion/app)
Browse files Browse the repository at this point in the history
  • Loading branch information
@sheepbox8646
sheepbox8646 committed Oct 2, 2024
1 parent e6f67e4 commit d5cd2c3
Show file tree
Hide file tree
Showing 15 changed files with 172 additions and 1,150 deletions.
4 changes: 1 addition & 3 deletions packages/app/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,11 @@
"preview": "vite preview"
},
"dependencies": {
"@primevue/themes": "^4.0.5",
"@vue-motion/core": "latest",
"@vue-motion/lib": "latest",
"autoprefixer": "^10.4.20",
"font-awesome": "^4.7.0",
"postcss": "^8.4.41",
"primeicons": "^7.0.0",
"primevue": "^4.0.5",
"tailwindcss": "^3.4.10",
"vue": "^3.4.37",
"vue-router": "^4.4.3"
Expand Down
138 changes: 8 additions & 130 deletions packages/app/src/App.vue
View file
Original file line number Diff line number Diff line change
@@ -1,137 +1,15 @@
<script setup lang="ts">
import Menubar from 'primevue/menubar'
import { provide, ref } from 'vue'
import Panel from 'primevue/panel'
import LeftList from './components/LeftList.vue'
import WidgetList from './components/WidgetList.vue'
import Timeline from './components/TimeLine.vue'
import Tools from './components/Tools.vue'
import Preview from './components/Preview.vue'
const scale = ref(1)
const options = ref([
{
label: 'File',
icon: 'pi pi-file',
items: [
{
label: 'Render',
},
{
label: 'Open in VSCode',
},
],
},
{
label: 'View',
icon: 'pi pi-expand',
items: [
{
label: 'Theme',
items: [
{
label: 'Light',
},
{
label: 'Dark',
},
],
},
{
label: 'Zoom In',
command() {
scale.value += 0.1
},
},
{
label: 'Zoom Out',
command() {
scale.value -= 0.1
},
},
],
},
{
label: 'Extensions',
icon: 'pi pi-box',
items: [
{
label: 'Add Extension',
},
],
},
{
label: 'Help',
icon: 'pi pi-question-circle',
items: [
{
label: 'About',
},
{
label: 'Documentation',
},
{
label: 'Report Issue',
},
{
label: 'Support',
},
{
label: 'GitHub',
},
],
},
])
provide('playing', ref(false))
import Preview from './components/Preview.vue';
import Tools from './components/Tools.vue';
import TopMenubar from './components/TopMenubar.vue';
</script>

<template>
<div class="w-screen h-screen">
<div class="flex flex-col h-full">
<Menubar class="w-full h-8" :model="options" breakpoint="100px" />
<div
class="h-4/5 flex justify-center"
:style="{ height: 'calc((100% - 5rem) / 3 * 2)' }"
>
<div class="w-1/4 h-full border-r">
<LeftList />
</div>
<div class="w-3/4 border-1 overflow-auto preview-container items-center justify-center">
<Preview
:style="{
scale,
}"
/>
</div>
</div>
<Tools />
<div
class="flex flex-row w-full"
:style="{ height: 'calc((100% - 5rem) / 3)' }"
>
<Panel class="w-1/4 border h-full">
<WidgetList
:list="[
{
name: 'Widget 1',
},
]"
class="h-full"
/>
</Panel>
<Panel class="w-3/4 border">
<Timeline />
</Panel>
</div>
<TopMenubar />
<div class="h-full w-full">
<Preview :width="1600" :height="900"/>
<Tools/>
</div>
</div>
</template>

<style scoped>
.preview-container {
overflow: auto;
max-height: 100%;
}
</style>
</template>
9 changes: 9 additions & 0 deletions packages/app/src/assets/logo.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
25 changes: 0 additions & 25 deletions packages/app/src/components/LeftList.vue
View file

This file was deleted.

25 changes: 19 additions & 6 deletions packages/app/src/components/Preview.vue
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,20 @@
<script setup lang="ts">
import { computed } from 'vue';
const { width, height } = defineProps<{
width: number;
height: number;
}>()
const zoom = computed(() => (window.innerHeight - 40) * 0.6 / height)
</script>

<template>
<svg
width="1000" height="900" :style="{
backgroundColor: 'black',
}"
/>
</template>
<div class="w-full h-[60%] flex">
<div class="flex items-center">
<svg :width="width" :height="height" class="bg-black" :style="{
transform: `scale(${zoom})`
}"></svg>
</div>
</div>
</template>
8 changes: 0 additions & 8 deletions packages/app/src/components/TimeLine.vue
View file

This file was deleted.

79 changes: 11 additions & 68 deletions packages/app/src/components/Tools.vue
View file
Original file line number Diff line number Diff line change
@@ -1,70 +1,13 @@
<script setup lang="ts">
import Button from 'primevue/button'
import Panel from 'primevue/panel'
// import Select from 'primevue/select'
import type { Ref } from 'vue'
import { inject } from 'vue'
const playing = inject('playing') as Ref<boolean>
playing.value ??= false
</script>

<template>
<div>
<Panel
class="w-full flex border flex-row justify-center" :style="{
backgroundColor: 'var(--p-primary-color)',
height: '2.35rem',
}"
>
<Button
class="h-10 flex items-center justify-center self-center" :style="{
'margin-right': '0.5rem',
'margin-left': '0.5rem',
}"
>
<i class="pi pi-backward" />
</Button>
<Button
class="h-10 flex items-center justify-center self-center" :style="{
'margin-right': '0.5rem',
'margin-left': '0.5rem',
}"
>
<i class="pi pi-step-backward-alt" />
</Button>
<Button
class="h-10 flex items-center justify-center self-center" :style="{
'margin-right': '0.5rem',
'margin-left': '0.5rem',
}" @click="playing = !playing"
>
<i
:class="{
'pi pi-play': !playing,
'pi pi-pause': playing,
}"
/>
</Button>
<Button
class="h-10 flex items-center justify-center self-center" :style="{
'margin-right': '0.5rem',
'margin-left': '0.5rem',
}"
>
<i class="pi pi-step-forward-alt" />
</Button>
<Button
class="h-10 flex items-center justify-center self-center" :style="{
'margin-right': '0.5rem',
'margin-left': '0.5rem',
}"
>
<i class="pi pi-expand" />
</Button>
<!-- <Button class="h-10 flex items-center justify-center self-center">
<Select v-model=""></Select>
</Button> -->
</Panel>
<div class="w-full h-8 flex flex-row justify-center items-center border">
<div class="w-8 h-8 flex items-center justify-center">
<i class="fa fa-backward hover:text-[#41B883] text-[#35495E] justify-center"/>
</div>
<div class="w-8 h-8 flex items-center justify-center">
<i class="fa fa-pause hover:text-[#41B883] text-[#35495E] justify-center"/>
</div>
<div class="w-8 h-8 flex items-center justify-center">
<i class="fa fa-forward hover:text-[#41B883] text-[#35495E] justify-center"/>
</div>
</div>
</template>
</template>
42 changes: 42 additions & 0 deletions packages/app/src/components/TopMenubar.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<template>
<div class="w-full h-10 border flex flex-row select-none">
<div class="flex flex-row">
<img src="../assets/logo.svg" class="w-10 h-10 p-1 mr-5">
</div>
<div class="h-full w-16 hover:bg-gray-300" @mouseleave="options = false" @mouseenter="options = true">
<span class="font-mono text-sm h-full flex items-center justify-center">Options</span>
<div class="absolute bg-white border top-10 w-40 rounded-md" v-if="options">
<div class="hover:bg-gray-300 h-8 w-full">
<span class="font-mono text-sm h-full flex items-center justify-center">Export</span>
</div>
</div>
</div>
<div class="h-full w-16 hover:bg-gray-300" @mouseenter="view = true" @mouseleave="view = false">
<span class="font-mono text-sm h-full flex items-center justify-center">View</span>
<div class="absolute bg-white border top-10 w-40 rounded-md" v-if="view">
<div class="hover:bg-gray-300 h-8 w-full">
<span class="font-mono text-sm h-full flex items-center justify-center">Zoom In</span>
</div>
<div class="hover:bg-gray-300 h-8 w-full">
<span class="font-mono text-sm h-full flex items-center justify-center">Zoom Out</span>
</div>
</div>
</div>
<div class="h-full w-16 hover:bg-gray-300" @mouseenter="help = true" @mouseleave="help = false">
<span class="font-mono text-sm h-full flex items-center justify-center">Help</span>
<div class="absolute bg-white border top-10 w-40 rounded-md" v-if="help">
<div class="hover:bg-gray-300 h-8 w-full">
<span class="font-mono text-sm h-full flex items-center justify-center">Export</span>
</div>
</div>
</div>
</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const options = ref(false)
const view = ref(false)
const help = ref(false)
</script>
Loading

0 comments on commit d5cd2c3

Please sign in to comment.