nanka iroiro

This commit is contained in:
syuilo 2018-05-29 15:38:48 +09:00
parent 4ecc8c799d
commit a426f4c7bd
8 changed files with 14 additions and 238 deletions

View file

@ -379,10 +379,6 @@ desktop/views/components/note-detail.vue:
renote: "Renote" renote: "Renote"
add-reaction: "リアクション" add-reaction: "リアクション"
desktop/views/components/note-detail.sub.vue:
private: "この投稿は非公開です"
deleted: "この投稿は削除されました"
desktop/views/components/notes.note.vue: desktop/views/components/notes.note.vue:
reposted-by: "{}がRenote" reposted-by: "{}がRenote"
reply: "返信" reply: "返信"

View file

@ -23,7 +23,7 @@ export default Vue.extend({
}, },
mounted() { mounted() {
// for Safari bug // for Safari bug
this.$refs.grid.style.height = `${this.$refs.grid.clientHeight}px`; this.$refs.grid.style.height = this.$refs.grid.clientHeight ? `${this.$refs.grid.clientHeight}px` : '128px';
} }
}); });
</script> </script>

View file

@ -1,124 +0,0 @@
<template>
<div class="sub" :title="title">
<mk-avatar class="avatar" :user="note.user"/>
<div class="main">
<header>
<div class="left">
<router-link class="name" :to="note.user | userPage" v-user-preview="note.userId">{{ note.user | userName }}</router-link>
<span class="username"><mk-acct :user="note.user"/></span>
</div>
<div class="right">
<router-link class="time" :to="note | notePage">
<mk-time :time="note.createdAt"/>
</router-link>
</div>
</header>
<div class="body">
<div class="text">
<span v-if="note.isHidden" style="opacity: 0.5">%i18n:@private%</span>
<span v-if="note.deletedAt" style="opacity: 0.5">%i18n:@deleted%</span>
<mk-note-html v-if="note.text" :text="note.text" :i="$store.state.i"/>
</div>
<div class="media" v-if="note.mediaIds.length > 0">
<mk-media-list :media-list="note.media"/>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import dateStringify from '../../../common/scripts/date-stringify';
export default Vue.extend({
props: ['note'],
computed: {
title(): string {
return dateStringify(this.note.createdAt);
}
}
});
</script>
<style lang="stylus" scoped>
root(isDark)
margin 0
padding 20px 32px
background isDark ? #21242d : #fdfdfd
&:after
content ""
display block
clear both
&:hover
> .main > footer > button
color #888
> .avatar
display block
float left
margin 0 16px 0 0
width 44px
height 44px
border-radius 4px
> .main
float left
width calc(100% - 60px)
> header
margin-bottom 4px
white-space nowrap
&:after
content ""
display block
clear both
> .left
float left
> .name
display inline
margin 0
padding 0
color isDark ? #fff : #777
font-size 1em
font-weight 700
text-align left
text-decoration none
&:hover
text-decoration underline
> .username
text-align left
margin 0 0 0 8px
color isDark ? #606984 : #ccc
> .right
float right
> .time
font-size 0.9em
color isDark ? #606984 : #c0c0c0
> .body
> .text
cursor default
display block
margin 0
padding 0
overflow-wrap break-word
font-size 1em
color isDark ? #959ba7 : #717171
.sub[data-darkmode]
root(true)
.sub:not([data-darkmode])
root(false)
</style>

View file

@ -89,7 +89,7 @@ import MkPostFormWindow from './post-form-window.vue';
import MkRenoteFormWindow from './renote-form-window.vue'; import MkRenoteFormWindow from './renote-form-window.vue';
import MkNoteMenu from '../../../common/views/components/note-menu.vue'; import MkNoteMenu from '../../../common/views/components/note-menu.vue';
import MkReactionPicker from '../../../common/views/components/reaction-picker.vue'; import MkReactionPicker from '../../../common/views/components/reaction-picker.vue';
import XSub from './note-detail.sub.vue'; import XSub from './notes.note.sub.vue';
export default Vue.extend({ export default Vue.extend({
components: { components: {

View file

@ -115,8 +115,6 @@ root(isDark)
margin-left 6px margin-left 6px
> .body > .body
max-height 128px
overflow hidden
> .text > .text
cursor default cursor default

View file

@ -1,101 +0,0 @@
<template>
<div class="root sub">
<mk-avatar class="avatar" :user="note.user"/>
<div class="main">
<header>
<router-link class="name" :to="note.user | userPage">{{ note.user | userName }}</router-link>
<span class="username"><mk-acct :user="note.user"/></span>
<router-link class="time" :to="note | notePage">
<mk-time :time="note.createdAt"/>
</router-link>
</header>
<div class="body">
<mk-sub-note-content class="text" :note="note"/>
</div>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
props: ['note']
});
</script>
<style lang="stylus" scoped>
root(isDark)
padding 8px
font-size 0.9em
background isDark ? #21242d : #fdfdfd
@media (min-width 500px)
padding 12px
@media (min-width 600px)
padding 24px 32px
&:after
content ""
display block
clear both
> .avatar
display block
float left
margin 0 12px 0 0
width 48px
height 48px
border-radius 8px
> .main
float left
width calc(100% - 60px)
> header
display flex
align-items baseline
margin-bottom 4px
white-space nowrap
> .name
display block
margin 0 .5em 0 0
padding 0
overflow hidden
color isDark ? #fff : #607073
font-size 1em
font-weight 700
text-align left
text-decoration none
text-overflow ellipsis
&:hover
text-decoration underline
> .username
text-align left
margin 0 .5em 0 0
color isDark ? #606984 : #d1d8da
> .time
margin-left auto
color isDark ? #606984 : #b2b8bb
> .body
> .text
cursor default
margin 0
padding 0
font-size 1.1em
color isDark ? #959ba7 : #717171
.root.sub[data-darkmode]
root(true)
.root.sub:not([data-darkmode])
root(false)
</style>

View file

@ -87,7 +87,7 @@ import parse from '../../../../../text/parse';
import MkNoteMenu from '../../../common/views/components/note-menu.vue'; import MkNoteMenu from '../../../common/views/components/note-menu.vue';
import MkReactionPicker from '../../../common/views/components/reaction-picker.vue'; import MkReactionPicker from '../../../common/views/components/reaction-picker.vue';
import XSub from './note-detail.sub.vue'; import XSub from './note.sub.vue';
export default Vue.extend({ export default Vue.extend({
components: { components: {

View file

@ -33,7 +33,17 @@
import Vue from 'vue'; import Vue from 'vue';
export default Vue.extend({ export default Vue.extend({
props: ['note'] props: {
note: {
type: Object,
required: true
},
// TODO
truncate: {
type: Boolean,
default: true
}
}
}); });
</script> </script>
@ -144,11 +154,8 @@ root(isDark)
margin-left 6px margin-left 6px
> .body > .body
max-height 128px
overflow hidden
> .text > .text
cursor default
margin 0 margin 0
padding 0 padding 0
color isDark ? #959ba7 : #717171 color isDark ? #959ba7 : #717171