New design (#14)

src/components/namespaces/EditNamespace.vue

@@ -12,7 +12,7 @@
 						<div class="field">
 							<label class="label" for="namespacetext">Namespace Name</label>
 							<div class="control">
-								<input :class="{ 'disabled': loading}" :disabled="loading" class="input" type="text" id="namespacetext" placeholder="The namespace text is here..." v-model="namespace.name">
+								<input v-focus :class="{ 'disabled': loading}" :disabled="loading" class="input" type="text" id="namespacetext" placeholder="The namespace text is here..." v-model="namespace.name">
 							</div>
 						</div>
 						<div class="field">
@@ -25,7 +25,7 @@
 
 					<div class="columns bigbuttons">
 						<div class="column">
-							<button @click="submit()" class="button is-success is-fullwidth" :class="{ 'is-loading': loading}">
+							<button @click="submit()" class="button is-primary is-fullwidth" :class="{ 'is-loading': loading}">
 								Save
 							</button>
 						</div>

src/components/namespaces/NewNamespace.vue

@@ -1,16 +1,17 @@
 <template>
-	<div class="content">
+	<div class="fullpage">
+		<a class="close" @click="back()">
+			<icon :icon="['far', 'times-circle']">
+			</icon>
+		</a>
 		<h3>Create a new namespace</h3>
-		<form @submit.prevent="newNamespace">
+		<form @submit.prevent="newNamespace" @keyup.esc="back()">
 			<div class="field is-grouped">
-				<p class="control has-icons-left is-expanded" v-bind:class="{ 'is-loading': loading}">
-					<input class="input" v-bind:class="{ 'disabled': loading}" v-model="namespace.name" type="text" placeholder="The namespace's name goes here...">
-					<span class="icon is-small is-left">
-										<icon icon="layer-group"/>
-					</span>
+				<p class="control is-expanded" v-bind:class="{ 'is-loading': loading}">
+					<input v-focus class="input" v-bind:class="{ 'disabled': loading}" v-model="namespace.name" type="text" placeholder="The namespace's name goes here...">
 				</p>
 				<p class="control">
-					<button type="submit" class="button is-success">
+					<button type="submit" class="button is-success noshadow">
 						<span class="icon is-small">
 							<icon icon="plus"/>
 						</span>
@@ -19,55 +20,59 @@
 				</p>
 			</div>
 		</form>
+		<p class="small" v-tooltip.bottom="'A namespace is a collection of lists you can share and use to organize your lists with.<br/>In fact, every list belongs to a namepace.'">What's a namespace?</p>
 	</div>
 </template>
 
 <script>
-    import auth from '../../auth'
-    import router from '../../router'
-    import {HTTP} from '../../http-common'
-    import message from '../../message'
+	import auth from '../../auth'
+	import router from '../../router'
+	import {HTTP} from '../../http-common'
+	import message from '../../message'
 
-    export default {
-        name: "NewNamespace",
-        data() {
-            return {
-                namespace: {title: ''},
-                error: '',
-                loading: false
-            }
-        },
-        beforeMount() {
-            // Check if the user is already logged in, if so, redirect him to the homepage
-            if (!auth.user.authenticated) {
-                router.push({name: 'home'})
-            }
-        },
-        methods: {
-            newNamespace() {
+	export default {
+		name: "NewNamespace",
+		data() {
+			return {
+				namespace: {title: ''},
+				error: '',
+				loading: false
+			}
+		},
+		beforeMount() {
+			// Check if the user is already logged in, if so, redirect him to the homepage
+			if (!auth.user.authenticated) {
+				router.push({name: 'home'})
+			}
+		},
+		created() {
+			this.$parent.setFullPage();
+		},
+		methods: {
+			newNamespace() {
 				const cancel = message.setLoading(this)
 
-                HTTP.put(`namespaces`, this.namespace, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
-                    .then(() => {
-                        this.$parent.loadNamespaces()
-                        this.handleSuccess({message: 'The namespace was successfully created.'})
+				HTTP.put(`namespaces`, this.namespace, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
+					.then(() => {
+						this.$parent.loadNamespaces()
+						this.handleSuccess({message: 'The namespace was successfully created.'})
+						cancel()
+						router.push({name: 'home'})
+					})
+					.catch(e => {
 						cancel()
-                    })
-                    .catch(e => {
-                        cancel()
 						this.handleError(e)
-                    })
-            },
-            handleError(e) {
-                message.error(e, this)
-            },
-            handleSuccess(e) {
-                message.success(e, this)
-            }
-        }
-    }
+					})
+			},
+			back() {
+				router.go(-1)
+			},
+			handleError(e) {
+				message.error(e, this)
+			},
+			handleSuccess(e) {
+				message.success(e, this)
+			}
+		}
+	}
 </script>
-
-<style scoped>
-
-</style>