From 03e1d3fbc45252b05bf5abdb8ffee28297400acc Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 13 Sep 2018 18:01:50 +0900
Subject: [PATCH] Refactor
---
locales/ja-JP.yml | 8 ++--
.../app/common/views/components/cw-button.vue | 44 +++++++++++++++++++
.../app/common/views/components/index.ts | 2 +
.../desktop/views/components/note-detail.vue | 15 +------
.../desktop/views/components/note-preview.vue | 15 +------
.../views/components/notes.note.sub.vue | 15 +------
.../desktop/views/components/notes.note.vue | 15 +------
.../desktop/views/pages/deck/deck.note.vue | 2 +-
.../mobile/views/components/note-detail.vue | 15 +------
.../mobile/views/components/note-preview.vue | 15 +------
.../app/mobile/views/components/note.sub.vue | 15 +------
.../app/mobile/views/components/note.vue | 15 +------
12 files changed, 59 insertions(+), 117 deletions(-)
create mode 100644 src/client/app/common/views/components/cw-button.vue
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