forked from nikita/muzika-gromche
47 lines
1.5 KiB
Vue
47 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import Construction from '@material-design-icons/svg/round/construction.svg'
|
|
import { storeToRefs } from 'pinia'
|
|
import { shallowRef } from 'vue'
|
|
import ScrollablePanel from '@/components/library/panel/ScrollablePanel.vue'
|
|
import { useTimelineStore } from '@/store/TimelineStore'
|
|
import AudioTrack from './views/AudioTrack.vue'
|
|
|
|
// TODO: use selection (inspector?) manager
|
|
const selection = shallowRef<object | null>({})
|
|
|
|
const timeline = useTimelineStore()
|
|
const { audioTrack } = storeToRefs(timeline)
|
|
</script>
|
|
|
|
<template>
|
|
<!-- inspector panel -->
|
|
<ScrollablePanel class="tw:flex-none tw:min-w-80 tw:max-w-80 tw:border-s">
|
|
<template #toolbar>
|
|
<h3 class="tw:flex tw:flex-row tw:items-center tw:gap-2 tw:px-4 tw:py-1 tw:select-none">
|
|
<Construction class="tw:fill-current tw:h-5 tw:w-5 toolbar-icon-shadow" />
|
|
Inspector
|
|
</h3>
|
|
</template>
|
|
|
|
<template #default>
|
|
<!-- inspector content -->
|
|
<div class="tw:px-4 tw:h-full tw:flex tw:flex-col" @click="selection = selection ? {} : {}">
|
|
<!-- nothing to inspect -->
|
|
<div
|
|
v-if="!selection"
|
|
class="tw:flex-1 tw:flex tw:items-center tw:justify-center tw:text-2xl tw:text-[#43474d] tw:select-none"
|
|
>
|
|
Nothing to inspect
|
|
</div>
|
|
|
|
<!-- inspect selection -->
|
|
<div v-else class="tw:flex-1 tw:flex tw:flex-col tw:gap-4 tw:py-2 tw:text-xs">
|
|
<AudioTrack v-if="audioTrack" :audio-track />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</ScrollablePanel>
|
|
</template>
|
|
|
|
<style scoped></style>
|