MissketDeck: Implement media view tl
This commit is contained in:
syuilo
parent
72c4ccaee8
commit
f9d5af0600
6 changed files with 63 additions and 10 deletions
|
|
@ -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
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue