diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.vue | 31 | ||||
| -rw-r--r-- | src/components/IconButton.vue | 16 |
2 files changed, 30 insertions, 17 deletions
diff --git a/src/App.vue b/src/App.vue index 92607ad..33f09f2 100644 --- a/src/App.vue +++ b/src/App.vue @@ -9,6 +9,7 @@ import SettingsModal from './components/SettingsModal.vue'; import HelpModal from './components/HelpModal.vue'; import AncestryBar from './components/AncestryBar.vue'; import TutorialPane from './components/TutorialPane.vue'; +import IconButton from './components/IconButton.vue'; // Icons import SearchIcon from './components/icon/SearchIcon.vue'; import PlayIcon from './components/icon/PlayIcon.vue'; @@ -911,7 +912,7 @@ export default defineComponent({ }, components: { Tile, AncestryBar, - HelpIcon, SettingsIcon, SearchIcon, PlayIcon, + IconButton, HelpIcon, SettingsIcon, SearchIcon, PlayIcon, TileInfoModal, HelpModal, SearchModal, SettingsModal, TutorialPane, }, }); @@ -923,26 +924,22 @@ export default defineComponent({ <div class="flex shadow" :style="{backgroundColor: uiOpts.titleBarBgColor}"> <h1 class="text-lime-500 px-4 my-auto text-2xl">Tree of Life</h1> <!-- Icons --> - <div v-if="!uiOpts.disabledActions.has('search')" - class="ml-auto mr-2 my-2 w-9 aspect-square p-2 rounded-full bg-lime-600 text-lime-100 - hover:brightness-125 active:brightness-125 hover:cursor-pointer" @click="onSearchIconClick"> + <icon-button v-if="!uiOpts.disabledActions.has('search')" + class="ml-auto mr-2 my-2 bg-lime-600 text-lime-100" @click="onSearchIconClick"> <search-icon/> - </div> - <div v-if="!uiOpts.disabledActions.has('autoMode')" - class="mr-2 my-2 w-9 aspect-square p-2 rounded-full bg-lime-600 text-lime-100 - hover:brightness-125 active:brightness-125 hover:cursor-pointer" @click="onPlayIconClick"> + </icon-button> + <icon-button v-if="!uiOpts.disabledActions.has('autoMode')" + class="mr-2 my-2 bg-lime-600 text-lime-100" @click="onPlayIconClick"> <play-icon/> - </div> - <div v-if="!uiOpts.disabledActions.has('settings')" - class="mr-2 my-2 w-9 aspect-square p-2 rounded-full bg-lime-600 text-lime-100 - hover:brightness-125 active:brightness-125 hover:cursor-pointer" @click="onSettingsIconClick"> + </icon-button> + <icon-button v-if="!uiOpts.disabledActions.has('settings')" + class="mr-2 my-2 bg-lime-600 text-lime-100" @click="onSettingsIconClick"> <settings-icon/> - </div> - <div v-if="!uiOpts.disabledActions.has('help')" - class="mr-2 my-2 w-9 aspect-square p-2 rounded-full bg-lime-600 text-lime-100 - hover:brightness-125 active:brightness-125 hover:cursor-pointer" @click="onHelpIconClick"> + </icon-button> + <icon-button v-if="!uiOpts.disabledActions.has('help')" + class="mr-2 my-2 bg-lime-600 text-lime-100" @click="onHelpIconClick"> <help-icon/> - </div> + </icon-button> </div> <div :style="tutPaneContainerStyles"> <!-- Used to slide-in/out the tutorial pane --> <transition name="fade" @after-enter="tutPaneTransitionEnd" @after-leave="tutPaneTransitionEnd"> diff --git a/src/components/IconButton.vue b/src/components/IconButton.vue new file mode 100644 index 0000000..7ce5da4 --- /dev/null +++ b/src/components/IconButton.vue @@ -0,0 +1,16 @@ +<script lang="ts"> +import {defineComponent, PropType} from 'vue'; + +export default defineComponent({ + props: { + disabled: {type: Boolean, default: false}, + }, +}); +</script> + +<template> +<div class="w-9 h-9 p-2 rounded-full hover:cursor-pointer" + :class="{'hover:brightness-125': !disabled, 'brightness-75': disabled}"> + <slot class="w-full h-full">?</slot> +</div> +</template> |