MissketDeck: Implement media view tl

This commit is contained in:
syuilo 2018-06-10 01:01:28 +09:00
parent 72c4ccaee8
commit f9d5af0600
6 changed files with 63 additions and 10 deletions

View file

@ -668,6 +668,10 @@ desktop/views/components/window.vue:
popout: "ポップアウト"
close: "閉じる"
desktop/views/pages/deck/deck.tl-column.vue:
is-media-only: "メディア投稿のみ"
is-media-view: "メディアビュー"
desktop/views/pages/welcome.vue:
about: "詳しく..."
gotit: "わかった"

View file

@ -1,5 +1,5 @@
<template>
<x-notes ref="timeline" :more="existMore ? more : null"/>
<x-notes ref="timeline" :more="existMore ? more : null" :media-view="mediaView"/>
</template>
<script lang="ts">
@ -23,6 +23,11 @@ export default Vue.extend({
type: Boolean,
required: false,
default: false
},
mediaView: {
type: Boolean,
required: false,
default: false
}
},

View file

@ -1,5 +1,5 @@
<template>
<div class="zyjjkidcqjnlegkqebitfviomuqmseqk" :class="{ renote: isRenote }">
<div v-if="!mediaView" class="zyjjkidcqjnlegkqebitfviomuqmseqk" :class="{ renote: isRenote }">
<div class="reply-to" v-if="p.reply && (!$store.getters.isSignedIn || $store.state.settings.showReplyTarget)">
<x-sub :note="p.reply"/>
</div>
@ -55,6 +55,14 @@
</div>
</article>
</div>
<div v-else class="srwrkujossgfuhrbnvqkybtzxpblgchi">
<div v-if="note.media.length > 0">
<mk-media-list :media-list="note.media"/>
</div>
<div v-if="note.renote && note.renote.media.length > 0">
<mk-media-list :media-list="note.renote.media"/>
</div>
</div>
</template>
<script lang="ts">
@ -71,7 +79,17 @@ export default Vue.extend({
XSub
},
props: ['note'],
props: {
note: {
type: Object,
required: true
},
mediaView: {
type: Boolean,
required: false,
default: false
}
},
data() {
return {
@ -199,6 +217,16 @@ export default Vue.extend({
<style lang="stylus" scoped>
@import '~const.styl'
mediaRoot(isDark)
font-size 13px
margin 4px 12px
&:first-child
margin-top 12px
&:last-child
margin-bottom 12px
root(isDark)
font-size 13px
border-bottom solid 1px isDark ? #1c2023 : #eaeaea
@ -257,7 +285,7 @@ root(isDark)
> article
display flex
padding 16px 16px 9px
padding 16px 16px 4px
> .avatar
flex-shrink 0
@ -408,7 +436,7 @@ root(isDark)
> footer
> button
margin 0
padding 8px
padding 4px 8px 8px 8px
background transparent
border none
box-shadow none
@ -436,4 +464,10 @@ root(isDark)
.zyjjkidcqjnlegkqebitfviomuqmseqk:not([data-darkmode])
root(false)
.srwrkujossgfuhrbnvqkybtzxpblgchi[data-darkmode]
mediaRoot(true)
.srwrkujossgfuhrbnvqkybtzxpblgchi:not([data-darkmode])
mediaRoot(false)
</style>

View file

@ -9,7 +9,7 @@
<transition-group name="mk-notes" class="transition">
<template v-for="(note, i) in _notes">
<x-note :note="note" :key="note.id" @update:note="onNoteUpdated(i, $event)"/>
<x-note :note="note" :key="note.id" @update:note="onNoteUpdated(i, $event)" :media-view="mediaView"/>
<p class="date" :key="note.id + '_date'" v-if="i != notes.length - 1 && note._date != _notes[i + 1]._date">
<span>%fa:angle-up%{{ note._datetext }}</span>
<span>%fa:angle-down%{{ _notes[i + 1]._datetext }}</span>
@ -44,6 +44,11 @@ export default Vue.extend({
more: {
type: Function,
required: false
},
mediaView: {
type: Boolean,
required: false,
default: false
}
},

View file

@ -8,12 +8,12 @@
<span>{{ name }}</span>
</span>
<div class="editor" v-if="edit">
<div class="editor" style="padding:0 12px" v-if="edit">
<mk-switch v-model="column.isMediaOnly" @change="onChangeSettings" text="%i18n:@is-media-only%"/>
<mk-switch v-model="column.isMediaView" @change="onChangeSettings" text="%i18n:@is-media-view%"/>
</div>
<x-list-tl v-if="column.type == 'list'" :list="column.list" :media-only="column.isMediaOnly"/>
<x-tl v-else :src="column.type" :media-only="column.isMediaOnly"/>
<x-list-tl v-if="column.type == 'list'" :list="column.list" :media-only="column.isMediaOnly" :media-view="column.isMediaView"/>
<x-tl v-else :src="column.type" :media-only="column.isMediaOnly" :media-view="column.isMediaView"/>
</x-column>
</template>

View file

@ -1,5 +1,5 @@
<template>
<x-notes ref="timeline" :more="existMore ? more : null"/>
<x-notes ref="timeline" :more="existMore ? more : null" :media-view="mediaView"/>
</template>
<script lang="ts">
@ -23,6 +23,11 @@ export default Vue.extend({
type: Boolean,
required: false,
default: false
},
mediaView: {
type: Boolean,
required: false,
default: false
}
},