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

wip 

rebuilding mobile views
parent 5ac01cc3
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
.DS_Store
+ 0
− 0
View file @ 285ddd65
No preview for this file type
app/src/components/ListLayer.vue
+ 59
− 27
View file @ 285ddd65
<template>
<div>
<div v-for="(value, index) in configPositions" v-bind:key="index">
<div 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">
<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>
</div>
<div class="nodes">
<form>
<div v-if="readmode == false">
<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>
</div>
</form>
</div>
</div>
</div>
</form>
</div>
</template>
<script>
import { mapState } from 'vuex'
var readmode
export default {
name: 'ListLayer',
......@@ -61,8 +58,27 @@ export default {
editTrue(e) {
this.$emit('editTrue', e)
// this.firstload = false
// // console.log(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'
}
},
},
}
......@@ -73,10 +89,26 @@ h2 {
color: red;
}
textarea {
.nodes {
width: 95%;
height: 100px;
border: 2px dashed black;
background-color: rgb(155, 194, 216);
margin-top: 1em;
margin-left: 1em;
margin-bottom: 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/OnBoard.vue
+ 102
− 28
View file @ 285ddd65
<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="850"
: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)"
ref="microcosm"
@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
type="text"
id="clientid"
v-model.trim="clientid"
placeholder="name"
autocorrect="off"
autocapitalize="none"
ref="objectname"
v-on:keyup.enter="setClient()"
autofocus
@focus="editTrue(true)"
......@@ -37,27 +107,17 @@
<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
id="microcosm"
type="text"
v-model.trim="localmicrocosm"
placeholder="microcosm name"
autocorrect="off"
ref="microcosm"
autocapitalize="none"
@focus="editTrue(true)"
@blur="editTrue(false)"
......@@ -76,7 +136,7 @@
<h4>Loading...</h4>
</div>
</div>
</vue-draggable-resizable>
</div>
</div>
</template>
......@@ -87,6 +147,7 @@ import marked from 'marked'
export default {
data: function () {
return {
currentroute: Router.currentRoute,
localmicrocosm: Router.currentRoute.params.microcosm,
clientid: '',
nodetext:
......@@ -122,6 +183,7 @@ export default {
this.$store.dispatch('setClient', this.clientid),
localStorage.setItem('myNNClient', this.clientid)
this.name = true
this.focusInput()
},
editTrue(e) {
......@@ -131,6 +193,10 @@ export default {
letsGo() {
this.$emit('clientAdded')
},
focusInput() {
this.$refs.microcosm.focus()
},
},
}
</script>
......@@ -184,4 +250,12 @@ input {
box-shadow: none;
border-style: dotted;
}
.nodes {
padding: 0 1em 0 1em;
width: 95%;
border: 1px dashed black;
background-color: #6fcf97;
margin: 0.9em 0 0 0.3em;
}
</style>
app/src/router/index.js
+ 2
− 2
View file @ 285ddd65
......@@ -15,8 +15,8 @@ export const routes = [
component: Home,
},
{
path: '/mobile',
name: 'Mobile',
path: '/list',
name: 'My List',
component: List,
},
{
......
app/src/views/List.vue
+ 4
− 101
View file @ 285ddd65
......@@ -19,71 +19,15 @@
</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 +42,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,
}
......@@ -119,7 +59,6 @@ export default {
otherNodes: (state) => state.otherNodes,
shortcutstate: (state) => state.shortcutstate,
toolmode: (state) => state.ui.mode,
connections: (state) => state.configConnections,
}),
},
......@@ -135,17 +74,6 @@ 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'
}
},
methods: {
clientAdded() {
this.clientset = !this.clientset
......@@ -158,32 +86,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,
......@@ -192,11 +98,8 @@ export default {
</script>
<style lang="css" scoped>
#listwrapper {
margin-left: 1em;
margin-bottom: 1em;
}
.mobile {
margin-left: 1em;
font-size: 1em;
}
.new {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment