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

Emoji reaction version 1 

added the ability to add emoji reactions to other nodes. Still a little messy
parent 8db73a45
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
app/package.json
+ 7
− 6
View file @ 29e10b6a
......@@ -15,15 +15,16 @@
"vue": "^2.6.11",
"vue-context": "^5.0.0",
"vue-draggable-resizable": "^2.1.0",
"vue-router": "^3.1.5",
"vue-emoji-picker": "^1.0.1",
"vue-router": "^3.1.6",
"vuex": "^3.1.2"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^4.2.0",
"@vue/cli-plugin-eslint": "^4.2.0",
"@vue/cli-plugin-router": "^4.2.0",
"@vue/cli-plugin-vuex": "^4.2.0",
"@vue/cli-service": "^4.2.0",
"@vue/cli-plugin-babel": "^4.2.3",
"@vue/cli-plugin-eslint": "^4.2.3",
"@vue/cli-plugin-router": "^4.2.3",
"@vue/cli-plugin-vuex": "^4.2.3",
"@vue/cli-service": "^4.2.3",
"@vue/eslint-config-prettier": "^6.0.0",
"babel-eslint": "^10.0.3",
"eslint": "^6.7.2",
......
app/src/components/NodesLayer.vue
+ 6
− 1
View file @ 29e10b6a
......@@ -24,6 +24,10 @@
:id="nodeid"
></textarea>
</div>
<h3>Reactions</h3>
<div v-for="(emojis, index) in configEmoji" :key="index">
<p class="allemoji" v-if="nodeid == emojis.docid">{{ emojis.emojitext }}</p>
</div>
<!-- <div v-for="(value, index) in configPositions" v-bind:key="index">
<p v-if="nodeid == value.nodeid">
{{ localx }}, ({{ value.xpos }}) {{ localy }}
......@@ -66,7 +70,8 @@ export default {
},
computed: mapState({
myNodes: state => state.myNodes,
configPositions: state => state.configPositions
configPositions: state => state.configPositions,
configEmoji: state => state.configEmoji
}),
methods: {
onActivated() {
......
app/src/components/OtherNodeslayer.vue
+ 146
− 2
View file @ 29e10b6a
......@@ -15,6 +15,57 @@
style="border: 1px solid black; background-color: rgb(205, 234, 255);"
>
<p :id="nodeid" :inner-html.prop="nodetext | marked">{{ nodeid }}</p>
<h3>Reactions</h3>
<div v-for="(emojis, index) in configEmoji" :key="index">
<p class="allemoji" v-if="nodeid == emojis.docid">{{ emojis.emojitext }}</p>
</div>
<div class="react" v-if="nodeid != undefined">
<h2>React</h2>
<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)"
:title="emojiName"
>{{ emoji }}</span>
</div>
</div>
</div>
</div>
</div>
</emoji-picker>
<button @click="sentReact()">Send Reaction</button>
</div>
</div>
</vue-draggable-resizable>
</div>
</div>
......@@ -22,11 +73,15 @@
<script>
import { mapState } from 'vuex'
import EmojiPicker from 'vue-emoji-picker'
import marked from 'marked'
export default {
name: 'otherNodeslayer',
components: {
EmojiPicker
},
props: {
nodeid: String,
nodetext: String,
......@@ -40,7 +95,9 @@ export default {
width: this.nodewidth,
height: this.nodeheight,
localx: 0,
localy: 0
localy: 0,
input: '',
search: ''
}
},
......@@ -51,7 +108,8 @@ export default {
mounted() {},
computed: mapState({
otherNodes: state => state.otherNodes,
configPositions: state => state.configPositions
configPositions: state => state.configPositions,
configEmoji: state => state.configEmoji
}),
methods: {
onActivated() {
......@@ -98,6 +156,26 @@ export default {
}
}
this.$store.dispatch('movePos', { localnodeid, x, y, width, height })
},
append(emoji) {
this.input += emoji
},
sentReact(docid, emojitext) {
emojitext = this.input
docid = this.nodeid
this.$store.dispatch('addEmoji', {
docid,
emojitext
})
this.input = ''
}
},
directives: {
focus: {
inserted(el) {
el.focus()
}
}
}
}
......@@ -109,4 +187,70 @@ export default {
background-color: aquamarine;
position: absolute;
}
.emoji-invoker {
top: -0.5rem;
right: 0.5rem;
width: 1.5rem;
height: 1.5rem;
margin-top: 1em;
border-radius: 50%;
cursor: pointer;
transition: all 0.2s;
}
.emoji-invoker:hover {
transform: scale(1.1);
}
.emoji-invoker > svg {
fill: #b1c6d0;
}
.emoji-picker {
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;
}
.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-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>
app/src/store/index.js
+ 51
− 0
View file @ 29e10b6a
......@@ -359,14 +359,58 @@ const store = new Vuex.Store({
// pouchdb.put({ })
}
})
},
GET_EMOJI(state) {
console.log
pouchdb
.get(state.global_emoji_name)
.then(function(doc) {
state.configEmoji = doc.emojis
})
.catch(function(err) {
console.log(err)
if (err.status == 404) {
return pouchdb.put({
_id: state.global_emoji_name,
emojis: []
})
}
})
},
ADD_EMOJI(state, e) {
var uniqueid =
Math.random()
.toString(36)
.substring(2, 15) +
Math.random()
.toString(36)
.substring(2, 15)
pouchdb.get(state.global_emoji_name).then(function(doc) {
doc.emojis.push({
id: uniqueid,
docid: e.docid,
emojitext: e.emojitext
})
return pouchdb
.put({
_id: state.global_emoji_name,
_rev: doc._rev,
emojis: doc.emojis
})
.catch(function(err) {
console.log(err)
})
})
}
},
actions: {
syncDB: () => {
pouchdb.replicate.from(remote).on('complete', function() {
store.commit('GET_ALL_NODES')
store.commit('GET_MY_NODES')
store.commit('GET_POSITIONS')
store.commit('GET_EMOJI')
// turn on two-way, continuous, retriable sync
pouchdb
.sync(remote, { live: true, retry: true, attachments: true })
......@@ -375,6 +419,7 @@ const store = new Vuex.Store({
store.commit('GET_ALL_NODES')
store.commit('GET_MY_NODES')
store.commit('GET_POSITIONS')
store.commit('GET_EMOJI')
})
.on('paused', function() {
// replication paused (e.g. replication up to date, user went offline)
......@@ -416,6 +461,12 @@ const store = new Vuex.Store({
deleteFlag: ({ commit }, e) => {
// var text = e.target.value
commit('DELETE_FLAG', e)
},
addEmoji: ({ commit }, { docid, emojitext }) => {
commit('ADD_EMOJI', {
docid,
emojitext
})
}
},
modules: {}
......
app/yarn.lock
+ 39
− 35
View file @ 29e10b6a
......@@ -783,9 +783,9 @@
lodash.kebabcase "^4.1.1"
svg-tags "^1.0.0"
"@vue/babel-preset-app@^4.2.2":
version "4.2.2"
resolved "https://registry.yarnpkg.com/@vue/babel-preset-app/-/babel-preset-app-4.2.2.tgz#c7a0a685a5eb92e1b1538f8d1fc4f5ac00dccec1"
"@vue/babel-preset-app@^4.2.3":
version "4.2.3"
resolved "https://registry.yarnpkg.com/@vue/babel-preset-app/-/babel-preset-app-4.2.3.tgz#608b2c9f7ca677e793833662fc727ff9137a9a35"
dependencies:
"@babel/core" "^7.8.4"
"@babel/helper-compilation-targets" "^7.8.4"
......@@ -844,53 +844,53 @@
"@vue/babel-plugin-transform-vue-jsx" "^1.1.2"
camelcase "^5.0.0"
"@vue/cli-overlay@^4.2.2":
version "4.2.2"
resolved "https://registry.yarnpkg.com/@vue/cli-overlay/-/cli-overlay-4.2.2.tgz#43184ab5b7bc491cac46e3c3e375ec4976fbea5f"
"@vue/cli-overlay@^4.2.3":
version "4.2.3"
resolved "https://registry.yarnpkg.com/@vue/cli-overlay/-/cli-overlay-4.2.3.tgz#fc26d2d48fe189e48d185910ff92433509789515"
"@vue/cli-plugin-babel@^4.2.0":
version "4.2.2"
resolved "https://registry.yarnpkg.com/@vue/cli-plugin-babel/-/cli-plugin-babel-4.2.2.tgz#c65cad9921713b9233bab49306559c553a78ee1d"
"@vue/cli-plugin-babel@^4.2.3":
version "4.2.3"
resolved "https://registry.yarnpkg.com/@vue/cli-plugin-babel/-/cli-plugin-babel-4.2.3.tgz#8633795126f4d78c517bff9a2539229c9e0c8db4"
dependencies:
"@babel/core" "^7.8.4"
"@vue/babel-preset-app" "^4.2.2"
"@vue/cli-shared-utils" "^4.2.2"
"@vue/babel-preset-app" "^4.2.3"
"@vue/cli-shared-utils" "^4.2.3"
babel-loader "^8.0.6"
cache-loader "^4.1.0"
thread-loader "^2.1.3"
webpack "^4.0.0"
"@vue/cli-plugin-eslint@^4.2.0":
version "4.2.2"
resolved "https://registry.yarnpkg.com/@vue/cli-plugin-eslint/-/cli-plugin-eslint-4.2.2.tgz#ea0ecfc3f816102f61df3050d82f23909aa3df1b"
"@vue/cli-plugin-eslint@^4.2.3":
version "4.2.3"
resolved "https://registry.yarnpkg.com/@vue/cli-plugin-eslint/-/cli-plugin-eslint-4.2.3.tgz#2a70df99aaa60697a13893e94034a1386f31c3ee"
dependencies:
"@vue/cli-shared-utils" "^4.2.2"
"@vue/cli-shared-utils" "^4.2.3"
eslint-loader "^2.1.2"
globby "^9.2.0"
inquirer "^6.3.1"
webpack "^4.0.0"
yorkie "^2.0.0"
"@vue/cli-plugin-router@^4.2.0", "@vue/cli-plugin-router@^4.2.2":
version "4.2.2"
resolved "https://registry.yarnpkg.com/@vue/cli-plugin-router/-/cli-plugin-router-4.2.2.tgz#2e510668341e3d2ff839a7b6a76e1250e1734223"
"@vue/cli-plugin-router@^4.2.3":
version "4.2.3"
resolved "https://registry.yarnpkg.com/@vue/cli-plugin-router/-/cli-plugin-router-4.2.3.tgz#c64594e7e7e20ba76c71262f283b6199f5afd463"
dependencies:
"@vue/cli-shared-utils" "^4.2.2"
"@vue/cli-shared-utils" "^4.2.3"
"@vue/cli-plugin-vuex@^4.2.0", "@vue/cli-plugin-vuex@^4.2.2":
version "4.2.2"
resolved "https://registry.yarnpkg.com/@vue/cli-plugin-vuex/-/cli-plugin-vuex-4.2.2.tgz#f504b554e7edde945342e3c42cffad80ffa41933"
"@vue/cli-plugin-vuex@^4.2.3":
version "4.2.3"
resolved "https://registry.yarnpkg.com/@vue/cli-plugin-vuex/-/cli-plugin-vuex-4.2.3.tgz#aa1d8e824dd82b8718c0c40e3906c34ccd752516"
"@vue/cli-service@^4.2.0":
version "4.2.2"
resolved "https://registry.yarnpkg.com/@vue/cli-service/-/cli-service-4.2.2.tgz#b2bc820a46c080a7564df23cf7e5c9592d1acc99"
"@vue/cli-service@^4.2.3":
version "4.2.3"
resolved "https://registry.yarnpkg.com/@vue/cli-service/-/cli-service-4.2.3.tgz#aabb8edfea5dbb59df5b42464f876158b43dd065"
dependencies:
"@intervolga/optimize-cssnano-plugin" "^1.0.5"
"@soda/friendly-errors-webpack-plugin" "^1.7.1"
"@vue/cli-overlay" "^4.2.2"
"@vue/cli-plugin-router" "^4.2.2"
"@vue/cli-plugin-vuex" "^4.2.2"
"@vue/cli-shared-utils" "^4.2.2"
"@vue/cli-overlay" "^4.2.3"
"@vue/cli-plugin-router" "^4.2.3"
"@vue/cli-plugin-vuex" "^4.2.3"
"@vue/cli-shared-utils" "^4.2.3"
"@vue/component-compiler-utils" "^3.0.2"
"@vue/preload-webpack-plugin" "^1.1.0"
"@vue/web-component-wrapper" "^1.2.0"
......@@ -938,9 +938,9 @@
webpack-dev-server "^3.10.2"
webpack-merge "^4.2.2"
"@vue/cli-shared-utils@^4.2.2":
version "4.2.2"
resolved "https://registry.yarnpkg.com/@vue/cli-shared-utils/-/cli-shared-utils-4.2.2.tgz#953fec34115cb12d0820012a9d7400f8c27d6660"
"@vue/cli-shared-utils@^4.2.3":
version "4.2.3"
resolved "https://registry.yarnpkg.com/@vue/cli-shared-utils/-/cli-shared-utils-4.2.3.tgz#13646452cc25b0ab68a57cb52cac27983cee39a4"
dependencies:
"@hapi/joi" "^15.0.1"
chalk "^2.4.2"
......@@ -7163,6 +7163,10 @@ vue-draggable-resizable@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/vue-draggable-resizable/-/vue-draggable-resizable-2.1.0.tgz#b590212aef3c07d040aeceda784438068170fb08"
vue-emoji-picker@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/vue-emoji-picker/-/vue-emoji-picker-1.0.1.tgz#0c893b21fb2ac46c6b5803476d744ae3d420f98b"
vue-eslint-parser@^7.0.0:
version "7.0.0"
resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-7.0.0.tgz#a4ed2669f87179dedd06afdd8736acbb3a3864d6"
......@@ -7188,9 +7192,9 @@ vue-loader@^15.8.3:
vue-hot-reload-api "^2.3.0"
vue-style-loader "^4.1.0"
vue-router@^3.1.5:
version "3.1.5"
resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.1.5.tgz#ff29b8a1e1306c526b52d4dc0532109f16c41231"
vue-router@^3.1.6:
version "3.1.6"
resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.1.6.tgz#45f5a3a3843e31702c061dd829393554e4328f89"
vue-style-loader@^4.1.0, vue-style-loader@^4.1.2:
version "4.1.2"
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment