Merge branch 'develop' into emoji-re

packages/frontend/src/components/MkAchievements.vue

@@ -16,8 +16,8 @@
 						<time v-tooltip="new Date(achievement.unlockedAt).toLocaleString()">{{ new Date(achievement.unlockedAt).getFullYear() }}/{{ new Date(achievement.unlockedAt).getMonth() + 1 }}/{{ new Date(achievement.unlockedAt).getDate() }}</time>
 					</span>
 				</div>
-				<div :class="$style.description">{{ i18n.ts._achievements._types['_' + achievement.name].description }}</div>
-				<div v-if="i18n.ts._achievements._types['_' + achievement.name].flavor" :class="$style.flavor">{{ i18n.ts._achievements._types['_' + achievement.name].flavor }}</div>
+				<div :class="$style.description">{{ withDescription ? i18n.ts._achievements._types['_' + achievement.name].description : '???' }}</div>
+				<div v-if="i18n.ts._achievements._types['_' + achievement.name].flavor && withDescription" :class="$style.flavor">{{ i18n.ts._achievements._types['_' + achievement.name].flavor }}</div>
 			</div>
 		</div>
 		<template v-if="withLocked">
@@ -49,8 +49,10 @@ import { ACHIEVEMENT_TYPES, ACHIEVEMENT_BADGES, claimAchievement } from '@/scrip
 const props = withDefaults(defineProps<{
 	user: misskey.entities.User;
 	withLocked: boolean;
+	withDescription: boolean;
 }>(), {
 	withLocked: true,
+	withDescription: true,
 });
 
 let achievements = $ref();

packages/frontend/src/components/MkMenu.vue

@@ -335,8 +335,7 @@ onBeforeUnmount(() => {
 }
 
 .icon {
-	margin-right: 5px;
-	width: 20px;
+	margin-right: 8px;
 }
 
 .caret {

packages/frontend/src/components/MkNotification.vue

@@ -15,7 +15,7 @@
 			<i v-else-if="notification.type === 'mention'" class="ti ti-at"></i>
 			<i v-else-if="notification.type === 'quote'" class="ti ti-quote"></i>
 			<i v-else-if="notification.type === 'pollEnded'" class="ti ti-chart-arrows"></i>
-			<i v-else-if="notification.type === 'achievementEarned'" class="ti ti-military-award"></i>
+			<i v-else-if="notification.type === 'achievementEarned'" class="ti ti-medal"></i>
 			<!-- notification.reaction が null になることはまずないが、ここでoptional chaining使うと一部ブラウザで刺さるので念の為 -->
 			<MkReactionIcon
 				v-else-if="notification.type === 'reaction'"
@@ -249,7 +249,7 @@ useTooltip(reactionRef, (showing) => {
 
 .t_achievementEarned {
 	padding: 3px;
-	background: #88a6b7;
+	background: #cb9a11;
 	pointer-events: none;
 }
 

packages/frontend/src/components/MkReactionsViewer.reaction.vue

@@ -21,6 +21,7 @@ import { useTooltip } from '@/scripts/use-tooltip';
 import { $i } from '@/account';
 import MkReactionEffect from '@/components/MkReactionEffect.vue';
 import { claimAchievement } from '@/scripts/achievements';
+import { defaultStore } from '@/store';
 
 const props = defineProps<{
 	reaction: string;
@@ -61,6 +62,7 @@ const toggleReaction = () => {
 
 const anime = () => {
 	if (document.hidden) return;
+	if (!defaultStore.state.animation) return;
 
 	const rect = buttonEl.value.getBoundingClientRect();
 	const x = rect.left + 16;

packages/frontend/src/components/MkSuperMenu.vue

@@ -6,15 +6,15 @@
 		<div class="items">
 			<template v-for="(item, i) in group.items">
 				<a v-if="item.type === 'a'" :href="item.href" :target="item.target" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }">
-					<i v-if="item.icon" class="icon ti-fw" :class="item.icon"></i>
+					<span v-if="item.icon" class="icon"><i :class="item.icon" class="ti-fw"></i></span>
 					<span class="text">{{ item.text }}</span>
 				</a>
 				<button v-else-if="item.type === 'button'" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }" :disabled="item.active" @click="ev => item.action(ev)">
-					<i v-if="item.icon" class="icon ti-fw" :class="item.icon"></i>
+					<span v-if="item.icon" class="icon"><i :class="item.icon" class="ti-fw"></i></span>
 					<span class="text">{{ item.text }}</span>
 				</button>
 				<MkA v-else :to="item.to" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }">
-					<i v-if="item.icon" class="icon ti-fw" :class="item.icon"></i>
+					<span v-if="item.icon" class="icon"><i :class="item.icon" class="ti-fw"></i></span>
 					<span class="text">{{ item.text }}</span>
 				</MkA>
 			</template>

packages/frontend/src/components/global/MkEmoji.vue

@@ -33,7 +33,7 @@ const url = computed(() => {
 		return char2path(char.value);
 	} else if (props.host == null && !customEmojiName.value.includes('@')) {
 		const found = customEmojis.value.find(x => x.name === customEmojiName.value);
-		return found ? found.url : null;
+		return found ? defaultStore.state.disableShowingAnimatedImages ? getStaticImageUrl(found.url) : found.url : null;
 	} else {
 		const rawUrl = props.host ? `/emoji/${customEmojiName.value}@${props.host}.webp` : `/emoji/${customEmojiName.value}.webp`;
 		return defaultStore.state.disableShowingAnimatedImages

packages/frontend/src/components/mfm.ts

@@ -190,19 +190,19 @@ export default defineComponent({
 							return h(MkSparkle, {}, genEl(token.children));
 						}
 						case 'rotate': {
-							const degrees = parseInt(token.props.args.deg) ?? '90';
+							const degrees = parseFloat(token.props.args.deg) ?? '90';
 							style = `transform: rotate(${degrees}deg); transform-origin: center center;`;
 							break;
 						}
 						case 'position': {
-							const x = parseInt(token.props.args.x ?? '0');
-							const y = parseInt(token.props.args.y ?? '0');
+							const x = parseFloat(token.props.args.x ?? '0');
+							const y = parseFloat(token.props.args.y ?? '0');
 							style = `transform: translateX(${x}em) translateY(${y}em);`;
 							break;
 						}
 						case 'scale': {
-							const x = Math.min(parseInt(token.props.args.x ?? '1'), 5);
-							const y = Math.min(parseInt(token.props.args.y ?? '1'), 5);
+							const x = Math.min(parseFloat(token.props.args.x ?? '1'), 5);
+							const y = Math.min(parseFloat(token.props.args.y ?? '1'), 5);
 							style = `transform: scale(${x}, ${y});`;
 							break;
 						}