Refactoring
This commit is contained in:
syuilo
parent
43c2b00cf8
commit
8d70587814
7 changed files with 121 additions and 212 deletions
|
|
@ -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: "位置情報"
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
106
src/client/app/common/views/components/renote.vue
Normal file
106
src/client/app/common/views/components/renote.vue
Normal file
|
|
@ -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>
|
||||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in a new issue