From 2e27473f7af8ec28051655b1d9d73f2a15042214 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 19 Nov 2018 02:04:12 +0900
Subject: [PATCH] Refactoring
---
locales/ja-JP.yml | 5 +-
.../app/common/views/components/index.ts | 2 +
.../app/common/views/components/renote.vue | 106 ++++++++++++++++++
.../desktop/views/components/note-detail.vue | 37 +-----
.../app/desktop/views/components/note.vue | 68 +----------
.../mobile/views/components/note-detail.vue | 37 +-----
.../app/mobile/views/components/note.vue | 78 +------------
7 files changed, 121 insertions(+), 212 deletions(-)
create mode 100644 src/client/app/common/views/components/renote.vue
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 8866f60e2..bf6f64aab 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -133,6 +133,7 @@ common:
is-remote-user: "このユーザー情報はコピーです。"
is-remote-post: "この投稿情報はコピーです。"
view-on-remote: "正確な情報を見る"
+ renoted-by: "{user}がRenote"
error:
title: '問題が発生しました'
@@ -724,13 +725,11 @@ desktop/views/components/messaging-window.vue:
desktop/views/components/note-detail.vue:
private: "この投稿は非公開です"
deleted: "この投稿は削除されました"
- reposted-by: "{}がRenote"
location: "位置情報"
renote: "Renote"
add-reaction: "リアクション"
desktop/views/components/note.vue:
- reposted-by: "{}がRenote"
reply: "返信"
renote: "Renote"
add-reaction: "リアクション"
@@ -1376,7 +1375,6 @@ mobile/views/components/friends-maker.vue:
close: "閉じる"
mobile/views/components/note.vue:
- reposted-by: "{}がRenote"
private: "この投稿は非公開です"
deleted: "この投稿は削除されました"
location: "位置情報"
@@ -1384,7 +1382,6 @@ mobile/views/components/note.vue:
mobile/views/components/note-detail.vue:
reply: "返信"
reaction: "リアクション"
- reposted-by: "{}がRenote"
private: "この投稿は非公開です"
deleted: "この投稿は削除されました"
location: "位置情報"
diff --git a/src/client/app/common/views/components/index.ts b/src/client/app/common/views/components/index.ts
index ace9eaf44..8569e2cf1 100644
--- a/src/client/app/common/views/components/index.ts
+++ b/src/client/app/common/views/components/index.ts
@@ -10,6 +10,7 @@ import trends from './trends.vue';
import analogClock from './analog-clock.vue';
import menu from './menu.vue';
import noteHeader from './note-header.vue';
+import renote from './renote.vue';
import signin from './signin.vue';
import signup from './signup.vue';
import forkit from './forkit.vue';
@@ -53,6 +54,7 @@ Vue.component('mk-trends', trends);
Vue.component('mk-analog-clock', analogClock);
Vue.component('mk-menu', menu);
Vue.component('mk-note-header', noteHeader);
+Vue.component('mk-renote', renote);
Vue.component('mk-signin', signin);
Vue.component('mk-signup', signup);
Vue.component('mk-forkit', forkit);
diff --git a/src/client/app/common/views/components/renote.vue b/src/client/app/common/views/components/renote.vue
new file mode 100644
index 000000000..523ca97c4
--- /dev/null
+++ b/src/client/app/common/views/components/renote.vue
@@ -0,0 +1,106 @@
+<template>
+<div class="puqkfets" :class="{ mini }">
+ <mk-avatar class="avatar" :user="note.user"/>
+ <fa icon="retweet"/>
+ <i18n path="@.renoted-by" tag="span">
+ <router-link class="name" :to="note.user | userPage" v-user-preview="note.userId" place="user">{{ note.user | userName }}</router-link>
+ </i18n>
+ <div class="info">
+ <mk-time :time="note.createdAt"/>
+ <span class="visibility" v-if="note.visibility != 'public'">
+ <fa v-if="note.visibility == 'home'" icon="home"/>
+ <fa v-if="note.visibility == 'followers'" icon="unlock"/>
+ <fa v-if="note.visibility == 'specified'" icon="envelope"/>
+ <fa v-if="note.visibility == 'private'" icon="lock"/>
+ </span>
+ <span class="localOnly" v-if="note.localOnly == true"><fa icon="heart"/></span>
+ </div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../../i18n';
+
+export default Vue.extend({
+ i18n: i18n(),
+ props: {
+ note: {
+ type: Object,
+ required: true
+ },
+ mini: {
+ type: Boolean,
+ required: false,
+ default: false
+ }
+ }
+});
+</script>
+
+<style lang="stylus" scoped>
+.puqkfets
+ display flex
+ align-items center
+ padding 16px 32px 8px 32px
+ line-height 28px
+ white-space pre
+ color var(--renoteText)
+ background linear-gradient(to bottom, var(--renoteGradient) 0%, var(--face) 100%)
+
+ &.mini
+ padding 8px 16px
+
+ @media (min-width 500px)
+ padding 16px
+
+ @media (min-width 600px)
+ padding 16px 32px
+
+ > .avatar
+ @media (min-width 500px)
+ width 28px
+ height 28px
+
+ > .avatar
+ flex-shrink 0
+ display inline-block
+ width 28px
+ height 28px
+ margin 0 8px 0 0
+ border-radius 6px
+
+ > [data-icon]
+ margin-right 4px
+
+ > span
+ overflow hidden
+ flex-shrink 1
+ text-overflow ellipsis
+ white-space nowrap
+
+ > .name
+ font-weight bold
+
+ > .info
+ margin-left auto
+ font-size 0.9em
+
+ > .mk-time
+ display block
+ margin-left auto
+ flex-shrink 0
+
+ > .visibility
+ margin-left 8px
+
+ [data-icon]
+ margin-right 0
+
+ > .localOnly
+ margin-left 4px
+
+ [data-icon]
+ margin-right 0
+
+</style>
diff --git a/src/client/app/desktop/views/components/note-detail.vue b/src/client/app/desktop/views/components/note-detail.vue
index ffd2bbdd6..88108d961 100644
--- a/src/client/app/desktop/views/components/note-detail.vue
+++ b/src/client/app/desktop/views/components/note-detail.vue
@@ -16,17 +16,7 @@
<div class="reply-to" v-if="appearNote.reply">
<x-sub :note="appearNote.reply"/>
</div>
- <div class="renote" v-if="isRenote">
- <p>
- <mk-avatar class="avatar" :user="note.user"/>
- <fa icon="retweet"/>
- <router-link class="name" :href="note.user | userPage">{{ note.user | userName }}</router-link>
- <span>{{ this.$t('reposted-by').substr(0, this.$t('reposted-by').indexOf('{')) }}</span>
- <a class="name" :href="note.user | userPage" v-user-preview="note.userId">{{ note.user | userName }}</a>
- <span>{{ this.$t('reposted-by').substr(this.$t('reposted-by').indexOf('}') + 1) }}</span>
- <mk-time :time="note.createdAt"/>
- </p>
- </div>
+ <mk-renote class="renote" v-if="isRenote" :note="note"/>
<article>
<mk-avatar class="avatar" :user="appearNote.user"/>
<header>
@@ -277,29 +267,8 @@ export default Vue.extend({
> *
border-bottom 1px solid var(--faceDivider)
- > .renote
- color var(--renoteText)
- background linear-gradient(to bottom, var(--renoteGradient) 0%, var(--face) 100%)
-
- > p
- margin 0
- padding 16px 32px
-
- .avatar
- display inline-block
- width 28px
- height 28px
- margin 0 8px 0 0
- border-radius 6px
-
- [data-icon]
- margin-right 4px
-
- .name
- font-weight bold
-
- & + article
- padding-top 8px
+ > .renote + article
+ padding-top 8px
> .reply-to
border-bottom 1px solid var(--faceDivider)
diff --git a/src/client/app/desktop/views/components/note.vue b/src/client/app/desktop/views/components/note.vue
index 71d7ae420..26615b16a 100644
--- a/src/client/app/desktop/views/components/note.vue
+++ b/src/client/app/desktop/views/components/note.vue
@@ -13,21 +13,7 @@
<div class="reply-to" v-if="appearNote.reply && (!$store.getters.isSignedIn || $store.state.settings.showReplyTarget)">
<x-sub :note="appearNote.reply" :mini="mini"/>
</div>
- <div class="renote" v-if="isRenote">
- <mk-avatar class="avatar" :user="note.user"/>
- <fa icon="retweet"/>
- <span>{{ this.$t('reposted-by').substr(0, this.$t('reposted-by').indexOf('{')) }}</span>
- <router-link class="name" :to="note.user | userPage" v-user-preview="note.userId">{{ note.user | userName }}</router-link>
- <span>{{ this.$t('reposted-by').substr(this.$t('reposted-by').indexOf('}') + 1) }}</span>
- <mk-time :time="note.createdAt"/>
- <span class="visibility" v-if="note.visibility != 'public'">
- <fa v-if="note.visibility == 'home'" icon="home"/>
- <fa v-if="note.visibility == 'followers'" icon="unlock"/>
- <fa v-if="note.visibility == 'specified'" icon="envelope"/>
- <fa v-if="note.visibility == 'private'" icon="lock"/>
- </span>
- <span class="localOnly" v-if="note.localOnly == true"><fa icon="heart"/></span>
- </div>
+ <mk-renote class="renote" v-if="isRenote" :note="note"/>
<article>
<mk-avatar class="avatar" :user="appearNote.user"/>
<div class="main">
@@ -185,56 +171,8 @@ export default Vue.extend({
border 2px solid var(--primaryAlpha03)
border-radius 4px
- > .renote
- display flex
- align-items center
- padding 16px 32px 8px 32px
- line-height 28px
- white-space pre
- color var(--renoteText)
- background linear-gradient(to bottom, var(--renoteGradient) 0%, var(--face) 100%)
-
- .avatar
- flex-shrink 0
- display inline-block
- width 28px
- height 28px
- margin 0 8px 0 0
- border-radius 6px
-
- [data-icon]
- margin-right 4px
-
- > span
- flex-shrink 0
-
- .name
- overflow hidden
- flex-shrink 1
- text-overflow ellipsis
- white-space nowrap
- font-weight bold
-
- > .mk-time
- display block
- margin-left auto
- flex-shrink 0
- font-size 0.9em
-
- > .visibility
- margin-left 8px
-
- [data-icon]
- margin-right 0
-
- > .localOnly
- margin-left 4px
-
- [data-icon]
- margin-right 0
-
- & + article
- padding-top 8px
+ > .renote + article
+ padding-top 8px
> article
display flex
diff --git a/src/client/app/mobile/views/components/note-detail.vue b/src/client/app/mobile/views/components/note-detail.vue
index daffebc21..f24cc0916 100644
--- a/src/client/app/mobile/views/components/note-detail.vue
+++ b/src/client/app/mobile/views/components/note-detail.vue
@@ -15,17 +15,7 @@
<div class="reply-to" v-if="appearNote.reply">
<x-sub :note="appearNote.reply"/>
</div>
- <div class="renote" v-if="isRenote">
- <p>
- <mk-avatar class="avatar" :user="note.user"/>
- <fa icon="retweet"/>
- <router-link class="name" :href="note.user | userPage">{{ note.user | userName }}</router-link>
- <span>{{ this.$t('reposted-by').substr(0, this.$t('reposted-by').indexOf('{')) }}</span>
- <a class="name" :href="note.user | userPage" v-user-preview="note.userId">{{ note.user | userName }}</a>
- <span>{{ this.$t('reposted-by').substr(this.$t('reposted-by').indexOf('}') + 1) }}</span>
- <mk-time :time="note.createdAt"/>
- </p>
- </div>
+ <mk-renote class="renote" v-if="isRenote" :note="note" mini/>
<article>
<header>
<mk-avatar class="avatar" :user="appearNote.user"/>
@@ -277,29 +267,8 @@ export default Vue.extend({
> *
border-bottom 1px solid var(--faceDivider)
- > .renote
- color var(--renoteText)
- background linear-gradient(to bottom, var(--renoteGradient) 0%, var(--face) 100%)
-
- > p
- margin 0
- padding 16px 32px
-
- .avatar
- display inline-block
- width 28px
- height 28px
- margin 0 8px 0 0
- border-radius 6px
-
- [data-icon]
- margin-right 4px
-
- .name
- font-weight bold
-
- & + article
- padding-top 8px
+ > .renote + article
+ padding-top 8px
> .reply-to
border-bottom 1px solid var(--faceDivider)
diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue
index 5b34cfb07..42fb7118f 100644
--- a/src/client/app/mobile/views/components/note.vue
+++ b/src/client/app/mobile/views/components/note.vue
@@ -9,21 +9,7 @@
<div class="reply-to" v-if="appearNote.reply && (!$store.getters.isSignedIn || $store.state.settings.showReplyTarget)">
<x-sub :note="appearNote.reply"/>
</div>
- <div class="renote" v-if="isRenote">
- <mk-avatar class="avatar" :user="note.user"/>
- <fa icon="retweet"/>
- <span>{{ this.$t('reposted-by').substr(0, this.$t('reposted-by').indexOf('{')) }}</span>
- <router-link class="name" :to="note.user | userPage">{{ note.user | userName }}</router-link>
- <span>{{ this.$t('reposted-by').substr(this.$t('reposted-by').indexOf('}') + 1) }}</span>
- <mk-time :time="note.createdAt"/>
- <span class="visibility" v-if="note.visibility != 'public'">
- <fa v-if="note.visibility == 'home'" icon="home"/>
- <fa v-if="note.visibility == 'followers'" icon="unlock"/>
- <fa v-if="note.visibility == 'specified'" icon="envelope"/>
- <fa v-if="note.visibility == 'private'" icon="lock"/>
- </span>
- <span class="localOnly" v-if="note.localOnly == true"><fa icon="heart"/></span>
- </div>
+ <mk-renote class="renote" v-if="isRenote" :note="note" mini/>
<article>
<mk-avatar class="avatar" :user="appearNote.user" v-if="$store.state.device.postStyle != 'smart'"/>
<div class="main">
@@ -138,66 +124,8 @@ export default Vue.extend({
align-items center
margin-bottom 4px
- > .renote
- display flex
- align-items center
- padding 8px 16px
- line-height 28px
- white-space pre
- color var(--renoteText)
- background linear-gradient(to bottom, var(--renoteGradient) 0%, var(--face) 100%)
-
- @media (min-width 500px)
- padding 16px
-
- @media (min-width 600px)
- padding 16px 32px
-
- .avatar
- flex-shrink 0
- display inline-block
- width 20px
- height 20px
- margin 0 8px 0 0
- border-radius 6px
-
- @media (min-width 500px)
- width 28px
- height 28px
-
- [data-icon]
- margin-right 4px
-
- > span
- flex-shrink 0
-
- .name
- overflow hidden
- flex-shrink 1
- text-overflow ellipsis
- white-space nowrap
- font-weight bold
-
- > .mk-time
- display block
- margin-left auto
- flex-shrink 0
- font-size 0.9em
-
- > .visibility
- margin-left 8px
-
- [data-icon]
- margin-right 0
-
- > .localOnly
- margin-left 4px
-
- [data-icon]
- margin-right 0
-
- & + article
- padding-top 8px
+ > .renote + article
+ padding-top 8px
> article
display flex