diff options
| -rw-r--r-- | app.vue | 14 | ||||
| -rw-r--r-- | components/editor/Sidebar.vue | 81 | ||||
| -rw-r--r-- | components/editor/SidebarMainConfiguration.vue | 57 | ||||
| -rw-r--r-- | components/editor/task/ConfigurationRow.vue | 2 | ||||
| -rw-r--r-- | components/editor/task/modal/Create.vue | 2 | ||||
| -rw-r--r-- | pages/config.vue | 17 |
6 files changed, 168 insertions, 5 deletions
@@ -1,5 +1,19 @@ <script setup lang="ts"> import '~/assets/main.css' + +useHead({ + link: [ + { + rel: 'preconnect', + href: 'https://rsms.me/' + }, + { + rel: 'stylesheet', + href: 'https://rsms.me/inter/inter.css', + crossorigin: '' + } + ] +}) </script> <template> diff --git a/components/editor/Sidebar.vue b/components/editor/Sidebar.vue index a46cdbe..20168df 100644 --- a/components/editor/Sidebar.vue +++ b/components/editor/Sidebar.vue @@ -5,14 +5,39 @@ import { storeToRefs } from 'pinia'; const sessionStore = useSessionStore(); const { session } = storeToRefs(sessionStore); + +const currentType = ref('quests' as 'quests' | 'items'); + +const setSelectedType = (type: 'quests' | 'items') => { + currentType.value = type; +} </script> <template> <div id="sidebar-container"> - <EditorSidebarCategory v-for="category in session.categories" :key="category.id" :category="category" /> - <EditorSidebarQuest - v-for="quest in session.quests.filter((q) => (!session.categories.some((c) => c.id === q.options.category)))" - :key="quest.id" :quest="quest" /> + <div id="selector"> + <span class="option" @click="setSelectedType('quests')" :class="{ selected: currentType === 'quests' }"> + <span> + <font-awesome-icon :icon="['far', 'compass']" /> + Quests + </span> + </span> + <span class="option" @click="setSelectedType('items')" :class="{ selected: currentType === 'items' }"> + <span> + <font-awesome-icon :icon="['fas', 'cube']" /> + Items + </span> + </span> + </div> + <div id="quests"> + <EditorSidebarCategory v-for="category in session.categories" :key="category.id" :category="category" /> + <EditorSidebarQuest + v-for="quest in session.quests.filter((q) => (!session.categories.some((c) => c.id === q.options.category)))" + :key="quest.id" :quest="quest" /> + </div> + <div id="configuration-container"> + <EditorSidebarMainConfiguration /> + </div> </div> </template> @@ -24,5 +49,53 @@ const { session } = storeToRefs(sessionStore); max-height: calc(100vh - 73px); background-color: var(--color-background); user-select: none; + position: relative; + + #selector { + display: flex; + height: 30px; + align-items: center; + cursor: pointer; + + .option { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + transition: background-color 0.3s; + + &.selected { + background-color: var(--color-background); + + span { + font-weight: 700; + } + } + + &:not(.selected) { + background-color: var(--color-background-mute); + color: var(--color-text-mute); + transition: color 0.3s; + + &:hover { + color: var(--color-text) + } + } + } + } + + #quests { + max-height: calc(100vh - 73px - 46px); + overflow-y: scroll; + } + + #configuration-container { + height: 46px; + border-top: 1px solid var(--color-border); + position: absolute; + bottom: 0; + width: 100% + } } </style>
\ No newline at end of file diff --git a/components/editor/SidebarMainConfiguration.vue b/components/editor/SidebarMainConfiguration.vue new file mode 100644 index 0000000..c4727c6 --- /dev/null +++ b/components/editor/SidebarMainConfiguration.vue @@ -0,0 +1,57 @@ +<script setup lang="ts"> +import { computed } from 'vue'; + +const route = useRoute(); + +const setSelected = () => { + navigateTo({ path: '/config' }) +}; + +const selected = computed(() => { + return route.path.startsWith('/config'); +}); +</script> + +<template> + <div id="container" :class="{ selected: selected }"> + <span id="title" @click="setSelected"> + <font-awesome-icon class="icon" :icon="['fas', 'wrench']" /> + <span id="name"> + Configuration + </span> + </span> + </div> +</template> + +<style scoped> +#container { + cursor: pointer; + padding: 0.5rem 1rem; + transition: background-color 0.3s; + border-bottom: 1px solid var(--color-border-soft); + max-height: 45px; + overflow-y: hidden; + + #title { + display: flex; + align-items: center; + margin: 0; + gap: 1rem; + font-size: 1.1rem; + + #name { + display: flex; + flex-direction: column; + align-items: left; + } + } +} + +.selected { + background-color: var(--color-primary-mute); +} + +#container:hover { + background-color: var(--color-hover); +} +</style>
\ No newline at end of file diff --git a/components/editor/task/ConfigurationRow.vue b/components/editor/task/ConfigurationRow.vue index fa512b6..8194dcd 100644 --- a/components/editor/task/ConfigurationRow.vue +++ b/components/editor/task/ConfigurationRow.vue @@ -60,7 +60,7 @@ const addValue = (searchQuery: any) => { <div id="task-configuration-row"> <div id="key"> <div id="delete" @click="emit('delete')" v-if="!props.required" class="delete"> - <font-awesome-icon :icon="['fas', 'fa-xmark']" /> + <font-awesome-icon :icon="['fas', 'xmark']" /> </div> <p id="name" @click="showDescription = !showDescription">{{ props.configKey }}</p> </div> diff --git a/components/editor/task/modal/Create.vue b/components/editor/task/modal/Create.vue index e3867b6..30e4cca 100644 --- a/components/editor/task/modal/Create.vue +++ b/components/editor/task/modal/Create.vue @@ -55,6 +55,8 @@ const newTypeDescription = computed(() => session.getTaskDefinitionByTaskType(ne <Button type="solid" :icon="['fas', 'check']" :label="'Confirm'" :disabled="unknownTaskType || invalidTaskId || duplicateTaskId" @click="emit('add', newId, newType)"></Button> + + </div> </div> </template> diff --git a/pages/config.vue b/pages/config.vue new file mode 100644 index 0000000..4dfc679 --- /dev/null +++ b/pages/config.vue @@ -0,0 +1,17 @@ +<script setup lang="ts"> +definePageMeta({ + layout: 'editor' +}) +</script> + +<template> + <div id="title"> + <h1>Config</h1> + </div> +</template> + +<style lang="scss" scoped> +#title { + text-align: center; +} +</style>
\ No newline at end of file |