worldcone/cherrypick
2
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

enhance(client): MFM設定を変更すると現れる変化を視覚的に表示するように

Browse source
This commit is contained in:
NoriDev 2023-05-30 17:54:11 +09:00
parent 350db45032
commit 73e0f3ff6c
2 changed files with 27 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
packages/frontend/src/components/MkUserSetupDialog.MisskeyFlavoredMarkdown.vue
View file

@ -2,6 +2,13 @@
<div class="_gaps"> <div class="_gaps">
<MkInfo>{{ i18n.ts._initialAccountSetting.theseSettingsCanEditLater }}</MkInfo> <MkInfo>{{ i18n.ts._initialAccountSetting.theseSettingsCanEditLater }}</MkInfo>
<div :class="$style.preview" class="_panel">
<div style="margin: 0 0 8px; font-size: 1.5em;">
<Mfm v-if="advancedMfm && animatedMfm" :key="emojiStyle" text="$[jelly 🍮] $[spin 🍪] $[shake 🍭]"/>
<Mfm v-else :key="emojiStyle" text="🍮 🍪 🍭"/>
</div>
</div>
<MkFolder> <MkFolder>
<template #label>{{ i18n.ts.enableAdvancedMfm }}</template> <template #label>{{ i18n.ts.enableAdvancedMfm }}</template>
<template #icon><i class="ti ti-markdown"></i></template> <template #icon><i class="ti ti-markdown"></i></template>
@ -41,13 +48,19 @@ import MkInfo from '@/components/MkInfo.vue';
import MkFolder from '@/components/MkFolder.vue'; import MkFolder from '@/components/MkFolder.vue';
import * as os from '@/os'; import * as os from '@/os';
import { $i } from '@/account'; import { $i } from '@/account';
import { defaultStore } from "@/store"; import { defaultStore } from '@/store';
const animatedMfm = computed(defaultStore.makeGetterSetter('animatedMfm')); const animatedMfm = computed(defaultStore.makeGetterSetter('animatedMfm'));
const advancedMfm = computed(defaultStore.makeGetterSetter('advancedMfm')); const advancedMfm = computed(defaultStore.makeGetterSetter('advancedMfm'));
const disableShowingAnimatedImages = computed(defaultStore.makeGetterSetter('disableShowingAnimatedImages')); const disableShowingAnimatedImages = computed(defaultStore.makeGetterSetter('disableShowingAnimatedImages'));
const emojiStyle = computed(defaultStore.makeGetterSetter('emojiStyle'));
</script> </script>
<style lang="scss" module> <style lang="scss" module>
.preview {
padding: 20px;
border-radius: 6px;
text-align: center;
background: var(--bg);
}
</style> </style>

14
packages/frontend/src/pages/settings/general.vue
View file

@ -38,6 +38,12 @@
<MkSwitch v-model="collapseRenotes">{{ i18n.ts.collapseRenotes }}</MkSwitch> <MkSwitch v-model="collapseRenotes">{{ i18n.ts.collapseRenotes }}</MkSwitch>
<MkSwitch v-model="advancedMfm">{{ i18n.ts.enableAdvancedMfm }}</MkSwitch> <MkSwitch v-model="advancedMfm">{{ i18n.ts.enableAdvancedMfm }}</MkSwitch>
<MkSwitch v-if="advancedMfm" v-model="animatedMfm">{{ i18n.ts.enableAnimatedMfm }}</MkSwitch> <MkSwitch v-if="advancedMfm" v-model="animatedMfm">{{ i18n.ts.enableAnimatedMfm }}</MkSwitch>
<div class="mfmPreview _panel">
<div style="margin: 0 0 8px; font-size: 1.5em;">
<Mfm v-if="advancedMfm && animatedMfm" :key="emojiStyle" text="$[jelly 🍮] $[spin 🍪] $[shake 🍭]"/>
<Mfm v-else :key="emojiStyle" text="🍮 🍪 🍭"/>
</div>
</div>
<MkSwitch v-model="showGapBetweenNotesInTimeline">{{ i18n.ts.showGapBetweenNotesInTimeline }}</MkSwitch> <MkSwitch v-model="showGapBetweenNotesInTimeline">{{ i18n.ts.showGapBetweenNotesInTimeline }}</MkSwitch>
<MkSwitch v-model="loadRawImages">{{ i18n.ts.loadRawImages }}</MkSwitch> <MkSwitch v-model="loadRawImages">{{ i18n.ts.loadRawImages }}</MkSwitch>
<MkSwitch v-model="useReactionPickerForContextMenu">{{ i18n.ts.useReactionPickerForContextMenu }}</MkSwitch> <MkSwitch v-model="useReactionPickerForContextMenu">{{ i18n.ts.useReactionPickerForContextMenu }}</MkSwitch>
@ -332,7 +338,6 @@ watch(useSystemFont, () => {
watch([ watch([
lang, lang,
animatedMfm,
useBlurEffect, useBlurEffect,
// fontSize, // fontSize,
useBoldFont, useBoldFont,
@ -370,12 +375,17 @@ definePageMetadata({
user-select: none; user-select: none;
} }
.fontSize { .mfmPreview, .fontSize {
padding: 20px 20px 28px; padding: 20px 20px 28px;
border-radius: 6px; border-radius: 6px;
text-align: center; text-align: center;
} }
.mfmPreview {
padding: 5px;
max-width: 110px;
}
.fontSize_slider { .fontSize_slider {
display: flex; display: flex;
margin-top: -8px; margin-top: -8px;