From 86ce674f82e1f63980cab49ed26920bb61661d42 Mon Sep 17 00:00:00 2001
From: Adam Procter <adamprocter@researchnot.es>
Date: Thu, 26 Mar 2020 17:32:21 +0000
Subject: [PATCH] readMode
---
app/package.json | 4 +--
app/src/components/NodesLayer.vue | 56 ++++++++++++++++++++++++-------
app/src/store/index.js | 2 +-
app/yarn.lock | 12 +++----
4 files changed, 52 insertions(+), 22 deletions(-)
diff --git a/app/package.json b/app/package.json
index a4a0fb0..a7b3b0c 100644
--- a/app/package.json
+++ b/app/package.json
@@ -17,7 +17,7 @@
"vue-draggable-resizable": "^2.1.0",
"vue-emoji-picker": "^1.0.1",
"vue-router": "^3.1.6",
- "vuex": "^3.1.2"
+ "vuex": "^3.1.3"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^4.2.3",
@@ -29,7 +29,7 @@
"babel-eslint": "^10.0.3",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.1.1",
- "eslint-plugin-vue": "^6.2.1",
+ "eslint-plugin-vue": "^6.2.2",
"prettier": "^1.19.1",
"vue-template-compiler": "^2.6.11"
}
diff --git a/app/src/components/NodesLayer.vue b/app/src/components/NodesLayer.vue
index d568214..fb0a1d5 100644
--- a/app/src/components/NodesLayer.vue
+++ b/app/src/components/NodesLayer.vue
@@ -18,19 +18,26 @@
style="background-color: rgb(205, 234, 255)"
>
<form>
- <div v-for="value in myNodes" v-bind:key="value.node_id">
- <textarea
- @focus="editTrue(true)"
- @blur="editTrue(false)"
- autofocus
- v-if="nodeid == value.node_id"
- @input="editNode"
- v-model="value.node_text"
- :id="nodeid"
- class="drag-cancel"
- ref="nodetext"
- ></textarea>
+ <div v-if="readmode == false">
+ <div v-for="value in myNodes" v-bind:key="value.node_id">
+ <!-- <div v-if="readmode == false"> -->
+ <textarea
+ v-if="nodeid == value.node_id"
+ @focus="editTrue(true)"
+ @blur="editTrue(false)"
+ autofocus
+ @input="editNode"
+ v-model="value.node_text"
+ :id="nodeid"
+ class="drag-cancel"
+ ref="nodetext"
+ ></textarea>
+ </div>
</div>
+ <div v-else>
+ <p :id="nodeid" :inner-html.prop="nodetext | marked">{{ nodeid }}</p>
+ </div>
+
<h3>Reactions</h3>
<div v-for="(emojis, index) in configEmoji" :key="index">
<p class="allemoji" v-if="nodeid == emojis.node_id">{{ emojis.emoji_text }}</p>
@@ -38,6 +45,7 @@
<p>markdown supported</p>
<BaseButton buttonClass="danger" @click="deleteFlag()">Delete</BaseButton>
+ <BaseButton class="read" buttonClass="action" @click="readFlag()">{{ mode }}</BaseButton>
</form>
</vue-draggable-resizable>
</div>
@@ -46,6 +54,7 @@
<script>
import { mapState } from 'vuex'
+import marked from 'marked'
export default {
name: 'NodesLayer',
@@ -60,9 +69,16 @@ export default {
data() {
return {
- pickupz: 99
+ pickupz: 99,
+ readmode: false,
+ mode: 'Read'
}
},
+
+ filters: {
+ marked: marked
+ },
+
// FIXME: how do we know how to focus on the newest node ?
// FIXME: Tab between them would also be good
// var delay = 100
@@ -161,6 +177,15 @@ export default {
deleteFlag(e) {
e = this.nodeid
this.$store.dispatch('deleteFlag', { e })
+ },
+ readFlag() {
+ if (this.readmode == true) {
+ this.readmode = false
+ this.mode = 'Read'
+ } else {
+ this.readmode = true
+ this.mode = 'Edit'
+ }
}
}
}
@@ -172,6 +197,11 @@ export default {
position: relative;
}
+.read {
+ /* FIXME: make this a nice little CSS grid */
+ float: right;
+}
+
img {
width: 100%;
}
diff --git a/app/src/store/index.js b/app/src/store/index.js
index 6279f1a..3e14ff7 100644
--- a/app/src/store/index.js
+++ b/app/src/store/index.js
@@ -290,7 +290,7 @@ const store = new Vuex.Store({
x_pos: 50,
y_pos: 50,
width: 200,
- height: 250,
+ height: 275,
z_index: 1
})
return pouchdb
diff --git a/app/yarn.lock b/app/yarn.lock
index 8ff5c86..bee1110 100644
--- a/app/yarn.lock
+++ b/app/yarn.lock
@@ -2797,9 +2797,9 @@ eslint-plugin-prettier@^3.1.1:
dependencies:
prettier-linter-helpers "^1.0.0"
-eslint-plugin-vue@^6.2.1:
- version "6.2.1"
- resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-6.2.1.tgz#ca802df5c33146aed1e56bb21d250c1abb6120a3"
+eslint-plugin-vue@^6.2.2:
+ version "6.2.2"
+ resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-6.2.2.tgz#27fecd9a3a24789b0f111ecdd540a9e56198e0fe"
dependencies:
natural-compare "^1.4.0"
semver "^5.6.0"
@@ -7263,9 +7263,9 @@ vue@^2.6.11:
version "2.6.11"
resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.11.tgz#76594d877d4b12234406e84e35275c6d514125c5"
-vuex@^3.1.2:
- version "3.1.2"
- resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.1.2.tgz#a2863f4005aa73f2587e55c3fadf3f01f69c7d4d"
+vuex@^3.1.3:
+ version "3.1.3"
+ resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.1.3.tgz#f2ad73e3fb73691698b38c93f66e58e267947180"
vuvuzela@1.0.3:
version "1.0.3"
--
GitLab