Refactoring

This commit is contained in:
syuilo 2018-11-19 02:04:12 +09:00
parent 43c2b00cf8
commit 8d70587814
No known key found for this signature in database
GPG Key ID: BDC4C49D06AB9D69
7 changed files with 121 additions and 212 deletions

View File

@ -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: "位置情報"

View File

@ -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);

View 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>

View File

@ -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,28 +267,7 @@ 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
> .renote + article
padding-top 8px
> .reply-to

View File

@ -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,55 +171,7 @@ 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
> .renote + article
padding-top 8px
> article

View File

@ -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,28 +267,7 @@ 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
> .renote + article
padding-top 8px
> .reply-to

View File

@ -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,65 +124,7 @@ 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
> .renote + article
padding-top 8px
> article