From a346b36ec79e70f6952b7a1a7375ecc1d8cdf65c Mon Sep 17 00:00:00 2001 From: Adam Procter <adamprocter@researchnot.es> Date: Sat, 10 Oct 2020 16:34:45 +0100 Subject: [PATCH] refactored all the list / discard view Hopefully these should work on mobile as not so many loops --- app/package.json | 3 - app/src/components/DiscardLayer.vue | 106 +++++++++++++ app/src/components/ListLayer.vue | 133 +++++++++++----- app/src/components/OnBoard.vue | 6 +- app/src/components/OtherListlayer.vue | 8 +- app/src/components/OtherNodeslayer.vue | 5 +- app/src/components/TipsLayer.vue | 4 - app/src/router/index.js | 6 + app/src/views/Discarded-old.vue | 202 +++++++++++++++++++++++++ app/src/views/Discarded.vue | 172 +++++---------------- app/src/views/Home.vue | 2 + app/src/views/Leave.vue | 25 +++ app/src/views/List.vue | 2 +- 13 files changed, 481 insertions(+), 193 deletions(-) create mode 100644 app/src/components/DiscardLayer.vue create mode 100644 app/src/views/Discarded-old.vue create mode 100644 app/src/views/Leave.vue diff --git a/app/package.json b/app/package.json index 3c52320..7673df3 100644 --- a/app/package.json +++ b/app/package.json @@ -9,16 +9,13 @@ "lint:fix": "vue-cli-service lint --fix" }, "dependencies": { - "@panzoom/panzoom": "^4.3.2", "core-js": "^3.6.5", "file-loader": "^6.1.0", "ipfs": "^0.50.0", - "lodash": "^4.17.20", "marked": "^1.1.1", "pixi.js": "^5.3.3", "pouchdb": "^7.2.2", "vue": "^2.6.12", - "vue-context": "^6.0.0", "vue-draggable-resizable": "^2.2.0", "vue-emoji-picker": "^1.0.1", "vue-router": "^3.4.3", diff --git a/app/src/components/DiscardLayer.vue b/app/src/components/DiscardLayer.vue new file mode 100644 index 0000000..05e59db --- /dev/null +++ b/app/src/components/DiscardLayer.vue @@ -0,0 +1,106 @@ +<template> + <div> + <div v-if="deleted == true"> + <div class="nodes"> + <p :inner-html.prop="nodetext | marked"></p> + + <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> + + <div class="btn-row"> + <BaseButton buttonClass="danger" @click="restoreNode(nodeid)" + >Restore</BaseButton + > + </div> + </div> + </div> + </div> +</template> + +<script> +import { mapState } from 'vuex' +import marked from 'marked' +export default { + name: 'ListLayer', + + data: function () { + return {} + }, + + props: { + nodeid: String, + nodetext: String, + deleted: Boolean, + }, + + computed: mapState({ + myNodes: (state) => state.myNodes, + configEmoji: (state) => state.configEmoji, + }), + + filters: { + marked: marked, + }, + + methods: { + restoreNode(e) { + this.$store.dispatch('restoreNode', { e }) + }, + }, +} +</script> + +<style lang="css" scoped> +h2 { + color: red; +} + +.nodes { + width: 95%; + border: 2px dashed black; + background-color: rgb(155, 194, 216); + margin-top: 1em; + margin-left: 1em; +} + +p { + 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; +} +.btn-row { + position: relative; + margin-bottom: 5px; + display: flex; + justify-content: center; + flex-wrap: wrap; + padding: 0 15px; + border-radius: 4px; +} + +.allemoji { + font-size: 2em; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(0, auto)); + + /* float: left; */ +} + +.eachemoji p { + margin: 0em; +} +</style> diff --git a/app/src/components/ListLayer.vue b/app/src/components/ListLayer.vue index 0c3120b..033eb3c 100644 --- a/app/src/components/ListLayer.vue +++ b/app/src/components/ListLayer.vue @@ -1,35 +1,66 @@ <template> - <div class="nodes"> - <form> - <div v-if="readmode == false"> + <div> + <div v-if="deleted == false"> + <form class="nodes"> <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> + <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> + </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> + <div v-else> + <BaseButton class="read" buttonClass="action" @click="readFlag()" + >Read Mode</BaseButton + > + </div> --> </div> - </div> - </form> + </form> + </div> </div> </template> <script> import { mapState } from 'vuex' -var readmode +//var readmode export default { name: 'ListLayer', data: function () { - return {} + return { + // localreadmode: false, + } }, props: { @@ -41,7 +72,7 @@ export default { computed: mapState({ myNodes: (state) => state.myNodes, configPositions: (state) => state.configPositions, - // shortcutstate: (state) => state.shortcutstate, + configEmoji: (state) => state.configEmoji, }), myArray: null, @@ -60,26 +91,31 @@ export default { this.$emit('editTrue', e) }, - readFlag(e) { + deleteFlag(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' - } + this.$store.dispatch('deleteFlag', { 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' + // } + // }, }, } </script> @@ -111,4 +147,25 @@ textarea { background-color: rgb(187, 227, 255); scrollbar-color: yellow rgb(187, 227, 255); } +.btn-row { + position: relative; + margin-bottom: 5px; + display: flex; + justify-content: center; + flex-wrap: wrap; + padding: 0 15px; + border-radius: 4px; +} + +.allemoji { + font-size: 2em; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(0, auto)); + + /* float: left; */ +} + +.eachemoji p { + margin: 0em; +} </style> diff --git a/app/src/components/OnBoard.vue b/app/src/components/OnBoard.vue index c78df8a..e7a4a37 100644 --- a/app/src/components/OnBoard.vue +++ b/app/src/components/OnBoard.vue @@ -44,7 +44,7 @@ class="innernode" :w="310" :h="375" - :x="850" + :x="600" :y="15" :z="1" :draggable="true" @@ -202,10 +202,6 @@ export default { </script> <style lang="css" scoped> -.start { - opacity: 0; - filter: alpha(opacity=0); -} .vdr { padding: 0 0.5em; } diff --git a/app/src/components/OtherListlayer.vue b/app/src/components/OtherListlayer.vue index c2c267f..348f2af 100644 --- a/app/src/components/OtherListlayer.vue +++ b/app/src/components/OtherListlayer.vue @@ -20,17 +20,17 @@ export default { name: 'OtherListlayer', props: { nodeid: String, - nodetext: String + nodetext: String, }, computed: mapState({ - otherNodes: state => state.otherNodes + otherNodes: (state) => state.otherNodes, }), filters: { // need to write a reverse data filter I suspect here so new data is at the top of list - marked: marked - } + marked: marked, + }, } </script> diff --git a/app/src/components/OtherNodeslayer.vue b/app/src/components/OtherNodeslayer.vue index 584f84b..ffcf678 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" @@ -109,7 +109,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" @@ -229,6 +229,7 @@ export default { nodetext: String, nodewidth: Number, nodeheight: Number, + deleted: Boolean, }, data() { diff --git a/app/src/components/TipsLayer.vue b/app/src/components/TipsLayer.vue index dbc57ba..4e56d99 100644 --- a/app/src/components/TipsLayer.vue +++ b/app/src/components/TipsLayer.vue @@ -54,10 +54,6 @@ export default { </script> <style lang="css" scoped> -.start { - opacity: 0; - filter: alpha(opacity=0); -} .vdr { padding: 0 0.5em; } diff --git a/app/src/router/index.js b/app/src/router/index.js index d368bee..fabc5fd 100644 --- a/app/src/router/index.js +++ b/app/src/router/index.js @@ -3,6 +3,7 @@ import VueRouter from 'vue-router' import Home from '../views/Home.vue' import List from '../views/List.vue' import Discarded from '../views/Discarded.vue' +import Leave from '../views/Leave.vue' // import Oldhome from '../views/Oldhome' //import Test from '../views/Test' @@ -24,6 +25,11 @@ export const routes = [ name: 'Discarded', component: Discarded, }, + { + path: '/leave', + name: 'Leave', + component: Leave, + }, { path: '/about', name: 'About', diff --git a/app/src/views/Discarded-old.vue b/app/src/views/Discarded-old.vue new file mode 100644 index 0000000..901dfab --- /dev/null +++ b/app/src/views/Discarded-old.vue @@ -0,0 +1,202 @@ +<template> + <div id="discardwrapper"> + <h1 class="restore">Your discarded nodes</h1> + + <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> + <!-- // 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> + </div> + </div> + <!-- </div> --> +</template> + +<script> +// import OffLine from '@/components/OffLine' +// import OnBoard from '@/components/OnBoard.vue' +import Router from '@/router' + +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, + } + }, + + props: { + nodeid: String, + nodetext: String, + deleted: Boolean, + }, + + 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, + }, + + 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; + margin-left: 1em; + margin-bottom: 1em; +} +</style> diff --git a/app/src/views/Discarded.vue b/app/src/views/Discarded.vue index 901dfab..7679a79 100644 --- a/app/src/views/Discarded.vue +++ b/app/src/views/Discarded.vue @@ -1,99 +1,34 @@ <template> - <div id="discardwrapper"> - <h1 class="restore">Your discarded nodes</h1> - + <div id="listwrapper"> <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> + <h1 class="mobile">dicarded nodes - list view</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> - <!-- // 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> + <div v-else> + <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 { @@ -101,10 +36,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,11 +47,14 @@ export default { deleted: Boolean, }, - computed: mapState({ - myNodes: (state) => state.myNodes, - configPositions: (state) => state.configPositions, - shortcutstate: (state) => state.shortcutstate, - }), + computed: { + ...mapState({ + myNodes: (state) => state.myNodes, + // otherNodes: (state) => state.otherNodes, + shortcutstate: (state) => state.shortcutstate, + toolmode: (state) => state.ui.mode, + }), + }, created() { if (typeof window !== 'undefined') { @@ -134,69 +68,35 @@ 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' - } - }, - - components: { - // OnBoard, - // OffLine, - //ModeToolbar, - }, - - 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 }) + addNode() { + this.$store.dispatch('addNode') }, 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 }) - }, + }, + components: { + DiscardLayer, + OnBoard, + }, + filters: { + marked: marked, }, } </script> <style lang="css" scoped> -textarea { - width: 95%; - height: 100px; +.mobile { margin-left: 1em; + font-size: 1em; +} +.new { margin-bottom: 1em; } </style> diff --git a/app/src/views/Home.vue b/app/src/views/Home.vue index 1d5d534..f1e58a8 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/Leave.vue b/app/src/views/Leave.vue new file mode 100644 index 0000000..2a0432d --- /dev/null +++ b/app/src/views/Leave.vue @@ -0,0 +1,25 @@ +<template> + <div class="leave"></div> +</template> +<script> +export default { + name: 'Leave', + + created() { + this.removeLocal() + }, + + methods: { + removeLocal: function () { + localStorage.removeItem('myNNClient') + localStorage.removeItem('mylastMicrocosm') + + location.assign( + process.env.VUE_APP_HTTP + '://' + process.env.VUE_APP_URL + '/' + ) + }, + }, +} +</script> + +<style lang="css" scoped></style> diff --git a/app/src/views/List.vue b/app/src/views/List.vue index 6d6492c..618b5db 100644 --- a/app/src/views/List.vue +++ b/app/src/views/List.vue @@ -56,7 +56,7 @@ export default { computed: { ...mapState({ myNodes: (state) => state.myNodes, - otherNodes: (state) => state.otherNodes, + // otherNodes: (state) => state.otherNodes, shortcutstate: (state) => state.shortcutstate, toolmode: (state) => state.ui.mode, }), -- GitLab