diff options
Diffstat (limited to 'src/components/Settings.vue')
| -rw-r--r-- | src/components/Settings.vue | 23 |
1 files changed, 21 insertions, 2 deletions
diff --git a/src/components/Settings.vue b/src/components/Settings.vue index c06ad15..158c31e 100644 --- a/src/components/Settings.vue +++ b/src/components/Settings.vue @@ -4,6 +4,16 @@ import {defineComponent, PropType} from 'vue'; export default defineComponent({ props: { isOpen: {type: Boolean, required: true}, + atRight: {type: Boolean, required: true}, + }, + computed: { + openStyles(){ + if (this.atRight){ + return {width: '20%', height: '100%'}; + } else { + return {width: '100%', height: '20%'}; + } + }, }, methods: { openClicked(){ @@ -20,8 +30,8 @@ export default defineComponent({ <template> <!-- outer div prevents overflow from transitioning to/from off-screen --> <div class="absolute left-0 top-0 w-full h-full invisible overflow-hidden"> - <Transition name="slide-bottom"> - <div v-if="isOpen" class="absolute bottom-0 bg-white visible"> + <Transition :name="atRight ? 'slide-right' : 'slide-bottom'"> + <div v-if="isOpen" :style="openStyles" class="absolute bottom-0 right-0 bg-white visible"> <div class="absolute top-2 right-2 w-[24px] h-[24px] [font-size:24px] [line-height:24px] text-center font-bold hover:cursor-pointer" @click="closeClicked">×</div> @@ -66,6 +76,15 @@ export default defineComponent({ </template> <style> +.slide-right-enter-from, .slide-right-leave-to { + transform: translate(100%, 0); + opacity: 0; +} +.slide-right-enter-active, .slide-right-leave-active { + transition-property: transform, opacity; + transition-duration: 300ms; + transition-timing-function: ease-in-out; +} .slide-bottom-enter-from, .slide-bottom-leave-to { transform: translate(0, 100%); opacity: 0; |