diff --git a/.DS_Store b/.DS_Store
index 109c2ae889d0ec12ec3cae3d563a2b76b53bdc04..41cd727a466643d1628b7d2eda0dc4e9b59f3225 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/app/src/components/DiscardLayer.vue b/app/src/components/DiscardLayer.vue
new file mode 100644
index 0000000000000000000000000000000000000000..bf00f39ba05d73e0065dfa4b0b8dd3fe076468c2
--- /dev/null
+++ b/app/src/components/DiscardLayer.vue
@@ -0,0 +1,63 @@
+<template>
+ <div>
+ <form>
+ <div v-for="value in myNodes" v-bind:key="value.node_id">
+ <div
+ class="nodes"
+ v-if="nodeid == value.node_id && value.deleted == true"
+ >
+ <p :inner-html.prop="value.node_text | marked"></p>
+ <div class="btn-row">
+ <BaseButton
+ class="new"
+ buttonClass="action"
+ @click="restoreNode(value.node_id)"
+ >Restore</BaseButton
+ >
+ </div>
+ </div>
+ </div>
+ </form>
+ </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import marked from 'marked'
+
+export default {
+ name: 'DiscardLayer',
+
+ props: {
+ nodeid: String,
+ nodetext: String,
+ deleted: Boolean,
+ },
+
+ computed: mapState({
+ myNodes: (state) => state.myNodes,
+ }),
+ filters: {
+ marked: marked,
+ },
+ methods: {
+ restoreNode(e) {
+ this.$store.dispatch('restoreNode', { e })
+ },
+ },
+}
+</script>
+
+<style lang="css" scoped>
+.nodes {
+ width: 95%;
+ border: 2px dashed black;
+ background-color: rgb(155, 194, 216);
+ margin-bottom: 1em;
+ padding: 0 1em 0 1em;
+}
+
+.btn-row {
+ margin-bottom: 1em;
+}
+</style>
diff --git a/app/src/components/ListLayer.vue b/app/src/components/ListLayer.vue
index 6e860beb8aa31f3bc69b083bc882dd9fae82e4b8..25b5c4fc3f37ba55fd25cfda4e7d02700ae2b43f 100644
--- a/app/src/components/ListLayer.vue
+++ b/app/src/components/ListLayer.vue
@@ -1,7 +1,7 @@
<template>
<div>
<div v-for="(value, index) in configPositions" v-bind:key="index">
- <div v-if="nodeid == value.node_id && deleted == false">
+ <div class="nodes" 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">
@@ -44,7 +44,6 @@ export default {
computed: mapState({
myNodes: (state) => state.myNodes,
configPositions: (state) => state.configPositions,
- // shortcutstate: (state) => state.shortcutstate,
}),
myArray: null,
@@ -61,8 +60,6 @@ export default {
editTrue(e) {
this.$emit('editTrue', e)
- // this.firstload = false
- // // console.log(e)
},
},
}
@@ -73,10 +70,25 @@ h2 {
color: red;
}
-textarea {
+.nodes {
width: 95%;
- height: 100px;
- margin-left: 1em;
- margin-bottom: 1em;
+ border: 2px dashed black;
+ background-color: rgb(155, 194, 216);
+ margin-top: 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/NodesLayer.vue b/app/src/components/NodesLayer.vue
index 4048a9d3c3506d8f725e921b84a1826eabecc6f3..abdc4254c65e78d13621f70764b34651090fedf3 100644
--- a/app/src/components/NodesLayer.vue
+++ b/app/src/components/NodesLayer.vue
@@ -59,7 +59,7 @@
<!-- <BaseButton buttonClass="danger" @click="deleteFlag()"
>Delete</BaseButton
> -->
- <div v-if="value.read_mode == true">
+ <!-- <div v-if="value.read_mode == true">
<BaseButton
class="read"
buttonClass="action"
@@ -74,7 +74,7 @@
@click="readFlag()"
>Read Mode</BaseButton
>
- </div>
+ </div> -->
</div>
</form>
</vue-draggable-resizable>
diff --git a/app/src/components/OnBoard.vue b/app/src/components/OnBoard.vue
index adc056d9d2f1af7bab97613d8410fc37f86a2b69..c6184acae31b49c484c52f0561cde8cc083bb61a 100644
--- a/app/src/components/OnBoard.vue
+++ b/app/src/components/OnBoard.vue
@@ -1,17 +1,86 @@
<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="600"
+ :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)"
+ @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
@@ -37,20 +106,8 @@
<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
@@ -76,7 +133,7 @@
<h4>Loading...</h4>
</div>
</div>
- </vue-draggable-resizable>
+ </div>
</div>
</template>
@@ -87,6 +144,7 @@ import marked from 'marked'
export default {
data: function () {
return {
+ currentroute: Router.currentRoute,
localmicrocosm: Router.currentRoute.params.microcosm,
clientid: '',
nodetext:
@@ -184,4 +242,13 @@ input {
box-shadow: none;
border-style: dotted;
}
+
+.nodes {
+ margin: 1em;
+ padding: 0 1em 0 1em;
+ width: 95%;
+ border: 2px dashed black;
+ background-color: #6fcf97;
+ margin-top: 1em;
+}
</style>
diff --git a/app/src/components/OtherNodeslayer.vue b/app/src/components/OtherNodeslayer.vue
index 584f84b288901af5a9492ae0dcd092856c13f977..abda229841cadad5b8b0aed5d20965f2ad7ff360 100644
--- a/app/src/components/OtherNodeslayer.vue
+++ b/app/src/components/OtherNodeslayer.vue
@@ -4,7 +4,7 @@
<div v-if="toolmode == 'move'">
<!-- make draggable false as we are panning around -->
<vue-draggable-resizable
- v-if="nodeid == value.node_id"
+ v-if="nodeid == value.node_id && deleted == false"
:w="value.width"
:h="value.height"
:x="value.x_pos"
@@ -21,9 +21,7 @@
:min-width="200"
:min-height="220"
>
- <p class="read" :id="nodeid" :inner-html.prop="nodetext | marked">
- {{ nodeid }}
- </p>
+ <p class="read" :id="nodeid" :inner-html.prop="nodetext | marked"></p>
<!-- <h3>Reactions</h3> -->
<div class="react" v-if="nodeid != undefined">
@@ -109,7 +107,7 @@
<div v-else>
<vue-draggable-resizable
- v-if="nodeid == value.node_id"
+ v-if="nodeid == value.node_id && deleted == false"
:w="value.width"
:h="value.height"
:x="value.x_pos"
@@ -124,9 +122,7 @@
:min-width="200"
:min-height="220"
>
- <p class="read" :id="nodeid" :inner-html.prop="nodetext | marked">
- {{ nodeid }}
- </p>
+ <p class="read" :id="nodeid" :inner-html.prop="nodetext | marked"></p>
<!-- <h3>Reactions</h3> -->
<div class="allemoji">
<div
@@ -229,6 +225,7 @@ export default {
nodetext: String,
nodewidth: Number,
nodeheight: Number,
+ deleted: Boolean,
},
data() {
diff --git a/app/src/router/index.js b/app/src/router/index.js
index 35c8aead158318abebd11f6d60288b0af388e03a..d188aec0007ccc33a90444b769fa864689b3354b 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: 'List',
component: List,
},
{
diff --git a/app/src/views/Discarded.vue b/app/src/views/Discarded.vue
index 901dfabf9aced6fe7847536cce55a39b0f1fb2cd..4ae754b52680ade4b63f6c13eba97ca829ba606b 100644
--- a/app/src/views/Discarded.vue
+++ b/app/src/views/Discarded.vue
@@ -1,110 +1,39 @@
<template>
- <div id="discardwrapper">
- <h1 class="restore">Your discarded nodes</h1>
-
+ <div>
<div v-if="clientset">
- <form>
- <div v-for="value in myNodes" v-bind:key="value.node_id">
- <div v-if="value.deleted == true">
- {{ value.node_text }}
-
- <div class="btn-row">
- <BaseButton
- class="new"
- buttonClass="action"
- @click="restoreNode(value.node_id)"
- >Restore</BaseButton
- >
- </div>
- </div>
- </div>
- </form>
+ <div id="discardwrapper">
+ <h1 class="mobile">Your discarded nodes - list mode</h1>
+
+ <DiscardLayer
+ v-for="value in myNodes"
+ v-bind:key="value.node_id"
+ v-bind:nodeid="value.node_id"
+ v-bind:nodetext="value.node_text"
+ v-bind:deleted="value.deleted"
+ />
+ </div>
</div>
- <!-- // onboarding for list view -->
<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>
</div>
- <!-- </div> -->
</template>
<script>
-// import OffLine from '@/components/OffLine'
-// import OnBoard from '@/components/OnBoard.vue'
import Router from '@/router'
-
+import DiscardLayer from '@/components/DiscardLayer'
+import OnBoard from '@/components/OnBoard'
import { mapState } from 'vuex'
-import marked from 'marked'
-import { shortcutsMixin } from '@/components/mixins/shortcutsMixin.js'
export default {
name: 'Discarded',
- mixins: [shortcutsMixin],
+
data: function () {
return {
localmicrocosm: Router.currentRoute.params.microcosm,
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,
}
@@ -118,85 +47,30 @@ export default {
computed: mapState({
myNodes: (state) => state.myNodes,
- configPositions: (state) => state.configPositions,
- shortcutstate: (state) => state.shortcutstate,
}),
- created() {
- if (typeof window !== 'undefined') {
- document.addEventListener('keydown', this.handleKeyPress)
- }
- },
-
- beforeDestroy() {
- if (typeof window !== 'undefined') {
- document.removeEventListener('keydown', this.handleKeyPress)
- }
- },
-
- mounted() {
- if (localStorage.myNNClient && localStorage.mylastMicrocosm) {
- this.clientid = localStorage.myNNClient
- this.localmicrocosm = localStorage.mylastMicrocosm
- this.createMicrocosm()
- this.setClient()
- this.letsGo()
- this.clientset = 'true'
- }
- },
-
components: {
- // OnBoard,
- // OffLine,
- //ModeToolbar,
+ DiscardLayer,
+ OnBoard,
},
- filters: {
- marked: marked,
- },
methods: {
clientAdded() {
this.clientset = !this.clientset
},
-
- 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')
- },
-
- restoreNode(e) {
- this.$store.dispatch('restoreNode', { e })
- },
-
- 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 })
- },
},
}
</script>
<style lang="css" scoped>
-textarea {
- width: 95%;
- height: 100px;
+#discardwrapper {
margin-left: 1em;
margin-bottom: 1em;
}
+.mobile {
+ font-size: 1em;
+}
+.new {
+ margin-bottom: 1em;
+}
</style>
diff --git a/app/src/views/Home.vue b/app/src/views/Home.vue
index 1d5d53482d83a4e50dd686fd61da4dab05d67bb7..f1e58a81c5d1c23e287be904b0e8d300725985c3 100644
--- a/app/src/views/Home.vue
+++ b/app/src/views/Home.vue
@@ -41,6 +41,7 @@
v-bind:key="value.node_id"
v-bind:nodeid="value.node_id"
v-bind:nodetext="value.node_text"
+ v-bind:deleted="value.deleted"
/>
<NodesLayer
@editTrue="(e) => editTrue(e)"
@@ -60,6 +61,7 @@
v-bind:key="value.node_id"
v-bind:nodeid="value.node_id"
v-bind:nodetext="value.node_text"
+ v-bind:deleted="value.deleted"
/>
<NodesLayer
@editTrue="(e) => editTrue(e)"
diff --git a/app/src/views/List.vue b/app/src/views/List.vue
index 10d600c0dd5b771bc8a94e4467d8c4e5334a65db..0b40d92cd1c554e0021ee66a1e0b7bdf206be3ac 100644
--- a/app/src/views/List.vue
+++ b/app/src/views/List.vue
@@ -1,89 +1,34 @@
<template>
- <div id="listwrapper">
+ <div>
<div v-if="clientset">
- <h1 class="mobile">Your nodes - list mode</h1>
-
- <ListLayer
- @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"
- v-bind:deleted="value.deleted"
- />
- <div class="btn-row">
- <BaseButton class="new" buttonClass="action" @click="addNode()"
- >Create Node</BaseButton
- >
+ <div id="listwrapper">
+ <h1 class="mobile">Your nodes - list mode</h1>
+
+ <ListLayer
+ @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"
+ v-bind:deleted="value.deleted"
+ />
+ <div class="btn-row">
+ <BaseButton class="new" buttonClass="action" @click="addNode()"
+ >Create Node</BaseButton
+ >
+ </div>
</div>
</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 +43,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,
}
@@ -116,10 +57,6 @@ export default {
computed: {
...mapState({
myNodes: (state) => state.myNodes,
- otherNodes: (state) => state.otherNodes,
- shortcutstate: (state) => state.shortcutstate,
- toolmode: (state) => state.ui.mode,
- connections: (state) => state.configConnections,
}),
},
@@ -136,14 +73,14 @@ 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'
- }
+ // if (localStorage.myNNClient && localStorage.mylastMicrocosm) {
+ // this.clientid = localStorage.myNNClient
+ // this.localmicrocosm = localStorage.mylastMicrocosm
+ // this.createMicrocosm()
+ // this.setClient()
+ // this.letsGo()
+ // this.clientset = 'true'
+ // }
},
methods: {
@@ -158,32 +95,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,