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

Update modal code

Browse source
This commit is contained in:
Dane Everitt 2019-05-10 22:50:59 -07:00
parent 2c73991f2b
commit 32db345238
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
8 changed files with 38 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,13 +1,9 @@
<template>
<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" v-if="dismissable && showCloseIcon">
<Icon name="x"
class="absolute pin-r pin-t m-2 text-neutral-500 cursor-pointer"
aria-label="Close modal"
role="button"
/>
<div class="modal-mask" v-show="isVisible" v-on:click="closeOnBackground && close()">
<div class="modal-container p-8" :class="{ 'full-screen': isFullScreen }" @click.stop>
<div class="modal-close-icon" v-on:click="close" v-if="dismissable && showCloseIcon">
<Icon name="x" aria-label="Close modal" role="button"/>
</div>
<slot/>
</div>
@ -24,17 +20,19 @@
components: {Icon},
props: {
showCloseIcon: {type: Boolean, default: true},
modalName: {type: String, default: 'modal'},
show: {type: Boolean, default: false},
isVisible: {type: Boolean, default: false},
closeOnEsc: {type: Boolean, default: true},
dismissable: {type: Boolean, default: true},
showCloseIcon: {type: Boolean, default: true},
isFullScreen: {type: Boolean, default: false},
closeOnBackground: {type: Boolean, default: true},
},
mounted: function () {
if (this.$props.dismissable && this.$props.closeOnEsc) {
if (this.$props.closeOnEsc) {
document.addEventListener('keydown', e => {
if (this.show && e.key === 'Escape') {
if (this.isVisible && e.key === 'Escape') {
this.close();
}
})
@ -43,9 +41,11 @@
methods: {
close: function () {
if (this.$props.dismissable) {
this.$emit('close', this.$props.modalName);
if (!this.$props.dismissable) {
return;
}
this.$emit('close', this.$props.modalName);
}
},
});

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

@ -2,7 +2,7 @@
<div>
<Navigation/>
<div class="container animate fadein mt-2 sm:mt-6">
<Modal :show="modalVisible" v-on:close="modalVisible = false">
<Modal :isVisible="modalVisible" v-on:close="modalVisible = false">
<TwoFactorAuthentication v-on:close="modalVisible = false"/>
</Modal>
<Flash container="mt-2 sm:mt-6 mb-2"/>

2
resources/assets/scripts/components/server/components/filemanager/modals/CreateFolderModal.vue
View file

@ -1,5 +1,5 @@
<template>
<Modal :show="visible" v-on:close="onModalClose" :showCloseIcon="false" :dismissable="!isLoading">
<Modal :isVisible="visible" v-on:close="onModalClose" :showCloseIcon="false" :dismissable="!isLoading">
<div>
<label class="input-label">
Directory Name

2
resources/assets/scripts/components/server/components/filemanager/modals/DeleteFileModal.vue
View file

@ -1,5 +1,5 @@
<template>
<Modal :show="isVisible" v-on:close="isVisible = false" :dismissable="!isLoading">
<Modal :isVisible="isVisible" v-on:close="isVisible = false" :dismissable="!isLoading">
<MessageBox
class="alert error mb-8"
title="Error"

2
resources/assets/scripts/components/server/components/filemanager/modals/MoveFileModal.vue
View file

@ -1,5 +1,5 @@
<template>
<Modal :show="visible" v-on:close="isVisible = false" :dismissable="!isLoading">
<Modal :isVisible="visible" v-on:close="isVisible = false" :dismissable="!isLoading">
<MessageBox class="alert error mb-8" title="Error" :message="error" v-if="error"/>
<div class="flex items-end">
<div class="flex-1">

2
resources/assets/scripts/components/server/components/filemanager/modals/RenameModal.vue
View file

@ -1,5 +1,5 @@
<template>
<Modal :show="isVisible" v-on:close="closeModal" :showCloseIcon="false" :dismissable="!isLoading">
<Modal :isVisible="isVisible" v-on:close="closeModal" :showCloseIcon="false" :dismissable="!isLoading">
<MessageBox
class="alert error mb-8"
title="Error"

2
resources/assets/scripts/components/server/subpages/Databases.vue
View file

@ -18,7 +18,7 @@
<div>
<button class="btn btn-primary btn-lg" v-on:click="showCreateModal = true">Create new database</button>
</div>
<Modal :show="showCreateModal" v-on:close="showCreateModal = false">
<Modal :isVisible="showCreateModal" v-on:close="showCreateModal = false">
<CreateDatabaseModal
v-on:close="showCreateModal = false"
v-on:database="handleModalCallback"

19
resources/assets/styles/components/modal.css
View file

@ -4,10 +4,21 @@
transition: opacity 250ms ease;
& > .modal-container {
@apply .relative .p-8 .bg-white .w-full .max-w-md .m-auto .flex-col .flex .rounded;
@apply .relative .bg-white .w-full .max-w-md .m-auto .flex-col .flex .rounded .shadow-md;
transition: all 250ms ease;
margin-top: 15%;
& > .modal-close-icon {
@apply .absolute .pin-r .p-2 .text-white .cursor-pointer .opacity-50;
transition: opacity 150ms linear, transform 150ms ease-in;
top: -2.5rem;
&:hover {
@apply .opacity-100;
transform: rotate(90deg);
}
}
/**
* On tiny phone screens make sure there is a margin on the sides and also
* center the modal rather than putting it towards the top of the screen.
@ -18,6 +29,12 @@
}
}
& > .modal-container.full-screen {
@apply .w-3/4 .mt-32;
height: calc(100vh - 16rem);
max-width: none;
}
& > .modal-container.w-auto {
@apply .w-auto;
}