From 2139d4d52866a9ecc714cbe63fe4976646910622 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 17 Jan 2021 20:21:33 +0100
Subject: [PATCH] Make sure all empty pages have a call to action

---
 src/styles/components/list.scss         |  6 ------
 src/views/labels/ListLabels.vue         |  9 ++++++---
 src/views/list/views/List.vue           |  7 +++++--
 src/views/namespaces/ListNamespaces.vue | 16 +++++++++++++++-
 src/views/teams/ListTeams.vue           |  7 ++++++-
 5 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/src/styles/components/list.scss b/src/styles/components/list.scss
index a2b2fb0d0..49ae6190f 100644
--- a/src/styles/components/list.scss
+++ b/src/styles/components/list.scss
@@ -156,9 +156,3 @@
 .list-namespace-title {
   color: $grey;
 }
-
-.list-is-empty-notice {
-  text-align: center;
-  color: $grey;
-  font-style: italic;
-}
diff --git a/src/views/labels/ListLabels.vue b/src/views/labels/ListLabels.vue
index 3eef931e6..b5ef056f2 100644
--- a/src/views/labels/ListLabels.vue
+++ b/src/views/labels/ListLabels.vue
@@ -10,11 +10,14 @@
 
 		<div class="content">
 			<h1>Manage labels</h1>
-			<p>
+			<p v-if="labels.length > 0">
 				Click on a label to edit it.
 				You can edit all labels you created, you can use all labels which are associated with a task to whose
-				list
-				you have access.
+				list you have access.
+			</p>
+			<p v-else class="has-text-centered has-text-grey">
+				You currently do not have any labels.
+				<router-link :to="{name:'labels.create'}">Create a new label.</router-link>
 			</p>
 		</div>
 
diff --git a/src/views/list/views/List.vue b/src/views/list/views/List.vue
index d08c4a726..8b1ef6924 100644
--- a/src/views/list/views/List.vue
+++ b/src/views/list/views/List.vue
@@ -61,7 +61,9 @@
 						placeholder="Add a new task..."
 						type="text"
 						v-focus
-						v-model="newTaskText"/>
+						v-model="newTaskText"
+						ref="newTaskInput"
+					/>
 					<span class="icon is-small is-left">
 						<icon icon="tasks"/>
 					</span>
@@ -81,8 +83,9 @@
 			</p>
 		</div>
 
-		<p class="list-is-empty-notice" v-if="tasks.length === 0">
+		<p class="has-text-centered has-text-grey" v-if="tasks.length === 0">
 			This list is currently empty.
+			<a @click="$refs.newTaskInput.focus()">Create a new task.</a>
 		</p>
 
 		<div class="columns">
diff --git a/src/views/namespaces/ListNamespaces.vue b/src/views/namespaces/ListNamespaces.vue
index d8934d389..bd9addaee 100644
--- a/src/views/namespaces/ListNamespaces.vue
+++ b/src/views/namespaces/ListNamespaces.vue
@@ -11,12 +11,19 @@
 			Show Archived
 		</fancycheckbox>
 
+		<p class="has-text-centered has-text-grey mt-4" v-if="namespaces.length === 0">
+			You don't have any namespaces right now.
+			<router-link :to="{name: 'namespace.create'}">
+				Create a namespace.
+			</router-link>
+		</p>
+
 		<div :key="`n${n.id}`" class="namespace" v-for="n in namespaces">
 			<x-button
 				:to="{name: 'list.create', params: {id:  n.id}}"
 				class="is-pulled-right"
 				type="secondary"
-				v-if="n.id > 0"
+				v-if="n.id > 0 && n.lists.length > 0"
 				icon="plus"
 			>
 				Create list
@@ -29,6 +36,13 @@
 				</span>
 			</h1>
 
+			<p class="has-text-centered has-text-grey mt-4" v-if="n.lists.length === 0">
+				This namespace does not contain any lists.
+				<router-link :to="{name: 'list.create', params: {id:  n.id}}">
+					Create a new list in this namespace.
+				</router-link>
+			</p>
+
 			<div class="lists">
 				<template v-for="l in n.lists">
 					<router-link
diff --git a/src/views/teams/ListTeams.vue b/src/views/teams/ListTeams.vue
index 815be0f14..24736ab1a 100644
--- a/src/views/teams/ListTeams.vue
+++ b/src/views/teams/ListTeams.vue
@@ -16,7 +16,12 @@
 				</router-link>
 			</li>
 		</ul>
-		<p v-else class="has-text-centered has-text-grey">You are currently not part of any teams.</p>
+		<p v-else class="has-text-centered has-text-grey">
+			You are currently not part of any teams.
+			<router-link :to="{name: 'teams.create'}">
+				Create a new team.
+			</router-link>
+		</p>
 	</div>
 </template>