diff options
| author | Terry Truong <terry06890@gmail.com> | 2022-03-24 21:24:32 +1100 |
|---|---|---|
| committer | Terry Truong <terry06890@gmail.com> | 2022-03-24 21:24:32 +1100 |
| commit | 324582c671266cec0f802205ce9a742f3c94fe2b (patch) | |
| tree | 2dadb008c9b46d640b3f151cc6954f67c4a46ac9 | |
| parent | 781d06bf1d0c2a3db9abb28ed1bf801758ce51b0 (diff) | |
Make settings appear at smaller display edgesettings-to-smaller-display-edge
| -rw-r--r-- | src/components/Settings.vue | 23 | ||||
| -rw-r--r-- | src/components/TileTree.vue | 2 |
2 files changed, 22 insertions, 3 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; diff --git a/src/components/TileTree.vue b/src/components/TileTree.vue index f5a6199..39fd105 100644 --- a/src/components/TileTree.vue +++ b/src/components/TileTree.vue @@ -237,7 +237,7 @@ export default defineComponent({ :pos="[0,0]" :dims="parentBarDims" :nodes="sepdParents" :options="componentOptions" @sepd-parent-clicked="onSepdParentClicked" @info-icon-clicked="onInnerInfoIconClicked"/> <tile-info-modal :tolNode="infoModalNode" :options="componentOptions" @info-modal-close="onInfoModalClose"/> - <settings :open="settingsOpen" @settings-open="onSettingsOpen" @settings-close="onSettingsClose"/> + <settings :isOpen="settingsOpen" :atRight="wideArea" @settings-open="onSettingsOpen" @settings-close="onSettingsClose"/> </div> </template> |