From dcabb3b51caa19164cd9c95207568c54112018d1 Mon Sep 17 00:00:00 2001
From: Adam Procter <adamprocter@researchnot.es>
Date: Mon, 30 Nov 2020 15:01:38 +0000
Subject: [PATCH] added emoji to the cards view
---
CHANGELOG.md | 8 ++
app/package.json | 2 +-
app/src/components/OtherCardslayer.vue | 178 +++++++++++++++++++++++--
app/src/components/OtherNodeslayer.vue | 14 +-
4 files changed, 184 insertions(+), 18 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1c12c41..c5f7449 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,11 @@
+# 0.1.37
+
+_30th November 2020_
+
+### Fixed
+
+- Add emoji reactions is no longer missing from Cards view.
+
# 0.1.36
_20th November 2020_
diff --git a/app/package.json b/app/package.json
index 51978eb..e3f7a8f 100644
--- a/app/package.json
+++ b/app/package.json
@@ -1,6 +1,6 @@
{
"name": "nodenogg.in",
- "version": "0.1.36",
+ "version": "0.1.37",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
diff --git a/app/src/components/OtherCardslayer.vue b/app/src/components/OtherCardslayer.vue
index 91c5103..a7940ce 100644
--- a/app/src/components/OtherCardslayer.vue
+++ b/app/src/components/OtherCardslayer.vue
@@ -4,15 +4,70 @@
<div class="nodes">
<p :inner-html.prop="nodetext | marked"></p>
- <div class="allemoji">
- <div
- class="eachemoji"
- v-for="(emojis, index) in configEmoji"
- :key="index"
- >
- <p v-if="nodeid == emojis.node_id">
- {{ emojis.emoji_text }}
- </p>
+ <div class="eeee">
+ <input :value="nodeid" name="id" readonly hidden />
+ <input
+ id="emojifield"
+ class="regular-input"
+ v-model="input"
+ readonly
+ />
+
+ <emoji-picker @emoji="append" :search="search">
+ <div
+ class="emoji-invoker"
+ slot="emoji-invoker"
+ slot-scope="{ events: { click: clickEvent } }"
+ @click.stop="clickEvent"
+ >
+ <svg
+ height="24"
+ viewBox="0 0 24 24"
+ width="24"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path d="M0 0h24v24H0z" fill="none" />
+ <path
+ d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z"
+ />
+ </svg>
+ </div>
+ <div slot="emoji-picker" slot-scope="{ emojis, insert, display }">
+ <div
+ class="emoji-picker"
+ :style="{ top: display.y + 'px', left: display.x + 'px' }"
+ >
+ <div class="emoji-picker__search">
+ <input type="text" v-model="search" v-focus />
+ </div>
+ <div>
+ <div v-for="(emojiGroup, category) in emojis" :key="category">
+ <h5>{{ category }}</h5>
+ <div class="emojis">
+ <span
+ v-for="(emoji, emojiName) in emojiGroup"
+ :key="emojiName"
+ @click="insert(emoji), sentReact()"
+ :title="emojiName"
+ >{{ emoji }}</span
+ >
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </emoji-picker>
+
+ <div class="allemoji">
+ <div
+ class="eachemoji"
+ v-for="(emojis, index) in configEmoji"
+ :key="index"
+ >
+ <p v-if="nodeid == emojis.node_id">
+ {{ emojis.emoji_text }}
+ </p>
+ </div>
</div>
</div>
</div>
@@ -22,12 +77,20 @@
<script>
import { mapState } from 'vuex'
+import EmojiPicker from 'vue-emoji-picker'
import marked from 'marked'
export default {
name: 'OtherCardslayer',
+ components: {
+ EmojiPicker,
+ },
+
data: function () {
- return {}
+ return {
+ input: '',
+ search: '',
+ }
},
props: {
@@ -44,6 +107,22 @@ export default {
filters: {
marked: marked,
},
+
+ methods: {
+ append(emoji) {
+ this.input += emoji
+ },
+ sentReact(nodeid, emojitext) {
+ emojitext = this.input
+ nodeid = this.nodeid
+ this.$store.dispatch('addEmoji', {
+ nodeid,
+ emojitext,
+ })
+
+ this.input = ''
+ },
+ },
}
</script>
@@ -78,6 +157,10 @@ p {
border-radius: 4px;
}
+input {
+ display: none;
+}
+
.allemoji {
font-size: 2em;
display: grid;
@@ -89,4 +172,79 @@ p {
.eachemoji p {
margin: 0em;
}
+
+.emoji-invoker {
+ top: -0.5rem;
+ right: 0.5rem;
+ width: 1.5rem;
+ height: 2.5rem;
+ /* transform: scale(1.6); */
+ /* margin: 0em 0em 1em 0em; */
+ /* border-radius: 50%; */
+ cursor: pointer;
+ transition: all 0.8s;
+}
+.emoji-invoker:hover > svg {
+ fill: #84949b;
+
+ /* transform: scale(1.5); */
+}
+.emoji-invoker > svg {
+ fill: #b1c6d0;
+ margin-top: 10px;
+ margin-left: 0.2em;
+ transform: scale(1.5);
+}
+
+.emoji-picker {
+ transform: scale(1.2);
+ z-index: 1;
+ font-family: Montserrat;
+ border: 1px solid #ccc;
+ width: 18rem;
+ height: 20rem;
+ overflow: scroll;
+ padding: 1rem;
+ box-sizing: border-box;
+ border-radius: 0.5rem;
+ background: #fff;
+ box-shadow: 1px 1px 8px #c7dbe6;
+ margin-top: 3em;
+}
+.emoji-picker__search {
+ display: flex;
+}
+.emoji-picker__search > input {
+ flex: 1;
+ border-radius: 10rem;
+ border: 1px solid #ccc;
+ padding: 0.5rem 1rem;
+ outline: none;
+}
+.emoji-picker h5 {
+ margin-top: 0;
+ margin-bottom: 0;
+ color: #b1b1b1;
+ text-transform: uppercase;
+ font-size: 0.8rem;
+ cursor: default;
+}
+.emoji-picker .emojis {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+}
+.emoji-picker .emojis:after {
+ content: '';
+ flex: auto;
+}
+.emoji-picker .emojis span {
+ padding: 0.2rem;
+ cursor: pointer;
+ border-radius: 5px;
+}
+.emoji-picker .emojis span:hover {
+ background: #ececec;
+ cursor: pointer;
+}
</style>
diff --git a/app/src/components/OtherNodeslayer.vue b/app/src/components/OtherNodeslayer.vue
index 1da4fcc..35d1234 100644
--- a/app/src/components/OtherNodeslayer.vue
+++ b/app/src/components/OtherNodeslayer.vue
@@ -350,13 +350,13 @@ export default {
this.input = ''
},
},
- directives: {
- focus: {
- inserted(el) {
- el.focus()
- },
- },
- },
+ // directives: {
+ // focus: {
+ // inserted(el) {
+ // el.focus()
+ // },
+ // },
+ // },
}
</script>
--
GitLab