🎨

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() {

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;

src/client/components/renote-picker.vue

@@ -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>