Move all create views to better looking popups (#383)

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/383
Co-authored-by: konrad <konrad@kola-entertainments.de>
Co-committed-by: konrad <konrad@kola-entertainments.de>

src/components/home/contentAuth.vue

@@ -12,7 +12,6 @@
 			<div
 				:class="[
 					{
-						'fullpage-overlay': fullpage,
 						'is-menu-enabled': menuActive,
 					},
 					$route.name,
@@ -23,6 +22,10 @@
 				
 				<router-view/>
 				
+				<transition name="modal">
+					<router-view name="popup"/>
+				</transition>
+				
 				<a @click="$store.commit('keyboardShortcutsActive', true)" class="keyboard-shortcuts-button">
 					<icon icon="keyboard"/>
 				</a>
@@ -33,7 +36,7 @@
 
 <script>
 import {mapState} from 'vuex'
-import {CURRENT_LIST, IS_FULLPAGE, MENU_ACTIVE} from '@/store/mutation-types'
+import {CURRENT_LIST, MENU_ACTIVE} from '@/store/mutation-types'
 import Navigation from '@/components/home/navigation'
 
 export default {
@@ -46,7 +49,6 @@ export default {
 		this.renewTokenOnFocus()
 	},
 	computed: mapState({
-		fullpage: IS_FULLPAGE,
 		namespaces(state) {
 			return state.namespaces.namespaces.filter(n => !n.isArchived)
 		},
@@ -58,7 +60,6 @@ export default {
 	methods: {
 		doStuffAfterRoute() {
 			// this.setTitle('') // Reset the title if the page component does not set one itself
-			this.$store.commit(IS_FULLPAGE, false)
 			this.hideMenuOnMobile()
 			this.resetCurrentList()
 		},

src/components/home/navigation.vue

@@ -133,12 +133,11 @@
 
 <script>
 import {mapState} from 'vuex'
-import {CURRENT_LIST, IS_FULLPAGE, MENU_ACTIVE, LOADING, LOADING_MODULE} from '@/store/mutation-types'
+import {CURRENT_LIST, MENU_ACTIVE, LOADING, LOADING_MODULE} from '@/store/mutation-types'
 
 export default {
 	name: 'navigation',
 	computed: mapState({
-		fullpage: IS_FULLPAGE,
 		namespaces(state) {
 			return state.namespaces.namespaces.filter(n => !n.isArchived)
 		},

src/components/misc/card.vue

@@ -1,12 +1,12 @@
 <template>
-	<div class="card">
+	<div class="card" :class="{'has-no-shadow': !shadow}">
 		<header class="card-header" v-if="title !== ''">
 			<p class="card-header-title">
 				{{ title }}
 			</p>
 			<a @click="$emit('close')" class="card-header-icon" v-if="hasClose">
 				<span class="icon">
-					<icon icon="angle-right"/>
+					<icon :icon="closeIcon"/>
 				</span>
 			</a>
 		</header>
@@ -34,6 +34,14 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		closeIcon: {
+			type: String,
+			default: 'angle-right',
+		},
+		shadow: {
+			type: Boolean,
+			default: true,
+		},
 	},
 }
 </script>

src/components/misc/create.vue

@@ -0,0 +1,55 @@
+<template>
+	<modal @close="$router.back()" :overflow="true">
+		<card
+			:title="title"
+			:shadow="false"
+			:padding="false"
+			class="has-text-left has-overflow"
+			:has-close="true"
+			close-icon="times"
+			@close="$router.back()"
+		>
+			<div class="p-4">
+				<slot></slot>
+			</div>
+			<footer class="modal-card-foot is-flex is-justify-content-flex-end">
+				<x-button
+					:shadow="false"
+					type="secondary"
+					@click.prevent.stop="$router.back()"
+				>
+					Cancel
+				</x-button>
+				<x-button
+					:shadow="false"
+					type="primary"
+					@click.prevent.stop="$emit('create')"
+					icon="plus"
+					:disabled="createDisabled"
+				>
+					{{ createLabel }}
+				</x-button>
+			</footer>
+		</card>
+	</modal>
+</template>
+
+<script>
+export default {
+	name: 'create',
+	props: {
+		title: {
+			type: String,
+			default: '',
+		},
+		createLabel: {
+			type: String,
+			default: 'Create',
+		},
+		createDisabled: {
+			type: Boolean,
+			default: false,
+		},
+	},
+}
+</script>

src/components/modal/modal.vue

@@ -1,8 +1,8 @@
 <template>
 	<transition name="modal">
 		<div class="modal-mask">
-			<div class="modal-container" @click.prevent.stop="$emit('close')">
-				<div class="modal-content">
+			<div class="modal-container" @click.self.prevent.stop="$emit('close')">
+				<div class="modal-content" :class="{'has-overflow': overflow}">
 					<slot>
 						<div class="header">
 							<slot name="header"></slot>
@@ -44,5 +44,11 @@ export default {
 			}
 		})
 	},
+	props: {
+		overflow: {
+			type: Boolean,
+			default: false,
+		},
+	},
 }
 </script>