diff --git a/packages/frontend/src/components/MkCwButton.vue b/packages/frontend/src/components/MkCwButton.vue index 54c215935628f8cf69eaff074812d5798e5502a8..0cdaf7c9bda51516ac4deb8808aabf4d4161bd72 100644 --- a/packages/frontend/src/components/MkCwButton.vue +++ b/packages/frontend/src/components/MkCwButton.vue @@ -4,10 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only --> <template> -<button class="_button" :class="$style.root" @mousedown="toggle"> - <b>{{ modelValue ? i18n.ts._cw.hide : i18n.ts._cw.show }}</b> - <span v-if="!modelValue" :class="$style.label">{{ label }}</span> -</button> +<MkButton rounded full small @click="toggle"><b>{{ modelValue ? i18n.ts._cw.hide : i18n.ts._cw.show }}</b><span v-if="!modelValue" :class="$style.label">{{ label }}</span></MkButton> </template> <script lang="ts" setup> @@ -15,6 +12,7 @@ import { computed } from 'vue'; import * as Misskey from 'misskey-js'; import { concat } from '@/scripts/array.js'; import { i18n } from '@/i18n.js'; +import MkButton from '@/components/MkButton.vue'; const props = defineProps<{ modelValue: boolean; @@ -33,25 +31,12 @@ const label = computed(() => { ] as string[][]).join(' / '); }); -const toggle = () => { +function toggle() { emit('update:modelValue', !props.modelValue); -}; +} </script> <style lang="scss" module> -.root { - display: inline-block; - padding: 4px 8px; - font-size: 0.7em; - color: var(--cwFg); - background: var(--cwBg); - border-radius: 2px; - - &:hover { - background: var(--cwHoverBg); - } -} - .label { margin-left: 4px; diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue index 62deefc67d9a18038c651d8286cb6ecb5945cf12..5272bf865e4c24734da599e84024189d51102645 100644 --- a/packages/frontend/src/components/MkNote.vue +++ b/packages/frontend/src/components/MkNote.vue @@ -54,7 +54,7 @@ SPDX-License-Identifier: AGPL-3.0-only <div style="container-type: inline-size;"> <p v-if="appearNote.cw != null" :class="$style.cw"> <Mfm v-if="appearNote.cw != ''" style="margin-right: 8px;" :text="appearNote.cw" :author="appearNote.user" :i="$i"/> - <MkCwButton v-model="showContent" :note="appearNote"/> + <MkCwButton v-model="showContent" :note="appearNote" style="margin: 4px 0;"/> </p> <div v-show="appearNote.cw == null || showContent" :class="[{ [$style.contentCollapsed]: collapsed }]"> <div :class="$style.text">