From 8d705878145f2ad7f9fb5452db2762f6e304951f Mon Sep 17 00:00:00 2001 From: syuilo 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 @@ + + + + + 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 @@
-
-

- - - {{ note.user | userName }} - {{ this.$t('reposted-by').substr(0, this.$t('reposted-by').indexOf('{')) }} - {{ note.user | userName }} - {{ this.$t('reposted-by').substr(this.$t('reposted-by').indexOf('}') + 1) }} - -

-
+
@@ -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 @@
-
- - - {{ this.$t('reposted-by').substr(0, this.$t('reposted-by').indexOf('{')) }} - {{ note.user | userName }} - {{ this.$t('reposted-by').substr(this.$t('reposted-by').indexOf('}') + 1) }} - - - - - - - - -
+
@@ -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 @@
-
-

- - - {{ note.user | userName }} - {{ this.$t('reposted-by').substr(0, this.$t('reposted-by').indexOf('{')) }} - {{ note.user | userName }} - {{ this.$t('reposted-by').substr(this.$t('reposted-by').indexOf('}') + 1) }} - -

-
+
@@ -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 @@
-
- - - {{ this.$t('reposted-by').substr(0, this.$t('reposted-by').indexOf('{')) }} - {{ note.user | userName }} - {{ this.$t('reposted-by').substr(this.$t('reposted-by').indexOf('}') + 1) }} - - - - - - - - -
+
@@ -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