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

Merge branch 'qol2' into main

parents a75db5a1 9e8e459a
Branches main
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 292 additions and 307 deletions
app/src/assets/files/collect.png 0 → 100644
+ 0
− 0
View file @ 4718af80
app/src/assets/files/collect.png

354 KiB

app/src/components/CardsLayer.vue
+ 5
− 1
View file @ 4718af80
......@@ -94,7 +94,11 @@ export default {
deleteFlag(e) {
e = this.nodeid
if (confirm('Confirm discard?')) {
this.$store.dispatch('deleteFlag', { e })
} else {
// nothing happens
}
},
// readFlag(e) {
......
......
app/src/components/ListLayer.vue
+ 82
− 68
View file @ 4718af80
<template>
<div>
<div v-if="deleted == false">
<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"
......@@ -10,15 +12,20 @@
autofocus
v-model="value.node_text"
@input="editNode"
:id="value.node_id"
:id="nodeid"
ref="nodetext"
placeholder="Idea goes here!"
placeholder="Idea goes here!(auto saved every keystroke)"
></textarea>
</div>
</div>
<div v-if="value.read_mode && deleted == false">
<p
class="read"
:id="nodeid"
:inner-html.prop="nodetext | marked"
></p>
</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"
......@@ -35,7 +42,7 @@
<BaseButton buttonClass="danger" @click="deleteFlag()"
>Discard</BaseButton
>
<!-- <div v-if="localreadmode == true && deleted == false">
<div v-if="value.read_mode == true && deleted == false">
<BaseButton class="read" buttonClass="action" @click="readFlag()"
>Edit Mode
</BaseButton>
......@@ -44,22 +51,24 @@
<BaseButton class="read" buttonClass="action" @click="readFlag()"
>Read Mode</BaseButton
>
</div> -->
</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
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;
......
......
app/src/components/ModesCard.vue 0 → 100644
+ 131
− 0
View file @ 4718af80
<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>
app/src/components/NodesLayer.vue
+ 6
− 1
View file @ 4718af80
......@@ -364,7 +364,11 @@ export default {
deleteFlag(e) {
e = this.nodeid
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;
......
......
app/src/store/index.js
+ 1
− 0
View file @ 4718af80
......@@ -168,6 +168,7 @@ const store = new Vuex.Store({
// if (doc.nodes[i].deleted == true) {
// // doc.nodes.splice(i, 1)
// }
state.myNodes = doc.nodes
}
})
......
......
app/src/views/Cards.vue
+ 0
− 2
View file @ 4718af80
......@@ -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,
}
},
......
......
app/src/views/Discarded.vue
+ 0
− 2
View file @ 4718af80
......@@ -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,
}
},
......
......
app/src/views/Home.vue
+ 0
− 1
View file @ 4718af80
......@@ -164,7 +164,6 @@ export default {
mounted() {
window.addEventListener('resize', this.handleResize)
this.handleResize()
console.log(this.clientset)
},
created() {
......
......
app/src/views/List-old.vue deleted 100644 → 0
+ 0
− 100
View file @ a75db5a1
<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>
app/src/views/List.vue
+ 67
− 4
View file @ 4718af80
......@@ -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>
app/src/views/Oldhome.vue deleted 100644 → 0
+ 0
− 128
View file @ a75db5a1
<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>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment