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">
<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>
<template #label>{{ i18n.ts.enableAdvancedMfm }}</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 * as os from '@/os';
import { $i } from '@/account';
import { defaultStore } from "@/store";
import { defaultStore } from '@/store';
const animatedMfm = computed(defaultStore.makeGetterSetter('animatedMfm'));
const advancedMfm = computed(defaultStore.makeGetterSetter('advancedMfm'));
const disableShowingAnimatedImages = computed(defaultStore.makeGetterSetter('disableShowingAnimatedImages'));
const emojiStyle = computed(defaultStore.makeGetterSetter('emojiStyle'));
</script>
<style lang="scss" module>
.preview {
padding: 20px;
border-radius: 6px;
text-align: center;
background: var(--bg);
}
</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="advancedMfm">{{ i18n.ts.enableAdvancedMfm }}</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="loadRawImages">{{ i18n.ts.loadRawImages }}</MkSwitch>
<MkSwitch v-model="useReactionPickerForContextMenu">{{ i18n.ts.useReactionPickerForContextMenu }}</MkSwitch>
@ -332,7 +338,6 @@ watch(useSystemFont, () => {
watch([
lang,
animatedMfm,
useBlurEffect,
// fontSize,
useBoldFont,
@ -370,12 +375,17 @@ definePageMetadata({
user-select: none;
}
.fontSize {
.mfmPreview, .fontSize {
padding: 20px 20px 28px;
border-radius: 6px;
text-align: center;
}
.mfmPreview {
padding: 5px;
max-width: 110px;
}
.fontSize_slider {
display: flex;
margin-top: -8px;