From f4a629d8b9ce4f78439b97f20a623ce800cde337 Mon Sep 17 00:00:00 2001
From: Adam Procter <adamprocter@researchnot.es>
Date: Fri, 11 Dec 2020 17:54:41 +0000
Subject: [PATCH] added colour picker icon & added legacy background
added some code to fill in background of older microcosms where nodes had no color
---
CHANGELOG.md | 8 +++
app/package.json | 2 +-
app/src/components/NodesLayer.vue | 39 ++++++++++---
app/src/components/OtherNodeslayer.vue | 4 ++
app/src/components/SvgButton3.vue | 80 ++++++++++++++++++++++++++
5 files changed, 125 insertions(+), 8 deletions(-)
create mode 100644 app/src/components/SvgButton3.vue
diff --git a/CHANGELOG.md b/CHANGELOG.md
index a413a51..2f2998d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,11 @@
+# 0.1.42
+
+_11th December 2020_
+
+### Added
+
+- You can now colour code your nodes.
+
# 0.1.41
_11th December 2020_
diff --git a/app/package.json b/app/package.json
index b40e166..58423f4 100644
--- a/app/package.json
+++ b/app/package.json
@@ -1,6 +1,6 @@
{
"name": "nodenogg.in",
- "version": "0.1.41",
+ "version": "0.1.42",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
diff --git a/app/src/components/NodesLayer.vue b/app/src/components/NodesLayer.vue
index 12276ad..28ada3a 100644
--- a/app/src/components/NodesLayer.vue
+++ b/app/src/components/NodesLayer.vue
@@ -133,14 +133,24 @@
buttonClass="nodes"
@click.prevent="readFlag(nodes.node_id, nodes.read_mode)"
/>
+ <v-swatches
+ v-model="color"
+ @input="chooseColor(color, nodes.node_id)"
+ :swatches="swatches"
+ :shapes="shapes"
+ show-border
+ show-fallback
+ fallback-input-type="color"
+ >
+ <SvgButton3
+ buttonClass="nodes"
+ @click.prevent
+ slot="trigger"
+ />
+ </v-swatches>
</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"
@@ -165,8 +175,10 @@ import { mapState } from 'vuex'
import marked from 'marked'
import SvgButton from '@/components/SvgButton'
import SvgButton2 from '@/components/SvgButton2'
+import SvgButton3 from '@/components/SvgButton3'
import draggable from '@/experimental/Draggable'
import VSwatches from 'vue-swatches'
+import 'vue-swatches/dist/vue-swatches.css'
var readmode
@@ -177,6 +189,15 @@ export default {
return {
border: '2px dashed black',
color: '#9bc2d8',
+ shapes: 'circles',
+
+ // swatches: [{ color: '#F493A7', showBorder: true }],
+ swatches: [
+ ['#EB5757', '#F2994A', '#F2C94C'],
+ ['#219653', '#27AE60', '#6FCF97'],
+ ['#2F80ED', '#2D9CDB', '#56CCF2'],
+ ['#9B51E0', '#BB6BD9', '#E9B7FC'],
+ ],
pickupz: 1,
localreadmode: false,
@@ -218,7 +239,10 @@ export default {
nodes_filtered: function () {
return this.myNodes.filter((nodes) => {
- console.log(nodes)
+ // backwards compatablity fix
+ if (nodes.color == undefined || '') {
+ nodes.color = '#A4C2D6'
+ }
return nodes.deleted == false
})
},
@@ -422,6 +446,7 @@ export default {
draggable,
SvgButton,
SvgButton2,
+ SvgButton3,
VSwatches,
},
}
diff --git a/app/src/components/OtherNodeslayer.vue b/app/src/components/OtherNodeslayer.vue
index 1cc8900..a9b2599 100644
--- a/app/src/components/OtherNodeslayer.vue
+++ b/app/src/components/OtherNodeslayer.vue
@@ -262,6 +262,10 @@ export default {
othernodes_filtered: function () {
return this.otherNodes.filter((nodes) => {
+ // backwards compatablity fix
+ if (nodes.color == undefined || '') {
+ nodes.color = '#A4C2D6'
+ }
return nodes.deleted == false
})
},
diff --git a/app/src/components/SvgButton3.vue b/app/src/components/SvgButton3.vue
new file mode 100644
index 0000000..2274cc0
--- /dev/null
+++ b/app/src/components/SvgButton3.vue
@@ -0,0 +1,80 @@
+<template>
+ <div>
+ <button v-on="$listeners" class="button" :class="buttonClass">
+ <svg xmlns="http://www.w3.org/2000/svg" width="50" viewBox="0 0 194 178">
+ <g transform="translate(-1340.934 -573.185)">
+ <g transform="translate(16 57)">
+ <path
+ class="a"
+ d="M1370.346,606.448C1250.818,701.656,1237.2,715.157,1237.2,715.157l-12.18,28.185,32.968-8.841,132.15-102.707Z"
+ transform="translate(103 -49)"
+ />
+ <path
+ class="a"
+ d="M0,0H47a8,8,0,0,1,8,8V35a0,0,0,0,1,0,0H0a0,0,0,0,1,0,0V0A0,0,0,0,1,0,0Z"
+ transform="translate(1484.229 527.185) rotate(50)"
+ />
+ </g>
+ <path
+ class="b"
+ d="M1278.245,681.651c-43.206,34.469-41.047,33.506-41.047,33.506l-12.18,28.185,32.968-8.841,57.042-46.029Z"
+ transform="translate(122 -12)"
+ />
+ <path
+ class="c"
+ d="M1370.346,606.448C1250.818,701.656,1237.2,715.157,1237.2,715.157l36.986-31.527,41.706,6.236,42.508-33.315,31.739-24.758Z"
+ transform="translate(122 -12)"
+ />
+ <path
+ class="d"
+ d="M1370.346,606.448C1250.818,701.656,1237.2,715.157,1237.2,715.157l-12.18,28.185,32.968-8.841,132.15-102.707Z"
+ transform="translate(122 -12)"
+ />
+ <path
+ d="M10,0H46a9,9,0,0,1,9,9V35a0,0,0,0,1,0,0H0a0,0,0,0,1,0,0V10A10,10,0,0,1,10,0Z"
+ transform="translate(1498.229 573.185) rotate(50)"
+ />
+ </g>
+ </svg>
+ </button>
+ </div>
+</template>
+
+<script>
+export default {
+ props: {
+ buttonClass: {
+ type: String,
+ },
+ },
+}
+</script>
+
+<style lang="css" scoped>
+button {
+ background-color: #6fcf97;
+ touch-action: manipulation;
+ border: none;
+ outline: none;
+ cursor: pointer;
+}
+
+button.nodes {
+ background-color: rgba(255, 255, 255, 0);
+}
+
+.a {
+ fill: #4f4f4f;
+}
+.b {
+ fill: #2d9cdb;
+}
+.c {
+ fill: #fff;
+}
+.d {
+ fill: none;
+ stroke: #000;
+ stroke-width: 7px;
+}
+</style>
--
GitLab