Refactoring
This commit is contained in:
parent
43c2b00cf8
commit
8d70587814
7 changed files with 121 additions and 212 deletions
|
@ -133,6 +133,7 @@ common:
|
||||||
is-remote-user: "このユーザー情報はコピーです。"
|
is-remote-user: "このユーザー情報はコピーです。"
|
||||||
is-remote-post: "この投稿情報はコピーです。"
|
is-remote-post: "この投稿情報はコピーです。"
|
||||||
view-on-remote: "正確な情報を見る"
|
view-on-remote: "正確な情報を見る"
|
||||||
|
renoted-by: "{user}がRenote"
|
||||||
|
|
||||||
error:
|
error:
|
||||||
title: '問題が発生しました'
|
title: '問題が発生しました'
|
||||||
|
@ -724,13 +725,11 @@ desktop/views/components/messaging-window.vue:
|
||||||
desktop/views/components/note-detail.vue:
|
desktop/views/components/note-detail.vue:
|
||||||
private: "この投稿は非公開です"
|
private: "この投稿は非公開です"
|
||||||
deleted: "この投稿は削除されました"
|
deleted: "この投稿は削除されました"
|
||||||
reposted-by: "{}がRenote"
|
|
||||||
location: "位置情報"
|
location: "位置情報"
|
||||||
renote: "Renote"
|
renote: "Renote"
|
||||||
add-reaction: "リアクション"
|
add-reaction: "リアクション"
|
||||||
|
|
||||||
desktop/views/components/note.vue:
|
desktop/views/components/note.vue:
|
||||||
reposted-by: "{}がRenote"
|
|
||||||
reply: "返信"
|
reply: "返信"
|
||||||
renote: "Renote"
|
renote: "Renote"
|
||||||
add-reaction: "リアクション"
|
add-reaction: "リアクション"
|
||||||
|
@ -1376,7 +1375,6 @@ mobile/views/components/friends-maker.vue:
|
||||||
close: "閉じる"
|
close: "閉じる"
|
||||||
|
|
||||||
mobile/views/components/note.vue:
|
mobile/views/components/note.vue:
|
||||||
reposted-by: "{}がRenote"
|
|
||||||
private: "この投稿は非公開です"
|
private: "この投稿は非公開です"
|
||||||
deleted: "この投稿は削除されました"
|
deleted: "この投稿は削除されました"
|
||||||
location: "位置情報"
|
location: "位置情報"
|
||||||
|
@ -1384,7 +1382,6 @@ mobile/views/components/note.vue:
|
||||||
mobile/views/components/note-detail.vue:
|
mobile/views/components/note-detail.vue:
|
||||||
reply: "返信"
|
reply: "返信"
|
||||||
reaction: "リアクション"
|
reaction: "リアクション"
|
||||||
reposted-by: "{}がRenote"
|
|
||||||
private: "この投稿は非公開です"
|
private: "この投稿は非公開です"
|
||||||
deleted: "この投稿は削除されました"
|
deleted: "この投稿は削除されました"
|
||||||
location: "位置情報"
|
location: "位置情報"
|
||||||
|
|
|
@ -10,6 +10,7 @@ import trends from './trends.vue';
|
||||||
import analogClock from './analog-clock.vue';
|
import analogClock from './analog-clock.vue';
|
||||||
import menu from './menu.vue';
|
import menu from './menu.vue';
|
||||||
import noteHeader from './note-header.vue';
|
import noteHeader from './note-header.vue';
|
||||||
|
import renote from './renote.vue';
|
||||||
import signin from './signin.vue';
|
import signin from './signin.vue';
|
||||||
import signup from './signup.vue';
|
import signup from './signup.vue';
|
||||||
import forkit from './forkit.vue';
|
import forkit from './forkit.vue';
|
||||||
|
@ -53,6 +54,7 @@ Vue.component('mk-trends', trends);
|
||||||
Vue.component('mk-analog-clock', analogClock);
|
Vue.component('mk-analog-clock', analogClock);
|
||||||
Vue.component('mk-menu', menu);
|
Vue.component('mk-menu', menu);
|
||||||
Vue.component('mk-note-header', noteHeader);
|
Vue.component('mk-note-header', noteHeader);
|
||||||
|
Vue.component('mk-renote', renote);
|
||||||
Vue.component('mk-signin', signin);
|
Vue.component('mk-signin', signin);
|
||||||
Vue.component('mk-signup', signup);
|
Vue.component('mk-signup', signup);
|
||||||
Vue.component('mk-forkit', forkit);
|
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">
|
<div class="reply-to" v-if="appearNote.reply">
|
||||||
<x-sub :note="appearNote.reply"/>
|
<x-sub :note="appearNote.reply"/>
|
||||||
</div>
|
</div>
|
||||||
<div class="renote" v-if="isRenote">
|
<mk-renote class="renote" v-if="isRenote" :note="note"/>
|
||||||
<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>
|
|
||||||
<article>
|
<article>
|
||||||
<mk-avatar class="avatar" :user="appearNote.user"/>
|
<mk-avatar class="avatar" :user="appearNote.user"/>
|
||||||
<header>
|
<header>
|
||||||
|
@ -277,29 +267,8 @@ export default Vue.extend({
|
||||||
> *
|
> *
|
||||||
border-bottom 1px solid var(--faceDivider)
|
border-bottom 1px solid var(--faceDivider)
|
||||||
|
|
||||||
> .renote
|
> .renote + article
|
||||||
color var(--renoteText)
|
padding-top 8px
|
||||||
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
|
|
||||||
|
|
||||||
> .reply-to
|
> .reply-to
|
||||||
border-bottom 1px solid var(--faceDivider)
|
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)">
|
<div class="reply-to" v-if="appearNote.reply && (!$store.getters.isSignedIn || $store.state.settings.showReplyTarget)">
|
||||||
<x-sub :note="appearNote.reply" :mini="mini"/>
|
<x-sub :note="appearNote.reply" :mini="mini"/>
|
||||||
</div>
|
</div>
|
||||||
<div class="renote" v-if="isRenote">
|
<mk-renote class="renote" v-if="isRenote" :note="note"/>
|
||||||
<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>
|
|
||||||
<article>
|
<article>
|
||||||
<mk-avatar class="avatar" :user="appearNote.user"/>
|
<mk-avatar class="avatar" :user="appearNote.user"/>
|
||||||
<div class="main">
|
<div class="main">
|
||||||
|
@ -185,56 +171,8 @@ export default Vue.extend({
|
||||||
border 2px solid var(--primaryAlpha03)
|
border 2px solid var(--primaryAlpha03)
|
||||||
border-radius 4px
|
border-radius 4px
|
||||||
|
|
||||||
> .renote
|
> .renote + article
|
||||||
display flex
|
padding-top 8px
|
||||||
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
|
|
||||||
|
|
||||||
> article
|
> article
|
||||||
display flex
|
display flex
|
||||||
|
|
|
@ -15,17 +15,7 @@
|
||||||
<div class="reply-to" v-if="appearNote.reply">
|
<div class="reply-to" v-if="appearNote.reply">
|
||||||
<x-sub :note="appearNote.reply"/>
|
<x-sub :note="appearNote.reply"/>
|
||||||
</div>
|
</div>
|
||||||
<div class="renote" v-if="isRenote">
|
<mk-renote class="renote" v-if="isRenote" :note="note" mini/>
|
||||||
<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>
|
|
||||||
<article>
|
<article>
|
||||||
<header>
|
<header>
|
||||||
<mk-avatar class="avatar" :user="appearNote.user"/>
|
<mk-avatar class="avatar" :user="appearNote.user"/>
|
||||||
|
@ -277,29 +267,8 @@ export default Vue.extend({
|
||||||
> *
|
> *
|
||||||
border-bottom 1px solid var(--faceDivider)
|
border-bottom 1px solid var(--faceDivider)
|
||||||
|
|
||||||
> .renote
|
> .renote + article
|
||||||
color var(--renoteText)
|
padding-top 8px
|
||||||
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
|
|
||||||
|
|
||||||
> .reply-to
|
> .reply-to
|
||||||
border-bottom 1px solid var(--faceDivider)
|
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)">
|
<div class="reply-to" v-if="appearNote.reply && (!$store.getters.isSignedIn || $store.state.settings.showReplyTarget)">
|
||||||
<x-sub :note="appearNote.reply"/>
|
<x-sub :note="appearNote.reply"/>
|
||||||
</div>
|
</div>
|
||||||
<div class="renote" v-if="isRenote">
|
<mk-renote class="renote" v-if="isRenote" :note="note" mini/>
|
||||||
<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>
|
|
||||||
<article>
|
<article>
|
||||||
<mk-avatar class="avatar" :user="appearNote.user" v-if="$store.state.device.postStyle != 'smart'"/>
|
<mk-avatar class="avatar" :user="appearNote.user" v-if="$store.state.device.postStyle != 'smart'"/>
|
||||||
<div class="main">
|
<div class="main">
|
||||||
|
@ -138,66 +124,8 @@ export default Vue.extend({
|
||||||
align-items center
|
align-items center
|
||||||
margin-bottom 4px
|
margin-bottom 4px
|
||||||
|
|
||||||
> .renote
|
> .renote + article
|
||||||
display flex
|
padding-top 8px
|
||||||
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
|
|
||||||
|
|
||||||
> article
|
> article
|
||||||
display flex
|
display flex
|
||||||
|
|
Loading…
Reference in a new issue