Refactor

12 files changed, 59 insertions, 117 deletions

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 9404cd6ba6..98c2f5fe45 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -273,6 +273,10 @@ common/views/components/connect-failed.troubleshooter.vue:
   flush: "キャッシュの削除"
   set-version: "バージョン指定"
 
+common/views/components/cw-button.vue:
+  hide: "隠す"
+  show: "もっと見る"
+
 common/views/components/messaging.vue:
   search-user: "ユーザーを探す"
   you: "あなた"
@@ -666,8 +670,6 @@ desktop/views/components/notes.note.vue:
   detail: "詳細"
   private: "この投稿は非公開です"
   deleted: "この投稿は削除されました"
-  hide: "隠す"
-  see-more: "もっと見る"
 
 desktop/views/components/notes.vue:
   error: "読み込みに失敗しました。"
@@ -1192,8 +1194,6 @@ mobile/views/components/friends-maker.vue:
 
 mobile/views/components/note.vue:
   reposted-by: "{}がRenote"
-  more: "もっと見る"
-  less: "隠す"
   private: "この投稿は非公開です"
   deleted: "この投稿は削除されました"
   location: "位置情報"
diff --git a/src/client/app/common/views/components/cw-button.vue b/src/client/app/common/views/components/cw-button.vue
new file mode 100644
index 0000000000..06087edc93
--- /dev/null
+++ b/src/client/app/common/views/components/cw-button.vue
@@ -0,0 +1,44 @@
+<template>
+<button class="nrvgflfuaxwgkxoynpnumyookecqrrvh" @click="toggle">{{ value ? '%i18n:@hide%' : '%i18n:@show%' }}</button>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: {
+		value: {
+			type: Boolean,
+			required: true
+		}
+	},
+
+	methods: {
+		toggle() {
+			this.$emit('input', !this.value);
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+root(isDark)
+	display inline-block
+	padding 4px 8px
+	font-size 0.7em
+	color isDark ? #393f4f : #fff
+	background isDark ? #687390 : #b1b9c1
+	border-radius 2px
+	cursor pointer
+	user-select none
+
+	&:hover
+		background isDark ? #707b97 : #bbc4ce
+
+.nrvgflfuaxwgkxoynpnumyookecqrrvh[data-darkmode]
+	root(true)
+
+.nrvgflfuaxwgkxoynpnumyookecqrrvh:not([data-darkmode])
+	root(false)
+
+</style>
diff --git a/src/client/app/common/views/components/index.ts b/src/client/app/common/views/components/index.ts
index 75c6086d7c..6f8152cea2 100644
--- a/src/client/app/common/views/components/index.ts
+++ b/src/client/app/common/views/components/index.ts
@@ -1,5 +1,6 @@
 import Vue from 'vue';
 
+import cwButton from './cw-button.vue';
 import tagCloud from './tag-cloud.vue';
 import trends from './trends.vue';
 import analogClock from './analog-clock.vue';
@@ -42,6 +43,7 @@ import uiSelect from './ui/select.vue';
 import formButton from './ui/form/button.vue';
 import formRadio from './ui/form/radio.vue';
 
+Vue.component('mk-cw-button', cwButton);
 Vue.component('mk-tag-cloud', tagCloud);
 Vue.component('mk-trends', trends);
 Vue.component('mk-analog-clock', analogClock);
diff --git a/src/client/app/desktop/views/components/note-detail.vue b/src/client/app/desktop/views/components/note-detail.vue
index a0ad089f92..7307eeb7dc 100644
--- a/src/client/app/desktop/views/components/note-detail.vue
+++ b/src/client/app/desktop/views/components/note-detail.vue
@@ -39,7 +39,7 @@
 		<div class="body">
 			<p v-if="p.cw != null" class="cw">
 				<span class="text" v-if="p.cw != ''">{{ p.cw }}</span>
-				<span class="toggle" @click="showContent = !showContent">{{ showContent ? '%i18n:@hide%' : '%i18n:@see-more%' }}</span>
+				<mk-cw-button v-model="showContent"/>
 			</p>
 			<div class="content" v-show="p.cw == null || showContent">
 				<div class="text">
@@ -352,19 +352,6 @@ root(isDark)
 				> .text
 					margin-right 8px
 
-				> .toggle
-					display inline-block
-					padding 4px 8px
-					font-size 0.7em
-					color isDark ? #393f4f : #fff
-					background isDark ? #687390 : #b1b9c1
-					border-radius 2px
-					cursor pointer
-					user-select none
-
-					&:hover
-						background isDark ? #707b97 : #bbc4ce
-
 			> .content
 				> .text
 					cursor default
diff --git a/src/client/app/desktop/views/components/note-preview.vue b/src/client/app/desktop/views/components/note-preview.vue
index e7e878849b..6c84165356 100644
--- a/src/client/app/desktop/views/components/note-preview.vue
+++ b/src/client/app/desktop/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>
-				<span class="toggle" @click="showContent = !showContent">{{ showContent ? '%i18n:@hide%' : '%i18n:@see-more%' }}</span>
+				<mk-cw-button v-model="showContent"/>
 			</p>
 			<div class="content" v-show="note.cw == null || showContent">
 				<mk-sub-note-content class="text" :note="note"/>
@@ -76,19 +76,6 @@ root(isDark)
 				> .text
 					margin-right 8px
 
-				> .toggle
-					display inline-block
-					padding 4px 8px
-					font-size 0.7em
-					color isDark ? #393f4f : #fff
-					background isDark ? #687390 : #b1b9c1
-					border-radius 2px
-					cursor pointer
-					user-select none
-
-					&:hover
-						background isDark ? #707b97 : #bbc4ce
-
 			> .content
 				> .text
 					cursor default
diff --git a/src/client/app/desktop/views/components/notes.note.sub.vue b/src/client/app/desktop/views/components/notes.note.sub.vue
index 15944bebd1..8f01ddd43c 100644
--- a/src/client/app/desktop/views/components/notes.note.sub.vue
+++ b/src/client/app/desktop/views/components/notes.note.sub.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>
-				<span class="toggle" @click="showContent = !showContent">{{ showContent ? '%i18n:@hide%' : '%i18n:@see-more%' }}</span>
+				<mk-cw-button v-model="showContent"/>
 			</p>
 			<div class="content" v-show="note.cw == null || showContent">
 				<mk-sub-note-content class="text" :note="note"/>
@@ -77,19 +77,6 @@ root(isDark)
 				> .text
 					margin-right 8px
 
-				> .toggle
-					display inline-block
-					padding 4px 8px
-					font-size 0.7em
-					color isDark ? #393f4f : #fff
-					background isDark ? #687390 : #b1b9c1
-					border-radius 2px
-					cursor pointer
-					user-select none
-
-					&:hover
-						background isDark ? #707b97 : #bbc4ce
-
 			> .content
 				> .text
 					cursor default
diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index e1bc8be5a5..46a866f9a7 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -18,7 +18,7 @@
 			<div class="body">
 				<p v-if="p.cw != null" class="cw">
 					<span class="text" v-if="p.cw != ''">{{ p.cw }}</span>
-					<span class="toggle" @click="showContent = !showContent">{{ showContent ? '%i18n:@hide%' : '%i18n:@see-more%' }}</span>
+					<mk-cw-button v-model="showContent"/>
 				</p>
 				<div class="content" v-show="p.cw == null || showContent">
 					<div class="text">
@@ -401,19 +401,6 @@ root(isDark)
 					> .text
 						margin-right 8px
 
-					> .toggle
-						display inline-block
-						padding 4px 8px
-						font-size 0.7em
-						color isDark ? #393f4f : #fff
-						background isDark ? #687390 : #b1b9c1
-						border-radius 2px
-						cursor pointer
-						user-select none
-
-						&:hover
-							background isDark ? #707b97 : #bbc4ce
-
 				> .content
 
 					> .text
diff --git a/src/client/app/desktop/views/pages/deck/deck.note.vue b/src/client/app/desktop/views/pages/deck/deck.note.vue
index ec4b9182b7..980fb03136 100644
--- a/src/client/app/desktop/views/pages/deck/deck.note.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.note.vue
@@ -18,7 +18,7 @@
 			<div class="body">
 				<p v-if="p.cw != null" class="cw">
 					<span class="text" v-if="p.cw != ''">{{ p.cw }}</span>
-					<span class="toggle" @click="showContent = !showContent">{{ showContent ? '%i18n:@less%' : '%i18n:@more%' }}</span>
+					<mk-cw-button v-model="showContent"/>
 				</p>
 				<div class="content" v-show="p.cw == null || showContent">
 					<div class="text">
diff --git a/src/client/app/mobile/views/components/note-detail.vue b/src/client/app/mobile/views/components/note-detail.vue
index 752e44fd60..68be9f8ac4 100644
--- a/src/client/app/mobile/views/components/note-detail.vue
+++ b/src/client/app/mobile/views/components/note-detail.vue
@@ -37,7 +37,7 @@
 		<div class="body">
 			<p v-if="p.cw != null" class="cw">
 				<span class="text" v-if="p.cw != ''">{{ p.cw }}</span>
-				<span class="toggle" @click="showContent = !showContent">{{ showContent ? '%i18n:@hide%' : '%i18n:@see-more%' }}</span>
+				<mk-cw-button v-model="showContent"/>
 			</p>
 			<div class="content" v-show="p.cw == null || showContent">
 				<div class="text">
@@ -352,19 +352,6 @@ root(isDark)
 				> .text
 					margin-right 8px
 
-				> .toggle
-					display inline-block
-					padding 4px 8px
-					font-size 0.7em
-					color isDark ? #393f4f : #fff
-					background isDark ? #687390 : #b1b9c1
-					border-radius 2px
-					cursor pointer
-					user-select none
-
-					&:hover
-						background isDark ? #707b97 : #bbc4ce
-
 			> .content
 
 				> .text
diff --git a/src/client/app/mobile/views/components/note-preview.vue b/src/client/app/mobile/views/components/note-preview.vue
index a85434407f..4c03593a9e 100644
--- a/src/client/app/mobile/views/components/note-preview.vue
+++ b/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>
-				<span class="toggle" @click="showContent = !showContent">{{ showContent ? '%i18n:@hide%' : '%i18n:@see-more%' }}</span>
+				<mk-cw-button v-model="showContent"/>
 			</p>
 			<div class="content" v-show="note.cw == null || showContent">
 				<mk-sub-note-content class="text" :note="note"/>
@@ -93,19 +93,6 @@ root(isDark)
 				> .text
 					margin-right 8px
 
-				> .toggle
-					display inline-block
-					padding 4px 8px
-					font-size 0.7em
-					color isDark ? #393f4f : #fff
-					background isDark ? #687390 : #b1b9c1
-					border-radius 2px
-					cursor pointer
-					user-select none
-
-					&:hover
-						background isDark ? #707b97 : #bbc4ce
-
 			> .content
 				> .text
 					cursor default
diff --git a/src/client/app/mobile/views/components/note.sub.vue b/src/client/app/mobile/views/components/note.sub.vue
index 77527a1498..c25f827dad 100644
--- a/src/client/app/mobile/views/components/note.sub.vue
+++ b/src/client/app/mobile/views/components/note.sub.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>
-				<span class="toggle" @click="showContent = !showContent">{{ showContent ? '%i18n:@hide%' : '%i18n:@see-more%' }}</span>
+				<mk-cw-button v-model="showContent"/>
 			</p>
 			<div class="content" v-show="note.cw == null || showContent">
 				<mk-sub-note-content class="text" :note="note"/>
@@ -100,19 +100,6 @@ root(isDark)
 				> .text
 					margin-right 8px
 
-				> .toggle
-					display inline-block
-					padding 4px 8px
-					font-size 0.7em
-					color isDark ? #393f4f : #fff
-					background isDark ? #687390 : #b1b9c1
-					border-radius 2px
-					cursor pointer
-					user-select none
-
-					&:hover
-						background isDark ? #707b97 : #bbc4ce
-
 			> .content
 				> .text
 					margin 0
diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue
index c608451e51..8787b39a93 100644
--- a/src/client/app/mobile/views/components/note.vue
+++ b/src/client/app/mobile/views/components/note.vue
@@ -18,7 +18,7 @@
 			<div class="body">
 				<p v-if="p.cw != null" class="cw">
 					<span class="text" v-if="p.cw != ''">{{ p.cw }}</span>
-					<span class="toggle" @click="showContent = !showContent">{{ showContent ? '%i18n:@less%' : '%i18n:@more%' }}</span>
+					<mk-cw-button v-model="showContent"/>
 				</p>
 				<div class="content" v-show="p.cw == null || showContent">
 					<div class="text">
@@ -350,19 +350,6 @@ root(isDark)
 					> .text
 						margin-right 8px
 
-					> .toggle
-						display inline-block
-						padding 4px 8px
-						font-size 0.7em
-						color isDark ? #393f4f : #fff
-						background isDark ? #687390 : #b1b9c1
-						border-radius 2px
-						cursor pointer
-						user-select none
-
-						&:hover
-							background isDark ? #707b97 : #bbc4ce
-
 				> .content
 
 					> .text