Skynet/misc_pterodactyl-panel
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Lets be smarter with modals here...

Browse source
This commit is contained in:
Dane Everitt 2019-02-16 17:15:56 -08:00
parent b6773b56c1
commit 767e466fd8
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
5 changed files with 54 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
resources/assets/scripts/components/core/Modal.vue
View file

@ -2,7 +2,7 @@
<transition name="modal"> <transition name="modal">
<div class="modal-mask" v-show="show" v-on:click="close"> <div class="modal-mask" v-show="show" v-on:click="close">
<div class="modal-container" @click.stop> <div class="modal-container" @click.stop>
<div v-on:click="close"> <div v-on:click="close" v-if="dismissable">
<Icon name="x" <Icon name="x"
class="absolute pin-r pin-t m-2 text-neutral-500 cursor-pointer" class="absolute pin-r pin-t m-2 text-neutral-500 cursor-pointer"
aria-label="Close modal" aria-label="Close modal"
@ -27,10 +27,11 @@
modalName: {type: String, default: 'modal'}, modalName: {type: String, default: 'modal'},
show: {type: Boolean, default: false}, show: {type: Boolean, default: false},
closeOnEsc: {type: Boolean, default: true}, closeOnEsc: {type: Boolean, default: true},
dismissable: {type: Boolean, default: true},
}, },
mounted: function () { mounted: function () {
if (this.$props.closeOnEsc) { if (this.$props.dismissable && this.$props.closeOnEsc) {
document.addEventListener('keydown', e => { document.addEventListener('keydown', e => {
if (this.show && e.key === 'Escape') { if (this.show && e.key === 'Escape') {
this.close(); this.close();
@ -41,7 +42,9 @@
methods: { methods: {
close: function () { close: function () {
this.$emit('close', this.$props.modalName); if (this.$props.dismissable) {
this.$emit('close', this.$props.modalName);
}
} }
}, },
}); });

2
resources/assets/scripts/components/dashboard/Dashboard.vue
View file

@ -16,7 +16,7 @@
<span class="spinner spinner-xl spinner-thick blue"></span> <span class="spinner spinner-xl spinner-thick blue"></span>
</div> </div>
</div> </div>
<TransitionGroup class="flex flex-wrap justify-center sm:justify-start" v-else> <TransitionGroup class="flex flex-wrap justify-center sm:justify-start" tag="div" v-else>
<ServerBox <ServerBox
v-for="(server, index) in servers" v-for="(server, index) in servers"
:key="index" :key="index"

15
resources/assets/scripts/components/server/components/database/DatabaseRow.vue
View file

@ -31,26 +31,23 @@
</button> </button>
</div> </div>
</div> </div>
<Modal :show="showDeleteModal" v-on:close="showDeleteModal = false"> <DeleteDatabaseModal
<DeleteDatabaseModal :database="database"
:database="database" :show="showDeleteModal"
v-on:close="showDeleteModal = false" v-on:close="showDeleteModal = false"
v-if="showDeleteModal" />
/>
</modal>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import Icon from "@/components/core/Icon.vue"; import Icon from "@/components/core/Icon.vue";
import Modal from "@/components/core/Modal.vue";
import {ServerDatabase} from "@/api/server/types"; import {ServerDatabase} from "@/api/server/types";
import DeleteDatabaseModal from "@/components/server/components/database/DeleteDatabaseModal.vue"; import DeleteDatabaseModal from "@/components/server/components/database/DeleteDatabaseModal.vue";
export default Vue.extend({ export default Vue.extend({
name: 'DatabaseRow', name: 'DatabaseRow',
components: {DeleteDatabaseModal, Modal, Icon}, components: {DeleteDatabaseModal, Icon},
props: { props: {
database: { database: {
type: Object as () => ServerDatabase, type: Object as () => ServerDatabase,

58
resources/assets/scripts/components/server/components/database/DeleteDatabaseModal.vue
View file

@ -1,32 +1,42 @@
<template> <template>
<div> <Modal v-on:close="closeModal" :show="show" :dismissable="!showSpinner">
<h2 class="font-medium text-neutral-900 mb-6">Delete this database?</h2> <transition name="modal">
<p class="text-neutral-900 text-sm">This action <div>
<strong>cannot</strong> be undone. This will permanetly delete the <h2 class="font-medium text-neutral-900 mb-6">Delete this database?</h2>
<strong>{{database.name}}</strong> database and remove all associated data.</p> <p class="text-neutral-900 text-sm">This action
<div class="mt-6"> <strong>cannot</strong> be undone. This will permanetly delete the
<label class="input-label">Confirm database name</label> <strong>{{database.name}}</strong> database and remove all associated data.</p>
<input type="text" class="input" v-model="nameConfirmation"/> <div class="mt-6">
</div> <label class="input-label">Confirm database name</label>
<div class="mt-6 text-right"> <input type="text" class="input" v-model="nameConfirmation"/>
<button class="btn btn-sm btn-secondary mr-2" v-on:click="$emit('close')">Cancel</button> </div>
<button class="btn btn-sm btn-red" :disabled="disabled" v-on:click="deleteDatabase"> <div class="mt-6 text-right">
<span class="spinner white" v-bind:class="{ hidden: !showSpinner }">&nbsp;</span> <button class="btn btn-sm btn-secondary mr-2" v-on:click="closeModal">Cancel</button>
<span :class="{ hidden: showSpinner }"> <button class="btn btn-sm btn-red" :disabled="disabled" v-on:click="deleteDatabase">
Confirm Deletion <span class="spinner white" v-bind:class="{ hidden: !showSpinner }">&nbsp;</span>
</span> <span :class="{ hidden: showSpinner }">
</button> Confirm Deletion
</div> </span>
</div> </button>
</div>
</div>
</transition>
</Modal>
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import {ServerDatabase} from "@/api/server/types"; import {ServerDatabase} from "@/api/server/types";
import Modal from '@/components/core/Modal.vue';
export default Vue.extend({ export default Vue.extend({
name: 'DeleteDatabaseModal', name: 'DeleteDatabaseModal',
components: {Modal},
props: { props: {
show: {
type: Boolean,
default: false,
},
database: { database: {
type: Object as () => ServerDatabase, type: Object as () => ServerDatabase,
required: true required: true
@ -84,6 +94,16 @@
this.$emit('close'); this.$emit('close');
}) })
}, },
/**
* Closes the modal and resets the entry field.
*/
closeModal: function () {
this.showSpinner = false;
this.nameConfirmation = '';
this.$emit('close');
}
}, },
}); });
</script> </script>

4
resources/assets/styles/components/miscellaneous.css
View file

@ -76,7 +76,7 @@ code {
} }
& > div { & > div {
@apply .flex .flex-col .h-full; @apply .flex .flex-col;
transition: box-shadow 150ms ease-in; transition: box-shadow 150ms ease-in;
&:hover { &:hover {
@ -85,7 +85,7 @@ code {
} }
& > div > .server-card { & > div > .server-card {
@apply .flex .flex-1 .flex-col .p-4 .border .border-t-4 .border-neutral-100 .bg-white; @apply .flex .flex-col .p-4 .border .border-t-4 .border-neutral-100 .bg-white;
transition: all 100ms ease-in; transition: all 100ms ease-in;
& .identifier-icon { & .identifier-icon {