cleanup and appropriation for new emoji-input component API, styles updates

This commit is contained in:
Henry Jameson 2019-07-28 16:07:01 +03:00
parent 4c78fdb393
commit 03c2f29b0a
22 changed files with 153 additions and 89 deletions

View file

@ -190,7 +190,7 @@ const getStaticEmoji = async ({ store }) => {
imageUrl: false,
replacement: values[key]
}
})
}).sort((a, b) => a.displayText - b.displayText)
store.dispatch('setInstanceOption', { name: 'emoji', value: emoji })
} else {
throw (res)
@ -209,14 +209,16 @@ const getCustomEmoji = async ({ store }) => {
if (res.ok) {
const result = await res.json()
const values = Array.isArray(result) ? Object.assign({}, ...result) : result
const emoji = Object.keys(values).map((key) => {
const imageUrl = values[key].image_url
const emoji = Object.entries(values).map(([key, value]) => {
const imageUrl = value.image_url
return {
displayText: key,
imageUrl: imageUrl ? store.state.instance.server + imageUrl : values[key],
imageUrl: imageUrl ? store.state.instance.server + imageUrl : value,
tags: imageUrl ? value.tags.sort((a, b) => a > b ? 1 : 0) : ['utf'],
replacement: `:${key}: `
}
})
// Technically could use tags but those are kinda useless right now, should have been "pack" field, that would be more useful
}).sort((a, b) => a.displayText.toLowerCase() > b.displayText.toLowerCase() ? 1 : 0)
store.dispatch('setInstanceOption', { name: 'customEmoji', value: emoji })
store.dispatch('setInstanceOption', { name: 'pleromaBackend', value: true })
} else {

View file

@ -53,6 +53,11 @@ const EmojiInput = {
*/
required: true,
type: String
},
emojiPicker: {
required: false,
type: Boolean,
default: false
}
},
data () {
@ -61,7 +66,8 @@ const EmojiInput = {
highlighted: 0,
caret: 0,
focused: false,
blurTimeout: null
blurTimeout: null,
showPicker: false,
}
},
components: {
@ -83,12 +89,15 @@ const EmojiInput = {
highlighted: index === this.highlighted
}))
},
showPopup () {
showSuggestions () {
return this.focused && this.suggestions && this.suggestions.length > 0
},
textAtCaret () {
return (this.wordAtCaret || {}).word || ''
},
pickerIconBottom () {
return this.input && this.input.tag === 'textarea'
},
wordAtCaret () {
if (this.value && this.caret) {
const word = Completion.wordAtPosition(this.value, this.caret - 1) || {}
@ -124,11 +133,22 @@ const EmojiInput = {
}
},
methods: {
togglePicker () {
this.showPicker = !this.showPicker
},
replace (replacement) {
const newValue = Completion.replaceWord(this.value, this.wordAtCaret, replacement)
this.$emit('input', newValue)
this.caret = 0
},
insert (insertion) {
const newValue = [
this.value.substring(0, this.caret),
insertion,
this.value.substring(this.caret)
].join('')
this.$emit('input', newValue)
},
replaceText (e, suggestion) {
const len = this.suggestions.length || 0
if (this.textAtCaret.length === 1) { return }
@ -195,6 +215,7 @@ const EmojiInput = {
this.blurTimeout = null
}
this.showPicker = false
this.focused = true
this.setCaret(e)
this.resize()
@ -231,6 +252,7 @@ const EmojiInput = {
}
},
onInput (e) {
this.showPicker = false
this.setCaret(e)
this.$emit('input', e.target.value)
},
@ -239,6 +261,9 @@ const EmojiInput = {
this.resize()
this.$emit('input', e.target.value)
},
onClickOutside () {
this.showPicker = false
},
setCaret ({ target: { selectionStart } }) {
this.caret = selectionStart
},
@ -247,6 +272,7 @@ const EmojiInput = {
if (!panel) return
const { offsetHeight, offsetTop } = this.input.elm
this.$refs.panel.style.top = (offsetTop + offsetHeight) + 'px'
this.$refs.picker.$el.style.top = (offsetTop + offsetHeight) + 'px'
}
}
}

View file

@ -1,10 +1,29 @@
<template>
<div class="emoji-input">
<div
class="emoji-input"
v-click-outside="onClickOutside"
>
<slot />
<template v-if="emojiPicker">
<div
@click.prevent="togglePicker"
class="emoji-picker-icon"
:class="pickerIconBottom ? 'picker-icon-bottom': 'picker-icon-right'"
>
<i class="icon-smile"></i>
</div>
<EmojiPicker
v-if="emojiPicker"
:class="{ hide: !showPicker }"
ref="picker"
class="emoji-picker-panel"
@emoji="insert"
/>
</template>
<div
ref="panel"
class="autocomplete-panel"
:class="{ hide: !showPopup }"
:class="{ hide: !showSuggestions }"
>
<div class="autocomplete-panel-body">
<div
@ -39,6 +58,37 @@
.emoji-input {
display: flex;
flex-direction: column;
position: relative;
.emoji-picker-icon {
position: absolute;
margin: 0 .25em;
font-size: 16px;
cursor: pointer;
&:hover i {
color: $fallback--text;
color: var(--text, $fallback--text);
}
&.picker-icon-bottom {
bottom: 0;
left: 0;
}
&.picker-icon-right {
top: 0;
right: 0;
}
}
.emoji-picker-panel {
position: absolute;
z-index: 9;
margin-top: 2px;
&.hide {
display: none
}
}
.autocomplete {
&-panel {

View file

@ -1,33 +1,17 @@
const filterByKeyword = (list, keyword = '') => {
return list.filter(x => x.shortcode.indexOf(keyword) !== -1)
return list.filter(x => x.displayText.includes(keyword))
}
const EmojiPicker = {
mounted () {
document.body.addEventListener('click', this.outsideClicked)
},
destroyed () {
document.body.removeEventListener('click', this.outsideClicked)
},
data () {
return {
open: false,
keyword: '',
activeGroup: 'standard'
}
},
methods: {
togglePanel () {
this.open = !this.open
},
insideClicked (e) {
e.stopPropagation()
},
outsideClicked () {
this.open = false
},
onEmoji (emoji) {
const value = emoji.image_url ? `:${emoji.shortcode}:` : emoji.utf
const value = emoji.imageUrl ? `:${emoji.displayText}:` : emoji.replacement
this.$emit('emoji', ` ${value} `)
this.open = false
},
@ -51,20 +35,17 @@ const EmojiPicker = {
const standardEmojis = this.$store.state.instance.emoji || []
const customEmojis = this.$store.state.instance.customEmoji || []
return {
standard: {
text: 'Standard',
icon: 'icon-star',
emojis: filterByKeyword(standardEmojis, this.keyword)
},
custom: {
text: 'Custom',
icon: 'icon-picture',
emojis: filterByKeyword(customEmojis, this.keyword)
}
}
},
serverUrl () {
return this.$store.state.instance.server
standard: {
text: 'Standard',
icon: 'icon-star',
emojis: filterByKeyword(standardEmojis, this.keyword)
}
}
}
}
}

View file

@ -1,9 +1,5 @@
<template>
<div class="emoji-dropdown" @click.prevent="insideClicked">
<span class="emoji-dropdown-toggle" @click.prevent="togglePanel">
<i class="icon-smile"></i>
</span>
<div class="emoji-dropdown-menu panel panel-default" v-if="open">
<div class="emoji-dropdown-menu panel panel-default">
<div class="panel-heading emoji-tabs">
<span class="emoji-tabs-item" :class="{'active': activeGroup === key}" v-for="(value, key) in emojis" :key="key" :title="value.text" @click.prevent="highlight(key)">
<i :class="value.icon"></i>
@ -18,19 +14,18 @@
<h6 class="emoji-group-title" :ref="'group-' + key">{{value.text}}</h6>
<span
v-for="emoji in value.emojis"
:key="key + emoji.shortcode"
:title="emoji.shortcode"
:key="key + emoji.displayText"
:title="emoji.displayText"
class="emoji-item"
@click="onEmoji(emoji)"
>
<span v-if="!emoji.image_url">{{emoji.utf}}</span>
<img :src="serverUrl + emoji.image_url" v-else>
<span v-if="!emoji.imageUrl">{{emoji.replacement}}</span>
<img :src="emoji.imageUrl" v-else>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script src="./emoji-picker.js"></script>
@ -119,14 +114,14 @@
}
&-item {
width: 34px;
height: 34px;
width: 32px;
height: 32px;
box-sizing: border-box;
display: flex;
font-size: 16px;
font-size: 32px;
align-items: center;
justify-content: center;
padding: 5px;
margin: 2px;
cursor: pointer;
img {

View file

@ -2,7 +2,6 @@ import statusPoster from '../../services/status_poster/status_poster.service.js'
import MediaUpload from '../media_upload/media_upload.vue'
import ScopeSelector from '../scope_selector/scope_selector.vue'
import EmojiInput from '../emoji-input/emoji-input.vue'
import EmojiPicker from '../emoji-picker/emoji-picker.vue'
import PollForm from '../poll/poll_form.vue'
import StickerPicker from '../sticker_picker/sticker_picker.vue'
import fileTypeService from '../../services/file_type/file_type.service.js'
@ -37,7 +36,6 @@ const PostStatusForm = {
EmojiInput,
PollForm,
StickerPicker,
EmojiSelector,
ScopeSelector
},
mounted () {

View file

@ -61,6 +61,7 @@
<EmojiInput
v-if="newStatus.spoilerText || alwaysShowSubject"
v-model="newStatus.spoilerText"
emojiPicker
:suggest="emojiSuggestor"
class="form-control"
>
@ -75,6 +76,7 @@
<EmojiInput
v-model="newStatus.status"
:suggest="emojiUserSuggestor"
emojiPicker
class="form-control main-input"
>
<textarea

0
static/font/LICENSE.txt Executable file → Normal file
View file

0
static/font/README.txt Executable file → Normal file
View file

2
static/font/config.json Executable file → Normal file
View file

@ -238,7 +238,7 @@
"uid": "266d5d9adf15a61800477a5acf9a4462",
"css": "chart-bar",
"code": 59419,
"src": "fontelico"
"src": "fontawesome"
},
{
"uid": "d862a10e1448589215be19702f98f2c1",

0
static/font/css/animation.css Executable file → Normal file
View file

1
static/font/css/fontello-codes.css vendored Executable file → Normal file
View file

@ -37,6 +37,7 @@
.icon-bell-alt:before { content: '\f0f3'; } /* '' */
.icon-plus-squared:before { content: '\f0fe'; } /* '' */
.icon-reply:before { content: '\f112'; } /* '' */
.icon-smile:before { content: '\f118'; } /* '' */
.icon-lock-open-alt:before { content: '\f13e'; } /* '' */
.icon-ellipsis:before { content: '\f141'; } /* '' */
.icon-play-circled:before { content: '\f144'; } /* '' */

13
static/font/css/fontello-embedded.css vendored Executable file → Normal file

File diff suppressed because one or more lines are too long

1
static/font/css/fontello-ie7-codes.css vendored Executable file → Normal file
View file

@ -37,6 +37,7 @@
.icon-bell-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0f3;&nbsp;'); }
.icon-plus-squared { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0fe;&nbsp;'); }
.icon-reply { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf112;&nbsp;'); }
.icon-smile { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf118;&nbsp;'); }
.icon-lock-open-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf13e;&nbsp;'); }
.icon-ellipsis { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf141;&nbsp;'); }
.icon-play-circled { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf144;&nbsp;'); }

1
static/font/css/fontello-ie7.css vendored Executable file → Normal file
View file

@ -48,6 +48,7 @@
.icon-bell-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0f3;&nbsp;'); }
.icon-plus-squared { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf0fe;&nbsp;'); }
.icon-reply { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf112;&nbsp;'); }
.icon-smile { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf118;&nbsp;'); }
.icon-lock-open-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf13e;&nbsp;'); }
.icon-ellipsis { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf141;&nbsp;'); }
.icon-play-circled { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf144;&nbsp;'); }

15
static/font/css/fontello.css vendored Executable file → Normal file
View file

@ -1,11 +1,11 @@
@font-face {
font-family: 'fontello';
src: url('../font/fontello.eot?91349539');
src: url('../font/fontello.eot?91349539#iefix') format('embedded-opentype'),
url('../font/fontello.woff2?91349539') format('woff2'),
url('../font/fontello.woff?91349539') format('woff'),
url('../font/fontello.ttf?91349539') format('truetype'),
url('../font/fontello.svg?91349539#fontello') format('svg');
src: url('../font/fontello.eot?94788965');
src: url('../font/fontello.eot?94788965#iefix') format('embedded-opentype'),
url('../font/fontello.woff2?94788965') format('woff2'),
url('../font/fontello.woff?94788965') format('woff'),
url('../font/fontello.ttf?94788965') format('truetype'),
url('../font/fontello.svg?94788965#fontello') format('svg');
font-weight: normal;
font-style: normal;
}
@ -15,7 +15,7 @@
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'fontello';
src: url('../font/fontello.svg?91349539#fontello') format('svg');
src: url('../font/fontello.svg?94788965#fontello') format('svg');
}
}
*/
@ -93,6 +93,7 @@
.icon-bell-alt:before { content: '\f0f3'; } /* '' */
.icon-plus-squared:before { content: '\f0fe'; } /* '' */
.icon-reply:before { content: '\f112'; } /* '' */
.icon-smile:before { content: '\f118'; } /* '' */
.icon-lock-open-alt:before { content: '\f13e'; } /* '' */
.icon-ellipsis:before { content: '\f141'; } /* '' */
.icon-play-circled:before { content: '\f144'; } /* '' */

15
static/font/demo.html Executable file → Normal file
View file

@ -229,11 +229,11 @@ body {
}
@font-face {
font-family: 'fontello';
src: url('./font/fontello.eot?82370835');
src: url('./font/fontello.eot?82370835#iefix') format('embedded-opentype'),
url('./font/fontello.woff?82370835') format('woff'),
url('./font/fontello.ttf?82370835') format('truetype'),
url('./font/fontello.svg?82370835#fontello') format('svg');
src: url('./font/fontello.eot?31206390');
src: url('./font/fontello.eot?31206390#iefix') format('embedded-opentype'),
url('./font/fontello.woff?31206390') format('woff'),
url('./font/fontello.ttf?31206390') format('truetype'),
url('./font/fontello.svg?31206390#fontello') format('svg');
font-weight: normal;
font-style: normal;
}
@ -354,13 +354,16 @@ body {
<div class="row">
<div class="the-icons span3" title="Code: 0xf0fe"><i class="demo-icon icon-plus-squared">&#xf0fe;</i> <span class="i-name">icon-plus-squared</span><span class="i-code">0xf0fe</span></div>
<div class="the-icons span3" title="Code: 0xf112"><i class="demo-icon icon-reply">&#xf112;</i> <span class="i-name">icon-reply</span><span class="i-code">0xf112</span></div>
<div class="the-icons span3" title="Code: 0xf118"><i class="demo-icon icon-smile">&#xf118;</i> <span class="i-name">icon-smile</span><span class="i-code">0xf118</span></div>
<div class="the-icons span3" title="Code: 0xf13e"><i class="demo-icon icon-lock-open-alt">&#xf13e;</i> <span class="i-name">icon-lock-open-alt</span><span class="i-code">0xf13e</span></div>
<div class="the-icons span3" title="Code: 0xf141"><i class="demo-icon icon-ellipsis">&#xf141;</i> <span class="i-name">icon-ellipsis</span><span class="i-code">0xf141</span></div>
</div>
<div class="row">
<div class="the-icons span3" title="Code: 0xf141"><i class="demo-icon icon-ellipsis">&#xf141;</i> <span class="i-name">icon-ellipsis</span><span class="i-code">0xf141</span></div>
<div class="the-icons span3" title="Code: 0xf144"><i class="demo-icon icon-play-circled">&#xf144;</i> <span class="i-name">icon-play-circled</span><span class="i-code">0xf144</span></div>
<div class="the-icons span3" title="Code: 0xf164"><i class="demo-icon icon-thumbs-up-alt">&#xf164;</i> <span class="i-name">icon-thumbs-up-alt</span><span class="i-code">0xf164</span></div>
<div class="the-icons span3" title="Code: 0xf1e5"><i class="demo-icon icon-binoculars">&#xf1e5;</i> <span class="i-name">icon-binoculars</span><span class="i-code">0xf1e5</span></div>
</div>
<div class="row">
<div class="the-icons span3" title="Code: 0xf234"><i class="demo-icon icon-user-plus">&#xf234;</i> <span class="i-name">icon-user-plus</span><span class="i-code">0xf234</span></div>
</div>
</div>

BIN
static/font/font/fontello.eot Executable file → Normal file

Binary file not shown.

2
static/font/font/fontello.svg Executable file → Normal file
View file

@ -82,6 +82,8 @@
<glyph glyph-name="reply" unicode="&#xf112;" d="M1000 232q0-93-71-252-1-4-6-13t-7-17-7-12q-7-10-16-10-8 0-13 6t-5 14q0 5 1 15t2 13q3 38 3 69 0 56-10 101t-27 77-45 56-59 39-74 24-86 12-98 3h-125v-143q0-14-10-25t-26-11-25 11l-285 286q-11 10-11 25t11 25l285 286q11 10 25 10t26-10 10-25v-143h125q398 0 488-225 30-75 30-186z" horiz-adv-x="1000" />
<glyph glyph-name="smile" unicode="&#xf118;" d="M633 257q-21-67-77-109t-127-41-128 41-77 109q-4 14 3 27t21 18q14 4 27-2t17-22q14-44 52-72t85-28 84 28 52 72q4 15 18 22t27 2 21-18 2-27z m-276 243q0-30-21-51t-50-21-51 21-21 51 21 50 51 21 50-21 21-50z m286 0q0-30-21-51t-51-21-50 21-21 51 21 50 50 21 51-21 21-50z m143-143q0 73-29 139t-76 114-114 76-138 28-139-28-114-76-76-114-29-139 29-139 76-113 114-77 139-28 138 28 114 77 76 113 29 139z m71 0q0-117-57-215t-156-156-215-58-216 58-155 156-58 215 58 215 155 156 216 58 215-58 156-156 57-215z" horiz-adv-x="857.1" />
<glyph glyph-name="lock-open-alt" unicode="&#xf13e;" d="M589 428q23 0 38-15t16-38v-322q0-22-16-37t-38-16h-535q-23 0-38 16t-16 37v322q0 22 16 38t38 15h17v179q0 103 74 177t176 73 177-73 73-177q0-14-10-25t-25-11h-36q-14 0-25 11t-11 25q0 59-42 101t-101 42-101-42-41-101v-179h410z" horiz-adv-x="642.9" />
<glyph glyph-name="ellipsis" unicode="&#xf141;" d="M214 446v-107q0-22-15-38t-38-15h-107q-23 0-38 15t-16 38v107q0 23 16 38t38 16h107q22 0 38-16t15-38z m286 0v-107q0-22-16-38t-38-15h-107q-22 0-38 15t-15 38v107q0 23 15 38t38 16h107q23 0 38-16t16-38z m286 0v-107q0-22-16-38t-38-15h-107q-22 0-38 15t-16 38v107q0 23 16 38t38 16h107q23 0 38-16t16-38z" horiz-adv-x="785.7" />

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB

BIN
static/font/font/fontello.ttf Executable file → Normal file

Binary file not shown.

BIN
static/font/font/fontello.woff Executable file → Normal file

Binary file not shown.

BIN
static/font/font/fontello.woff2 Executable file → Normal file

Binary file not shown.