Skip to content
Snippets Groups Projects
Commit d0dfaf1b authored by Adam Procter's avatar Adam Procter
Browse files

refactored layers for discard and list 

better styling and using same onboarding component so less duplication of code / content copy
parent 3c2e4ef0
Branches
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 241 additions and 311 deletions
.DS_Store
+ 0
− 0
View file @ d0dfaf1b
No preview for this file type
app/src/components/DiscardLayer.vue 0 → 100644
+ 63
− 0
View file @ d0dfaf1b
<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>
app/src/components/ListLayer.vue
+ 20
− 8
View file @ d0dfaf1b
<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>
app/src/components/NodesLayer.vue
+ 2
− 2
View file @ d0dfaf1b
......@@ -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>
......
app/src/components/OnBoard.vue
+ 94
− 27
View file @ d0dfaf1b
<template>
<div ref="nodes" class="node">
<div v-if="this.currentroute.name == 'Home'">
<vue-draggable-resizable
class="innernode"
:w="300"
......@@ -43,7 +44,7 @@
class="innernode"
:w="310"
:h="375"
:x="850"
:x="600"
:y="15"
:z="1"
:draggable="true"
......@@ -78,6 +79,62 @@
</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"
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>
<div class="nodes">
<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>
</div>
</div>
</template>
<script>
......@@ -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>
app/src/components/OtherNodeslayer.vue
+ 5
− 8
View file @ d0dfaf1b
......@@ -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() {
......
app/src/router/index.js
+ 2
− 2
View file @ d0dfaf1b
......@@ -15,8 +15,8 @@ export const routes = [
component: Home,
},
{
path: '/mobile',
name: 'Mobile',
path: '/list',
name: 'List',
component: List,
},
{
......
app/src/views/Discarded.vue
+ 25
− 151
View file @ d0dfaf1b
<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 v-if="clientset">
<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 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>
app/src/views/Home.vue
+ 2
− 0
View file @ d0dfaf1b
......@@ -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)"
......
app/src/views/List.vue
+ 28
− 113
View file @ d0dfaf1b
<template>
<div id="listwrapper">
<div>
<div v-if="clientset">
<div id="listwrapper">
<h1 class="mobile">Your nodes - list mode</h1>
<ListLayer
......@@ -17,73 +18,17 @@
>
</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>
<OnBoard @clientAdded="clientAdded()" @editTrue="(e) => editTrue(e)" />
</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>
<!-- <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,
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment