From 4d118947804c6e3b74a3415d404bacd99e39b73c Mon Sep 17 00:00:00 2001
From: Adam Procter <adamprocter@researchnot.es>
Date: Fri, 11 Dec 2020 16:19:00 +0000
Subject: [PATCH] adding color swatches
---
app/package-lock.json | 7 ++++-
app/package.json | 1 +
app/src/components/NodesLayer.vue | 35 ++++++++++++++++------
app/src/components/OtherNodeslayer.vue | 19 ++++++------
app/src/components/SvgButton.vue | 2 +-
app/src/components/SvgButton2.vue | 2 +-
app/src/store/index.js | 40 ++++++++++++++++++++++++++
7 files changed, 86 insertions(+), 20 deletions(-)
diff --git a/app/package-lock.json b/app/package-lock.json
index 189b011..7f2dc2e 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "nodenogg.in",
- "version": "0.1.40",
+ "version": "0.1.41",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@@ -17630,6 +17630,11 @@
}
}
},
+ "vue-swatches": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/vue-swatches/-/vue-swatches-2.1.0.tgz",
+ "integrity": "sha512-JbSomg1penZvgHL24blA3PDgji7LPVGGSFlMo7F+jYVcxooemadI3gkMwFJVIPMikG5g160Mq+Lbph/lqFjzzw=="
+ },
"vue-template-compiler": {
"version": "2.6.12",
"resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.12.tgz",
diff --git a/app/package.json b/app/package.json
index 179d7a5..b40e166 100644
--- a/app/package.json
+++ b/app/package.json
@@ -18,6 +18,7 @@
"vue-draggable-resizable": "^2.2.0",
"vue-emoji-picker": "^1.0.1",
"vue-router": "^3.4.9",
+ "vue-swatches": "^2.1.0",
"vuex": "^3.6.0"
},
"devDependencies": {
diff --git a/app/src/components/NodesLayer.vue b/app/src/components/NodesLayer.vue
index a59adea..12276ad 100644
--- a/app/src/components/NodesLayer.vue
+++ b/app/src/components/NodesLayer.vue
@@ -20,10 +20,10 @@
@dragstop="onDragstop"
@resizestop="onResizestop"
:drag-cancel="'.drag-cancel'"
- style="
- border: 2px dashed black;
- background-color: rgb(155, 194, 216);
- "
+ :style="{
+ border: border,
+ backgroundColor: nodes.color,
+ }"
:min-width="200"
:min-height="220"
>
@@ -96,10 +96,10 @@
@dragstop="onDragstop"
@resizestop="onResizestop"
:drag-cancel="'.drag-cancel'"
- style="
- border: 2px dashed black;
- background-color: rgb(155, 194, 216);
- "
+ :style="{
+ border: border,
+ backgroundColor: nodes.color,
+ }"
:min-width="200"
:min-height="220"
>
@@ -135,7 +135,12 @@
/>
</div>
</template>
-
+ <v-swatches
+ v-model="color"
+ @input="chooseColor(color, nodes.node_id)"
+ show-fallback
+ fallback-input-type="color"
+ ></v-swatches>
<div class="allemoji">
<div
class="eachemoji"
@@ -161,6 +166,7 @@ import marked from 'marked'
import SvgButton from '@/components/SvgButton'
import SvgButton2 from '@/components/SvgButton2'
import draggable from '@/experimental/Draggable'
+import VSwatches from 'vue-swatches'
var readmode
@@ -169,6 +175,9 @@ export default {
data() {
return {
+ border: '2px dashed black',
+ color: '#9bc2d8',
+
pickupz: 1,
localreadmode: false,
mode: '',
@@ -209,6 +218,7 @@ export default {
nodes_filtered: function () {
return this.myNodes.filter((nodes) => {
+ console.log(nodes)
return nodes.deleted == false
})
},
@@ -262,6 +272,11 @@ export default {
},
methods: {
+ chooseColor(color, nodeid) {
+ this.$store.dispatch('colorNode', { nodeid, color })
+ this.$options.myArray = this.nodes_filtered
+ },
+
loadData() {
this.$options.myArray = this.nodes_filtered
this.$options.positionsArray = this.positions_filtered
@@ -369,6 +384,7 @@ export default {
})
}
}
+ this.$options.myArray = this.nodes_filtered
},
editTrue(e) {
@@ -406,6 +422,7 @@ export default {
draggable,
SvgButton,
SvgButton2,
+ VSwatches,
},
}
</script>
diff --git a/app/src/components/OtherNodeslayer.vue b/app/src/components/OtherNodeslayer.vue
index db89f11..1cc8900 100644
--- a/app/src/components/OtherNodeslayer.vue
+++ b/app/src/components/OtherNodeslayer.vue
@@ -18,10 +18,10 @@
@resizing="onResize"
@dragstop="onDragstop"
@resizestop="onResizestop"
- style="
- border: 2px solid black;
- background-color: rgb(205, 234, 255);
- "
+ :style="{
+ border: border,
+ backgroundColor: nodes.color,
+ }"
:min-width="200"
:min-height="220"
>
@@ -127,10 +127,10 @@
@resizing="onResize"
@dragstop="onDragstop"
@resizestop="onResizestop"
- style="
- border: 2px solid black;
- background-color: rgb(205, 234, 255);
- "
+ :style="{
+ border: border,
+ backgroundColor: nodes.color,
+ }"
:min-width="200"
:min-height="220"
>
@@ -236,6 +236,8 @@ export default {
data() {
return {
+ border: '2px solid black',
+ color: '#CDEAFF',
input: '',
search: '',
pickupz: 1,
@@ -410,6 +412,7 @@ export default {
})
}
}
+ this.$options.myArray = this.othernodes_filtered
},
append(emoji) {
this.input += emoji
diff --git a/app/src/components/SvgButton.vue b/app/src/components/SvgButton.vue
index 5543dee..c3c6694 100644
--- a/app/src/components/SvgButton.vue
+++ b/app/src/components/SvgButton.vue
@@ -56,7 +56,7 @@ button {
}
button.nodes {
- background-color: rgb(155, 194, 216);
+ background-color: rgba(255, 255, 255, 0);
}
.z {
diff --git a/app/src/components/SvgButton2.vue b/app/src/components/SvgButton2.vue
index 164bbfe..63343d5 100644
--- a/app/src/components/SvgButton2.vue
+++ b/app/src/components/SvgButton2.vue
@@ -38,7 +38,7 @@ button {
}
button.nodes {
- background-color: rgb(155, 194, 216);
+ background-color: rgba(255, 255, 255, 0);
}
.a {
diff --git a/app/src/store/index.js b/app/src/store/index.js
index 04f1fc5..36e349c 100644
--- a/app/src/store/index.js
+++ b/app/src/store/index.js
@@ -136,6 +136,7 @@ const store = new Vuex.Store({
node_id: state.allNodes[i].doc.nodes[j].node_id,
node_text: state.allNodes[i].doc.nodes[j].node_text,
deleted: state.allNodes[i].doc.nodes[j].deleted,
+ color: state.allNodes[i].doc.nodes[j].color,
}
state.otherNodes.push(newNode)
@@ -420,6 +421,7 @@ const store = new Vuex.Store({
content_type: 'sheet',
deleted: false,
read_mode: false,
+ color: '#9bc2d8',
})
return pouchdb
@@ -526,6 +528,40 @@ const store = new Vuex.Store({
})
},
+ COLOR_NODE(state, e) {
+ // console.log(e)
+ var i
+ for (i = 0; i < Object.keys(state.myNodes).length; i++) {
+ if (e.nodeid == state.myNodes[i].node_id) {
+ state.myNodes[i].color = e.color
+ }
+ }
+ pouchdb
+ .get(state.myclient)
+ .then(function (doc) {
+ // put the store into pouchdb
+
+ return pouchdb.bulkDocs([
+ {
+ _id: state.myclient,
+ _rev: doc._rev,
+ _attachments: doc._attachments,
+ nodes: state.myNodes,
+ },
+ ])
+ })
+ .then(function () {
+ return pouchdb.get(state.myclient).then(function (doc) {
+ state.myNodes = doc.nodes
+ })
+ })
+ .catch(function (err) {
+ if (err.status == 404) {
+ // pouchdb.put({ })
+ }
+ })
+ },
+
DELETE_FLAG(state, e) {
var i
for (i = 0; i < Object.keys(state.myNodes).length; i++) {
@@ -782,6 +818,10 @@ const store = new Vuex.Store({
commit('EDIT_NODE', { nodeid, nodetext })
},
+ colorNode: ({ commit }, { nodeid, color }) => {
+ commit('COLOR_NODE', { nodeid, color })
+ },
+
makeConnect: (
{ commit },
{ fromnode, tonode, xposstart, yposstart, yposend, xposend }
--
GitLab