* wip
* wip
* Clean up
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* 🎨
* wip
* wip
This commit is contained in:
syuilo
GitHub
parent
c1a929022f
commit
fef4f7fce8
29 changed files with 824 additions and 833 deletions
|
|
@ -1,7 +1,6 @@
|
|||
<template>
|
||||
<div class="dnpfarvgbnfmyzbdquhhzyxcmstpdqzs" :class="{ naked, narrow, active, isStacked, draghover, dragging, dropready }"
|
||||
@dragover.prevent.stop="onDragover"
|
||||
@dragenter.prevent="onDragenter"
|
||||
@dragleave="onDragleave"
|
||||
@drop.prevent.stop="onDrop">
|
||||
<header :class="{ indicate: count > 0 }"
|
||||
|
|
@ -16,7 +15,8 @@
|
|||
</button>
|
||||
<slot name="header"></slot>
|
||||
<span class="count" v-if="count > 0">({{ count }})</span>
|
||||
<button class="menu" ref="menu" @click.stop="showMenu">%fa:caret-down%</button>
|
||||
<button v-if="!isTemporaryColumn" class="menu" ref="menu" @click.stop="showMenu">%fa:caret-down%</button>
|
||||
<button v-else class="close" @click.stop="close">%fa:times%</button>
|
||||
</header>
|
||||
<div ref="body" v-show="active">
|
||||
<slot></slot>
|
||||
|
|
@ -34,11 +34,13 @@ export default Vue.extend({
|
|||
props: {
|
||||
column: {
|
||||
type: Object,
|
||||
required: true
|
||||
required: false,
|
||||
default: null
|
||||
},
|
||||
isStacked: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
|
|
@ -61,6 +63,12 @@ export default Vue.extend({
|
|||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
isTemporaryColumn(): boolean {
|
||||
return this.column == null;
|
||||
}
|
||||
},
|
||||
|
||||
inject: {
|
||||
getColumnVm: { from: 'getColumnVm' }
|
||||
},
|
||||
|
|
@ -96,14 +104,20 @@ export default Vue.extend({
|
|||
|
||||
mounted() {
|
||||
this.$refs.body.addEventListener('scroll', this.onScroll, { passive: true });
|
||||
this.$root.$on('deck.column.dragStart', this.onOtherDragStart);
|
||||
this.$root.$on('deck.column.dragEnd', this.onOtherDragEnd);
|
||||
|
||||
if (!this.isTemporaryColumn) {
|
||||
this.$root.$on('deck.column.dragStart', this.onOtherDragStart);
|
||||
this.$root.$on('deck.column.dragEnd', this.onOtherDragEnd);
|
||||
}
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
this.$refs.body.removeEventListener('scroll', this.onScroll);
|
||||
this.$root.$off('deck.column.dragStart', this.onOtherDragStart);
|
||||
this.$root.$off('deck.column.dragEnd', this.onOtherDragEnd);
|
||||
|
||||
if (!this.isTemporaryColumn) {
|
||||
this.$root.$off('deck.column.dragStart', this.onOtherDragStart);
|
||||
this.$root.$off('deck.column.dragEnd', this.onOtherDragEnd);
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
|
@ -203,6 +217,7 @@ export default Vue.extend({
|
|||
},
|
||||
|
||||
onContextmenu(e) {
|
||||
if (this.isTemporaryColumn) return;
|
||||
contextmenu((this as any).os)(e, this.getMenu());
|
||||
},
|
||||
|
||||
|
|
@ -214,6 +229,13 @@ export default Vue.extend({
|
|||
});
|
||||
},
|
||||
|
||||
close() {
|
||||
this.$store.commit('device/set', {
|
||||
key: 'deckTemporaryColumn',
|
||||
value: null
|
||||
});
|
||||
},
|
||||
|
||||
goTop() {
|
||||
this.$refs.body.scrollTo({
|
||||
top: 0,
|
||||
|
|
@ -222,6 +244,12 @@ export default Vue.extend({
|
|||
},
|
||||
|
||||
onDragstart(e) {
|
||||
// テンポラリカラムはドラッグさせない
|
||||
if (this.isTemporaryColumn) {
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
|
||||
e.dataTransfer.effectAllowed = 'move';
|
||||
e.dataTransfer.setData('mk-deck-column', this.column.id);
|
||||
this.dragging = true;
|
||||
|
|
@ -232,6 +260,12 @@ export default Vue.extend({
|
|||
},
|
||||
|
||||
onDragover(e) {
|
||||
// テンポラリカラムにはドロップさせない
|
||||
if (this.isTemporaryColumn) {
|
||||
e.dataTransfer.dropEffect = 'none';
|
||||
return;
|
||||
}
|
||||
|
||||
// 自分自身がドラッグされている場合
|
||||
if (this.dragging) {
|
||||
// 自分自身にはドロップさせない
|
||||
|
|
@ -242,9 +276,7 @@ export default Vue.extend({
|
|||
const isDeckColumn = e.dataTransfer.types[0] == 'mk-deck-column';
|
||||
|
||||
e.dataTransfer.dropEffect = isDeckColumn ? 'move' : 'none';
|
||||
},
|
||||
|
||||
onDragenter() {
|
||||
if (!this.dragging) this.draghover = true;
|
||||
},
|
||||
|
||||
|
|
@ -349,6 +381,7 @@ export default Vue.extend({
|
|||
|
||||
> .toggleActive
|
||||
> .menu
|
||||
> .close
|
||||
padding 0
|
||||
width $header-height
|
||||
line-height $header-height
|
||||
|
|
@ -365,6 +398,7 @@ export default Vue.extend({
|
|||
margin-left -16px
|
||||
|
||||
> .menu
|
||||
> .close
|
||||
margin-left auto
|
||||
margin-right -16px
|
||||
|
||||
|
|
|
|||
69
src/client/app/desktop/views/pages/deck/deck.note-column.vue
Normal file
69
src/client/app/desktop/views/pages/deck/deck.note-column.vue
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
<template>
|
||||
<x-column>
|
||||
<span slot="header">
|
||||
%fa:comment-alt R%<span>{{ title }}</span>
|
||||
</span>
|
||||
|
||||
<div class="rvtscbadixhhbsczoorqoaygovdeecsx" v-if="note">
|
||||
<div class="is-remote" v-if="note.user.host != null">%fa:exclamation-triangle% %i18n:@is-remote%<a :href="note.url || note.uri" target="_blank">%i18n:@view-remote%</a></div>
|
||||
<x-note :note="note" :detail="true" :mini="true"/>
|
||||
</div>
|
||||
</x-column>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import XColumn from './deck.column.vue';
|
||||
import XNotes from './deck.notes.vue';
|
||||
import XNote from '../../components/note.vue';
|
||||
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
XColumn,
|
||||
XNotes,
|
||||
XNote
|
||||
},
|
||||
|
||||
props: {
|
||||
noteId: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
note: null,
|
||||
fetching: true
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
title(): string {
|
||||
return this.note ? Vue.filter('userName')(this.note.user) : '';
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
(this as any).api('notes/show', { noteId: this.noteId }).then(note => {
|
||||
this.note = note;
|
||||
this.fetching = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.rvtscbadixhhbsczoorqoaygovdeecsx
|
||||
> .is-remote
|
||||
padding 8px 16px
|
||||
font-size 12px
|
||||
|
||||
&.is-remote
|
||||
color var(--remoteInfoFg)
|
||||
background var(--remoteInfoBg)
|
||||
|
||||
> a
|
||||
font-weight bold
|
||||
|
||||
</style>
|
||||
|
|
@ -1,71 +0,0 @@
|
|||
<template>
|
||||
<div class="fnlfosztlhtptnongximhlbykxblytcq">
|
||||
<mk-avatar class="avatar" :user="note.user"/>
|
||||
<div class="main">
|
||||
<mk-note-header class="header" :note="note" :mini="true"/>
|
||||
<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: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
// TODO
|
||||
truncate: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.fnlfosztlhtptnongximhlbykxblytcq
|
||||
display flex
|
||||
padding 16px
|
||||
font-size 10px
|
||||
background var(--subNoteBg)
|
||||
|
||||
&.smart
|
||||
> .main
|
||||
width 100%
|
||||
|
||||
> header
|
||||
align-items center
|
||||
|
||||
> .avatar
|
||||
flex-shrink 0
|
||||
display block
|
||||
margin 0 8px 0 0
|
||||
width 38px
|
||||
height 38px
|
||||
border-radius 8px
|
||||
|
||||
> .main
|
||||
flex 1
|
||||
min-width 0
|
||||
|
||||
> .header
|
||||
margin-bottom 2px
|
||||
|
||||
> .body
|
||||
|
||||
> .text
|
||||
margin 0
|
||||
padding 0
|
||||
color var(--subNoteText)
|
||||
|
||||
pre
|
||||
max-height 120px
|
||||
font-size 80%
|
||||
|
||||
</style>
|
||||
|
|
@ -1,323 +0,0 @@
|
|||
<template>
|
||||
<div
|
||||
v-if="!mediaView"
|
||||
v-show="appearNote.deletedAt == null"
|
||||
:tabindex="appearNote.deletedAt == null ? '-1' : null"
|
||||
class="zyjjkidcqjnlegkqebitfviomuqmseqk"
|
||||
:class="{ renote: isRenote }"
|
||||
v-hotkey="keymap"
|
||||
:title="title"
|
||||
>
|
||||
<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:retweet%
|
||||
<span>{{ '%i18n:@reposted-by%'.substr(0, '%i18n:@reposted-by%'.indexOf('{')) }}</span>
|
||||
<router-link class="name" :to="note.user | userPage">{{ note.user | userName }}</router-link>
|
||||
<span>{{ '%i18n:@reposted-by%'.substr('%i18n:@reposted-by%'.indexOf('}') + 1) }}</span>
|
||||
<mk-time :time="note.createdAt"/>
|
||||
</div>
|
||||
<article>
|
||||
<mk-avatar class="avatar" :user="appearNote.user"/>
|
||||
<div class="main">
|
||||
<mk-note-header class="header" :note="appearNote" :mini="true"/>
|
||||
<div class="body">
|
||||
<p v-if="appearNote.cw != null" class="cw">
|
||||
<span class="text" v-if="appearNote.cw != ''">{{ appearNote.cw }}</span>
|
||||
<mk-cw-button v-model="showContent"/>
|
||||
</p>
|
||||
<div class="content" v-show="appearNote.cw == null || showContent">
|
||||
<div class="text">
|
||||
<span v-if="appearNote.isHidden" style="opacity: 0.5">(%i18n:@private%)</span>
|
||||
<a class="reply" v-if="appearNote.reply">%fa:reply%</a>
|
||||
<misskey-flavored-markdown v-if="appearNote.text" :text="appearNote.text" :i="$store.state.i"/>
|
||||
<a class="rp" v-if="appearNote.renote != null">RP:</a>
|
||||
</div>
|
||||
<div class="files" v-if="appearNote.files.length > 0">
|
||||
<mk-media-list :media-list="appearNote.files"/>
|
||||
</div>
|
||||
<mk-poll v-if="appearNote.poll" :note="appearNote" ref="pollViewer"/>
|
||||
<a class="location" v-if="appearNote.geo" :href="`https://maps.google.com/maps?q=${appearNote.geo.coordinates[1]},${appearNote.geo.coordinates[0]}`" target="_blank">%fa:map-marker-alt% %i18n:@location%</a>
|
||||
<div class="renote" v-if="appearNote.renote">
|
||||
<mk-note-preview :note="appearNote.renote" :mini="true"/>
|
||||
</div>
|
||||
<mk-url-preview v-for="url in urls" :url="url" :key="url" :detail="false" :mini="true"/>
|
||||
</div>
|
||||
<span class="app" v-if="appearNote.app">via <b>{{ appearNote.app.name }}</b></span>
|
||||
</div>
|
||||
<footer>
|
||||
<mk-reactions-viewer :note="appearNote" ref="reactionsViewer"/>
|
||||
<button @click="reply()">
|
||||
<template v-if="appearNote.reply">%fa:reply-all%</template>
|
||||
<template v-else>%fa:reply%</template>
|
||||
</button>
|
||||
<button @click="renote()" title="Renote">%fa:retweet%</button>
|
||||
<button :class="{ reacted: appearNote.myReaction != null }" @click="react()" ref="reactButton">%fa:plus%</button>
|
||||
<button class="menu" @click="menu()" ref="menuButton">%fa:ellipsis-h%</button>
|
||||
</footer>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div v-else class="srwrkujossgfuhrbnvqkybtzxpblgchi">
|
||||
<div v-if="note.files.length > 0">
|
||||
<mk-media-list :media-list="note.files"/>
|
||||
</div>
|
||||
<div v-if="note.renote && note.renote.files.length > 0">
|
||||
<mk-media-list :media-list="note.renote.files"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import MkPostFormWindow from '../../components/post-form-window.vue';
|
||||
import MkRenoteFormWindow from '../../components/renote-form-window.vue';
|
||||
import XSub from './deck.note.sub.vue';
|
||||
import noteMixin from '../../../../common/scripts/note-mixin';
|
||||
import noteSubscriber from '../../../../common/scripts/note-subscriber';
|
||||
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
XSub
|
||||
},
|
||||
|
||||
mixins: [
|
||||
noteMixin(),
|
||||
noteSubscriber('note')
|
||||
],
|
||||
|
||||
props: {
|
||||
note: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
mediaView: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.srwrkujossgfuhrbnvqkybtzxpblgchi
|
||||
font-size 13px
|
||||
margin 4px 12px
|
||||
|
||||
&:first-child
|
||||
margin-top 12px
|
||||
|
||||
&:last-child
|
||||
margin-bottom 12px
|
||||
|
||||
.zyjjkidcqjnlegkqebitfviomuqmseqk
|
||||
font-size 13px
|
||||
border-bottom solid 1px var(--faceDivider)
|
||||
|
||||
&:focus
|
||||
z-index 1
|
||||
|
||||
&:after
|
||||
content ""
|
||||
pointer-events none
|
||||
position absolute
|
||||
top 2px
|
||||
right 2px
|
||||
bottom 2px
|
||||
left 2px
|
||||
border 2px solid var(--primaryAlpha03)
|
||||
border-radius 4px
|
||||
|
||||
&:last-of-type
|
||||
border-bottom none
|
||||
|
||||
&.smart
|
||||
> article
|
||||
> .main
|
||||
> header
|
||||
align-items center
|
||||
margin-bottom 4px
|
||||
|
||||
> .renote
|
||||
display flex
|
||||
align-items center
|
||||
padding 8px 16px 0 16px
|
||||
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 20px
|
||||
height 20px
|
||||
margin 0 8px 0 0
|
||||
border-radius 6px
|
||||
|
||||
[data-fa]
|
||||
margin-right 4px
|
||||
|
||||
> span
|
||||
flex-shrink 0
|
||||
|
||||
&:last-of-type
|
||||
margin-right 8px
|
||||
|
||||
.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
|
||||
|
||||
& + article
|
||||
padding-top 8px
|
||||
|
||||
> article
|
||||
display flex
|
||||
padding 16px 16px 4px
|
||||
|
||||
> .avatar
|
||||
flex-shrink 0
|
||||
display block
|
||||
margin 0 10px 8px 0
|
||||
width 42px
|
||||
height 42px
|
||||
border-radius 6px
|
||||
//position -webkit-sticky
|
||||
//position sticky
|
||||
//top 62px
|
||||
|
||||
> .main
|
||||
flex 1
|
||||
min-width 0
|
||||
|
||||
> .body
|
||||
|
||||
> .cw
|
||||
cursor default
|
||||
display block
|
||||
margin 0
|
||||
padding 0
|
||||
overflow-wrap break-word
|
||||
color var(--noteText)
|
||||
|
||||
> .text
|
||||
margin-right 8px
|
||||
|
||||
> .content
|
||||
|
||||
> .text
|
||||
display block
|
||||
margin 0
|
||||
padding 0
|
||||
overflow-wrap break-word
|
||||
color var(--noteText)
|
||||
|
||||
>>> .title
|
||||
display block
|
||||
margin-bottom 4px
|
||||
padding 4px
|
||||
font-size 90%
|
||||
text-align center
|
||||
background var(--mfmTitleBg)
|
||||
border-radius 4px
|
||||
|
||||
>>> .code
|
||||
margin 8px 0
|
||||
|
||||
>>> .quote
|
||||
margin 8px
|
||||
padding 6px 12px
|
||||
color var(--mfmQuote)
|
||||
border-left solid 3px var(--mfmQuoteLine)
|
||||
|
||||
> .reply
|
||||
margin-right 8px
|
||||
color var(--noteText)
|
||||
|
||||
> .rp
|
||||
margin-left 4px
|
||||
font-style oblique
|
||||
color var(--renoteText)
|
||||
|
||||
[data-is-me]:after
|
||||
content "you"
|
||||
padding 0 4px
|
||||
margin-left 4px
|
||||
font-size 80%
|
||||
color var(--primaryForeground)
|
||||
background var(--primary)
|
||||
border-radius 4px
|
||||
|
||||
.mk-url-preview
|
||||
margin-top 8px
|
||||
|
||||
> .files
|
||||
> img
|
||||
display block
|
||||
max-width 100%
|
||||
|
||||
> .location
|
||||
margin 4px 0
|
||||
font-size 12px
|
||||
color #ccc
|
||||
|
||||
> .map
|
||||
width 100%
|
||||
height 200px
|
||||
|
||||
&:empty
|
||||
display none
|
||||
|
||||
> .mk-poll
|
||||
font-size 80%
|
||||
|
||||
> .renote
|
||||
margin 8px 0
|
||||
|
||||
> *
|
||||
padding 16px
|
||||
border dashed 1px var(--quoteBorder)
|
||||
border-radius 8px
|
||||
|
||||
> .app
|
||||
font-size 12px
|
||||
color #ccc
|
||||
|
||||
> footer
|
||||
> button
|
||||
margin 0
|
||||
padding 4px 8px 8px 8px
|
||||
background transparent
|
||||
border none
|
||||
box-shadow none
|
||||
font-size 1em
|
||||
color var(--noteActions)
|
||||
cursor pointer
|
||||
|
||||
&:not(:last-child)
|
||||
margin-right 28px
|
||||
|
||||
&:hover
|
||||
color var(--noteActionsHover)
|
||||
|
||||
> .count
|
||||
display inline
|
||||
margin 0 0 0 8px
|
||||
color #999
|
||||
|
||||
&.reacted
|
||||
color var(--primary)
|
||||
|
||||
</style>
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
<!--<transition-group name="mk-notes" class="transition">-->
|
||||
<div class="notes">
|
||||
<template v-for="(note, i) in _notes">
|
||||
<x-note :note="note" :key="note.id" @update:note="onNoteUpdated(i, $event)" :media-view="mediaView"/>
|
||||
<x-note :note="note" :key="note.id" @update:note="onNoteUpdated(i, $event)" :media-view="mediaView" :mini="true"/>
|
||||
<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>
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
|
||||
import XNote from './deck.note.vue';
|
||||
import XNote from '../../components/note.vue';
|
||||
|
||||
const displayLimit = 20;
|
||||
|
||||
|
|
@ -220,7 +220,7 @@ export default Vue.extend({
|
|||
display block
|
||||
margin 0
|
||||
line-height 32px
|
||||
font-size 14px
|
||||
font-size 12px
|
||||
text-align center
|
||||
color var(--dateDividerFg)
|
||||
background var(--dateDividerBg)
|
||||
|
|
|
|||
|
|
@ -66,15 +66,15 @@
|
|||
</div>
|
||||
|
||||
<template v-if="notification.type == 'quote'">
|
||||
<x-note :note="notification.note" @update:note="onNoteUpdated"/>
|
||||
<x-note :note="notification.note" @update:note="onNoteUpdated" :mini="true"/>
|
||||
</template>
|
||||
|
||||
<template v-if="notification.type == 'reply'">
|
||||
<x-note :note="notification.note" @update:note="onNoteUpdated"/>
|
||||
<x-note :note="notification.note" @update:note="onNoteUpdated" :mini="true"/>
|
||||
</template>
|
||||
|
||||
<template v-if="notification.type == 'mention'">
|
||||
<x-note :note="notification.note" @update:note="onNoteUpdated"/>
|
||||
<x-note :note="notification.note" @update:note="onNoteUpdated" :mini="true"/>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -82,7 +82,7 @@
|
|||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import getNoteSummary from '../../../../../../misc/get-note-summary';
|
||||
import XNote from './deck.note.vue';
|
||||
import XNote from '../../components/note.vue';
|
||||
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
|
|
|
|||
261
src/client/app/desktop/views/pages/deck/deck.user-column.vue
Normal file
261
src/client/app/desktop/views/pages/deck/deck.user-column.vue
Normal file
|
|
@ -0,0 +1,261 @@
|
|||
<template>
|
||||
<x-column>
|
||||
<span slot="header">
|
||||
%fa:user%<span>{{ title }}</span>
|
||||
</span>
|
||||
|
||||
<div class="zubukjlciycdsyynicqrnlsmdwmymzqu" v-if="user">
|
||||
<div class="is-remote" v-if="user.host != null">%fa:exclamation-triangle% %i18n:@is-remote%<a :href="user.url || user.uri" target="_blank">%i18n:@view-remote%</a></div>
|
||||
<header :style="bannerStyle">
|
||||
<div>
|
||||
<mk-follow-button v-if="$store.getters.isSignedIn && user.id != $store.state.i.id" :user="user" class="follow"/>
|
||||
<mk-avatar class="avatar" :user="user" :disable-preview="true"/>
|
||||
<span class="name">{{ user | userName }}</span>
|
||||
<span class="acct">@{{ user | acct }}</span>
|
||||
</div>
|
||||
</header>
|
||||
<div class="info">
|
||||
<div class="description">
|
||||
<misskey-flavored-markdown v-if="user.description" :text="user.description" :i="$store.state.i"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pinned" v-if="user.pinnedNotes && user.pinnedNotes.length > 0">
|
||||
<p>%fa:thumbtack% %i18n:@pinned-notes%</p>
|
||||
<div class="notes">
|
||||
<x-note v-for="n in user.pinnedNotes" :key="n.id" :note="n" :mini="true"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="images" v-if="images.length > 0">
|
||||
<router-link v-for="image in images" :style="`background-image: url(${image.thumbnailUrl})`" :key="`${image.id}:${image._note.id}`" :to="image._note | notePage"></router-link>
|
||||
</div>
|
||||
<div class="tl">
|
||||
<x-notes ref="timeline" :more="existMore ? fetchMoreNotes : null"/>
|
||||
</div>
|
||||
</div>
|
||||
</x-column>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import parseAcct from '../../../../../../misc/acct/parse';
|
||||
import XColumn from './deck.column.vue';
|
||||
import XNotes from './deck.notes.vue';
|
||||
import XNote from '../../components/note.vue';
|
||||
|
||||
const fetchLimit = 10;
|
||||
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
XColumn,
|
||||
XNotes,
|
||||
XNote
|
||||
},
|
||||
|
||||
props: {
|
||||
acct: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
user: null,
|
||||
fetching: true,
|
||||
existMore: false,
|
||||
moreFetching: false,
|
||||
withFiles: false,
|
||||
images: []
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
title(): string {
|
||||
return this.user ? Vue.filter('userName')(this.user) : '';
|
||||
},
|
||||
|
||||
bannerStyle(): any {
|
||||
if (this.user == null) return {};
|
||||
if (this.user.bannerUrl == null) return {};
|
||||
return {
|
||||
backgroundColor: this.user.bannerColor && this.user.bannerColor.length == 3 ? `rgb(${ this.user.bannerColor.join(',') })` : null,
|
||||
backgroundImage: `url(${ this.user.bannerUrl })`
|
||||
};
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
(this as any).api('users/show', parseAcct(this.acct)).then(user => {
|
||||
this.user = user;
|
||||
this.fetching = false;
|
||||
|
||||
this.$nextTick(() => {
|
||||
(this.$refs.timeline as any).init(() => this.initTl());
|
||||
});
|
||||
|
||||
(this as any).api('users/notes', {
|
||||
userId: this.user.id,
|
||||
withFiles: true,
|
||||
limit: 9
|
||||
}).then(notes => {
|
||||
notes.forEach(note => {
|
||||
note.files.forEach(file => {
|
||||
file._note = note;
|
||||
if (this.images.length < 9) this.images.push(file);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
methods: {
|
||||
initTl() {
|
||||
return new Promise((res, rej) => {
|
||||
(this as any).api('users/notes', {
|
||||
userId: this.user.id,
|
||||
limit: fetchLimit + 1,
|
||||
withFiles: this.withFiles,
|
||||
includeMyRenotes: this.$store.state.settings.showMyRenotes,
|
||||
includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
|
||||
includeLocalRenotes: this.$store.state.settings.showLocalRenotes
|
||||
}).then(notes => {
|
||||
if (notes.length == fetchLimit + 1) {
|
||||
notes.pop();
|
||||
this.existMore = true;
|
||||
}
|
||||
res(notes);
|
||||
}, rej);
|
||||
});
|
||||
},
|
||||
|
||||
fetchMoreNotes() {
|
||||
this.moreFetching = true;
|
||||
|
||||
const promise = (this as any).api('users/notes', {
|
||||
userId: this.user.id,
|
||||
limit: fetchLimit + 1,
|
||||
untilId: (this.$refs.timeline as any).tail().id,
|
||||
withFiles: this.withFiles,
|
||||
includeMyRenotes: this.$store.state.settings.showMyRenotes,
|
||||
includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
|
||||
includeLocalRenotes: this.$store.state.settings.showLocalRenotes
|
||||
});
|
||||
|
||||
promise.then(notes => {
|
||||
if (notes.length == fetchLimit + 1) {
|
||||
notes.pop();
|
||||
} else {
|
||||
this.existMore = false;
|
||||
}
|
||||
notes.forEach(n => (this.$refs.timeline as any).append(n));
|
||||
this.moreFetching = false;
|
||||
});
|
||||
|
||||
return promise;
|
||||
},
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.zubukjlciycdsyynicqrnlsmdwmymzqu
|
||||
background var(--deckUserColumnBg)
|
||||
|
||||
> .is-remote
|
||||
padding 8px 16px
|
||||
font-size 12px
|
||||
|
||||
&.is-remote
|
||||
color var(--remoteInfoFg)
|
||||
background var(--remoteInfoBg)
|
||||
|
||||
> a
|
||||
font-weight bold
|
||||
|
||||
> header
|
||||
overflow hidden
|
||||
background-size cover
|
||||
background-position center
|
||||
|
||||
> div
|
||||
padding 32px
|
||||
background rgba(#000, 0.5)
|
||||
color #fff
|
||||
text-align center
|
||||
|
||||
> .follow
|
||||
position absolute
|
||||
top 16px
|
||||
right 16px
|
||||
|
||||
> .avatar
|
||||
display block
|
||||
width 64px
|
||||
height 64px
|
||||
margin 0 auto
|
||||
|
||||
> .name
|
||||
display block
|
||||
margin-top 8px
|
||||
font-weight bold
|
||||
text-shadow 0 0 8px #000
|
||||
|
||||
> .acct
|
||||
font-size 14px
|
||||
opacity 0.7
|
||||
text-shadow 0 0 8px #000
|
||||
|
||||
> .info
|
||||
padding 16px
|
||||
font-size 14px
|
||||
color var(--text)
|
||||
text-align center
|
||||
background var(--face)
|
||||
border-bottom solid 1px var(--faceDivider)
|
||||
|
||||
&:before
|
||||
content ""
|
||||
display blcok
|
||||
position absolute
|
||||
top -32px
|
||||
left 0
|
||||
right 0
|
||||
width 0px
|
||||
margin 0 auto
|
||||
border-top solid 16px transparent
|
||||
border-left solid 16px transparent
|
||||
border-right solid 16px transparent
|
||||
border-bottom solid 16px var(--face)
|
||||
|
||||
> .pinned
|
||||
padding-bottom 16px
|
||||
background var(--deckUserColumnBg)
|
||||
|
||||
> p
|
||||
margin 0
|
||||
padding 8px 16px
|
||||
font-size 14px
|
||||
color var(--text)
|
||||
|
||||
> .notes
|
||||
background var(--face)
|
||||
|
||||
> .images
|
||||
display grid
|
||||
grid-template-rows 1fr 1fr 1fr
|
||||
grid-template-columns 1fr 1fr 1fr
|
||||
gap 4px
|
||||
height 250px
|
||||
padding 16px
|
||||
margin-bottom 16px
|
||||
background var(--face)
|
||||
|
||||
> *
|
||||
background-position center center
|
||||
background-size cover
|
||||
background-clip content-box
|
||||
|
||||
> .tl
|
||||
background var(--face)
|
||||
|
||||
</style>
|
||||
|
|
@ -9,6 +9,10 @@
|
|||
</div>
|
||||
<x-column-core v-else :ref="ids[0]" :key="ids[0]" :column="columns.find(c => c.id == ids[0])"/>
|
||||
</template>
|
||||
<template v-if="temporaryColumn">
|
||||
<x-user-column v-if="temporaryColumn.type == 'user'" :acct="temporaryColumn.acct" :key="temporaryColumn.acct"/>
|
||||
<x-note-column v-else-if="temporaryColumn.type == 'note'" :note-id="temporaryColumn.noteId" :key="temporaryColumn.noteId"/>
|
||||
</template>
|
||||
<button ref="add" @click="add" title="%i18n:common.deck.add-column%">%fa:plus%</button>
|
||||
</div>
|
||||
</mk-ui>
|
||||
|
|
@ -19,11 +23,16 @@ import Vue from 'vue';
|
|||
import XColumnCore from './deck.column-core.vue';
|
||||
import Menu from '../../../../common/views/components/menu.vue';
|
||||
import MkUserListsWindow from '../../components/user-lists-window.vue';
|
||||
import XUserColumn from './deck.user-column.vue';
|
||||
import XNoteColumn from './deck.note-column.vue';
|
||||
|
||||
import * as uuid from 'uuid';
|
||||
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
XColumnCore
|
||||
XColumnCore,
|
||||
XUserColumn,
|
||||
XNoteColumn
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
|
@ -31,15 +40,21 @@ export default Vue.extend({
|
|||
if (this.$store.state.settings.deck == null) return [];
|
||||
return this.$store.state.settings.deck.columns;
|
||||
},
|
||||
|
||||
layout(): any[] {
|
||||
if (this.$store.state.settings.deck == null) return [];
|
||||
if (this.$store.state.settings.deck.layout == null) return this.$store.state.settings.deck.columns.map(c => [c.id]);
|
||||
return this.$store.state.settings.deck.layout;
|
||||
},
|
||||
|
||||
style(): any {
|
||||
return {
|
||||
height: `calc(100vh - ${this.$store.state.uiHeaderHeight}px)`
|
||||
};
|
||||
},
|
||||
|
||||
temporaryColumn(): any {
|
||||
return this.$store.state.device.deckTemporaryColumn;
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -50,6 +65,8 @@ export default Vue.extend({
|
|||
},
|
||||
|
||||
created() {
|
||||
this.$store.commit('navHook', this.onNav);
|
||||
|
||||
if (this.$store.state.settings.deck == null) {
|
||||
const deck = {
|
||||
columns: [/*{
|
||||
|
|
@ -95,6 +112,8 @@ export default Vue.extend({
|
|||
},
|
||||
|
||||
beforeDestroy() {
|
||||
this.$store.commit('navHook', null);
|
||||
|
||||
document.documentElement.style.overflow = 'auto';
|
||||
},
|
||||
|
||||
|
|
@ -103,6 +122,30 @@ export default Vue.extend({
|
|||
return this.$refs[id][0];
|
||||
},
|
||||
|
||||
onNav(to) {
|
||||
if (!this.$store.state.settings.deckNav) return false;
|
||||
|
||||
if (to.name == 'user') {
|
||||
this.$store.commit('device/set', {
|
||||
key: 'deckTemporaryColumn',
|
||||
value: {
|
||||
type: 'user',
|
||||
acct: to.params.user
|
||||
}
|
||||
});
|
||||
return true;
|
||||
} else if (to.name == 'note') {
|
||||
this.$store.commit('device/set', {
|
||||
key: 'deckTemporaryColumn',
|
||||
value: {
|
||||
type: 'note',
|
||||
noteId: to.params.note
|
||||
}
|
||||
});
|
||||
return true;
|
||||
}
|
||||
},
|
||||
|
||||
add() {
|
||||
this.os.new(Menu, {
|
||||
source: this.$refs.add,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue