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

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

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

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

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

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

@ -76,7 +76,7 @@ code {
}
& > div {
@apply .flex .flex-col .h-full;
@apply .flex .flex-col;
transition: box-shadow 150ms ease-in;
&:hover {
@ -85,7 +85,7 @@ code {
}
& > 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;
& .identifier-icon {