diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/HelpModal.vue | 53 | ||||
| -rw-r--r-- | src/components/TileTree.vue | 16 |
2 files changed, 67 insertions, 2 deletions
diff --git a/src/components/HelpModal.vue b/src/components/HelpModal.vue new file mode 100644 index 0000000..fff1b8d --- /dev/null +++ b/src/components/HelpModal.vue @@ -0,0 +1,53 @@ +<script lang="ts"> +import {defineComponent, PropType} from 'vue'; + +export default defineComponent({ + props: { + options: {type: Object, required: true}, + }, + methods: { + closeClicked(evt: Event){ + if (evt.target == this.$el || evt.target == this.$refs.closeIcon){ + this.$emit('help-modal-close'); + } + }, + }, + emits: ['help-modal-close'], +}); +</script> + +<template> +<div class="fixed left-0 top-0 w-full h-full bg-black/40" @click="closeClicked"> + <div class="absolute left-1/2 -translate-x-1/2 w-4/5 top-1/2 -translate-y-1/2 p-4 + bg-stone-50 rounded-md shadow shadow-black"> + <svg class="block absolute top-2 right-2 w-6 h-6 hover:cursor-pointer" + @click="closeClicked" ref="closeIcon" + xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" + stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> + <line x1="18" y1="6" x2="6" y2="18"/> + <line x1="6" y1="6" x2="18" y2="18"/> + </svg> + <h1 class="text-center text-xl font-bold mb-2">Help Info</h1> + <hr class="mb-4 border-stone-400"/> + <div class="mb-4"> + Lorem ipsum dolor sit amet, consectetur adipiscing + elit, sed do eiusmod tempor incididunt ut labore + et dolore magna aliqua. Ut enim ad minim veniam, + quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. + </div> + <div> + Lorem ipsum dolor sit amet, consectetur adipiscing + elit, sed do eiusmod tempor incididunt ut labore + et dolore magna aliqua. Ut enim ad minim veniam, + quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure + dolor in reprehenderit in voluptate velit esse + cillum dolore eu fugiat nulla pariatur. Excepteur + sint occaecat cupidatat non proident, sunt + in culpa qui officia deserunt mollit anim id + est laborum. + </div> + </div> +</div> +</template> diff --git a/src/components/TileTree.vue b/src/components/TileTree.vue index 86e289f..46cb8b3 100644 --- a/src/components/TileTree.vue +++ b/src/components/TileTree.vue @@ -4,6 +4,7 @@ import Tile from './Tile.vue'; import ParentBar from './ParentBar.vue'; import TileInfoModal from './TileInfoModal.vue'; import SearchModal from './SearchModal.vue'; +import HelpModal from './HelpModal.vue'; import Settings from './Settings.vue'; import {TolNode, LayoutNode, initLayoutTree, initLayoutMap, tryLayout, randWeightedChoice} from '../lib'; import type {LayoutOptions} from '../lib'; @@ -96,6 +97,7 @@ export default defineComponent({ lastFocused: null as LayoutNode | null, animationActive: false, autoWaitTime: 500, //ms (in auto mode, time to wait after an action ends) + helpOpen: false, // Options layoutOptions: {...defaultLayoutOptions}, componentOptions: {...defaultComponentOptions}, @@ -433,6 +435,13 @@ export default defineComponent({ node.hasFocus = true; } }, + onHelpIconClick(){ + this.closeModalsAndSettings(); + this.helpOpen = true; + }, + onHelpModalClose(){ + this.helpOpen = false; + }, }, created(){ window.addEventListener('resize', this.onResize); @@ -443,7 +452,7 @@ export default defineComponent({ window.removeEventListener('resize', this.onResize); window.removeEventListener('keyup', this.onKeyUp); }, - components: {Tile, ParentBar, TileInfoModal, Settings, SearchModal, }, + components: {Tile, ParentBar, TileInfoModal, Settings, SearchModal, HelpModal, }, }); </script> @@ -475,7 +484,7 @@ export default defineComponent({ <circle cx="12" cy="12" r="10"/> <polygon points="10 8 16 12 10 16 10 8"/> </svg> - <svg + <svg @click="onHelpIconClick" class="absolute top-[6px] right-[6px] w-[18px] h-[18px] text-white/40 hover:text-white hover:cursor-pointer" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> @@ -492,6 +501,9 @@ export default defineComponent({ <search-modal v-if="searchOpen" :layoutTree="layoutTree" :tolMap="tolMap" :options="componentOptions" @search-close="onSearchClose" @search-node="onSearchNode"/> </transition> + <transition name="fade"> + <help-modal v-if="helpOpen" :options="componentOptions" @help-modal-close="onHelpModalClose"/> + </transition> <!-- Overlay used to prevent interaction and capture clicks --> <div :style="{visibility: animationActive ? 'visible' : 'hidden'}" class="absolute left-0 top-0 w-full h-full" @click="onOverlayClick"></div> |