From 2d74f0507b05bc422d09199171864fcc74bb3a47 Mon Sep 17 00:00:00 2001 From: syuilo <Syuilotan@yahoo.co.jp> Date: Sat, 8 Feb 2020 17:36:23 +0900 Subject: [PATCH] :art: --- src/client/components/note.vue | 25 +++++-- src/client/components/popup.vue | 2 +- src/client/components/renote-picker.vue | 94 ------------------------- 3 files changed, 21 insertions(+), 100 deletions(-) delete mode 100644 src/client/components/renote-picker.vue diff --git a/src/client/components/note.vue b/src/client/components/note.vue index ebec56560a..74fdfa4153 100644 --- a/src/client/components/note.vue +++ b/src/client/components/note.vue @@ -83,7 +83,7 @@ <script lang="ts"> import Vue from 'vue'; -import { faPlus, faMinus, faRetweet, faReply, faReplyAll, faEllipsisH, faHome, faUnlock, faEnvelope, faThumbtack, faBan, faTrashAlt } from '@fortawesome/free-solid-svg-icons'; +import { faPlus, faMinus, faRetweet, faReply, faReplyAll, faEllipsisH, faHome, faUnlock, faEnvelope, faThumbtack, faBan, faTrashAlt, faQuoteRight } from '@fortawesome/free-solid-svg-icons'; import { parse } from '../../mfm/parse'; import { sum, unique } from '../../prelude/array'; import i18n from '../i18n'; @@ -97,7 +97,6 @@ import XPoll from './poll.vue'; import XUrlPreview from './url-preview.vue'; import MkNoteMenu from './note-menu.vue'; import MkReactionPicker from './reaction-picker.vue'; -import MkRenotePicker from './renote-picker.vue'; import pleaseLogin from '../scripts/please-login'; function focus(el, fn) { @@ -379,10 +378,26 @@ export default Vue.extend({ renote() { pleaseLogin(this.$root); this.blur(); - this.$root.new(MkRenotePicker, { + this.$root.menu({ + items: [{ + text: this.$t('renote'), + icon: faRetweet, + action: () => { + (this as any).$root.api('notes/create', { + renoteId: this.appearNote.id + }); + } + }, { + text: this.$t('quote'), + icon: faQuoteRight, + action: () => { + this.$root.post({ + renote: this.appearNote, + }); + } + }] source: this.$refs.renoteButton, - note: this.appearNote, - }).$once('closed', this.focus); + }).then(this.focus); }, renoteDirectly() { diff --git a/src/client/components/popup.vue b/src/client/components/popup.vue index 850936c540..900e971639 100644 --- a/src/client/components/popup.vue +++ b/src/client/components/popup.vue @@ -134,7 +134,7 @@ export default Vue.extend({ position: absolute; z-index: 10001; background: var(--panel); - border-radius: 4px; + border-radius: 8px; box-shadow: 0 3px 12px rgba(27, 31, 35, 0.15); overflow: hidden; transform-origin: center top; diff --git a/src/client/components/renote-picker.vue b/src/client/components/renote-picker.vue deleted file mode 100644 index ae30f65e1f..0000000000 --- a/src/client/components/renote-picker.vue +++ /dev/null @@ -1,94 +0,0 @@ -<template> -<x-popup :source="source" ref="popup" @closed="() => { $emit('closed'); destroyDom(); }" v-hotkey.global="keymap"> - <div class="rdfaahpc"> - <button class="_button" @click="quote()"><fa :icon="faQuoteRight"/></button> - <button class="_button" @click="renote()"><fa :icon="faRetweet"/></button> - </div> -</x-popup> -</template> - -<script lang="ts"> -import Vue from 'vue'; -import { faQuoteRight, faRetweet } from '@fortawesome/free-solid-svg-icons'; -import i18n from '../i18n'; -import XPopup from './popup.vue'; - -export default Vue.extend({ - i18n, - - components: { - XPopup, - }, - - props: { - note: { - type: Object, - required: true - }, - - source: { - required: true - }, - }, - - data() { - return { - faQuoteRight, faRetweet - }; - }, - - computed: { - keymap(): any { - return { - 'esc': this.close, - }; - } - }, - - methods: { - renote() { - (this as any).$root.api('notes/create', { - renoteId: this.note.id - }).then(() => { - this.$emit('closed'); - this.destroyDom(); - }); - }, - - quote() { - this.$emit('closed'); - this.destroyDom(); - this.$root.post({ - renote: this.note, - }); - } - } -}); -</script> - -<style lang="scss" scoped> -.rdfaahpc { - padding: 4px; - - > button { - padding: 0; - width: 40px; - height: 40px; - font-size: 16px; - border-radius: 2px; - - > * { - height: 1em; - } - - &:hover { - background: rgba(0, 0, 0, 0.05); - } - - &:active { - background: var(--accent); - box-shadow: inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15); - } - } -} -</style>