thepaperpilot/chromatic-lattice
1
0
Fork 0
Code Issues Pull requests Releases Activity Actions

Optimized some modals

Browse source
This commit is contained in:
thepaperpilot 2021-06-27 16:45:33 -05:00
parent beb9e38b92
commit ae036225b1
3 changed files with 75 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/system/GameOverScreen.vue
View file

@ -7,7 +7,8 @@
<h4>You've beaten {{ title }} v{{ versionNumber }}: {{ versionTitle }}</h4> <h4>You've beaten {{ title }} v{{ versionNumber }}: {{ versionTitle }}</h4>
</div> </div>
</div> </div>
<div slot="body"> <template v-slot:body="{ shown }">
<div v-if="shown">
<div>It took you {{ timePlayed }} to beat the game.</div> <div>It took you {{ timePlayed }} to beat the game.</div>
<br> <br>
<div>Please check the Discord to discuss the game or to check for new content updates!</div> <div>Please check the Discord to discuss the game or to check for new content updates!</div>
@ -19,6 +20,7 @@
</a> </a>
</div> </div>
</div> </div>
</template>
<div slot="footer" class="game-over-footer"> <div slot="footer" class="game-over-footer">
<button @click="keepGoing" class="button">Keep Going</button> <button @click="keepGoing" class="button">Keep Going</button>
<button @click="playAgain" class="button danger">Play Again</button> <button @click="playAgain" class="button danger">Play Again</button>

4
src/components/system/Info.vue
View file

@ -7,7 +7,8 @@
<h4>v{{ versionNumber}}: {{ versionTitle }}</h4> <h4>v{{ versionNumber}}: {{ versionTitle }}</h4>
</div> </div>
</div> </div>
<div slot="body"> <template v-slot:body="{ shown }">
<div v-if="shown">
<div v-if="author"> <div v-if="author">
By {{ author }} By {{ author }}
</div> </div>
@ -51,6 +52,7 @@
</div> </div>
</div> </div>
</div> </div>
</template>
</Modal> </Modal>
</template> </template>

23
src/components/system/Modal.vue
View file

@ -1,23 +1,23 @@
<template> <template>
<portal to="modal-root"> <portal to="modal-root">
<transition name="modal"> <transition name="modal" @before-enter="setAnimating(true)" @after-leave="setAnimating(false)">
<div class="modal-mask" v-show="show" v-on:pointerdown.self="$emit('close')"> <div class="modal-mask" v-show="show" v-on:pointerdown.self="$emit('close')">
<div class="modal-wrapper"> <div class="modal-wrapper">
<div class="modal-container"> <div class="modal-container">
<div class="modal-header"> <div class="modal-header">
<slot name="header"> <slot name="header" :shown="isVisible">
default header default header
</slot> </slot>
</div> </div>
<simplebar class="modal-body"> <simplebar class="modal-body">
<branches> <branches>
<slot name="body"> <slot name="body" :shown="isVisible">
default body default body
</slot> </slot>
</branches> </branches>
</simplebar> </simplebar>
<div class="modal-footer"> <div class="modal-footer">
<slot name="footer"> <slot name="footer" :shown="isVisible">
<div class="modal-default-footer"> <div class="modal-default-footer">
<div class="modal-default-flex-grow"></div> <div class="modal-default-flex-grow"></div>
<button class="button modal-default-button" @click="$emit('close')"> <button class="button modal-default-button" @click="$emit('close')">
@ -36,8 +36,23 @@
<script> <script>
export default { export default {
name: 'Modal', name: 'Modal',
data() {
return {
isAnimating: false
}
},
props: { props: {
show: Boolean show: Boolean
},
computed: {
isVisible() {
return this.show || this.isAnimating;
}
},
methods: {
setAnimating(isAnimating) {
this.isAnimating = isAnimating;
}
} }
} }
</script> </script>