diff options
Diffstat (limited to 'desktop_editor/src/components/PresetGrid.vue')
| -rw-r--r-- | desktop_editor/src/components/PresetGrid.vue | 69 |
1 files changed, 69 insertions, 0 deletions
diff --git a/desktop_editor/src/components/PresetGrid.vue b/desktop_editor/src/components/PresetGrid.vue new file mode 100644 index 0000000..96a0da2 --- /dev/null +++ b/desktop_editor/src/components/PresetGrid.vue @@ -0,0 +1,69 @@ +<template> + <div class="preset-title"> + <div class="preset-location"> + <div class="preset-bank">1</div> + <div class="preset-letter">A</div> + </div> + <div class="preset-name" >{{ preset.name }}</div> + </div> + + <div v-if="preset" class="grid"> + <chain :chain="preset.chains[0]"></chain> + <chain :chain="preset.chains[1]"></chain> + <chain :chain="preset.chains[2]"></chain> + <chain :chain="preset.chains[3]"></chain> + </div> +</template> + +<script lang="ts"> +import { defineComponent } from 'vue'; +import Chain from '@/components/PresetChain.vue'; + +export default defineComponent({ + name: 'PresetGrid', + components: { + Chain + }, + props: { + preset: { + type: Object, + required: true + } + } +}) +</script> + +<style> +.grid { + background-color: rgb(0, 0, 0); + color: rgb(255, 255, 255); + width: 100%; + height: 400px; + + /* Space the content evenly vertical */ + display: flex; + flex-direction: column; + justify-content: space-evenly; + +} + +.preset-name { + text-align: start; +} + +.preset-title { + display: flex; + flex-direction: row; + align-items: center; + font-size: 3rem; + font-weight: bold; + padding-bottom: 1rem; +} + +.preset-location { + display: flex; + flex-direction: row; + margin-right: 1rem; +} + +</style>
\ No newline at end of file |