Add create popup component

src/components/misc/card.vue

@@ -1,5 +1,5 @@
 <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 }}
@@ -34,6 +34,10 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		shadow: {
+			type: Boolean,
+			default: true,
+		},
 	},
 }
 </script>

src/components/misc/create.vue

@@ -0,0 +1,38 @@
+<template>
+	<modal @close="$router.back()">
+		<card
+			:title="title"
+			:shadow="false"
+			:padding="false"
+			class="has-text-left"
+		>
+			<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="$router.back()">
+					Cancel
+				</x-button>
+				<x-button :shadow="false" type="primary" @click="$emit('create')" icon="plus">
+					{{ createLabel }}
+				</x-button>
+			</footer>
+		</card>
+	</modal>
+</template>
+
+<script>
+export default {
+	name: 'create',
+	props: {
+		title: {
+			type: String,
+			default: '',
+		},
+		createLabel: {
+			type: String,
+			default: 'Create',
+		},
+	},
+}
+</script>

src/views/list/NewList.vue

@@ -1,44 +1,35 @@
 <template>
-	<div class="fullpage">
-		<a @click="back()" class="close">
-			<icon :icon="['far', 'times-circle']">
-			</icon>
-		</a>
-		<h3>Create a new list</h3>
-		<div class="field is-grouped">
-			<p :class="{ 'is-loading': listService.loading}" class="control is-expanded">
+	<create title="Create a new list" @create="newList()">
+		<div class="field">
+			<label class="label" for="listTitle">List Title</label>
+			<div
+				:class="{ 'is-loading': listService.loading }"
+				class="control"
+			>
 				<input
-					:class="{ 'disabled': listService.loading}"
+					:class="{ disabled: listService.loading }"
 					@keyup.enter="newList()"
 					@keyup.esc="back()"
 					class="input"
-					placeholder="The list's name goes here..."
+					placeholder="The list's title goes here..."
 					type="text"
+					name="listTitle"
 					v-focus
-					v-model="list.title"/>
-			</p>
-			<p class="control">
-				<x-button
-					:disabled="list.title === ''"
-					@click="newList()"
-					icon="plus"
-					:shadow="false"
-				>
-					Add
-				</x-button>
-			</p>
+					v-model="list.title"
+				/>
+			</div>
 		</div>
 		<p class="help is-danger" v-if="showError && list.title === ''">
 			Please specify a title.
 		</p>
-	</div>
+	</create>
 </template>
 
 <script>
 import router from '../../router'
 import ListService from '../../services/list'
 import ListModel from '../../models/list'
-import {IS_FULLPAGE} from '@/store/mutation-types'
+import Create from '@/components/misc/create'
 
 export default {
 	name: 'NewList',
@@ -49,10 +40,12 @@ export default {
 			listService: ListService,
 		}
 	},
+	components: {
+		Create,
+	},
 	created() {
 		this.list = new ListModel()
 		this.listService = new ListService()
-		this.$store.commit(IS_FULLPAGE, true)
 	},
 	mounted() {
 		this.setTitle('Create a new list')
@@ -66,12 +59,19 @@ export default {
 			this.showError = false
 
 			this.list.namespaceId = this.$route.params.id
-			this.$store.dispatch('lists/createList', this.list)
-				.then(r => {
-					this.success({message: 'The list was successfully created.'}, this)
-					router.push({name: 'list.index', params: {listId: r.id}})
+			this.$store
+				.dispatch('lists/createList', this.list)
+				.then((r) => {
+					this.success(
+						{ message: 'The list was successfully created.' },
+						this
+					)
+					router.push({
+						name: 'list.index',
+						params: { listId: r.id },
+					})
 				})
-				.catch(e => {
+				.catch((e) => {
 					this.error(e, this)
 				})
 		},