From 26845416932ecf0ce035240ce934d2afb77bf550 Mon Sep 17 00:00:00 2001 From: MeiMei <30769358+mei23@users.noreply.github.com> Date: Mon, 18 Mar 2019 00:03:57 +0900 Subject: Custom reaction (#4517) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Custom reaction * increase limit of reactions/delete * リアクションの場合は OS標準の絵文字を使用 を迂回する * カスタムリアクションを無効にする設定 * fix * disableCustomReaction --> enableEmojiReaction * Avoid MFM rendering * :art: * :art: * Auto accept * custom emoji reaction * Improve usability * Extract emojiRegex * Fix * Clean up * :art: * :art: * toDbReaction で reaction は必須に あとフォールバックは like に * Clean up * Make required * https://github.com/syuilo/misskey/pull/4517/commits/3eb08748feeaab9ee5c5b505c870f97d7edbeb0d#r266241728 * Refactor * Allow null --- src/client/app/admin/views/instance.vue | 4 ++ src/client/app/common/views/components/emoji.vue | 8 +++- .../app/common/views/components/reaction-icon.vue | 45 +++++++++++------- .../common/views/components/reaction-picker.vue | 55 ++++++++++++++++++++-- .../views/components/reactions-viewer.reaction.vue | 4 -- 5 files changed, 91 insertions(+), 25 deletions(-) (limited to 'src/client') diff --git a/src/client/app/admin/views/instance.vue b/src/client/app/admin/views/instance.vue index 8b3ec0cb26..ab337f1871 100644 --- a/src/client/app/admin/views/instance.vue +++ b/src/client/app/admin/views/instance.vue @@ -25,6 +25,7 @@ {{ $t('disable-local-timeline') }} {{ $t('disable-global-timeline') }} {{ $t('disabling-timelines-info') }} + {{ $t('enable-emoji-reaction') }}
{{ $t('drive-config') }}
@@ -155,6 +156,7 @@ export default Vue.extend({ disableRegistration: false, disableLocalTimeline: false, disableGlobalTimeline: false, + enableEmojiReaction: true, mascotImageUrl: null, bannerUrl: null, errorImageUrl: null, @@ -206,6 +208,7 @@ export default Vue.extend({ this.disableRegistration = meta.disableRegistration; this.disableLocalTimeline = meta.disableLocalTimeline; this.disableGlobalTimeline = meta.disableGlobalTimeline; + this.enableEmojiReaction = meta.enableEmojiReaction; this.mascotImageUrl = meta.mascotImageUrl; this.bannerUrl = meta.bannerUrl; this.errorImageUrl = meta.errorImageUrl; @@ -267,6 +270,7 @@ export default Vue.extend({ disableRegistration: this.disableRegistration, disableLocalTimeline: this.disableLocalTimeline, disableGlobalTimeline: this.disableGlobalTimeline, + enableEmojiReaction: this.enableEmojiReaction, mascotImageUrl: this.mascotImageUrl, bannerUrl: this.bannerUrl, errorImageUrl: this.errorImageUrl, diff --git a/src/client/app/common/views/components/emoji.vue b/src/client/app/common/views/components/emoji.vue index b4618a8d85..65b5683c2f 100644 --- a/src/client/app/common/views/components/emoji.vue +++ b/src/client/app/common/views/components/emoji.vue @@ -29,7 +29,11 @@ export default Vue.extend({ customEmojis: { required: false, default: () => [] - } + }, + isReaction: { + type: Boolean, + default: false + }, }, data() { @@ -46,7 +50,7 @@ export default Vue.extend({ }, useOsDefaultEmojis(): boolean { - return this.$store.state.device.useOsDefaultEmojis; + return this.$store.state.device.useOsDefaultEmojis && !this.isReaction; } }, diff --git a/src/client/app/common/views/components/reaction-icon.vue b/src/client/app/common/views/components/reaction-icon.vue index d413bece6b..1991669507 100644 --- a/src/client/app/common/views/components/reaction-icon.vue +++ b/src/client/app/common/views/components/reaction-icon.vue @@ -1,19 +1,5 @@ diff --git a/src/client/app/common/views/components/reaction-picker.vue b/src/client/app/common/views/components/reaction-picker.vue index 54c8e2a68f..af340dcf7a 100644 --- a/src/client/app/common/views/components/reaction-picker.vue +++ b/src/client/app/common/views/components/reaction-picker.vue @@ -3,7 +3,7 @@

{{ title }}

-
+
@@ -15,6 +15,9 @@
+
+ +
@@ -23,6 +26,7 @@ import Vue from 'vue'; import i18n from '../../../i18n'; import anime from 'animejs'; +import { emojiRegex } from '../../../../../misc/emoji-regex'; export default Vue.extend({ i18n: i18n('common/views/components/reaction-picker.vue'), @@ -56,6 +60,8 @@ export default Vue.extend({ data() { return { title: this.$t('choose-reaction'), + text: null, + enableEmojiReaction: false, focus: null }; }, @@ -94,6 +100,10 @@ export default Vue.extend({ }, mounted() { + this.$root.getMeta().then(meta => { + this.enableEmojiReaction = meta.enableEmojiReaction; + }); + this.$nextTick(() => { this.focus = 0; @@ -143,6 +153,17 @@ export default Vue.extend({ }); }, + reactText() { + if (!this.text) return; + this.react(this.text); + }, + + tryReactText() { + if (!this.text) return; + if (!this.text.match(emojiRegex)) return; + this.reactText(); + }, + onMouseover(e) { this.title = e.target.title; }, @@ -256,9 +277,9 @@ export default Vue.extend({ color var(--popupFg) border-bottom solid var(--lineWidth) var(--faceDivider) - > div + > .buttons padding 4px - width 240px + width 216px text-align center &.showFocus @@ -283,6 +304,9 @@ export default Vue.extend({ font-size 24px border-radius 2px + > * + height 1em + &:hover background var(--reactionPickerButtonHoverBg) @@ -290,4 +314,29 @@ export default Vue.extend({ background var(--primary) box-shadow inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15) + > .text + width 216px + padding 4px 8px 8px 8px + + > input + width 100% + padding 10px + margin 0 + text-align center + font-size 16px + color var(--desktopPostFormTextareaFg) + background var(--desktopPostFormTextareaBg) + outline none + border solid 1px var(--primaryAlpha01) + border-radius 4px + transition border-color .2s ease + + &:hover + border-color var(--primaryAlpha02) + transition border-color .1s ease + + &:focus + border-color var(--primaryAlpha05) + transition border-color 0s ease + diff --git a/src/client/app/common/views/components/reactions-viewer.reaction.vue b/src/client/app/common/views/components/reactions-viewer.reaction.vue index b7c321fc9f..ecd22d3f57 100644 --- a/src/client/app/common/views/components/reactions-viewer.reaction.vue +++ b/src/client/app/common/views/components/reactions-viewer.reaction.vue @@ -136,12 +136,8 @@ export default Vue.extend({ &:hover background var(--reactionViewerButtonHoverBg) - > .mk-reaction-icon - font-size 1.4em - > span font-size 1.1em line-height 32px - vertical-align middle color var(--text) -- cgit v1.2.3-freya