From 285ddd65dad474cc46d2518cb512f86e1a498052 Mon Sep 17 00:00:00 2001
From: Adam Procter <adamprocter@researchnot.es>
Date: Sat, 10 Oct 2020 14:44:25 +0100
Subject: [PATCH] wip
rebuilding mobile views
---
.DS_Store | Bin 10244 -> 10244 bytes
app/src/components/ListLayer.vue | 86 +++++++++++++-------
app/src/components/OnBoard.vue | 130 ++++++++++++++++++++++++-------
app/src/router/index.js | 4 +-
app/src/views/List.vue | 105 +------------------------
5 files changed, 167 insertions(+), 158 deletions(-)
diff --git a/.DS_Store b/.DS_Store
index 0c2014dd16094d0bab7e4dbaa764f24654c14a71..663a885e1c844e414ee9d1cffa31c01db2ce591c 100644
GIT binary patch
delta 134
zcmZn(XbIThE?{^vsURn_xWvHVIwKP^3o9Et2L}f?2QNo#a7KQ4a7kiGX|YpcQ8b7b
zkXVwDlsLIpz>|rSbMhMjd3_FXRYP0Pgxt!i>YCcRnG9gS$Oxes_@Ok6nzh+h@D$&~
R2A$393cpx3>xwcn0|2o*Ao2hJ
delta 201
zcmZn(XbIThF5vbxsURn_xWvHV1|t(Q3o9Et2PYRN4<{cdXKZjretB?7Vo7PSQ({rP
zfJ|^^N@`MKQFvxbNk&L&o@-8OS!$ktkxybt>f{Om&-7@JhJeJ944@)TWrs8e1`y!n
z;EWfLsIE3QGt*HpGc>H#QK&XIH_%ZqF*d8M<>cg$RCf!CD{bnVHG9d@Wy=p82J2#A
dWQ5QRf>0Vp9oZ}>c#3Z`yTUJ)%~wU3nE?XRHE;j`
diff --git a/app/src/components/ListLayer.vue b/app/src/components/ListLayer.vue
index 6e860be..0c3120b 100644
--- a/app/src/components/ListLayer.vue
+++ b/app/src/components/ListLayer.vue
@@ -1,33 +1,30 @@
<template>
- <div>
- <div v-for="(value, index) in configPositions" v-bind:key="index">
- <div v-if="nodeid == value.node_id && deleted == false">
- <form>
- <!-- <div v-if="posvalue.read_mode == false"> -->
- <div v-for="value in $options.myArray" v-bind:key="value.node_id">
- <div v-if="value.deleted == false">
- <textarea
- v-if="nodeid == value.node_id"
- @focus="editTrue(true)"
- @blur="editTrue(false)"
- autofocus
- v-model="value.node_text"
- @input="editNode"
- :id="value.node_id"
- ref="nodetext"
- placeholder="Idea goes here!"
- ></textarea>
- </div>
+ <div class="nodes">
+ <form>
+ <div v-if="readmode == false">
+ <div v-for="value in $options.myArray" v-bind:key="value.node_id">
+ <div v-if="value.deleted == false">
+ <textarea
+ v-if="nodeid == value.node_id"
+ @focus="editTrue(true)"
+ @blur="editTrue(false)"
+ autofocus
+ v-model="value.node_text"
+ @input="editNode"
+ :id="value.node_id"
+ ref="nodetext"
+ placeholder="Idea goes here!"
+ ></textarea>
</div>
- </form>
+ </div>
</div>
- </div>
+ </form>
</div>
</template>
<script>
import { mapState } from 'vuex'
-
+var readmode
export default {
name: 'ListLayer',
@@ -61,8 +58,27 @@ export default {
editTrue(e) {
this.$emit('editTrue', e)
- // this.firstload = false
- // // console.log(e)
+ },
+
+ readFlag(e) {
+ e = this.nodeid
+
+ var i
+ for (i = 0; i < Object.keys(this.configPositions).length; i++) {
+ if (this.configPositions[i].node_id == this.nodeid) {
+ this.localreadmode = this.configPositions[i].read_mode
+ }
+ }
+
+ if (this.localreadmode == true) {
+ readmode = false
+ this.$store.dispatch('readFlag', { e, readmode })
+ this.mode = 'Read'
+ } else {
+ readmode = true
+ this.$store.dispatch('readFlag', { e, readmode })
+ this.mode = 'Edit'
+ }
},
},
}
@@ -73,10 +89,26 @@ h2 {
color: red;
}
-textarea {
+.nodes {
width: 95%;
- height: 100px;
+ border: 2px dashed black;
+ background-color: rgb(155, 194, 216);
+ margin-top: 1em;
margin-left: 1em;
- margin-bottom: 1em;
+}
+
+textarea {
+ width: 90%;
+ height: 175px;
+ resize: none;
+ box-sizing: border-box;
+ font-family: 'Inter var', Helvetica, sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ margin: 1em;
+ border: none;
+ outline: none;
+ background-color: rgb(187, 227, 255);
+ scrollbar-color: yellow rgb(187, 227, 255);
}
</style>
diff --git a/app/src/components/OnBoard.vue b/app/src/components/OnBoard.vue
index adc056d..c78df8a 100644
--- a/app/src/components/OnBoard.vue
+++ b/app/src/components/OnBoard.vue
@@ -1,26 +1,96 @@
<template>
<div ref="nodes" class="node">
- <vue-draggable-resizable
- class="innernode"
- :w="300"
- :h="335"
- :x="5"
- :y="15"
- :z="1"
- :draggable="true"
- :resizable="false"
- style="background-color: #6fcf97"
- >
- <div>
+ <div v-if="this.currentroute.name == 'Home'">
+ <vue-draggable-resizable
+ class="innernode"
+ :w="300"
+ :h="335"
+ :x="5"
+ :y="15"
+ :z="1"
+ :draggable="true"
+ :resizable="false"
+ style="background-color: #6fcf97"
+ >
+ <div>
+ <p id="nodeid" :inner-html.prop="nodetext | marked"></p>
+ <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()"
+ autofocus
+ @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>
+ </vue-draggable-resizable>
+
+ <vue-draggable-resizable
+ class="innernode"
+ :w="310"
+ :h="375"
+ :x="850"
+ :y="15"
+ :z="1"
+ :draggable="true"
+ :resizable="false"
+ style="background-color: #6fcf97"
+ >
+ <div class="content">
+ <p id="nodeid" :inner-html.prop="nodetext2 | marked"></p>
+ <div v-if="microcosm == false">
+ <input
+ type="text"
+ v-model.trim="localmicrocosm"
+ placeholder="microcosm name"
+ autocorrect="off"
+ autocapitalize="none"
+ @focus="editTrue(true)"
+ ref="microcosm"
+ @blur="editTrue(false)"
+ v-on:keyup.enter="createMicrocosm(), letsGo()"
+ />
+
+ <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>
+ </vue-draggable-resizable>
+ </div>
+ <div v-else>
+ <div class="nodes">
<p id="nodeid" :inner-html.prop="nodetext | marked"></p>
<div v-if="name == false">
<input
type="text"
+ id="clientid"
v-model.trim="clientid"
placeholder="name"
autocorrect="off"
autocapitalize="none"
- ref="objectname"
v-on:keyup.enter="setClient()"
autofocus
@focus="editTrue(true)"
@@ -37,27 +107,17 @@
<h4>Saved</h4>
</div>
</div>
- </vue-draggable-resizable>
-
- <vue-draggable-resizable
- class="innernode"
- :w="310"
- :h="375"
- :x="850"
- :y="15"
- :z="1"
- :draggable="true"
- :resizable="false"
- style="background-color: #6fcf97"
- >
- <div class="content">
+
+ <div class="nodes">
<p id="nodeid" :inner-html.prop="nodetext2 | marked"></p>
<div v-if="microcosm == false">
<input
+ id="microcosm"
type="text"
v-model.trim="localmicrocosm"
placeholder="microcosm name"
autocorrect="off"
+ ref="microcosm"
autocapitalize="none"
@focus="editTrue(true)"
@blur="editTrue(false)"
@@ -76,7 +136,7 @@
<h4>Loading...</h4>
</div>
</div>
- </vue-draggable-resizable>
+ </div>
</div>
</template>
@@ -87,6 +147,7 @@ import marked from 'marked'
export default {
data: function () {
return {
+ currentroute: Router.currentRoute,
localmicrocosm: Router.currentRoute.params.microcosm,
clientid: '',
nodetext:
@@ -122,6 +183,7 @@ export default {
this.$store.dispatch('setClient', this.clientid),
localStorage.setItem('myNNClient', this.clientid)
this.name = true
+ this.focusInput()
},
editTrue(e) {
@@ -131,6 +193,10 @@ export default {
letsGo() {
this.$emit('clientAdded')
},
+
+ focusInput() {
+ this.$refs.microcosm.focus()
+ },
},
}
</script>
@@ -184,4 +250,12 @@ input {
box-shadow: none;
border-style: dotted;
}
+
+.nodes {
+ padding: 0 1em 0 1em;
+ width: 95%;
+ border: 1px dashed black;
+ background-color: #6fcf97;
+ margin: 0.9em 0 0 0.3em;
+}
</style>
diff --git a/app/src/router/index.js b/app/src/router/index.js
index 35c8aea..d368bee 100644
--- a/app/src/router/index.js
+++ b/app/src/router/index.js
@@ -15,8 +15,8 @@ export const routes = [
component: Home,
},
{
- path: '/mobile',
- name: 'Mobile',
+ path: '/list',
+ name: 'My List',
component: List,
},
{
diff --git a/app/src/views/List.vue b/app/src/views/List.vue
index 10d600c..6d6492c 100644
--- a/app/src/views/List.vue
+++ b/app/src/views/List.vue
@@ -19,71 +19,15 @@
</div>
<div v-else>
- <form>
- <div>
- <p id="nodeid" :inner-html.prop="nodetext1 | marked"></p>
-
- <div v-if="name == false">
- <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>
- </div>
- <div v-else>
- <h4>Saved</h4>
- </div>
- </div>
- </form>
-
- <form>
- <div>
- <p id="nodeid" :inner-html.prop="nodetext2 | marked"></p>
- <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 Microcosm</BaseButton
- >
- </div>
- </div>
- <div v-else>
- <h4>Loading...</h4>
- </div>
- </div>
- </form>
+ <OnBoard @clientAdded="clientAdded()" @editTrue="(e) => editTrue(e)" />
</div>
- <!-- <ModeToolbar /> -->
</div>
</template>
<script>
import Router from '@/router'
-//import ModeToolbar from '@/experimental/ModeToolbar'
import ListLayer from '@/components/ListLayer'
+import OnBoard from '@/components/OnBoard'
import { mapState } from 'vuex'
import marked from 'marked'
import { shortcutsMixin } from '@/components/mixins/shortcutsMixin.js'
@@ -98,10 +42,6 @@ export default {
clientid: '',
clientset: false,
offline: false,
- nodetext1:
- '## 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:
- '## Join/Start a microcosm ! 🚀 \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>',
name: false,
microcosm: false,
}
@@ -119,7 +59,6 @@ export default {
otherNodes: (state) => state.otherNodes,
shortcutstate: (state) => state.shortcutstate,
toolmode: (state) => state.ui.mode,
- connections: (state) => state.configConnections,
}),
},
@@ -135,17 +74,6 @@ export default {
}
},
- mounted() {
- if (localStorage.myNNClient && localStorage.mylastMicrocosm) {
- this.clientid = localStorage.myNNClient
- this.localmicrocosm = localStorage.mylastMicrocosm
- this.createMicrocosm()
- this.setClient()
- this.letsGo()
- this.clientset = 'true'
- }
- },
-
methods: {
clientAdded() {
this.clientset = !this.clientset
@@ -158,32 +86,10 @@ export default {
editTrue(e) {
this.$store.dispatch('shortcutState', e)
},
-
- // editNode(e) {
- // var nodeid = e.target.id
- // var nodetext = e.target.value
- // this.$store.dispatch('editNode', { nodeid, nodetext })
- // },
-
- 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
- },
-
- letsGo() {
- this.clientset = !this.clientset
- this.$emit('clientAdded')
- },
},
components: {
ListLayer,
- // ModeToolbar,
+ OnBoard,
},
filters: {
marked: marked,
@@ -192,11 +98,8 @@ export default {
</script>
<style lang="css" scoped>
-#listwrapper {
- margin-left: 1em;
- margin-bottom: 1em;
-}
.mobile {
+ margin-left: 1em;
font-size: 1em;
}
.new {
--
GitLab