diff --git a/app/src/assets/files/collect.png b/app/src/assets/files/collect.png
new file mode 100644
index 0000000000000000000000000000000000000000..647a9219ea462f1172b1ca394baf446e5eeaa623
Binary files /dev/null and b/app/src/assets/files/collect.png differ
diff --git a/app/src/components/CardsLayer.vue b/app/src/components/CardsLayer.vue
index 3af978600dccfec66cde63daf48eeb9177804588..8adec76acaaa0e242dd3b60595aa868aeac85b80 100644
--- a/app/src/components/CardsLayer.vue
+++ b/app/src/components/CardsLayer.vue
@@ -94,7 +94,11 @@ export default {
deleteFlag(e) {
e = this.nodeid
- this.$store.dispatch('deleteFlag', { e })
+ if (confirm('Confirm discard?')) {
+ this.$store.dispatch('deleteFlag', { e })
+ } else {
+ // nothing happens
+ }
},
// readFlag(e) {
diff --git a/app/src/components/ListLayer.vue b/app/src/components/ListLayer.vue
index f828b5358f2ff92ddb849ae9a455cff63979da0d..e53d8212b3233bea92aacac944062a5a97cf9f6c 100644
--- a/app/src/components/ListLayer.vue
+++ b/app/src/components/ListLayer.vue
@@ -1,65 +1,74 @@
<template>
<div>
- <div v-if="deleted == false">
- <form class="nodes">
- <div v-for="value in $options.myArray" v-bind:key="value.node_id">
- <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 v-if="localreadmode == true && deleted == false">
- <p class="read" :id="nodeid" :inner-html.prop="nodetext | marked"></p>
- </div> -->
- <div class="allemoji">
- <div
- class="eachemoji"
- v-for="(emojis, index) in configEmoji"
- :key="index"
- >
- <p v-if="nodeid == emojis.node_id">
- {{ emojis.emoji_text }}
- </p>
+ <div v-for="(value, index) in configPositions" v-bind:key="index">
+ <div v-if="nodeid == value.node_id && deleted == false">
+ <form class="nodes">
+ <div v-if="value.read_mode == false">
+ <div v-for="value in $options.myArray" v-bind:key="value.node_id">
+ <textarea
+ v-if="nodeid == value.node_id"
+ @focus="editTrue(true)"
+ @blur="editTrue(false)"
+ autofocus
+ v-model="value.node_text"
+ @input="editNode"
+ :id="nodeid"
+ ref="nodetext"
+ placeholder="Idea goes here!(auto saved every keystroke)"
+ ></textarea>
+ </div>
</div>
- </div>
- <p class="info">*markdown supported & autosaves</p>
- <div class="btn-row">
- <BaseButton buttonClass="danger" @click="deleteFlag()"
- >Discard</BaseButton
- >
- <!-- <div v-if="localreadmode == true && deleted == false">
- <BaseButton class="read" buttonClass="action" @click="readFlag()"
- >Edit Mode
- </BaseButton>
+ <div v-if="value.read_mode && deleted == false">
+ <p
+ class="read"
+ :id="nodeid"
+ :inner-html.prop="nodetext | marked"
+ ></p>
</div>
- <div v-else>
- <BaseButton class="read" buttonClass="action" @click="readFlag()"
- >Read Mode</BaseButton
+
+ <div class="allemoji">
+ <div
+ class="eachemoji"
+ v-for="(emojis, index) in configEmoji"
+ :key="index"
+ >
+ <p v-if="nodeid == emojis.node_id">
+ {{ emojis.emoji_text }}
+ </p>
+ </div>
+ </div>
+ <p class="info">*markdown supported & autosaves</p>
+ <div class="btn-row">
+ <BaseButton buttonClass="danger" @click="deleteFlag()"
+ >Discard</BaseButton
>
- </div> -->
- </div>
- </form>
+ <div v-if="value.read_mode == true && deleted == false">
+ <BaseButton class="read" buttonClass="action" @click="readFlag()"
+ >Edit Mode
+ </BaseButton>
+ </div>
+ <div v-else>
+ <BaseButton class="read" buttonClass="action" @click="readFlag()"
+ >Read Mode</BaseButton
+ >
+ </div>
+ </div>
+ </form>
+ </div>
</div>
</div>
</template>
<script>
import { mapState } from 'vuex'
-//var readmode
+import marked from 'marked'
+var readmode
export default {
name: 'ListLayer',
data: function () {
return {
- // localreadmode: false,
+ localreadmode: false,
}
},
@@ -70,7 +79,7 @@ export default {
},
filters: {
- // marked: marked,
+ marked: marked,
},
computed: mapState({
@@ -98,29 +107,33 @@ export default {
deleteFlag(e) {
e = this.nodeid
- this.$store.dispatch('deleteFlag', { e })
+ if (confirm('Confirm discard?')) {
+ this.$store.dispatch('deleteFlag', { e })
+ } else {
+ // nothing happens
+ }
},
- // 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'
- // }
- // },
+ 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'
+ }
+ },
},
}
</script>
@@ -143,6 +156,7 @@ textarea {
height: 175px;
resize: none;
box-sizing: border-box;
+ font-size: 18px;
font-family: 'Inter var', Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
diff --git a/app/src/components/ModesCard.vue b/app/src/components/ModesCard.vue
new file mode 100644
index 0000000000000000000000000000000000000000..bb96ae89c4690b4cd9a7c667d49e6159b863fa75
--- /dev/null
+++ b/app/src/components/ModesCard.vue
@@ -0,0 +1,131 @@
+<template>
+ <div>
+ <div v-show="tipsplease" class="nodes welcome">
+ <img src="https://alpha.nodenogg.in/files/collect.png" />
+
+ <p>
+ magpie mode is designed for you to gather your thoughts and research, as
+ quickly and easily as possible.
+ </p>
+ <p>
+ Tap or press the add node icon
+ <svg
+ class="example"
+ xmlns="http://www.w3.org/2000/svg"
+ width="50"
+ viewBox="0 0 143 106"
+ >
+ <g transform="translate(-1345 -843)">
+ <g class="a" transform="translate(1345 865)">
+ <rect class="d" width="127" height="84" />
+ <rect class="e" x="0.5" y="0.5" width="126" height="83" />
+ </g>
+ <g class="b" transform="translate(1361 843)">
+ <rect class="d" width="127" height="84" />
+ <rect class="e" x="3.5" y="3.5" width="120" height="77" />
+ </g>
+ <line class="c" x2="41" transform="translate(1406.5 884.5)" />
+ <line class="c" y2="41" transform="translate(1426.5 863.5)" />
+ </g>
+ </svg>
+ (shortcut <strong>n</strong>)
+ </p>
+ <p>
+ Don't forget you can use <a href="#">markdown</a> to quickly format your
+ text and add images from websources, you can even use html and embed
+ codes.
+ </p>
+ <p>
+ To see what everyone else has collected in your team and to start
+ organising, just switch to organise mode (best on a large display).
+ </p>
+
+ <div class="btn-row">
+ <BaseButton buttonClass="danger" @click="hideTips()">Hide</BaseButton>
+ </div>
+ </div>
+ <div v-show="!tipsplease"></div>
+ </div>
+</template>
+
+<script>
+import marked from 'marked'
+
+export default {
+ data: function () {
+ return {
+ tipsplease: true,
+ }
+ },
+
+ mounted() {},
+ filters: {
+ marked: marked,
+ },
+
+ methods: {
+ hideTips() {
+ this.tipsplease = false
+ },
+
+
+ },
+}
+</script>
+
+<style lang="css" scoped>
+img {
+ max-width: 400px;
+ padding: 0 50;
+}
+
+.welcome {
+ /* max-width: 450px; */
+ width: 95%;
+ margin-top: 1em;
+ margin-left: 1em;
+ background-color: white;
+ border: 2px solid black;
+ padding: 1em;
+}
+
+.vdr {
+ padding: 0 0.5em;
+}
+
+.example {
+ width: 30px;
+}
+
+.icon {
+ margin-left: 1em;
+ padding: 0.5em;
+ cursor: pointer;
+}
+
+.a {
+ fill: #333;
+ stroke: #707070;
+}
+.b {
+ fill: #fff;
+}
+.b,
+.c {
+ stroke: #333;
+ stroke-width: 7px;
+}
+.c,
+.e {
+ fill: none;
+}
+.d {
+ stroke: none;
+}
+
+.btn-row {
+ margin-bottom: 5px;
+ padding: 0px 0px 15px 10px;
+ border-radius: 4px;
+}
+</style>
diff --git a/app/src/components/NodesLayer.vue b/app/src/components/NodesLayer.vue
index abdc4254c65e78d13621f70764b34651090fedf3..b6b2ba255ffde085f93f751f5e591818b70a553c 100644
--- a/app/src/components/NodesLayer.vue
+++ b/app/src/components/NodesLayer.vue
@@ -364,7 +364,11 @@ export default {
deleteFlag(e) {
e = this.nodeid
- this.$store.dispatch('deleteFlag', { e })
+ if (confirm('Confirm discard?')) {
+ this.$store.dispatch('deleteFlag', { e })
+ } else {
+ // nothing happens
+ }
},
readFlag(e) {
e = this.nodeid
@@ -409,6 +413,7 @@ textarea {
width: 100%;
height: 175px;
resize: none;
+ font-size: 18px;
box-sizing: border-box;
font-family: 'Inter var', Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
diff --git a/app/src/store/index.js b/app/src/store/index.js
index 0d829d3477b26a2181e5a2f571cc5812c44281a4..96babdda279103760552e6de6ba56f516a66c62f 100644
--- a/app/src/store/index.js
+++ b/app/src/store/index.js
@@ -168,6 +168,7 @@ const store = new Vuex.Store({
// if (doc.nodes[i].deleted == true) {
// // doc.nodes.splice(i, 1)
// }
+
state.myNodes = doc.nodes
}
})
diff --git a/app/src/views/Cards.vue b/app/src/views/Cards.vue
index 0f7d3cbbbd427169839a7382ee9a02b0e811c5cd..834e0fe62f4e021cd7f892e5dfe3e6268c3c94f4 100644
--- a/app/src/views/Cards.vue
+++ b/app/src/views/Cards.vue
@@ -36,7 +36,6 @@
</template>
<script>
-import Router from '@/router'
import CardsLayer from '@/components/CardsLayer'
import OtherCardslayer from '@/components/OtherCardslayer'
import OnBoard from '@/components/OnBoard'
@@ -51,7 +50,6 @@ export default {
mixins: [shortcutsMixin],
data: function () {
return {
- currentroute: Router.currentRoute,
clientset: false,
}
},
diff --git a/app/src/views/Discarded.vue b/app/src/views/Discarded.vue
index 0b4db4d209a30669c4459b0be982eff8e6222764..9c357b05caf43e939a779ccc230046971c1c4a5d 100644
--- a/app/src/views/Discarded.vue
+++ b/app/src/views/Discarded.vue
@@ -19,7 +19,6 @@
</template>
<script>
-import Router from '@/router'
import DiscardLayer from '@/components/DiscardLayer'
import OnBoard from '@/components/OnBoard'
@@ -33,7 +32,6 @@ export default {
mixins: [shortcutsMixin],
data: function () {
return {
- currentroute: Router.currentRoute,
clientset: false,
}
},
diff --git a/app/src/views/Home.vue b/app/src/views/Home.vue
index 49efc2e66576f1df4f7d6e22c0410e594e2f8431..ab3c0160d2e2259cb59ced6ff5f95f39730721f3 100644
--- a/app/src/views/Home.vue
+++ b/app/src/views/Home.vue
@@ -164,7 +164,6 @@ export default {
mounted() {
window.addEventListener('resize', this.handleResize)
this.handleResize()
- console.log(this.clientset)
},
created() {
diff --git a/app/src/views/List-old.vue b/app/src/views/List-old.vue
deleted file mode 100644
index 829f8fc58808f87f4ef319df9ae677a8b4e3373c..0000000000000000000000000000000000000000
--- a/app/src/views/List-old.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<template>
- <div>
- <div v-if="clientset">
- <div id="listwrapper">
- <h1 class="mobile">Your nodes - collect</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>
- <OnBoard @clientAdded="clientAdded()" @editTrue="(e) => editTrue(e)" />
- </div>
- </div>
-</template>
-
-<script>
-import ListLayer from '@/components/ListLayer'
-import OnBoard from '@/components/OnBoard'
-
-import { mapState } from 'vuex'
-
-//import { shortcutsMixin } from '@/components/mixins/shortcutsMixin.js'
-
-export default {
- name: 'List',
-
- //mixins: [shortcutsMixin],
- data: function () {
- return {
- clientset: false,
- }
- },
-
- props: {
- nodeid: String,
- nodetext: String,
- deleted: Boolean,
- },
-
- computed: {
- ...mapState({
- myNodes: (state) => state.myNodes,
- //otherNodes: (state) => state.otherNodes,
- // shortcutstate: (state) => state.shortcutstate,
- // toolmode: (state) => state.ui.mode,
- }),
- },
-
- // created() {
- // if (typeof window !== 'undefined') {
- // document.addEventListener('keydown', this.handleKeyPress)
- // }
- // },
-
- // beforeDestroy() {
- // if (typeof window !== 'undefined') {
- // document.removeEventListener('keydown', this.handleKeyPress)
- // }
- // },
-
- methods: {
- clientAdded() {
- this.clientset = !this.clientset
- },
-
- addNode() {
- this.$store.dispatch('addNode')
- },
-
- editTrue(e) {
- this.$store.dispatch('shortcutState', e)
- },
- },
- components: {
- ListLayer,
- OnBoard,
- },
-}
-</script>
-
-<style lang="css" scoped>
-.mobile {
- margin-left: 1em;
- font-size: 1em;
-}
-.new {
- margin-bottom: 1em;
-}
-</style>
diff --git a/app/src/views/List.vue b/app/src/views/List.vue
index 8099dabd53fa215101875ec819c07b7b8906b19e..784051c67004ec6f84b8551559219b2452404380 100644
--- a/app/src/views/List.vue
+++ b/app/src/views/List.vue
@@ -2,7 +2,8 @@
<div>
<div v-if="clientset">
<div id="listwrapper">
- <h1 class="mobile">Your nodes - collect</h1>
+ <!-- <h1 class="mobile">Your nodes - collect</h1> -->
+ <ModesCard />
<ListLayer
@editTrue="(e) => editTrue(e)"
v-for="value in myNodes"
@@ -12,9 +13,30 @@
v-bind:deleted="value.deleted"
/>
<div class="btn-row">
- <BaseButton class="new" buttonClass="action" @click="addNode()"
+ <!-- <BaseButton class="new" buttonClass="action" @click="addNode()"
>Create Node</BaseButton
+ > -->
+
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="80"
+ viewBox="0 0 143 106"
+ class="icon"
+ @click="addNode()"
>
+ <g transform="translate(-1345 -843)">
+ <g class="a" transform="translate(1345 865)">
+ <rect class="d" width="127" height="84" />
+ <rect class="e" x="0.5" y="0.5" width="126" height="83" />
+ </g>
+ <g class="b" transform="translate(1361 843)">
+ <rect class="d" width="127" height="84" />
+ <rect class="e" x="3.5" y="3.5" width="120" height="77" />
+ </g>
+ <line class="c" x2="41" transform="translate(1406.5 884.5)" />
+ <line class="c" y2="41" transform="translate(1426.5 863.5)" />
+ </g>
+ </svg>
</div>
</div>
</div>
@@ -26,6 +48,7 @@
<script>
import ListLayer from '@/components/ListLayer'
+import ModesCard from '@/components/ModesCard'
import OnBoard from '@/components/OnBoard'
@@ -53,7 +76,7 @@ export default {
...mapState({
myNodes: (state) => state.myNodes,
//otherNodes: (state) => state.otherNodes,
- // shortcutstate: (state) => state.shortcutstate,
+ shortcutstate: (state) => state.shortcutstate,
// toolmode: (state) => state.ui.mode,
}),
},
@@ -65,7 +88,7 @@ export default {
},
mounted() {
- console.log(this.clientset)
+ // this.shortcutstate = false
},
beforeDestroy() {
@@ -88,6 +111,7 @@ export default {
},
},
components: {
+ ModesCard,
ListLayer,
OnBoard,
},
@@ -95,6 +119,15 @@ export default {
</script>
<style lang="css" scoped>
+.welcome {
+ width: 95%;
+ margin-top: 1em;
+ margin-left: 1em;
+ background-color: white;
+ border: 2px solid black;
+ padding: 1em;
+}
+
.mobile {
margin-left: 1em;
font-size: 1em;
@@ -102,4 +135,34 @@ export default {
.new {
margin-bottom: 1em;
}
+
+.example {
+ width: 30px;
+}
+
+.icon {
+ margin-left: 1em;
+ padding: 0.5em;
+ cursor: pointer;
+}
+
+.a {
+ fill: #333;
+ stroke: #707070;
+}
+.b {
+ fill: #fff;
+}
+.b,
+.c {
+ stroke: #333;
+ stroke-width: 7px;
+}
+.c,
+.e {
+ fill: none;
+}
+.d {
+ stroke: none;
+}
</style>
diff --git a/app/src/views/Oldhome.vue b/app/src/views/Oldhome.vue
deleted file mode 100644
index 4fbf5dad641309c782bc31b42cca0267a3b81340..0000000000000000000000000000000000000000
--- a/app/src/views/Oldhome.vue
+++ /dev/null
@@ -1,128 +0,0 @@
-<template>
- <div class="home">
- <div v-if="clientset">
- <div v-if="listview">
- <ListLayer
- v-for="value in myNodes"
- v-bind:key="value.node_id"
- v-bind:nodeid="value.node_id"
- v-bind:nodetext="value.node_text"
- />
-
- <OtherListlayer
- v-for="value in otherNodes"
- v-bind:key="value.node_id"
- v-bind:nodeid="value.node_id"
- v-bind:nodetext="value.node_text"
- />
- </div>
- <div v-else>
- <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>
- <ControlsLayer @listView="listView()" />
- </div>
- <OnBoard v-else @clientAdded="clientAdded()" />
- </div>
-</template>
-
-<script>
-// @ is an alias to /src
-import OnBoard from '@/components/OnBoard.vue'
-import NodesLayer from '@/components/NodesLayer.vue'
-import OtherNodeslayer from '@/components/OtherNodeslayer.vue'
-import ListLayer from '@/components/ListLayer.vue'
-import OtherListlayer from '@/components/OtherListlayer.vue'
-import ControlsLayer from '@/components/ControlsLayer.vue'
-
-import { mapState } from 'vuex'
-import { shortcutsMixin } from '@/components/mixins/shortcutsMixin.js'
-// import Router from '@/router'
-// // console.log(Router.currentRoute.params.microcosm)
-
-export default {
- name: 'Oldhome',
- // Shortcut mixin is here so we can call the keyboard controls anytime
- mixins: [shortcutsMixin],
- created() {
- if (typeof window !== 'undefined') {
- document.addEventListener('keydown', this.handleKeyPress)
- }
- if (localStorage.myNNClient == null) {
- // visiting from URL get them to name client
- // localStorage.setItem('myNNClient', 'unknown client')
- // // console.log(localStorage.myNNClient)
- }
- },
- beforeDestroy() {
- if (typeof window !== 'undefined') {
- document.removeEventListener('keydown', this.handleKeyPress)
- }
- },
-
- data: function () {
- return {
- clientset: false,
- listview: false,
- offline: false,
- }
- },
-
- components: {
- OnBoard,
- NodesLayer,
- OtherNodeslayer,
- ListLayer,
- OtherListlayer,
- ControlsLayer,
- },
- computed: mapState({
- myNodes: (state) => state.myNodes,
- otherNodes: (state) => state.otherNodes,
- shortcutstate: (state) => state.shortcutstate,
- }),
- methods: {
- clientAdded() {
- this.clientset = !this.clientset
- },
-
- editTrue(e) {
- this.$store.dispatch('shortcutState', e)
- },
-
- // This is here to support the shortcuts
- addNode() {
- this.$store.dispatch('addNode')
- },
-
- listView() {
- if (this.listview == false) {
- this.listview = true
- } else {
- this.listview = false
- }
- },
-
- offlineTriggered() {
- this.offline = true
- },
- onlineTriggered() {
- this.offline = false
- },
- },
-}
-</script>
-
-<style scoped></style>