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