Re-worked the modal component
This commit is contained in:
Julien Nahum
parent
8068ed1129
commit
35c49ff90c
|
|
@ -22,15 +22,30 @@
|
||||||
leave-class="opacity-100 translate-y-0 sm:scale-100"
|
leave-class="opacity-100 translate-y-0 sm:scale-100"
|
||||||
leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||||
>
|
>
|
||||||
<div v-if="show" class="modal-content bg-white dark:bg-notion-dark rounded-lg overflow-y-scroll shadow-xl transform transition-all sm:w-full"
|
<div v-if="show"
|
||||||
|
class="modal-content bg-white dark:bg-notion-dark rounded-lg overflow-y-scroll shadow-xl transform transition-all sm:w-full"
|
||||||
:class="maxWidthClass"
|
:class="maxWidthClass"
|
||||||
>
|
>
|
||||||
<div class="bg-white dark:bg-notion-dark px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
<div class="bg-white relative dark:bg-notion-dark p-4 md:p-6">
|
||||||
<div class="sm:flex sm:items-start">
|
<div class="absolute top-4 right-4" v-if="closeable">
|
||||||
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
<button class="text-gray-500 hover:text-gray-900 cursor-pointer" @click.prevent="close">
|
||||||
<h3 v-if="$scopedSlots.hasOwnProperty('title')" class="text-lg">
|
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="sm:flex sm:flex-col sm:items-start">
|
||||||
|
<div v-if="$scopedSlots.hasOwnProperty('icon')" class="flex w-full justify-center mb-4">
|
||||||
|
<div class="w-14 h-14 rounded-full flex justify-center items-center"
|
||||||
|
:class="'bg-'+iconColor+'-100 text-'+iconColor+'-600'">
|
||||||
|
<slot name="icon"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-3 text-center sm:mt-0 w-full">
|
||||||
|
<h2 v-if="$scopedSlots.hasOwnProperty('title')" class="text-2xl font-semibold text-center text-gray-900">
|
||||||
<slot name="title"/>
|
<slot name="title"/>
|
||||||
</h3>
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -57,6 +72,9 @@ export default {
|
||||||
show: {
|
show: {
|
||||||
default: false
|
default: false
|
||||||
},
|
},
|
||||||
|
iconColor: {
|
||||||
|
default: 'blue'
|
||||||
|
},
|
||||||
maxWidth: {
|
maxWidth: {
|
||||||
default: '2xl'
|
default: '2xl'
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
@click="$emit('click',$event)"
|
@click="$emit('click',$event)"
|
||||||
>
|
>
|
||||||
<template v-if="!loading">
|
<template v-if="!loading">
|
||||||
<span class="no-underline">
|
<span class="no-underline mx-auto">
|
||||||
<slot/>
|
<slot/>
|
||||||
</span>
|
</span>
|
||||||
<svg v-if="arrow" class="ml-2 w-3 h-3 inline" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg v-if="arrow" class="ml-2 w-3 h-3 inline" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
|
@ -16,7 +16,7 @@
|
||||||
</button>
|
</button>
|
||||||
<router-link v-else :class="btnClasses" :to="to" :target="target"
|
<router-link v-else :class="btnClasses" :to="to" :target="target"
|
||||||
>
|
>
|
||||||
<span class="no-underline">
|
<span class="no-underline mx-auto">
|
||||||
<slot/>
|
<slot/>
|
||||||
</span>
|
</span>
|
||||||
<svg v-if="arrow" class="ml-2 w-3 h-3 inline" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg v-if="arrow" class="ml-2 w-3 h-3 inline" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
|
@ -72,8 +72,8 @@ export default {
|
||||||
const sizes = this.sizes
|
const sizes = this.sizes
|
||||||
const colorShades = this.colorShades
|
const colorShades = this.colorShades
|
||||||
return `${sizes['p-y']} ${sizes['p-x']}
|
return `${sizes['p-y']} ${sizes['p-x']}
|
||||||
${colorShades['main']} ${colorShades['hover']} ${colorShades['ring']} ${colorShades['ring-offset']}
|
${colorShades?.main} ${colorShades?.hover} ${colorShades?.ring} ${colorShades['ring-offset']}
|
||||||
${colorShades['text']} transition ease-in duration-200 text-center text-${sizes['font']} font-medium focus:outline-none focus:ring-2
|
${colorShades?.text} transition ease-in duration-200 text-center text-${sizes?.font} font-medium focus:outline-none focus:ring-2
|
||||||
focus:ring-offset-2 rounded-lg flex items-center hover:no-underline`
|
focus:ring-offset-2 rounded-lg flex items-center hover:no-underline`
|
||||||
},
|
},
|
||||||
colorShades() {
|
colorShades() {
|
||||||
|
|
|
||||||
|
|
@ -18,9 +18,12 @@
|
||||||
<p class="font-bold truncate" v-text="workspace.name"/>
|
<p class="font-bold truncate" v-text="workspace.name"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="workspaces.length > 1" class="block md:hidden group-hover:block text-red-500 p-2 rounded hover:bg-red-50" role="button" @click="deleteWorkspace(workspace)">
|
<div v-if="workspaces.length > 1"
|
||||||
|
class="block md:hidden group-hover:block text-red-500 p-2 rounded hover:bg-red-50" role="button"
|
||||||
|
@click="deleteWorkspace(workspace)">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
|
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -32,13 +35,19 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Workspace modal -->
|
<!-- Workspace modal -->
|
||||||
<modal :show="workspaceModal" @close="workspaceModal=false">
|
<modal :show="workspaceModal" @close="workspaceModal=false" max-width="lg">
|
||||||
|
<template #icon>
|
||||||
|
<svg class="w-8 h-8" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path
|
||||||
|
d="M12 8V16M8 12H16M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z"
|
||||||
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
<template #title>
|
||||||
|
Create Workspace
|
||||||
|
</template>
|
||||||
<div class="px-4">
|
<div class="px-4">
|
||||||
<form @submit.prevent="createWorkspace" @keydown="form.onKeydown($event)">
|
<form @submit.prevent="createWorkspace" @keydown="form.onKeydown($event)">
|
||||||
<h2 class="text-2xl font-bold z-10 truncate mb-5 text-nt-blue">
|
|
||||||
Create Workspace
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<text-input name="name" class="mt-4" :form="form" :required="true"
|
<text-input name="name" class="mt-4" :form="form" :required="true"
|
||||||
label="Workspace Name"
|
label="Workspace Name"
|
||||||
|
|
@ -48,10 +57,10 @@
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex justify-end mt-4">
|
<div class="w-full mt-6">
|
||||||
<v-button :loading="form.busy" class="mr-1">Save</v-button>
|
<v-button :loading="form.busy" class="w-full my-3">Save</v-button>
|
||||||
<v-button color="gray" shade="light" @click.prevent="workspaceModal=false">Close</v-button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</modal>
|
</modal>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue