[Client] Improve cw-button

locales/ja-JP.yml

@@ -322,6 +322,8 @@ common/views/components/theme.vue:
 common/views/components/cw-button.vue:
   hide: "隠す"
   show: "もっと見る"
+  chars: "{count}文字"
+  files: "{count}ファイル"
 
 common/views/components/messaging.vue:
   search-user: "ユーザーを探す"

src/client/app/common/views/components/cw-button.vue

@@ -1,21 +1,36 @@
 <template>
-<button class="nrvgflfuaxwgkxoynpnumyookecqrrvh" @click="toggle">{{ value ? this.$t('hide') : this.$t('show') }}</button>
+<button class="nrvgflfuaxwgkxoynpnumyookecqrrvh" @click="toggle">
+	<b>{{ value ? this.$t('hide') : this.$t('show') }}</b>
+	<span v-if="!value">
+		<span v-if="note.text">{{ this.$t('chars', { count: length(note.text) }) | number }}</span>
+		<span v-if="note.text && note.files && note.files.length > 0"> / </span>
+		<span v-if="note.files && note.files.length > 0">{{ this.$t('files', { count: note.files.length }) }}</span>
+	</span>
+</button>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
 import i18n from '../../../i18n';
+import { length } from 'stringz';
 
 export default Vue.extend({
 	i18n: i18n('common/views/components/cw-button.vue'),
+
 	props: {
 		value: {
 			type: Boolean,
 			required: true
+		},
+		note: {
+			type: Object,
+			required: true
 		}
 	},
 
 	methods: {
+		length,
+
 		toggle() {
 			this.$emit('input', !this.value);
 		}
@@ -37,4 +52,12 @@ export default Vue.extend({
 	&:hover
 		background var(--cwButtonHoverBg)
 
+	> span
+		margin-left 4px
+
+		&:before
+			content '('
+		&:after
+			content ')'
+
 </style>

src/client/app/desktop/views/components/note-detail.vue

@@ -42,7 +42,7 @@
 		<div class="body">
 			<p v-if="appearNote.cw != null" class="cw">
 				<misskey-flavored-markdown v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$store.state.i" :custom-emojis="appearNote.emojis" />
-				<mk-cw-button v-model="showContent"/>
+				<mk-cw-button v-model="showContent" :note="appearNote"/>
 			</p>
 			<div class="content" v-show="appearNote.cw == null || showContent">
 				<div class="text">

src/client/app/desktop/views/components/note-preview.vue

@@ -6,7 +6,7 @@
 		<div class="body">
 			<p v-if="note.cw != null" class="cw">
 				<misskey-flavored-markdown v-if="note.cw != ''" class="text" :text="note.cw" :author="note.user" :i="$store.state.i" :custom-emojis="note.emojis" />
-				<mk-cw-button v-model="showContent"/>
+				<mk-cw-button v-model="showContent" :note="note"/>
 			</p>
 			<div class="content" v-show="note.cw == null || showContent">
 				<mk-sub-note-content class="text" :note="note"/>

src/client/app/desktop/views/components/note.sub.vue

@@ -6,7 +6,7 @@
 		<div class="body">
 			<p v-if="note.cw != null" class="cw">
 				<misskey-flavored-markdown v-if="note.cw != ''" class="text" :text="note.cw" :author="note.user" :i="$store.state.i" :custom-emojis="note.emojis" />
-				<mk-cw-button v-model="showContent"/>
+				<mk-cw-button v-model="showContent" :note="note"/>
 			</p>
 			<div class="content" v-show="note.cw == null || showContent">
 				<mk-sub-note-content class="text" :note="note"/>

src/client/app/desktop/views/components/note.vue

@@ -21,7 +21,7 @@
 			<div class="body" v-if="appearNote.deletedAt == null">
 				<p v-if="appearNote.cw != null" class="cw">
 					<misskey-flavored-markdown v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$store.state.i" :custom-emojis="appearNote.emojis" />
-					<mk-cw-button v-model="showContent"/>
+					<mk-cw-button v-model="showContent" :note="appearNote"/>
 				</p>
 				<div class="content" v-show="appearNote.cw == null || showContent">
 					<div class="text">

src/client/app/mobile/views/components/note-detail.vue

@@ -27,7 +27,7 @@
 		<div class="body">
 			<p v-if="appearNote.cw != null" class="cw">
 				<misskey-flavored-markdown v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$store.state.i" :custom-emojis="appearNote.emojis" />
-				<mk-cw-button v-model="showContent"/>
+				<mk-cw-button v-model="showContent" :note="appearNote"/>
 			</p>
 			<div class="content" v-show="appearNote.cw == null || showContent">
 				<div class="text">

src/client/app/mobile/views/components/note-preview.vue

@@ -6,7 +6,7 @@
 		<div class="body">
 			<p v-if="note.cw != null" class="cw">
 				<span class="text" v-if="note.cw != ''">{{ note.cw }}</span>
-				<mk-cw-button v-model="showContent"/>
+				<mk-cw-button v-model="showContent" :note="note"/>
 			</p>
 			<div class="content" v-show="note.cw == null || showContent">
 				<mk-sub-note-content class="text" :note="note"/>

src/client/app/mobile/views/components/note.sub.vue

@@ -6,7 +6,7 @@
 		<div class="body">
 			<p v-if="note.cw != null" class="cw">
 				<misskey-flavored-markdown v-if="note.cw != ''" class="text" :text="note.cw" :author="note.user" :i="$store.state.i" :custom-emojis="note.emojis" />
-				<mk-cw-button v-model="showContent"/>
+				<mk-cw-button v-model="showContent" :note="note"/>
 			</p>
 			<div class="content" v-show="note.cw == null || showContent">
 				<mk-sub-note-content class="text" :note="note"/>

src/client/app/mobile/views/components/note.vue

@@ -17,7 +17,7 @@
 			<div class="body" v-if="appearNote.deletedAt == null">
 				<p v-if="appearNote.cw != null" class="cw">
 				<misskey-flavored-markdown v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$store.state.i" :custom-emojis="appearNote.emojis" />
-					<mk-cw-button v-model="showContent"/>
+					<mk-cw-button v-model="showContent" :note="appearNote"/>
 				</p>
 				<div class="content" v-show="appearNote.cw == null || showContent">
 					<div class="text">