From 0fbf56219f4067e0ba952ab8727cd76dc8919e16 Mon Sep 17 00:00:00 2001 From: syuilo Date: Tue, 13 Nov 2018 00:12:55 +0900 Subject: [PATCH] [Client] Emoji picker Closes #3130 --- locales/ja-JP.yml | 11 + .../common/views/components/emoji-picker.vue | 200 ++++++++++++++++++ .../app/common/views/components/emoji.vue | 2 +- .../views/components/emoji-picker-dialog.vue | 84 ++++++++ .../desktop/views/components/post-form.vue | 87 +++++--- src/client/theme/dark.json5 | 1 + src/client/theme/light.json5 | 1 + 7 files changed, 361 insertions(+), 25 deletions(-) create mode 100644 src/client/app/common/views/components/emoji-picker.vue create mode 100644 src/client/app/desktop/views/components/emoji-picker-dialog.vue diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 44e69d4fd..de21364b9 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -379,6 +379,17 @@ common/views/components/poll-editor.vue: common/views/components/reaction-picker.vue: choose-reaction: "リアクションを選択" +common/views/components/emoji-picker.vue: + custom-emoji: "カスタム絵文字" + people: "人" + animals-and-nature: "動物&自然" + food-and-drink: "食べ物&飲み物" + activity: "アクティビティ" + travel-and-places: "場所" + objects: "物" + symbols: "記号" + flags: "旗" + common/views/components/signin.vue: username: "ユーザー名" password: "パスワード" diff --git a/src/client/app/common/views/components/emoji-picker.vue b/src/client/app/common/views/components/emoji-picker.vue new file mode 100644 index 000000000..3d1dbd23a --- /dev/null +++ b/src/client/app/common/views/components/emoji-picker.vue @@ -0,0 +1,200 @@ + + + + + diff --git a/src/client/app/common/views/components/emoji.vue b/src/client/app/common/views/components/emoji.vue index c57d6a944..a8fef35b8 100644 --- a/src/client/app/common/views/components/emoji.vue +++ b/src/client/app/common/views/components/emoji.vue @@ -22,7 +22,7 @@ export default Vue.extend({ }, customEmojis: { required: false, - default: [] + default: () => [] } }, diff --git a/src/client/app/desktop/views/components/emoji-picker-dialog.vue b/src/client/app/desktop/views/components/emoji-picker-dialog.vue new file mode 100644 index 000000000..06dbe7584 --- /dev/null +++ b/src/client/app/desktop/views/components/emoji-picker-dialog.vue @@ -0,0 +1,84 @@ + + + + + diff --git a/src/client/app/desktop/views/components/post-form.vue b/src/client/app/desktop/views/components/post-form.vue index 44178d941..2bdefe94a 100644 --- a/src/client/app/desktop/views/components/post-form.vue +++ b/src/client/app/desktop/views/components/post-form.vue @@ -15,11 +15,16 @@ #{{ tag }} - +
+ + +
@@ -377,6 +382,19 @@ export default Vue.extend({ this.visibleUsers = erase(user, this.visibleUsers); }, + async emoji() { + const Picker = await import('./emoji-picker-dialog.vue').then(m => m.default); + const button = this.$refs.emoji; + const rect = button.getBoundingClientRect(); + const vm = this.$root.new(Picker, { + x: button.offsetWidth + rect.left + window.pageXOffset, + y: rect.top + window.pageYOffset + }); + vm.$once('chosen', emoji => { + insertTextAtCursor(this.$refs.text, emoji); + }); + }, + post() { this.posting = true; @@ -469,7 +487,7 @@ export default Vue.extend({ > .content > input - > textarea + > .textarea > textarea display block width 100% padding 12px @@ -498,27 +516,48 @@ export default Vue.extend({ > input margin-bottom 8px - > textarea - margin 0 - max-width 100% - min-width 100% - min-height 84px + > .textarea + > .emoji + position absolute + top 0 + right 0 + padding 10px + font-size 18px + color var(--text) + opacity 0.5 - &:hover - & + * - & + * + * - border-color var(--primaryAlpha02) - transition border-color .1s ease + &:hover + color var(--textHighlighted) + opacity 1 - &:focus - & + * - & + * + * - border-color var(--primaryAlpha05) - transition border-color 0s ease + &:active + color var(--primary) + opacity 1 - &.with - border-bottom solid 1px var(--primaryAlpha01) !important - border-radius 4px 4px 0 0 + > textarea + margin 0 + max-width 100% + min-width 100% + min-height 84px + + &:hover + & + * + & + * + * + border-color var(--primaryAlpha02) + transition border-color .1s ease + + &:focus + & + * + & + * + * + border-color var(--primaryAlpha05) + transition border-color 0s ease + + & + .emoji + opacity 0.7 + + &.with + border-bottom solid 1px var(--primaryAlpha01) !important + border-radius 4px 4px 0 0 > .visibleUsers margin-bottom 8px diff --git a/src/client/theme/dark.json5 b/src/client/theme/dark.json5 index 150b6f599..446eac557 100644 --- a/src/client/theme/dark.json5 +++ b/src/client/theme/dark.json5 @@ -18,6 +18,7 @@ secondary: '$secondary', bg: ':darken<8<$secondary', text: '$text', + textHighlighted: ':lighten<7<$text', scrollbarTrack: ':darken<5<$secondary', scrollbarHandle: ':lighten<5<$secondary', diff --git a/src/client/theme/light.json5 b/src/client/theme/light.json5 index 28b9ba783..4a182c242 100644 --- a/src/client/theme/light.json5 +++ b/src/client/theme/light.json5 @@ -18,6 +18,7 @@ secondary: '$secondary', bg: ':darken<8<$secondary', text: '$text', + textHighlighted: ':darken<7<$text', scrollbarTrack: '#fff', scrollbarHandle: '#00000033',