From 618821cc2992d65e0f5d9faf94cfc7fdb3574256 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Thu, 21 Jan 2021 20:59:38 +0100
Subject: [PATCH 01/19] Add create popup component

---
 src/components/misc/card.vue   |  6 +++-
 src/components/misc/create.vue | 38 +++++++++++++++++++++
 src/views/list/NewList.vue     | 60 +++++++++++++++++-----------------
 3 files changed, 73 insertions(+), 31 deletions(-)
 create mode 100644 src/components/misc/create.vue

diff --git a/src/components/misc/card.vue b/src/components/misc/card.vue
index 937bf101c..3f41ace70 100644
--- a/src/components/misc/card.vue
+++ b/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>
diff --git a/src/components/misc/create.vue b/src/components/misc/create.vue
new file mode 100644
index 000000000..3159c4698
--- /dev/null
+++ b/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>
diff --git a/src/views/list/NewList.vue b/src/views/list/NewList.vue
index e41e69c79..af7a2a943 100644
--- a/src/views/list/NewList.vue
+++ b/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)
 				})
 		},
-- 
2.40.1


From 706a6b3271e6fe09df399bd6f16c6f71633e0f04 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Thu, 21 Jan 2021 21:23:36 +0100
Subject: [PATCH 02/19] Make sure the popup does not close everything else

---
 src/components/home/contentAuth.vue | 4 ++++
 src/router/index.js                 | 4 +++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/home/contentAuth.vue b/src/components/home/contentAuth.vue
index b49c55ca4..ebff16b3e 100644
--- a/src/components/home/contentAuth.vue
+++ b/src/components/home/contentAuth.vue
@@ -23,6 +23,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>
diff --git a/src/router/index.js b/src/router/index.js
index 913aec39c..c764ad9d9 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -169,7 +169,9 @@ export default new Router({
 		{
 			path: '/namespaces/:id/list',
 			name: 'list.create',
-			component: NewListComponent,
+			components: {
+				popup: NewListComponent,
+			}
 		},
 		{
 			path: '/lists/:id/edit',
-- 
2.40.1


From 822028e4b745d60377688797ede864935df1d89e Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Thu, 21 Jan 2021 21:23:50 +0100
Subject: [PATCH 03/19] Make the close icon configurable

---
 src/components/misc/card.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/misc/card.vue b/src/components/misc/card.vue
index 3f41ace70..dd415d6ca 100644
--- a/src/components/misc/card.vue
+++ b/src/components/misc/card.vue
@@ -6,7 +6,7 @@
 			</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,10 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		closeIcon: {
+			type: String,
+			default: 'angle-right',
+		},
 		shadow: {
 			type: Boolean,
 			default: true,
-- 
2.40.1


From ccee8e9591fd905d6562ce4b77f7b506460e766c Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Thu, 21 Jan 2021 21:24:27 +0100
Subject: [PATCH 04/19] Cleanup new list creation component

---
 src/components/misc/create.vue | 20 ++++++++++++++++++--
 src/components/modal/modal.vue |  2 +-
 src/views/list/NewList.vue     | 10 +++-------
 3 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/components/misc/create.vue b/src/components/misc/create.vue
index 3159c4698..a599bfad7 100644
--- a/src/components/misc/create.vue
+++ b/src/components/misc/create.vue
@@ -5,15 +5,27 @@
 			:shadow="false"
 			:padding="false"
 			class="has-text-left"
+			:has-close="true"
+			close-icon="times"
 		>
 			<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()">
+				<x-button
+					:shadow="false"
+					type="secondary"
+					@click.prevent.stop="$router.back()"
+				>
 					Cancel
 				</x-button>
-				<x-button :shadow="false" type="primary" @click="$emit('create')" icon="plus">
+				<x-button
+					:shadow="false"
+					type="primary"
+					@click.prevent.stop="$emit('create')"
+					icon="plus"
+					:disabled="createDisabled"
+				>
 					{{ createLabel }}
 				</x-button>
 			</footer>
@@ -33,6 +45,10 @@ export default {
 			type: String,
 			default: 'Create',
 		},
+		createDisabled: {
+			type: Boolean,
+			default: false,
+		}
 	},
 }
 </script>
diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index 6d33c063f..9abe6346a 100644
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@@ -1,7 +1,7 @@
 <template>
 	<transition name="modal">
 		<div class="modal-mask">
-			<div class="modal-container" @click.prevent.stop="$emit('close')">
+			<div class="modal-container" @click.self.prevent.stop="$emit('close')">
 				<div class="modal-content">
 					<slot>
 						<div class="header">
diff --git a/src/views/list/NewList.vue b/src/views/list/NewList.vue
index af7a2a943..4de090f79 100644
--- a/src/views/list/NewList.vue
+++ b/src/views/list/NewList.vue
@@ -1,5 +1,5 @@
 <template>
-	<create title="Create a new list" @create="newList()">
+	<create title="Create a new list" @create="newList()" :create-disabled="list.title === ''">
 		<div class="field">
 			<label class="label" for="listTitle">List Title</label>
 			<div
@@ -9,7 +9,7 @@
 				<input
 					:class="{ disabled: listService.loading }"
 					@keyup.enter="newList()"
-					@keyup.esc="back()"
+					@keyup.esc="$router.back()"
 					class="input"
 					placeholder="The list's title goes here..."
 					type="text"
@@ -26,7 +26,6 @@
 </template>
 
 <script>
-import router from '../../router'
 import ListService from '../../services/list'
 import ListModel from '../../models/list'
 import Create from '@/components/misc/create'
@@ -66,7 +65,7 @@ export default {
 						{ message: 'The list was successfully created.' },
 						this
 					)
-					router.push({
+					this.$router.push({
 						name: 'list.index',
 						params: { listId: r.id },
 					})
@@ -75,9 +74,6 @@ export default {
 					this.error(e, this)
 				})
 		},
-		back() {
-			router.go(-1)
-		},
 	},
 }
 </script>
\ No newline at end of file
-- 
2.40.1


From 5708476ce5540eb14a6e6fd262544f5bb1fba20d Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Thu, 21 Jan 2021 21:29:32 +0100
Subject: [PATCH 05/19] Fix close icon

---
 src/components/misc/create.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/misc/create.vue b/src/components/misc/create.vue
index a599bfad7..e1147a17e 100644
--- a/src/components/misc/create.vue
+++ b/src/components/misc/create.vue
@@ -7,6 +7,7 @@
 			class="has-text-left"
 			:has-close="true"
 			close-icon="times"
+			@close="$router.back()"
 		>
 			<div class="p-4">
 				<slot></slot>
@@ -48,7 +49,7 @@ export default {
 		createDisabled: {
 			type: Boolean,
 			default: false,
-		}
+		},
 	},
 }
 </script>
-- 
2.40.1


From cd11b205bab30e9a95c774b16b08b77a1fc422a9 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Thu, 21 Jan 2021 21:31:01 +0100
Subject: [PATCH 06/19] Move new team to new create component

---
 src/views/teams/NewTeam.vue | 76 ++++++++++++++++++++-----------------
 1 file changed, 42 insertions(+), 34 deletions(-)

diff --git a/src/views/teams/NewTeam.vue b/src/views/teams/NewTeam.vue
index 1bc76e4f4..d229289e3 100644
--- a/src/views/teams/NewTeam.vue
+++ b/src/views/teams/NewTeam.vue
@@ -1,38 +1,38 @@
 <template>
-	<div class="fullpage">
-		<a @click="back()" class="close">
-			<icon :icon="['far', 'times-circle']">
-			</icon>
-		</a>
-		<h3>Create a new team</h3>
-		<form @keyup.esc="back()" @submit.prevent="newTeam">
-			<div class="field is-grouped">
-				<p class="control is-expanded" v-bind:class="{ 'is-loading': teamService.loading}">
-					<input
-						:class="{ 'disabled': teamService.loading}"
-						class="input"
-						placeholder="The team's name goes here..." type="text"
-						v-focus
-						v-model="team.name"/>
-				</p>
-				<p class="control">
-					<x-button :shadow="false" @click="newTeam" icon="plus">
-						Add
-					</x-button>
-				</p>
+	<create
+		title="Create a new team"
+		@create="newTeam()"
+		:create-disabled="team.name === ''"
+	>
+		<div class="field">
+			<label class="label" for="teamName">Team Name</label>
+			<div
+				class="control is-expanded"
+				:class="{ 'is-loading': teamService.loading }"
+			>
+				<input
+					:class="{ 'disabled': teamService.loading }"
+					class="input"
+					id="teamName"
+					placeholder="The team's name goes here..."
+					type="text"
+					v-focus
+					v-model="team.name"
+					@keyup.enter="newTeam"
+				/>
 			</div>
-			<p class="help is-danger" v-if="showError && team.name === ''">
-				Please specify a name.
-			</p>
-		</form>
-	</div>
+		</div>
+		<p class="help is-danger" v-if="showError && team.name === ''">
+			Please specify a name.
+		</p>
+	</create>
 </template>
 
 <script>
 import router from '../../router'
 import TeamModel from '../../models/team'
 import TeamService from '../../services/team'
-import {IS_FULLPAGE} from '@/store/mutation-types'
+import Create from '@/components/misc/create'
 
 export default {
 	name: 'NewTeam',
@@ -43,29 +43,37 @@ export default {
 			showError: false,
 		}
 	},
+	components: {
+		Create,
+	},
 	created() {
 		this.teamService = new TeamService()
 		this.team = new TeamModel()
-		this.$store.commit(IS_FULLPAGE, true)
 	},
 	mounted() {
 		this.setTitle('Create a new Team')
 	},
 	methods: {
 		newTeam() {
-
 			if (this.team.name === '') {
 				this.showError = true
 				return
 			}
 			this.showError = false
 
-			this.teamService.create(this.team)
-				.then(response => {
-					router.push({name: 'teams.edit', params: {id: response.id}})
-					this.success({message: 'The team was successfully created.'}, this)
+			this.teamService
+				.create(this.team)
+				.then((response) => {
+					router.push({
+						name: 'teams.edit',
+						params: { id: response.id },
+					})
+					this.success(
+						{ message: 'The team was successfully created.' },
+						this
+					)
 				})
-				.catch(e => {
+				.catch((e) => {
 					this.error(e, this)
 				})
 		},
-- 
2.40.1


From 6e48753b71d098ef4ffbb77aa9d68fa8da5ce079 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Thu, 21 Jan 2021 21:38:50 +0100
Subject: [PATCH 07/19] Move creating new labels to new create component

---
 src/views/labels/NewLabel.vue | 81 +++++++++++++++++++----------------
 1 file changed, 43 insertions(+), 38 deletions(-)

diff --git a/src/views/labels/NewLabel.vue b/src/views/labels/NewLabel.vue
index 155b193be..129d7d889 100644
--- a/src/views/labels/NewLabel.vue
+++ b/src/views/labels/NewLabel.vue
@@ -1,42 +1,39 @@
 <template>
-	<div class="fullpage">
-		<a @click="back()" class="close">
-			<icon :icon="['far', 'times-circle']"/>
-		</a>
-		<h3>Create a new label</h3>
-		<form @keyup.esc="back()" @submit.prevent="newlabel">
-			<div class="field is-grouped">
-				<p class="control is-expanded" v-bind:class="{ 'is-loading': labelService.loading }">
-					<input
-						:class="{ 'disabled': labelService.loading }"
-						class="input"
-						placeholder="The label title goes here..." type="text"
-						v-focus
-						v-model="label.title"/>
-				</p>
-				<p class="control">
-					<x-button
-						:shadow="false"
-						icon="plus"
-						@click="newlabel"
-					>
-						Add
-					</x-button>
-				</p>
+	<create
+		title="Create a new label"
+		@create="newLabel()"
+		:create-disabled="label.title === ''"
+	>
+		<div class="field">
+			<label class="label" for="labelTitle">Label Title</label>
+			<div
+				class="control is-expanded"
+				:class="{ 'is-loading': labelService.loading }"
+			>
+				<input
+					:class="{ disabled: labelService.loading }"
+					class="input"
+					placeholder="The label title goes here..."
+					type="text"
+					id="labelTitle"
+					v-focus
+					v-model="label.title"
+					@keyup.enter="newLabel()"
+				/>
 			</div>
-			<p class="help is-danger" v-if="showError && label.title === ''">
-				Please specify a title.
-			</p>
-		</form>
-	</div>
+		</div>
+		<p class="help is-danger" v-if="showError && label.title === ''">
+			Please specify a title.
+		</p>
+	</create>
 </template>
 
 <script>
 import labelModel from '../../models/label'
 import labelService from '../../services/label'
-import {IS_FULLPAGE} from '@/store/mutation-types'
 import LabelModel from '../../models/label'
 import LabelService from '../../services/label'
+import Create from '@/components/misc/create'
 
 export default {
 	name: 'NewLabel',
@@ -47,29 +44,37 @@ export default {
 			showError: false,
 		}
 	},
+	components: {
+		Create,
+	},
 	created() {
 		this.labelService = new LabelService()
 		this.label = new LabelModel()
-		this.$store.commit(IS_FULLPAGE, true)
 	},
 	mounted() {
 		this.setTitle('Create a new label')
 	},
 	methods: {
-		newlabel() {
-
+		newLabel() {
 			if (this.label.title === '') {
 				this.showError = true
 				return
 			}
 			this.showError = false
 
-			this.labelService.create(this.label)
-				.then(response => {
-					this.$router.push({name: 'labels.index', params: {id: response.id}})
-					this.success({message: 'The label was successfully created.'}, this)
+			this.labelService
+				.create(this.label)
+				.then((response) => {
+					this.$router.push({
+						name: 'labels.index',
+						params: { id: response.id },
+					})
+					this.success(
+						{ message: 'The label was successfully created.' },
+						this
+					)
 				})
-				.catch(e => {
+				.catch((e) => {
 					this.error(e, this)
 				})
 		},
-- 
2.40.1


From 1976fee261e4978e7ba08e2beb24216c3fcb1c66 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Thu, 21 Jan 2021 21:43:32 +0100
Subject: [PATCH 08/19] Move creating a new Namespace to new create component

---
 src/views/labels/NewLabel.vue         |  3 --
 src/views/namespaces/NewNamespace.vue | 72 ++++++++++++++-------------
 2 files changed, 37 insertions(+), 38 deletions(-)

diff --git a/src/views/labels/NewLabel.vue b/src/views/labels/NewLabel.vue
index 129d7d889..b55563763 100644
--- a/src/views/labels/NewLabel.vue
+++ b/src/views/labels/NewLabel.vue
@@ -78,9 +78,6 @@ export default {
 					this.error(e, this)
 				})
 		},
-		back() {
-			this.$router.go(-1)
-		},
 	},
 }
 </script>
diff --git a/src/views/namespaces/NewNamespace.vue b/src/views/namespaces/NewNamespace.vue
index 4a0c6fe22..016943f14 100644
--- a/src/views/namespaces/NewNamespace.vue
+++ b/src/views/namespaces/NewNamespace.vue
@@ -1,48 +1,46 @@
 <template>
-	<div class="fullpage">
-		<a @click="back()" class="close">
-			<icon :icon="['far', 'times-circle']">
-			</icon>
-		</a>
-		<h3>Create a new namespace</h3>
-		<div class="field is-grouped">
-			<p class="control is-expanded" v-bind:class="{ 'is-loading': namespaceService.loading}">
+	<create
+		title="Create a new namespace"
+		@create="newNamespace()"
+		:create-disabled="namespace.title === ''"
+	>
+		<div class="field">
+			<label class="label" for="namespaceTitle">Namespace Title</label>
+			<div
+				class="control is-expanded"
+				:class="{ 'is-loading': namespaceService.loading }"
+			>
 				<input
 					@keyup.enter="newNamespace()"
 					@keyup.esc="back()"
 					class="input"
 					placeholder="The namespace's name goes here..."
 					type="text"
-					:class="{ 'disabled': namespaceService.loading}"
+					:class="{ disabled: namespaceService.loading }"
 					v-focus
-					v-model="namespace.title"/>
-			</p>
-			<p class="control">
-				<x-button
-					:disabled="namespace.title === ''"
-					@click="newNamespace()"
-					:shadow="false"
-					icon="plus"
-				>
-					Add
-				</x-button>
-			</p>
+					v-model="namespace.title"
+				/>
+			</div>
 		</div>
 		<p class="help is-danger" v-if="showError && namespace.title === ''">
 			Please specify a title.
 		</p>
 		<p
-			class="small"
-			v-tooltip.bottom="'A namespace is a collection of lists you can share and use to organize your lists with. In fact, every list belongs to a namepace.'">
-			What's a namespace?</p>
-	</div>
+			class="is-small has-text-centered"
+			v-tooltip.bottom="
+				'A namespace is a collection of lists you can share and use to organize your lists with. In fact, every list belongs to a namepace.'
+			"
+		>
+			What's a namespace?
+		</p>
+	</create>
 </template>
 
 <script>
-import router from '../../router'
 import NamespaceModel from '../../models/namespace'
 import NamespaceService from '../../services/namespace'
-import {IS_FULLPAGE} from '@/store/mutation-types'
+import { IS_FULLPAGE } from '@/store/mutation-types'
+import Create from '@/components/misc/create'
 
 export default {
 	name: 'NewNamespace',
@@ -53,6 +51,9 @@ export default {
 			namespaceService: NamespaceService,
 		}
 	},
+	components: {
+		Create,
+	},
 	created() {
 		this.namespace = new NamespaceModel()
 		this.namespaceService = new NamespaceService()
@@ -69,19 +70,20 @@ export default {
 			}
 			this.showError = false
 
-			this.namespaceService.create(this.namespace)
-				.then(r => {
+			this.namespaceService
+				.create(this.namespace)
+				.then((r) => {
 					this.$store.commit('namespaces/addNamespace', r)
-					this.success({message: 'The namespace was successfully created.'}, this)
-					router.back()
+					this.success(
+						{ message: 'The namespace was successfully created.' },
+						this
+					)
+					this.$router.back()
 				})
-				.catch(e => {
+				.catch((e) => {
 					this.error(e, this)
 				})
 		},
-		back() {
-			router.go(-1)
-		},
 	},
 }
 </script>
-- 
2.40.1


From 2c1e58f1314555613a237349f01cbf970244daa7 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Thu, 21 Jan 2021 21:45:55 +0100
Subject: [PATCH 09/19] Cleanup fullpage stuff

---
 src/components/home/contentAuth.vue   | 5 +----
 src/components/home/navigation.vue    | 3 +--
 src/store/index.js                    | 5 -----
 src/views/namespaces/NewNamespace.vue | 2 --
 4 files changed, 2 insertions(+), 13 deletions(-)

diff --git a/src/components/home/contentAuth.vue b/src/components/home/contentAuth.vue
index ebff16b3e..d9a784cea 100644
--- a/src/components/home/contentAuth.vue
+++ b/src/components/home/contentAuth.vue
@@ -12,7 +12,6 @@
 			<div
 				:class="[
 					{
-						'fullpage-overlay': fullpage,
 						'is-menu-enabled': menuActive,
 					},
 					$route.name,
@@ -37,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 {
@@ -50,7 +49,6 @@ export default {
 		this.renewTokenOnFocus()
 	},
 	computed: mapState({
-		fullpage: IS_FULLPAGE,
 		namespaces(state) {
 			return state.namespaces.namespaces.filter(n => !n.isArchived)
 		},
@@ -62,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()
 		},
diff --git a/src/components/home/navigation.vue b/src/components/home/navigation.vue
index 5bdb2b7db..2942bc0d6 100644
--- a/src/components/home/navigation.vue
+++ b/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)
 		},
diff --git a/src/store/index.js b/src/store/index.js
index 181e161c7..643db496c 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -4,7 +4,6 @@ import {
 	CURRENT_LIST,
 	ERROR_MESSAGE,
 	HAS_TASKS,
-	IS_FULLPAGE,
 	KEYBOARD_SHORTCUTS_ACTIVE,
 	LOADING,
 	LOADING_MODULE,
@@ -39,7 +38,6 @@ export const store = new Vuex.Store({
 		loadingModule: null,
 		errorMessage: '',
 		online: true,
-		isFullpage: false,
 		// This is used to highlight the current list in menu for all list related views
 		currentList: {id: 0},
 		background: '',
@@ -60,9 +58,6 @@ export const store = new Vuex.Store({
 		[ONLINE](state, online) {
 			state.online = online
 		},
-		[IS_FULLPAGE](state, fullpage) {
-			state.isFullpage = fullpage
-		},
 		[CURRENT_LIST](state, currentList) {
 
 			setTitle(currentList.title)
diff --git a/src/views/namespaces/NewNamespace.vue b/src/views/namespaces/NewNamespace.vue
index 016943f14..be8494383 100644
--- a/src/views/namespaces/NewNamespace.vue
+++ b/src/views/namespaces/NewNamespace.vue
@@ -39,7 +39,6 @@
 <script>
 import NamespaceModel from '../../models/namespace'
 import NamespaceService from '../../services/namespace'
-import { IS_FULLPAGE } from '@/store/mutation-types'
 import Create from '@/components/misc/create'
 
 export default {
@@ -57,7 +56,6 @@ export default {
 	created() {
 		this.namespace = new NamespaceModel()
 		this.namespaceService = new NamespaceService()
-		this.$store.commit(IS_FULLPAGE, true)
 	},
 	mounted() {
 		this.setTitle('Create a new namespace')
-- 
2.40.1


From cef4c41d0a2288379af483d479145f130d0713b5 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Thu, 21 Jan 2021 21:46:06 +0100
Subject: [PATCH 10/19] Cleanup fullpage stuff

---
 src/store/mutation-types.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/store/mutation-types.js b/src/store/mutation-types.js
index da9921d8e..4a9043c59 100644
--- a/src/store/mutation-types.js
+++ b/src/store/mutation-types.js
@@ -2,7 +2,6 @@ export const LOADING = 'loading'
 export const LOADING_MODULE = 'loadingModule'
 export const ERROR_MESSAGE = 'errorMessage'
 export const ONLINE = 'online'
-export const IS_FULLPAGE = 'isFullpage'
 export const CURRENT_LIST = 'currentList'
 export const HAS_TASKS = 'hasTasks'
 export const MENU_ACTIVE = 'menuActive'
-- 
2.40.1


From 7cb3ef18d3c94988d1612cc0ddaf37905a1ed697 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Thu, 21 Jan 2021 21:48:15 +0100
Subject: [PATCH 11/19] Make sure all create views have the animation

---
 src/router/index.js | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/router/index.js b/src/router/index.js
index c764ad9d9..40436d1a0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -159,7 +159,9 @@ export default new Router({
 		{
 			path: '/namespaces/new',
 			name: 'namespace.create',
-			component: NewNamespaceComponent,
+			components: {
+				popup: NewNamespaceComponent,
+			},
 		},
 		{
 			path: '/namespaces/:id/edit',
@@ -244,7 +246,9 @@ export default new Router({
 		{
 			path: '/teams/new',
 			name: 'teams.create',
-			component: NewTeamComponent,
+			components: {
+				popup: NewTeamComponent,
+			},
 		},
 		{
 			path: '/teams/:id/edit',
@@ -259,7 +263,9 @@ export default new Router({
 		{
 			path: '/labels/new',
 			name: 'labels.create',
-			component: NewLabelComponent,
+			component: {
+				popup: NewLabelComponent,
+			},
 		},
 		{
 			path: '/migrate',
@@ -274,7 +280,9 @@ export default new Router({
 		{
 			path: '/filters/new',
 			name: 'filters.create',
-			component: CreateSavedFilter,
+			components: {
+				popup: CreateSavedFilter,
+			},
 		},
 		{
 			path: '/auth/openid/:provider',
-- 
2.40.1


From b57ce9ca4260048861e78e6c06ff564bffc68c25 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Thu, 21 Jan 2021 21:49:13 +0100
Subject: [PATCH 12/19] Fix new label create popup

---
 src/router/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/router/index.js b/src/router/index.js
index 40436d1a0..03d437bb9 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -263,7 +263,7 @@ export default new Router({
 		{
 			path: '/labels/new',
 			name: 'labels.create',
-			component: {
+			components: {
 				popup: NewLabelComponent,
 			},
 		},
-- 
2.40.1


From 038467c81c3d06e230b1954aa8759ddde2714e7b Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Thu, 21 Jan 2021 21:55:09 +0100
Subject: [PATCH 13/19] Add color picker when creating a new label

---
 src/components/misc/create.vue | 4 ++--
 src/components/modal/modal.vue | 8 +++++++-
 src/views/labels/NewLabel.vue  | 8 ++++++++
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/components/misc/create.vue b/src/components/misc/create.vue
index e1147a17e..121286bbd 100644
--- a/src/components/misc/create.vue
+++ b/src/components/misc/create.vue
@@ -1,10 +1,10 @@
 <template>
-	<modal @close="$router.back()">
+	<modal @close="$router.back()" :overflow="true">
 		<card
 			:title="title"
 			:shadow="false"
 			:padding="false"
-			class="has-text-left"
+			class="has-text-left has-overflow"
 			:has-close="true"
 			close-icon="times"
 			@close="$router.back()"
diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index 9abe6346a..1c74e59b1 100644
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@@ -2,7 +2,7 @@
 	<transition name="modal">
 		<div class="modal-mask">
 			<div class="modal-container" @click.self.prevent.stop="$emit('close')">
-				<div class="modal-content">
+				<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>
diff --git a/src/views/labels/NewLabel.vue b/src/views/labels/NewLabel.vue
index b55563763..432d6b386 100644
--- a/src/views/labels/NewLabel.vue
+++ b/src/views/labels/NewLabel.vue
@@ -22,6 +22,12 @@
 				/>
 			</div>
 		</div>
+		<div class="field">
+			<label class="label">Color</label>
+			<div class="control">
+				<color-picker v-model="label.hexColor" />
+			</div>
+		</div>
 		<p class="help is-danger" v-if="showError && label.title === ''">
 			Please specify a title.
 		</p>
@@ -34,6 +40,7 @@ import labelService from '../../services/label'
 import LabelModel from '../../models/label'
 import LabelService from '../../services/label'
 import Create from '@/components/misc/create'
+import ColorPicker from '../../components/input/colorPicker'
 
 export default {
 	name: 'NewLabel',
@@ -46,6 +53,7 @@ export default {
 	},
 	components: {
 		Create,
+		ColorPicker,
 	},
 	created() {
 		this.labelService = new LabelService()
-- 
2.40.1


From 542a29753f7e897a396d0dc24e6c39afeeaee230 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Thu, 21 Jan 2021 21:56:30 +0100
Subject: [PATCH 14/19] Add color picker to create new list

---
 src/views/labels/NewLabel.vue | 6 +++---
 src/views/list/NewList.vue    | 8 ++++++++
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/views/labels/NewLabel.vue b/src/views/labels/NewLabel.vue
index 432d6b386..e314d28f7 100644
--- a/src/views/labels/NewLabel.vue
+++ b/src/views/labels/NewLabel.vue
@@ -22,15 +22,15 @@
 				/>
 			</div>
 		</div>
+		<p class="help is-danger" v-if="showError && label.title === ''">
+			Please specify a title.
+		</p>
 		<div class="field">
 			<label class="label">Color</label>
 			<div class="control">
 				<color-picker v-model="label.hexColor" />
 			</div>
 		</div>
-		<p class="help is-danger" v-if="showError && label.title === ''">
-			Please specify a title.
-		</p>
 	</create>
 </template>
 
diff --git a/src/views/list/NewList.vue b/src/views/list/NewList.vue
index 4de090f79..864b04a2a 100644
--- a/src/views/list/NewList.vue
+++ b/src/views/list/NewList.vue
@@ -22,6 +22,12 @@
 		<p class="help is-danger" v-if="showError && list.title === ''">
 			Please specify a title.
 		</p>
+		<div class="field">
+			<label class="label">Color</label>
+			<div class="control">
+				<color-picker v-model="list.hexColor" />
+			</div>
+		</div>
 	</create>
 </template>
 
@@ -29,6 +35,7 @@
 import ListService from '../../services/list'
 import ListModel from '../../models/list'
 import Create from '@/components/misc/create'
+import ColorPicker from '../../components/input/colorPicker'
 
 export default {
 	name: 'NewList',
@@ -41,6 +48,7 @@ export default {
 	},
 	components: {
 		Create,
+		ColorPicker,
 	},
 	created() {
 		this.list = new ListModel()
-- 
2.40.1


From c2114fbf468f4ac09b600270d796061892d14d21 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Thu, 21 Jan 2021 21:58:03 +0100
Subject: [PATCH 15/19] Add color picker to new namespace create

---
 src/views/namespaces/NewNamespace.vue | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/views/namespaces/NewNamespace.vue b/src/views/namespaces/NewNamespace.vue
index be8494383..b0f593181 100644
--- a/src/views/namespaces/NewNamespace.vue
+++ b/src/views/namespaces/NewNamespace.vue
@@ -25,6 +25,12 @@
 		<p class="help is-danger" v-if="showError && namespace.title === ''">
 			Please specify a title.
 		</p>
+		<div class="field">
+			<label class="label">Color</label>
+			<div class="control">
+				<color-picker v-model="namespace.hexColor" />
+			</div>
+		</div>
 		<p
 			class="is-small has-text-centered"
 			v-tooltip.bottom="
@@ -40,6 +46,7 @@
 import NamespaceModel from '../../models/namespace'
 import NamespaceService from '../../services/namespace'
 import Create from '@/components/misc/create'
+import ColorPicker from '../../components/input/colorPicker'
 
 export default {
 	name: 'NewNamespace',
@@ -51,6 +58,7 @@ export default {
 		}
 	},
 	components: {
+		ColorPicker,
 		Create,
 	},
 	created() {
-- 
2.40.1


From 7734c8d80dff05bd18fe9ce939ed61a870a9aed6 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Thu, 21 Jan 2021 22:49:05 +0100
Subject: [PATCH 17/19] Fix tests

---
 cypress/integration/list/list.spec.js       | 4 ++--
 cypress/integration/list/namespaces.spec.js | 4 ++--
 cypress/integration/sharing/team.spec.js    | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/cypress/integration/list/list.spec.js b/cypress/integration/list/list.spec.js
index 99cf178d7..ef4908ff2 100644
--- a/cypress/integration/list/list.spec.js
+++ b/cypress/integration/list/list.spec.js
@@ -25,12 +25,12 @@ describe('Lists', () => {
 			.click()
 		cy.url()
 			.should('contain', '/namespaces/1/list')
-		cy.get('h3')
+		cy.get('.card-header-title')
 			.contains('Create a new list')
 		cy.get('input.input')
 			.type('New List')
 		cy.get('.button')
-			.contains('Add')
+			.contains('Create')
 			.click()
 
 		cy.wait(1000) // Waiting until the request to create the new list is done
diff --git a/cypress/integration/list/namespaces.spec.js b/cypress/integration/list/namespaces.spec.js
index 6d3b33d3e..9dba7b431 100644
--- a/cypress/integration/list/namespaces.spec.js
+++ b/cypress/integration/list/namespaces.spec.js
@@ -26,12 +26,12 @@ describe('Namepaces', () => {
 			.click()
 		cy.url()
 			.should('contain', '/namespaces/new')
-		cy.get('h3')
+		cy.get('.card-header-title')
 			.should('contain', 'Create a new namespace')
 		cy.get('input.input')
 			.type('New Namespace')
 		cy.get('.button')
-			.contains('Add')
+			.contains('Create')
 			.click()
 		cy.url()
 			.should('contain', '/namespaces')
diff --git a/cypress/integration/sharing/team.spec.js b/cypress/integration/sharing/team.spec.js
index 5f9b48047..0359af91a 100644
--- a/cypress/integration/sharing/team.spec.js
+++ b/cypress/integration/sharing/team.spec.js
@@ -15,12 +15,12 @@ describe('Team', () => {
             .click()
 		cy.url()
 			.should('contain', '/teams/new')
-		cy.get('h3')
+		cy.get('.card-header-title')
 			.contains('Create a new team')
 		cy.get('input.input')
 			.type(newTeamName)
 		cy.get('.button')
-			.contains('Add')
+			.contains('Create')
 			.click()
 
         cy.get('.fullpage')
-- 
2.40.1


From 877376153e3f2f6719b1c9a1c26dd0d811c89069 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Thu, 21 Jan 2021 23:12:44 +0100
Subject: [PATCH 18/19] Increase default timeout for cypress tests

---
 .drone.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.drone.yml b/.drone.yml
index e4acea4a0..efaeb8057 100644
--- a/.drone.yml
+++ b/.drone.yml
@@ -95,6 +95,7 @@ steps:
       CYPRESS_TEST_SECRET: averyLongSecretToSe33dtheDB
       YARN_CACHE_FOLDER: .cache/yarn/
       CYPRESS_CACHE_FOLDER: .cache/cypress/
+      CYPRESS_DEFAULT_COMMAND_TIMEOUT: 10000
     commands:
       - sed -i 's/localhost/api/g' public/index.html
       - yarn serve & npx wait-on http://localhost:8080
-- 
2.40.1


From 8c6a7f694695e2d4f326b1e98ba210a814542aae Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Thu, 21 Jan 2021 23:29:27 +0100
Subject: [PATCH 19/19] Fix list tests

---
 cypress/integration/list/list.spec.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/cypress/integration/list/list.spec.js b/cypress/integration/list/list.spec.js
index ef4908ff2..a27358bec 100644
--- a/cypress/integration/list/list.spec.js
+++ b/cypress/integration/list/list.spec.js
@@ -142,9 +142,8 @@ describe('Lists', () => {
 			})
 			cy.visit('/lists/1/table')
 
-			cy.get('.table-view table.table a')
+			cy.get('.table-view table.table')
 				.contains(tasks[0].title)
-				.first()
 				.click()
 
 			cy.url()
@@ -364,7 +363,6 @@ describe('Lists', () => {
 
 			cy.get('.kanban .bucket .tasks .task')
 				.contains(tasks[0].title)
-				.first()
 				.click()
 
 			cy.url()
-- 
2.40.1