From 37116cd6363cbb6c3e24006dc53ae9738c1aadbc Mon Sep 17 00:00:00 2001
From: Adam Procter <adamprocter@researchnot.es>
Date: Tue, 30 Jun 2020 14:37:20 +0100
Subject: [PATCH] fixed up some UX stuff
This was some simple fixes that might help with new users
---
app/src/components/BaseButton.vue | 2 +-
app/src/components/NodesLayer.vue | 14 ++---
app/src/components/OnBoard.vue | 82 +++++++++++++++++------------
app/src/experimental/modes/index.js | 20 +++----
app/src/store/index.js | 2 +-
5 files changed, 68 insertions(+), 52 deletions(-)
diff --git a/app/src/components/BaseButton.vue b/app/src/components/BaseButton.vue
index 0ce8b1d..f314cad 100644
--- a/app/src/components/BaseButton.vue
+++ b/app/src/components/BaseButton.vue
@@ -19,7 +19,7 @@ export default {
<style lang="css" scoped>
button {
- font-size: 1em;
+ font-size: 0.8em;
touch-action: manipulation;
color: black;
border: none;
diff --git a/app/src/components/NodesLayer.vue b/app/src/components/NodesLayer.vue
index 677ffab..f230b2d 100644
--- a/app/src/components/NodesLayer.vue
+++ b/app/src/components/NodesLayer.vue
@@ -26,7 +26,7 @@
:id="nodeid"
class="drag-cancel"
ref="nodetext"
- placeholder="Idea goes here!"
+ placeholder="Idea goes here! (auto saved every keystroke)"
></textarea>
</div>
</div>
@@ -47,6 +47,7 @@
</div>
<p class="info">*markdown supported</p>
+ <p class="info">*autosaves</p>
<div class="btn-row">
<BaseButton buttonClass="danger" @click="deleteFlag()"
>Delete</BaseButton
@@ -56,7 +57,7 @@
class="read"
buttonClass="action"
@click="readFlag()"
- >Edit
+ >Edit Mode
</BaseButton>
</div>
<div v-else>
@@ -64,7 +65,7 @@
class="read"
buttonClass="action"
@click="readFlag()"
- >Read</BaseButton
+ >Read Mode</BaseButton
>
</div>
</div>
@@ -104,7 +105,7 @@
:id="nodeid"
class="drag-cancel"
ref="nodetext"
- placeholder="Idea goes here!"
+ placeholder="Idea goes here! (auto saved every keystroke)"
></textarea>
</div>
</div>
@@ -125,6 +126,7 @@
</div>
<p class="info">*markdown supported</p>
+ <p class="info">*autosaves</p>
<div class="btn-row">
<BaseButton buttonClass="danger" @click="deleteFlag()"
>Delete</BaseButton
@@ -134,7 +136,7 @@
class="read"
buttonClass="action"
@click="readFlag()"
- >Edit
+ >Edit Mode
</BaseButton>
</div>
<div v-else>
@@ -142,7 +144,7 @@
class="read"
buttonClass="action"
@click="readFlag()"
- >Read</BaseButton
+ >Read Mode</BaseButton
>
</div>
</div>
diff --git a/app/src/components/OnBoard.vue b/app/src/components/OnBoard.vue
index c34c3b6..ef9078e 100644
--- a/app/src/components/OnBoard.vue
+++ b/app/src/components/OnBoard.vue
@@ -13,21 +13,27 @@
<form>
<div>
<p id="nodeid" :inner-html.prop="nodetext | marked"></p>
- <input
- type="text"
- v-model.trim="clientid"
- placeholder="device name"
- autocorrect="off"
- autocapitalize="none"
- ref="objectname"
- v-on:keyup.enter="setClient()"
- @focus="editTrue(true)"
- @blur="editTrue(false)"
- />
- <div class="btn-row">
- <BaseButton buttonClass="special" @click="setClient()"
- >Store</BaseButton
- >
+ <div v-if="name == false">
+ <input
+ type="text"
+ v-model.trim="clientid"
+ placeholder="name"
+ autocorrect="off"
+ autocapitalize="none"
+ ref="objectname"
+ v-on:keyup.enter="setClient()"
+ @focus="editTrue(true)"
+ @blur="editTrue(false)"
+ />
+
+ <div class="btn-row">
+ <BaseButton buttonClass="special" @click="setClient()"
+ >Store</BaseButton
+ >
+ </div>
+ </div>
+ <div v-else>
+ <h4>Saved</h4>
</div>
</div>
</form>
@@ -46,23 +52,29 @@
<form>
<div>
<p id="nodeid" :inner-html.prop="nodetext2 | marked"></p>
- <input
- type="text"
- v-model.trim="localmicrocosm"
- placeholder="microcosm name"
- autocorrect="off"
- autocapitalize="none"
- autofocus
- v-on:keyup.enter="createMicrocosm()"
- @focus="editTrue(true)"
- @blur="editTrue(false)"
- />
- <div class="btn-row">
- <BaseButton
- buttonClass="special"
- @click="createMicrocosm(), letsGo()"
- >Create Microcosm</BaseButton
- >
+ <div v-if="microcosm == false">
+ <input
+ type="text"
+ v-model.trim="localmicrocosm"
+ placeholder="microcosm name"
+ autocorrect="off"
+ autocapitalize="none"
+ autofocus
+ v-on:keyup.enter="createMicrocosm()"
+ @focus="editTrue(true)"
+ @blur="editTrue(false)"
+ />
+
+ <div class="btn-row">
+ <BaseButton
+ buttonClass="special"
+ @click="createMicrocosm(), letsGo()"
+ >Create or Rejoin a Microcosm</BaseButton
+ >
+ </div>
+ </div>
+ <div v-else>
+ <h4>Loading...</h4>
</div>
</div>
</form>
@@ -83,8 +95,8 @@ export default {
'## 3. What shall we call you ? 💥 \n First we need to connect this device to your ideas. This name is what allows you to create and edit your nodes and can be anything you like and this name is always anonymous.',
nodetext2:
'## 5. Start those engines ! 🎠\n Now you can create your own microcosm to store your ideas and ask people to join you, either just tell them the name of the microcosm or share the alpha.nodenogg.in URL and add the ending; </br><em><b>/microcosm/nameofyourmicrocosm</b></em>',
- // parta: true,
- // partb: false,
+ name: false,
+ microcosm: false,
// partc: false,
}
},
@@ -106,10 +118,12 @@ export default {
createMicrocosm() {
this.$store.dispatch('createMicrocosm', this.localmicrocosm)
localStorage.setItem('mylastMicrocosm', this.localmicrocosm)
+ this.microcosm = true
},
setClient() {
this.$store.dispatch('setClient', this.clientid),
localStorage.setItem('myNNClient', this.clientid)
+ this.name = true
},
editTrue(e) {
diff --git a/app/src/experimental/modes/index.js b/app/src/experimental/modes/index.js
index 1aad869..a0aed2c 100644
--- a/app/src/experimental/modes/index.js
+++ b/app/src/experimental/modes/index.js
@@ -31,16 +31,16 @@ export const move = {
shortcut: false,
}
-export const connect = {
- name: 'connect',
- view: {
- pan: false,
- zoom: false,
- },
- icon: 'connection',
- cursor: 'crosshair',
- shortcut: false,
-}
+// export const connect = {
+// name: 'connect',
+// view: {
+// pan: false,
+// zoom: false,
+// },
+// icon: 'connection',
+// cursor: 'crosshair',
+// shortcut: false,
+// }
export const draw = {
name: 'draw',
diff --git a/app/src/store/index.js b/app/src/store/index.js
index 6009a5c..7b7a22e 100644
--- a/app/src/store/index.js
+++ b/app/src/store/index.js
@@ -366,7 +366,7 @@ const store = new Vuex.Store({
x_pos: 50,
y_pos: 50,
width: 220,
- height: 275,
+ height: 295,
z_index: 1,
read_mode: false,
})
--
GitLab