Add blur MFM syntax

This commit is contained in:
syuilo 2020-12-31 03:02:09 +09:00
parent e6705b1a65
commit 4ae172be57
4 changed files with 25 additions and 2 deletions

View file

@ -747,6 +747,8 @@ _mfm:
x3Description: "内容をとても大きく表示します。" x3Description: "内容をとても大きく表示します。"
x4: "究極に大きく" x4: "究極に大きく"
x4Description: "内容を究極に大きく表示します。" x4Description: "内容を究極に大きく表示します。"
blur: "ぼかし"
blurDescription: "内容をぼかすことができます。ポインターを上に乗せるとはっきり見えるようになります。"
_reversi: _reversi:
reversi: "リバーシ" reversi: "リバーシ"

View file

@ -14,6 +14,15 @@ export default defineComponent({
</script> </script>
<style lang="scss"> <style lang="scss">
._mfm_blur_ {
filter: blur(6px);
transition: filter 0.3s;
&:hover {
filter: blur(0px);
}
}
@keyframes mfm-spin { @keyframes mfm-spin {
0% { transform: rotate(0deg); } 0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); } 100% { transform: rotate(360deg); }

View file

@ -142,8 +142,9 @@ export default defineComponent({
break; break;
} }
case 'blur': { case 'blur': {
// TODO return h('span', {
break; class: '_mfm_blur_',
}, genEl(token.children));
} }
} }
if (style == null) { if (style == null) {

View file

@ -175,6 +175,16 @@
</div> </div>
</div> </div>
</div> </div>
<div class="_section">
<div class="_title">{{ $ts._mfm.blur }}</div>
<div class="_content">
<p>{{ $ts._mfm.blurDescription }}</p>
<div class="preview _panel">
<Mfm :text="preview_blur"/>
<MkTextarea v-model:value="preview_blur"><span>MFM</span></MkTextarea>
</div>
</div>
</div>
<div class="_section"> <div class="_section">
<div class="_title">{{ $ts._mfm.jelly }}</div> <div class="_title">{{ $ts._mfm.jelly }}</div>
<div class="_content"> <div class="_content">
@ -288,6 +298,7 @@ export default defineComponent({
preview_x2: `[x2 🍮]`, preview_x2: `[x2 🍮]`,
preview_x3: `[x3 🍮]`, preview_x3: `[x3 🍮]`,
preview_x4: `[x4 🍮]`, preview_x4: `[x4 🍮]`,
preview_blur: `[blur ${this.$ts._mfm.dummy}]`,
} }
}, },
}); });