brand new onboarding and enhanced CSS

CHANGELOG.md

+# 0.1.14
+
+_8th June 2020_
+
+### Changed
+
+- edited CSS to be more mobile friendly (just a little).
+- edited CSS to make things look a little nicer.
+
+### Added
+
+- created the brand new onboarding microcosm, all new devices will see this view on arrival.
+
+# 0.1.13
+
+_7th June 2020_
+
+### Added
+
+- Leave microcosm button added to toolbar.
+- Add simple offline mode if your device disconnects.
+
+### Changed
+
+- Tool bar add node works in basic format (press it to create node).
+- Home by default is the new spatial view.
+
 # 0.1.12
 
 _4th June 2020_
 
 ### Added
 
-- Read status is now in store so preserved for your nodes
-- iOS Home screen icon
+- Read status is now in store so preserved for your nodes.
+- iOS Home screen icon.
 
 # 0.1.11d
 
 _2 June 2020_
-This version has been move to alpha as I need to use the app more and thus drive some more development. The COVID-19 pandemic has slowed things down a lot and this version moves to introduce the new spatial mode. The new spatial mode is still missing some vital component to the main home version however for now keeping both old and new views should allow for a quicker capture of some of the missing components that need to be added to Sandbox.
+This version has been moved to alpha as I need to use the app more and thus drive some more development. The COVID-19 pandemic has slowed things down a lot and this version moves to introduce the new spatial mode. The new spatial mode is still missing some vital component to the main home version however for now keeping both old and new views should allow for a quicker capture of some of the missing components that need to be added to Sandbox.
 
 ### Changed
 
-- New menu bar at the top
+- New menu bar at the top.
 - Sandbox view is a updated view of nodenogg.in and will replace home.
 
 # 0.1.11
@@ -27,7 +54,7 @@ _10th April 2020_
 
 ### Fixed
 
-- Typo in CHANGELOG.md
+- Typo in CHANGELOG.md.
 
 # 0.1.10
 
@@ -51,11 +78,11 @@ _26th March 2020_
 
 ### Added
 
-- Simple read mode for your own nodes can now be activated
+- Simple read mode for your own nodes can now be activated.
 
 ### Changed
 
-- made some minor changes to textarea CSS
+- made some minor changes to textarea CSS.
 
 # 0.1.8
 
@@ -67,7 +94,7 @@ _25th March 2020_
 
 ### Changed
 
-- Simplified About page opening text
+- Simplified About page opening text.
 
 # 0.1.7
 

app/package.json

 {
   "name": "nodenogg.in",
-  "version": "0.1.12",
+  "version": "0.1.14",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

app/src/components/BaseButton.vue

@@ -11,9 +11,9 @@
 export default {
   props: {
     buttonClass: {
-      type: String
-    }
-  }
+      type: String,
+    },
+  },
 }
 </script>
 
@@ -28,6 +28,7 @@ button {
   box-shadow: 1px 1px 1px #000000;
   padding: 0.6em;
   margin-right: 1em;
+  margin-top: 1em;
 }
 
 button.onboard {
@@ -44,6 +45,10 @@ button.onboard {
   padding: 0px;
 }
 
+button.special {
+  background-color: #f2c94c;
+}
+
 button.danger {
   color: white;
   background-color: red;

app/src/components/NodesLayer.vue

@@ -31,7 +31,11 @@
               </div>
             </div>
             <div v-if="posvalue.read_mode == true">
-              <p :id="nodeid" :inner-html.prop="nodetext | marked"></p>
+              <p
+                class="read"
+                :id="nodeid"
+                :inner-html.prop="nodetext | marked"
+              ></p>
             </div>
 
             <h3>Reactions</h3>
@@ -105,7 +109,11 @@
               </div>
             </div>
             <div v-if="posvalue.read_mode == true">
-              <p :id="nodeid" :inner-html.prop="nodetext | marked"></p>
+              <p
+                class="read"
+                :id="nodeid"
+                :inner-html.prop="nodetext | marked"
+              ></p>
             </div>
 
             <h3>Reactions</h3>
@@ -303,6 +311,10 @@ export default {
   position: relative;
 }
 
+.vdr {
+  padding: 0 0.5em;
+}
+
 .info {
   font-size: 0.8em;
 }
@@ -320,6 +332,7 @@ textarea {
 
 .btn-row {
   position: relative;
+
   margin-bottom: 5px;
   display: flex;
   justify-content: center;
@@ -328,6 +341,10 @@ textarea {
   border-radius: 4px;
 }
 
+.allemoji {
+  font-size: 2em;
+}
+
 img {
   width: 100%;
 }

app/src/components/OnBoard-old.vue

+<template>
+  <div class="notlogged">
+    <p>
+      nodenogg.in is a
+      <span>work in progress</span> collaborative co-creation research and
+      design thinking tool, read more details and links in the
+      <a href="/about">about</a> section.
+    </p>
+
+    <form v-show="parta" onsubmit="return false;">
+      <h2>1</h2>
+      <h3>microcosm</h3>
+      <p>
+        create or join a microcosm. a microcosm is a sharable digital space that
+        can be shared privately between a group of individuals. all content /
+        data you contribute is stored locally on your device and then shared
+        privately to others on the same microcosm. you can remove your
+        contributions at any time, they belong to you.
+      </p>
+      <input
+        type="text"
+        v-model.trim="localmicrocosm"
+        placeholder="microcosm name"
+        autocorrect="off"
+        autocapitalize="none"
+        autofocus
+        v-on:keyup.enter="createMicrocosm(), setFocus()"
+      />
+      <BaseButton buttonClass="onboard" @click="createMicrocosm(), setFocus()"
+        >+</BaseButton
+      >
+    </form>
+
+    <form v-show="partb" onsubmit="return false;">
+      <h2>2</h2>
+      <h3>object</h3>
+      <p>
+        give yourself an object name, this is what connects you to your content
+        / data. this object name is anonymous and stored privately.
+      </p>
+      <input
+        type="text"
+        v-model.trim="clientid"
+        placeholder="object name"
+        autocorrect="off"
+        autocapitalize="none"
+        ref="objectname"
+        v-on:keyup.enter="setClient(), setFocusTwo()"
+      />
+      <BaseButton buttonClass="onboard" @click="setClient(), setFocusTwo()"
+        >+</BaseButton
+      >
+    </form>
+
+    <form v-show="partc">
+      <input
+        class="start"
+        type="text"
+        v-on:keyup.enter="letsGo()"
+        ref="objectnametwo"
+      />
+      <h2>3</h2>
+      <h3>start</h3>
+      <BaseButton buttonClass="onboard" @click="letsGo()">+</BaseButton>
+    </form>
+  </div>
+</template>
+
+<script>
+var delay = 100
+var delaytwo = 100
+
+import Router from '@/router'
+
+export default {
+  data: function () {
+    return {
+      localmicrocosm: Router.currentRoute.params.microcosm,
+      clientid: '',
+      parta: true,
+      partb: false,
+      partc: false,
+    }
+  },
+
+  mounted() {
+    if (localStorage.myNNClient) {
+      this.clientid = localStorage.myNNClient
+      this.localmicrocosm = localStorage.mylastMicrocosm
+      this.createMicrocosm()
+      this.setClient()
+      this.letsGo()
+    }
+  },
+
+  methods: {
+    createMicrocosm() {
+      this.partb = true
+      this.$store.dispatch('createMicrocosm', this.localmicrocosm)
+      localStorage.setItem('mylastMicrocosm', this.localmicrocosm)
+    },
+    setClient() {
+      ;(this.partc = true),
+        this.$store.dispatch('setClient', this.clientid),
+        localStorage.setItem('myNNClient', this.clientid)
+    },
+
+    letsGo() {
+      this.$emit('clientAdded')
+      // this.$emit('readyMode')
+    },
+    setFocus() {
+      setTimeout(this.readyFocus, delay)
+    },
+    setFocusTwo() {
+      setTimeout(this.readyFocusTwo, delaytwo)
+    },
+    readyFocus() {
+      this.$refs.objectname.focus()
+    },
+    readyFocusTwo() {
+      this.$refs.objectnametwo.focus()
+    },
+  },
+}
+</script>
+
+<style lang="css" scoped>
+.start {
+  opacity: 0;
+  filter: alpha(opacity=0);
+}
+
+h1,
+h2,
+h3,
+p {
+  margin: 0px;
+}
+
+h2 {
+  float: right;
+  font-size: 3em;
+}
+
+h3 {
+  font-size: 3em;
+  margin-top: 0.5em;
+}
+
+form {
+  /* width: 400px; */
+  padding: 1em;
+  border-style: solid;
+  border-width: 0.5em;
+  border-color: #cab6ff;
+  margin-top: 1em;
+}
+
+input {
+  border-style: solid;
+  border-width: 1px;
+  border-color: #cab6ff;
+  padding: 0.5em;
+}
+
+@media only screen and (min-width: 640px) {
+  /* Style adjustments for viewports that meet the condition */
+
+  /* .notlogged {
+    grid-column: 1 / 3;
+    grid-row: 1;
+  } */
+}
+</style>

app/src/components/OnBoard.vue

 <template>
-  <div class="notlogged">
-    <p>
-      nodenogg.in is a
-      <span>work in progress</span> collaborative co-creation research and
-      design thinking tool, read more details and links in the
-      <a href="/about">about</a> section.
-    </p>
-
-    <form v-show="parta" onsubmit="return false;">
-      <h2>1</h2>
-      <h3>microcosm</h3>
-      <p>
-        create or join a microcosm. a microcosm is a sharable digital space that
-        can be shared privately between a group of individuals. all content /
-        data you contribute is stored locally on your device and then shared
-        privately to others on the same microcosm. you can remove your
-        contributions at any time, they belong to you.
-      </p>
-      <input
-        type="text"
-        v-model.trim="localmicrocosm"
-        placeholder="microcosm name"
-        autocorrect="off"
-        autocapitalize="none"
-        autofocus
-        v-on:keyup.enter="createMicrocosm(), setFocus()"
-      />
-      <BaseButton buttonClass="onboard" @click="createMicrocosm(), setFocus()"
-        >+</BaseButton
+  <div ref="nodes" class="node">
+    <vue-draggable-resizable
+      class="innernode"
+      :w="300"
+      :h="335"
+      :x="560"
+      :y="50"
+      :z="0"
+      :draggable="true"
+      style="background-color: #6fcf97;"
     >
-    </form>
-
-    <form v-show="partb" onsubmit="return false;">
-      <h2>2</h2>
-      <h3>object</h3>
-      <p>
-        give yourself an object name, this is what connects you to your content
-        / data. this object name is anonymous and stored privately.
-      </p>
+      <form>
+        <div>
+          <p id="nodeid" :inner-html.prop="nodetext | marked"></p>
           <input
             type="text"
             v-model.trim="clientid"
-        placeholder="object name"
+            placeholder="device name"
             autocorrect="off"
             autocapitalize="none"
             ref="objectname"
-        v-on:keyup.enter="setClient(), setFocusTwo()"
+            v-on:keyup.enter="setClient()"
+            @focus="editTrue(true)"
+            @blur="editTrue(false)"
           />
-      <BaseButton buttonClass="onboard" @click="setClient(), setFocusTwo()"
-        >+</BaseButton
+          <div class="btn-row">
+            <BaseButton buttonClass="special" @click="setClient()"
+              >Store</BaseButton
             >
+          </div>
+        </div>
       </form>
-
-    <form v-show="partc">
+    </vue-draggable-resizable>
+
+    <vue-draggable-resizable
+      class="innernode"
+      :w="300"
+      :h="345"
+      :x="1100"
+      :y="50"
+      :z="0"
+      :draggable="true"
+      style="background-color: #6fcf97;"
+    >
+      <form>
+        <div>
+          <p id="nodeid" :inner-html.prop="nodetext2 | marked"></p>
           <input
-        class="start"
             type="text"
-        v-on:keyup.enter="letsGo()"
-        ref="objectnametwo"
+            v-model.trim="localmicrocosm"
+            placeholder="microcosm name"
+            autocorrect="off"
+            autocapitalize="none"
+            autofocus
+            v-on:keyup.enter="createMicrocosm()"
+            @focus="editTrue(true)"
+            @blur="editTrue(false)"
           />
-      <h2>3</h2>
-      <h3>start</h3>
-      <BaseButton buttonClass="onboard" @click="letsGo()">+</BaseButton>
+          <div class="btn-row">
+            <BaseButton
+              buttonClass="special"
+              @click="createMicrocosm(), letsGo()"
+              >Create Microcosm</BaseButton
+            >
+          </div>
+        </div>
       </form>
+    </vue-draggable-resizable>
   </div>
 </template>
 
 <script>
-var delay = 100
-var delaytwo = 100
-
 import Router from '@/router'
+import marked from 'marked'
 
 export default {
   data: function () {
     return {
       localmicrocosm: Router.currentRoute.params.microcosm,
       clientid: '',
-      parta: true,
-      partb: false,
-      partc: false,
+      nodetext:
+        '## 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:
+        '## 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,
+      // partc: false,
     }
   },
 
   mounted() {
-    if (localStorage.myNNClient) {
+    if (localStorage.myNNClient && localStorage.mylastMicrocosm) {
       this.clientid = localStorage.myNNClient
       this.localmicrocosm = localStorage.mylastMicrocosm
       this.createMicrocosm()
@@ -92,34 +98,26 @@ export default {
       this.letsGo()
     }
   },
+  filters: {
+    marked: marked,
+  },
 
   methods: {
     createMicrocosm() {
-      this.partb = true
       this.$store.dispatch('createMicrocosm', this.localmicrocosm)
       localStorage.setItem('mylastMicrocosm', this.localmicrocosm)
     },
     setClient() {
-      ;(this.partc = true),
       this.$store.dispatch('setClient', this.clientid),
         localStorage.setItem('myNNClient', this.clientid)
     },
 
+    editTrue(e) {
+      this.$emit('editTrue', e)
+    },
+
     letsGo() {
       this.$emit('clientAdded')
-      // this.$emit('readyMode')
-    },
-    setFocus() {
-      setTimeout(this.readyFocus, delay)
-    },
-    setFocusTwo() {
-      setTimeout(this.readyFocusTwo, delaytwo)
-    },
-    readyFocus() {
-      this.$refs.objectname.focus()
-    },
-    readyFocusTwo() {
-      this.$refs.objectnametwo.focus()
     },
   },
 }
@@ -130,6 +128,9 @@ export default {
   opacity: 0;
   filter: alpha(opacity=0);
 }
+.vdr {
+  padding: 0 0.5em;
+}
 
 h1,
 h2,
@@ -148,27 +149,22 @@ h3 {
   margin-top: 0.5em;
 }
 
-form {
-  padding: 1em;
-  border-style: solid;
-  border-width: 0.5em;
-  border-color: #cab6ff;
-  margin-top: 1em;
+.btn-row {
+  margin-bottom: 5px;
+  padding: 0px 0px 15px 10px;
+  border-radius: 4px;
 }
 
 input {
-  border-style: solid;
-  border-width: 1px;
-  border-color: #cab6ff;
-  padding: 0.5em;
-}
-
-@media only screen and (min-width: 640px) {
-  /* Style adjustments for viewports that meet the condition */
-
-  /* .notlogged {
-    grid-column: 1 / 3;
-    grid-row: 1;
-  } */
+  font-size: 1em;
+  padding: 10px;
+  /* margin-left: 20px; */
+  border-radius: 4px;
+  display: flex;
+  justify-content: center;
+  margin: 10px;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  border-style: dotted;
 }
 </style>

app/src/components/OtherNodeslayer.vue

@@ -18,7 +18,9 @@
           @resizestop="onResizestop"
           style="border: 1px solid black; background-color: rgb(205, 234, 255);"
         >
-          <p :id="nodeid" :inner-html.prop="nodetext | marked">{{ nodeid }}</p>
+          <p class="read" :id="nodeid" :inner-html.prop="nodetext | marked">
+            {{ nodeid }}
+          </p>
           <h3>Reactions</h3>
           <div v-for="(emojis, index) in configEmoji" :key="index">
             <p class="allemoji" v-if="nodeid == emojis.node_id">
@@ -86,9 +88,11 @@
                   </div>
                 </div>
               </emoji-picker>
+              <!-- <div class="btn-row">
                 <BaseButton buttonClass="action" @click="sentReact()"
                   >Send Reaction</BaseButton
                 >
+              </div> -->
             </div>
           </div>
         </vue-draggable-resizable>
@@ -110,7 +114,9 @@
           @resizestop="onResizestop"
           style="border: 1px solid black; background-color: rgb(205, 234, 255);"
         >
-          <p :id="nodeid" :inner-html.prop="nodetext | marked">{{ nodeid }}</p>
+          <p class="read" :id="nodeid" :inner-html.prop="nodetext | marked">
+            {{ nodeid }}
+          </p>
           <h3>Reactions</h3>
           <div v-for="(emojis, index) in configEmoji" :key="index">
             <p class="allemoji" v-if="nodeid == emojis.node_id">
@@ -168,7 +174,7 @@
                           <span
                             v-for="(emoji, emojiName) in emojiGroup"
                             :key="emojiName"
-                            @click="insert(emoji)"
+                            @click="insert(emoji), sentReact()"
                             :title="emojiName"
                             >{{ emoji }}</span
                           >
@@ -178,9 +184,11 @@
                   </div>
                 </div>
               </emoji-picker>
+              <!-- <div class="btn-row">
                 <BaseButton buttonClass="action" @click="sentReact()"
                   >Send Reaction</BaseButton
                 >
+              </div> -->
             </div>
           </div>
         </vue-draggable-resizable>
@@ -322,12 +330,35 @@ export default {
   position: absolute;
 }
 
+.vdr {
+  padding: 0 0.5em;
+}
+
+input {
+  display: none;
+}
+
+.allemoji {
+  font-size: 2em;
+}
+
+h3 {
+  margin-bottom: -30px;
+}
+
+.btn-row {
+  margin-bottom: 5px;
+  padding: 0px 0px 15px 10px;
+  border-radius: 4px;
+}
+
 .emoji-invoker {
   top: -0.5rem;
   right: 0.5rem;
   width: 1.5rem;
   height: 1.5rem;
-  margin-top: 1em;
+
+  margin: 0em 0em 1em 0em;
   border-radius: 50%;
   cursor: pointer;
   transition: all 0.2s;

app/src/experimental/ModeToolbar.vue

@@ -98,11 +98,13 @@ export default {
 <style scoped>
 nav {
   position: absolute;
-  bottom: 20px;
-  left: 20px;
+
+  bottom: 1em;
+  left: 1em;
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
-  justify-content: flex-start;
+  justify-content: space-between;
 }
 button {
   border: none;
@@ -110,6 +112,7 @@ button {
   height: 50px;
   padding: 0;
   margin: 0;
+  margin-top: 1em;
   background: white;
   border-radius: 25px;
   display: flex;
@@ -123,4 +126,9 @@ button {
 button.active {
   background: rgb(30, 30, 30);
 }
+
+@media only screen and (max-width: 600px) {
+  nav {
+  }
+}
 </style>

app/src/experimental/ViewToolbar.vue

@@ -12,8 +12,8 @@ export default {
     ...mapGetters({
       scalePercentage: 'ui/scalePercentage',
       isScaled: 'ui/isScaled',
-      isTranslated: 'ui/isTranslated'
-    })
+      isTranslated: 'ui/isTranslated',
+    }),
   },
   methods: {
     resetScale() {
@@ -21,8 +21,8 @@ export default {
     },
     resetTranslation() {
       this.$store.commit('ui/setTranslation', { x: 0, y: 0 })
-    }
-  }
+    },
+  },
 }
 </script>
 
@@ -44,4 +44,10 @@ button {
   border: none;
   outline: none;
 }
+
+@media only screen and (max-width: 600px) {
+  button {
+    display: none;
+  }
+}
 </style>

app/src/store/index.js

@@ -6,7 +6,6 @@ import VueDraggableResizable from 'vue-draggable-resizable'
 import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
 
 import uiStore from '@/experimental/uiStore'
-
 import Router from '@/router'
 
 Vue.use(Vuex)
@@ -77,6 +76,7 @@ const store = new Vuex.Store({
       pouchdb.close().then(function () {
         if (urlmicrocosm != undefined) {
           // myclient = urldevice
+        
           microcosm = urlmicrocosm
         } else {
           microcosm = doc
@@ -363,7 +363,7 @@ const store = new Vuex.Store({
           node_id: uniqueid,
           x_pos: 50,
           y_pos: 50,
-          width: 200,
+          width: 220,
           height: 275,
           z_index: 1,
           read_mode: false,

app/src/views/Home.vue

@@ -54,8 +54,25 @@
               v-bind:nodetext="value.node_text"
             />
           </div>
-
-          <OnBoard v-else @clientAdded="clientAdded()" />
+          <div v-else>
+            <OnBoard
+              @clientAdded="clientAdded()"
+              @editTrue="(e) => editTrue(e)"
+            />
+            <OtherNodeslayer
+              v-for="value in otherNodes"
+              v-bind:key="value.node_id"
+              v-bind:nodeid="value.node_id"
+              v-bind:nodetext="value.node_text"
+            />
+            <NodesLayer
+              @editTrue="(e) => editTrue(e)"
+              v-for="value in myNodes"
+              v-bind:key="value.node_id"
+              v-bind:nodeid="value.node_id"
+              v-bind:nodetext="value.node_text"
+            />
+          </div>
         </PanZoomContainer>
 
         <ModeToolbar
@@ -176,9 +193,9 @@ export default {
 
 <style scoped>
 .wrapper {
-  height: calc(100vh - 120px);
+  height: calc(100vh - 40px);
   width: calc(100%-80px);
-  margin: 40px;
+  margin: 0px;
   position: relative;
 }
 </style>