From d0dfaf1b1b69a5ebdc7b5d9db1e87dafff9c8b0f Mon Sep 17 00:00:00 2001 From: Adam Procter <adamprocter@researchnot.es> Date: Tue, 6 Oct 2020 18:03:46 +0100 Subject: [PATCH] refactored layers for discard and list better styling and using same onboarding component so less duplication of code / content copy --- .DS_Store | Bin 10244 -> 10244 bytes app/src/components/DiscardLayer.vue | 63 +++++++++ app/src/components/ListLayer.vue | 28 ++-- app/src/components/NodesLayer.vue | 4 +- app/src/components/OnBoard.vue | 121 +++++++++++++---- app/src/components/OtherNodeslayer.vue | 13 +- app/src/router/index.js | 4 +- app/src/views/Discarded.vue | 176 ++++--------------------- app/src/views/Home.vue | 2 + app/src/views/List.vue | 141 ++++---------------- 10 files changed, 241 insertions(+), 311 deletions(-) create mode 100644 app/src/components/DiscardLayer.vue diff --git a/.DS_Store b/.DS_Store index 109c2ae889d0ec12ec3cae3d563a2b76b53bdc04..41cd727a466643d1628b7d2eda0dc4e9b59f3225 100644 GIT binary patch delta 202 zcmZn(XbIThF5vbpsURn_xWvHV1|t(Q3o9Et2PYRN4<{cdXKZjretB?7Vo7PSQ({rP zfJ|^^N@`MKQFvxbNk&L&o@-8OS!$ktkxybt>f{Om&x~l0hJeJ944@)TWrs8e1`y!n z;EWfLtgbdRHZ;*uFgG=?)lsN6H#g8xFflf(t>xt8kW_aIiYsmEn>BmM(q+pJ9|3D) eU}S{Q41!P^MjhQOD0q@@GrPiXmd#g1n3w@KpEafc delta 160 zcmZn(XbIThE?{^vsURn_xWvHVIwKP^3o9Et2L}f?2QNo#a7KQ4a7kiGX|YpcQ8b7b zkXVwDlsLIpz%zi8laqrpUO=L{+R)NcN5Rm<v{px<+S1riN5RC{thSbuLtNF+)-xfu qvZ}hKwr(Z^7%(zIXa;^L4Wnjlwi7(bH?cu?GrPiXmd*O2Ow0gl$|h3) diff --git a/app/src/components/DiscardLayer.vue b/app/src/components/DiscardLayer.vue new file mode 100644 index 0000000..bf00f39 --- /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 6e860be..25b5c4f 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 4048a9d..abdc425 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 adc056d..c6184ac 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 584f84b..abda229 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 35c8aea..d188aec 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 901dfab..4ae754b 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 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/List.vue b/app/src/views/List.vue index 10d600c..0b40d92 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, -- GitLab