From d1df380874dbfe64f11cfa4a860229a7863e8fc5 Mon Sep 17 00:00:00 2001
From: Adam Procter <adamprocter@researchnot.es>
Date: Mon, 6 Sep 2021 16:14:14 +0100
Subject: [PATCH] added onboarding UI tweaks
see CHANGELOG.md 0.2.4
---
CHANGELOG.md | 13 ++++++++
package.json | 3 +-
src/components/JoinMicrocosm.vue | 57 ++++++++++++++++++++++----------
src/components/MyNodes.vue | 10 +++++-
src/components/TellmeMore.vue | 1 -
src/main.js | 2 +-
src/views/Collect.vue | 4 +--
src/views/Start.vue | 31 ++++++++++++++---
yarn.lock | 5 +++
9 files changed, 99 insertions(+), 27 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 21da189..b77d969 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,16 @@
+# 0.2.4
+
+_6th Septemeber 2021_
+
+## Added
+
+- onboarding now slides to next section of form
+- validation if you do not include a name you cannot proceed
+
+## Fixed
+
+- spelling of Hexagon
+
# 0.2.3
_3rd September 2021_
diff --git a/package.json b/package.json
index 174cd44..850e2e1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "nodenogg.in",
- "version": "0.2.3",
+ "version": "0.2.4",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
@@ -9,6 +9,7 @@
},
"dependencies": {
"core-js": "^3.17.2",
+ "focus-trap-vue": "3",
"freeze-dry": "^0.2.5",
"marked": "^3.0.2",
"pouchdb": "^7.2.2",
diff --git a/src/components/JoinMicrocosm.vue b/src/components/JoinMicrocosm.vue
index c6bcde3..480d18b 100644
--- a/src/components/JoinMicrocosm.vue
+++ b/src/components/JoinMicrocosm.vue
@@ -10,7 +10,6 @@
</p>
<div class="breaker-one">
<label for="name">Your Name: {{ nameFormatted }}</label>
-
<input
v-model.trim="name"
type="text"
@@ -29,6 +28,7 @@
either tell them the microcosm name or share the URL and add the ending;
/microcosm/<strong>nameofyourmicrocosm</strong>
</p>
+
<div class="breaker-two">
<label for="microcosm">Microcosm:</label>
@@ -41,9 +41,9 @@
autocorrect="off"
autocapitalize="none"
/>
-
+ <p class="validation">{{ error }}</p>
<router-link to="/collect">
- <button type="button" @click="setName(), setMicrocosm()">
+ <button type="button" @click="setName(name), setMicrocosm()">
Start or Join
</button>
</router-link>
@@ -51,6 +51,7 @@
Change CouchDB Configuration
</button>
</div>
+
<template v-if="settings">
<h2>Configure your own <span class="long">CouchDB !</span> 👩🔧</h2>
@@ -117,8 +118,17 @@
export default {
name: 'JoinMicrocosm',
+ // directives: {
+ // focus: {
+ // mounted(el) {
+ // el.focus()
+ // },
+ // },
+ // },
+
data: function () {
return {
+ error: '',
// what you are calling yourself / device
name: '',
nameSet: false,
@@ -136,29 +146,36 @@ export default {
},
methods: {
- setName() {
+ setName(name) {
// format name so no spaces or dashes PouchDB/ CouchDB dont like them
var lowercasename = this.name.toLowerCase()
var spacesremoved = lowercasename.split(' ').join('')
this.nameFormatted = spacesremoved.split('-').join('')
- this.nameSet = true
+ if (name == '') {
+ this.error = 'Please set your name above first ☺️'
+ } else {
+ this.nameSet = true
+ }
localStorage.setItem('nogg_name', this.nameFormatted)
},
setMicrocosm() {
- this.$router.push({ path: '/collect' })
- // format microcosm so no spaces or dashes PouchDB/ CouchDB dont like them
- var lowercasemicrocosm = this.microcosm.toLowerCase()
- var spacesremoved = lowercasemicrocosm.split(' ').join('')
- this.microcosmFormatted = spacesremoved.split('-').join('')
- this.microcosmSet = true
- localStorage.setItem('nogg_microcosm', this.microcosmFormatted)
- // now we sent this same data set to the store
- var devicename = this.nameFormatted
- var microcosm = this.microcosmFormatted
- this.$store.dispatch('setMicrocosm', { devicename, microcosm })
- this.$store.dispatch('startDB')
+ if (this.nameSet == true) {
+ this.$router.push({ path: '/collect' })
+ // format microcosm so no spaces or dashes PouchDB/ CouchDB dont like them
+ var lowercasemicrocosm = this.microcosm.toLowerCase()
+ var spacesremoved = lowercasemicrocosm.split(' ').join('')
+ this.microcosmFormatted = spacesremoved.split('-').join('')
+ this.microcosmSet = true
+ localStorage.setItem('nogg_microcosm', this.microcosmFormatted)
+ // now we sent this same data set to the store
+ var devicename = this.nameFormatted
+ var microcosm = this.microcosmFormatted
+ this.$store.dispatch('setMicrocosm', { devicename, microcosm })
+ this.$store.dispatch('startDB')
+ }
},
+
configureRemote(protocol, username, password, url) {
// console.log(protocol, username, password, url)
this.$store.dispatch('configureRemote', {
@@ -191,6 +208,12 @@ h2 {
color: black;
}
+.validation {
+ font-weight: 700;
+ font-style: bold;
+ color: rgb(104, 39, 255);
+}
+
.arrow {
font-size: 6em;
color: #1cc469;
diff --git a/src/components/MyNodes.vue b/src/components/MyNodes.vue
index 938d728..c79518e 100644
--- a/src/components/MyNodes.vue
+++ b/src/components/MyNodes.vue
@@ -38,7 +38,7 @@
<option value="square">Square</option>
<option value="circle">Circle</option>
<option value="triangle">Triangle</option>
- <option value="hexegon">Hexegon</option>
+ <option value="hexagon">Hexagon</option>
</select>
<button @click.prevent="toggleMode(nodes.node_id)">Read</button>
@@ -67,6 +67,14 @@ export default {
components: { VSwatches },
+ // directives: {
+ // focus: {
+ // mounted(el) {
+ // el.focus()
+ // },
+ // },
+ // },
+
props: {
added: Boolean,
},
diff --git a/src/components/TellmeMore.vue b/src/components/TellmeMore.vue
index dea8c9d..0db35c3 100644
--- a/src/components/TellmeMore.vue
+++ b/src/components/TellmeMore.vue
@@ -1,7 +1,6 @@
<template>
<div>
<h1>Messy mapping tool for multiplayer thinking</h1>
- <p class="info">⚠️This is a non functional beta build of nodenogg.in⚠️</p>
<p>
nodenogg.in is free/libre open source software, built in the open,
inclusive by design, private by design, human led design, humane by
diff --git a/src/main.js b/src/main.js
index 501dfb1..ac8c5d7 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,6 +1,6 @@
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
-import store from './store/store'
+import store from './store/store' // Register a global custom directive called `v-focus`
createApp(App).use(store).use(router).mount('#app')
diff --git a/src/views/Collect.vue b/src/views/Collect.vue
index ef0360f..681af2e 100644
--- a/src/views/Collect.vue
+++ b/src/views/Collect.vue
@@ -12,7 +12,7 @@ export default {
mounted() {
this.$store.dispatch('getMicrocosm')
// register, i.e. in a `beforeDestroy` hook
- window.addEventListener('unload', this.someMethod)
+ window.addEventListener('unload', this.removeLocalStorage)
},
name: 'Collect',
@@ -31,7 +31,7 @@ export default {
addedNode() {
this.added = !this.added
},
- someMethod() {
+ removeLocalStorage() {
localStorage.removeItem('nogg_microcosm')
localStorage.removeItem('nogg_name')
diff --git a/src/views/Start.vue b/src/views/Start.vue
index bb03d38..b4b9007 100644
--- a/src/views/Start.vue
+++ b/src/views/Start.vue
@@ -4,17 +4,19 @@
<h2>a messy mapping tool for multiplayer thinking</h2>
</header>
<nav class="nav">
- <a role="button" class="letsplay" href="#" @click="isStart = true"
+ <a role="button" class="letsplay" href="#" @click="letsPlay"
>let's play !</a
>
- <a role="button" class="tellmemore" href="#" @click="isStart = false"
+ <a role="button" class="tellmemore" href="#" @click="tellMore"
>tell me more</a
>
</nav>
- <main v-if="isStart"><JoinMicrocosm /></main>
+ <main v-if="isStart" ref="start">
+ <JoinMicrocosm />
+ </main>
- <aside v-if="isStart == false">
+ <aside v-if="isStart == false" ref="moreinfo">
<TellmeMore />
</aside>
</template>
@@ -35,6 +37,27 @@ export default {
isStart: null,
}
},
+
+ methods: {
+ letsPlay() {
+ this.isStart = true
+ setTimeout(() => {
+ const el = this.$refs.start
+ if (el) {
+ el.scrollIntoView({ behavior: 'smooth' })
+ }
+ }, 100)
+ },
+ tellMore() {
+ this.isStart = false
+ setTimeout(() => {
+ const el = this.$refs.moreinfo
+ if (el) {
+ el.scrollIntoView({ behavior: 'smooth' })
+ }
+ }, 100)
+ },
+ },
}
</script>
diff --git a/yarn.lock b/yarn.lock
index 80a58bd..3ec9e57 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3709,6 +3709,11 @@ flush-write-stream@^1.0.0:
inherits "^2.0.3"
readable-stream "^2.3.6"
+focus-trap-vue@3:
+ version "3.2.1"
+ resolved "https://registry.yarnpkg.com/focus-trap-vue/-/focus-trap-vue-3.2.1.tgz#630023bb96bfe45ebcf2e817eee6eb28d4edf52b"
+ integrity sha512-nThbiBo4F9ilwEc3kOYTW63RDbOsWNdz7jWFk9CmA9/LmZ7EJgEszV2MBXaQQMceEsB7h0WuIkkfzQznU5yj+A==
+
follow-redirects@^1.0.0:
version "1.14.1"
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.1.tgz#d9114ded0a1cfdd334e164e6662ad02bfd91ff43"
--
GitLab