sforkowany z mirror/social
rodzic
c23f32c776
commit
ae9aa08c87
|
@ -40,6 +40,7 @@
|
|||
"vue-infinite-loading": "^2.4.1",
|
||||
"vue-router": "^3.0.1",
|
||||
"vue-tribute": "^1.0.1",
|
||||
"vue-twemoji": "^1.0.1",
|
||||
"vuex": "^3.0.1",
|
||||
"vuex-router-sync": "^5.0.0"
|
||||
},
|
||||
|
|
|
@ -58,7 +58,7 @@
|
|||
<div v-for="(emojiGroup, category) in emojis" :key="category">
|
||||
<h5>{{ category }}</h5>
|
||||
<div>
|
||||
<span class="emoji" v-for="(emoji, emojiName) in emojiGroup" :key="emojiName" @click="insert(emoji)" :title="emojiName">{{ emoji }}</span>
|
||||
<span class="emoji" v-for="(emoji, emojiName) in emojiGroup" :key="emojiName" @click="insert(emoji)" :title="emojiName" v-html="$twemoji.parse(emoji)"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -102,6 +102,7 @@
|
|||
display: block; /* For Firefox */
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
input[type=submit] {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
|
@ -147,8 +148,9 @@
|
|||
.emoji-picker input {
|
||||
width: 100%;
|
||||
}
|
||||
.emoji-picker .emoji {
|
||||
padding: 3px;
|
||||
.emoji-picker .emoji img {
|
||||
margin: 3px;
|
||||
width: 16px;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
|
@ -211,9 +213,14 @@
|
|||
.message .mention {
|
||||
color: var(--color-primary-element);
|
||||
background-color: var(--color-background-dark);
|
||||
padding: 3px;
|
||||
padding: 1px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
img.emoji {
|
||||
margin: 3px;
|
||||
width: 16px;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
|
||||
|
@ -287,11 +294,11 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
insert(emoji) {
|
||||
this.post += emoji;
|
||||
this.$refs.composerInput.innerText = this.post;
|
||||
this.post += this.$twemoji.parse(emoji);
|
||||
this.$refs.composerInput.innerHTML = this.post;
|
||||
},
|
||||
updateInput(event) {
|
||||
this.post = this.$refs.composerInput.innerText;
|
||||
this.post = this.$refs.composerInput.innerHTML;
|
||||
},
|
||||
togglePopoverMenu() {
|
||||
this.menuOpened = !this.menuOpened
|
||||
|
|
|
@ -27,6 +27,7 @@ import { sync } from 'vuex-router-sync'
|
|||
import App from './App'
|
||||
import store from './store'
|
||||
import router from './router'
|
||||
import vuetwemoji from 'vue-twemoji'
|
||||
|
||||
sync(store, router)
|
||||
|
||||
|
@ -44,6 +45,13 @@ Vue.prototype.n = n
|
|||
Vue.prototype.OC = OC
|
||||
Vue.prototype.OCA = OCA
|
||||
|
||||
Vue.use(vuetwemoji, {
|
||||
baseUrl: OC.linkTo('social', 'img/'), //can set to local folder of emojis. default: https://twemoji.maxcdn.com/
|
||||
extension: '.svg', //.svg, .png
|
||||
className: 'emoji', //custom className for image output
|
||||
size: 'svg' //image size
|
||||
})
|
||||
|
||||
/* eslint-disable-next-line no-new */
|
||||
new Vue({
|
||||
router: router,
|
||||
|
|
Ładowanie…
Reference in New Issue