Clean up
This commit is contained in:
syuilo
parent
ddad9da1c1
commit
e6eb1b2ae1
36 changed files with 5 additions and 1626 deletions
|
|
@ -21,8 +21,6 @@
|
|||
<option value="polls">%i18n:@polls%</option>
|
||||
<option value="post-form">%i18n:@post-form%</option>
|
||||
<option value="messaging">%i18n:@messaging%</option>
|
||||
<option value="channel">%i18n:@channel%</option>
|
||||
<option value="access-log">%i18n:@access-log%</option>
|
||||
<option value="server">%i18n:@server%</option>
|
||||
<option value="donation">%i18n:@donation%</option>
|
||||
<option value="nav">%i18n:@nav%</option>
|
||||
|
|
|
|||
|
|
@ -1,125 +0,0 @@
|
|||
<template>
|
||||
<div class="mk-mentions">
|
||||
<header>
|
||||
<span :data-active="mode == 'all'" @click="mode = 'all'">%i18n:@all%</span>
|
||||
<span :data-active="mode == 'following'" @click="mode = 'following'">%i18n:@followed%</span>
|
||||
</header>
|
||||
<div class="fetching" v-if="fetching">
|
||||
<mk-ellipsis-icon/>
|
||||
</div>
|
||||
<p class="empty" v-if="notes.length == 0 && !fetching">
|
||||
%fa:R comments%
|
||||
<span v-if="mode == 'all'">%i18n:@empty%</span>
|
||||
<span v-if="mode == 'following'">%i18n:@empty-followed%</span>
|
||||
</p>
|
||||
<mk-notes :notes="notes" ref="timeline"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
export default Vue.extend({
|
||||
data() {
|
||||
return {
|
||||
fetching: true,
|
||||
moreFetching: false,
|
||||
mode: 'all',
|
||||
notes: []
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
mode() {
|
||||
this.fetch();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
document.addEventListener('keydown', this.onDocumentKeydown);
|
||||
window.addEventListener('scroll', this.onScroll);
|
||||
|
||||
this.fetch(() => this.$emit('loaded'));
|
||||
},
|
||||
beforeDestroy() {
|
||||
document.removeEventListener('keydown', this.onDocumentKeydown);
|
||||
window.removeEventListener('scroll', this.onScroll);
|
||||
},
|
||||
methods: {
|
||||
onDocumentKeydown(e) {
|
||||
if (e.target.tagName != 'INPUT' && e.target.tagName != 'TEXTAREA') {
|
||||
if (e.which == 84) { // t
|
||||
(this.$refs.timeline as any).focus();
|
||||
}
|
||||
}
|
||||
},
|
||||
onScroll() {
|
||||
const current = window.scrollY + window.innerHeight;
|
||||
if (current > document.body.offsetHeight - 8) this.more();
|
||||
},
|
||||
fetch(cb?) {
|
||||
this.fetching = true;
|
||||
this.notes = [];
|
||||
(this as any).api('notes/mentions', {
|
||||
following: this.mode == 'following'
|
||||
}).then(notes => {
|
||||
this.notes = notes;
|
||||
this.fetching = false;
|
||||
if (cb) cb();
|
||||
});
|
||||
},
|
||||
more() {
|
||||
if (this.moreFetching || this.fetching || this.notes.length == 0) return;
|
||||
this.moreFetching = true;
|
||||
(this as any).api('notes/mentions', {
|
||||
following: this.mode == 'following',
|
||||
untilId: this.notes[this.notes.length - 1].id
|
||||
}).then(notes => {
|
||||
this.notes = this.notes.concat(notes);
|
||||
this.moreFetching = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
.mk-mentions
|
||||
background #fff
|
||||
border solid 1px rgba(#000, 0.075)
|
||||
border-radius 6px
|
||||
|
||||
> header
|
||||
padding 8px 16px
|
||||
border-bottom solid 1px #eee
|
||||
|
||||
> span
|
||||
margin-right 16px
|
||||
line-height 27px
|
||||
font-size 18px
|
||||
color #555
|
||||
|
||||
&:not([data-active])
|
||||
color $theme-color
|
||||
cursor pointer
|
||||
|
||||
&:hover
|
||||
text-decoration underline
|
||||
|
||||
> .fetching
|
||||
padding 64px 0
|
||||
|
||||
> .empty
|
||||
display block
|
||||
margin 0 auto
|
||||
padding 32px
|
||||
max-width 400px
|
||||
text-align center
|
||||
color #999
|
||||
|
||||
> [data-fa]
|
||||
display block
|
||||
margin-bottom 16px
|
||||
font-size 3em
|
||||
color #ccc
|
||||
|
||||
</style>
|
||||
|
|
@ -33,9 +33,6 @@
|
|||
</div>
|
||||
</header>
|
||||
<div class="body">
|
||||
<p class="channel" v-if="p.channel">
|
||||
<a :href="`${_CH_URL_}/${p.channel.id}`" target="_blank">{{ p.channel.title }}</a>:
|
||||
</p>
|
||||
<p v-if="p.cw != null" class="cw">
|
||||
<span class="text" v-if="p.cw != ''">{{ p.cw }}</span>
|
||||
<span class="toggle" @click="showContent = !showContent">{{ showContent ? '隠す' : 'もっと見る' }}</span>
|
||||
|
|
@ -574,9 +571,6 @@ root(isDark)
|
|||
.mk-url-preview
|
||||
margin-top 8px
|
||||
|
||||
> .channel
|
||||
margin 0
|
||||
|
||||
> .mk-poll
|
||||
font-size 80%
|
||||
|
||||
|
|
|
|||
|
|
@ -1,67 +0,0 @@
|
|||
<template>
|
||||
<div class="form">
|
||||
<input v-model="text" :disabled="wait" @keydown="onKeydown" placeholder="書いて">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
export default Vue.extend({
|
||||
data() {
|
||||
return {
|
||||
text: '',
|
||||
wait: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onKeydown(e) {
|
||||
if (e.which == 10 || e.which == 13) this.post();
|
||||
},
|
||||
post() {
|
||||
this.wait = true;
|
||||
|
||||
let reply = null;
|
||||
|
||||
if (/^>>([0-9]+) /.test(this.text)) {
|
||||
const index = this.text.match(/^>>([0-9]+) /)[1];
|
||||
reply = (this.$parent as any).notes.find(p => p.index.toString() == index);
|
||||
this.text = this.text.replace(/^>>([0-9]+) /, '');
|
||||
}
|
||||
|
||||
(this as any).api('notes/create', {
|
||||
text: this.text,
|
||||
replyId: reply ? reply.id : undefined,
|
||||
channelId: (this.$parent as any).channel.id
|
||||
}).then(data => {
|
||||
this.text = '';
|
||||
}).catch(err => {
|
||||
alert('失敗した');
|
||||
}).then(() => {
|
||||
this.wait = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.form
|
||||
width 100%
|
||||
height 38px
|
||||
padding 4px
|
||||
border-top solid 1px #ddd
|
||||
|
||||
> input
|
||||
padding 0 8px
|
||||
width 100%
|
||||
height 100%
|
||||
font-size 14px
|
||||
color #55595c
|
||||
border solid 1px #dadada
|
||||
border-radius 4px
|
||||
|
||||
&:hover
|
||||
&:focus
|
||||
border-color #aeaeae
|
||||
|
||||
</style>
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
<template>
|
||||
<div class="note">
|
||||
<header>
|
||||
<a class="index" @click="reply">{{ note.index }}:</a>
|
||||
<router-link class="name" :to="note.user | userPage" v-user-preview="note.user.id"><b>{{ note.user | userName }}</b></router-link>
|
||||
<span>ID:<i>{{ note.user | acct }}</i></span>
|
||||
</header>
|
||||
<div>
|
||||
<a v-if="note.reply">>>{{ note.reply.index }}</a>
|
||||
{{ note.text }}
|
||||
<div class="media" v-if="note.media">
|
||||
<a v-for="file in note.media" :href="file.url" target="_blank">
|
||||
<img :src="`${file.url}?thumbnail&size=512`" :alt="file.name" :title="file.name"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
|
||||
export default Vue.extend({
|
||||
props: ['note'],
|
||||
methods: {
|
||||
reply() {
|
||||
this.$emit('reply', this.note);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.note
|
||||
margin 0
|
||||
padding 0
|
||||
color #444
|
||||
|
||||
> header
|
||||
position -webkit-sticky
|
||||
position sticky
|
||||
z-index 1
|
||||
top 0
|
||||
padding 8px 4px 4px 16px
|
||||
background rgba(255, 255, 255, 0.9)
|
||||
|
||||
> .index
|
||||
margin-right 0.25em
|
||||
|
||||
> .name
|
||||
margin-right 0.5em
|
||||
color #008000
|
||||
|
||||
> div
|
||||
padding 0 16px 16px 16px
|
||||
|
||||
> .media
|
||||
> a
|
||||
display inline-block
|
||||
|
||||
> img
|
||||
max-width 100%
|
||||
vertical-align bottom
|
||||
|
||||
</style>
|
||||
|
|
@ -1,106 +0,0 @@
|
|||
<template>
|
||||
<div class="channel">
|
||||
<p v-if="fetching">読み込み中<mk-ellipsis/></p>
|
||||
<div v-if="!fetching" ref="notes" class="notes">
|
||||
<p v-if="notes.length == 0">まだ投稿がありません</p>
|
||||
<x-note class="note" v-for="note in notes.slice().reverse()" :note="note" :key="note.id" @reply="reply"/>
|
||||
</div>
|
||||
<x-form class="form" ref="form"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import ChannelStream from '../../../common/scripts/streaming/channel';
|
||||
import XForm from './channel.channel.form.vue';
|
||||
import XNote from './channel.channel.note.vue';
|
||||
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
XForm,
|
||||
XNote
|
||||
},
|
||||
props: ['channel'],
|
||||
data() {
|
||||
return {
|
||||
fetching: true,
|
||||
notes: [],
|
||||
connection: null
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
channel() {
|
||||
this.zap();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.zap();
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.disconnect();
|
||||
},
|
||||
methods: {
|
||||
zap() {
|
||||
this.fetching = true;
|
||||
|
||||
(this as any).api('channels/notes', {
|
||||
channelId: this.channel.id
|
||||
}).then(notes => {
|
||||
this.notes = notes;
|
||||
this.fetching = false;
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.scrollToBottom();
|
||||
});
|
||||
|
||||
this.disconnect();
|
||||
this.connection = new ChannelStream((this as any).os, this.channel.id);
|
||||
this.connection.on('note', this.onNote);
|
||||
});
|
||||
},
|
||||
disconnect() {
|
||||
if (this.connection) {
|
||||
this.connection.off('note', this.onNote);
|
||||
this.connection.close();
|
||||
}
|
||||
},
|
||||
onNote(note) {
|
||||
this.notes.unshift(note);
|
||||
this.scrollToBottom();
|
||||
},
|
||||
scrollToBottom() {
|
||||
(this.$refs.notes as any).scrollTop = (this.$refs.notes as any).scrollHeight;
|
||||
},
|
||||
reply(note) {
|
||||
(this.$refs.form as any).text = `>>${ note.index } `;
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.channel
|
||||
|
||||
> p
|
||||
margin 0
|
||||
padding 16px
|
||||
text-align center
|
||||
color #aaa
|
||||
|
||||
> .notes
|
||||
height calc(100% - 38px)
|
||||
overflow auto
|
||||
font-size 0.9em
|
||||
|
||||
> .note
|
||||
border-bottom solid 1px #eee
|
||||
|
||||
&:last-child
|
||||
border-bottom none
|
||||
|
||||
> .form
|
||||
position absolute
|
||||
left 0
|
||||
bottom 0
|
||||
|
||||
</style>
|
||||
|
|
@ -1,108 +0,0 @@
|
|||
<template>
|
||||
<div class="mkw-channel">
|
||||
<template v-if="!props.compact">
|
||||
<p class="title">%fa:tv%{{ channel ? channel.title : '%i18n:!@title%' }}</p>
|
||||
<button @click="settings" title="%i18n:@settings%">%fa:cog%</button>
|
||||
</template>
|
||||
<p class="get-started" v-if="props.channel == null">%i18n:@get-started%</p>
|
||||
<x-channel class="channel" :channel="channel" v-if="channel != null"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import define from '../../../common/define-widget';
|
||||
import XChannel from './channel.channel.vue';
|
||||
|
||||
export default define({
|
||||
name: 'server',
|
||||
props: () => ({
|
||||
channel: null,
|
||||
compact: false
|
||||
})
|
||||
}).extend({
|
||||
components: {
|
||||
XChannel
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fetching: true,
|
||||
channel: null
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
if (this.props.channel) {
|
||||
this.zap();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
func() {
|
||||
this.props.compact = !this.props.compact;
|
||||
this.save();
|
||||
},
|
||||
settings() {
|
||||
const id = window.prompt('チャンネルID');
|
||||
if (!id) return;
|
||||
this.props.channel = id;
|
||||
this.zap();
|
||||
},
|
||||
zap() {
|
||||
this.fetching = true;
|
||||
|
||||
(this as any).api('channels/show', {
|
||||
channelId: this.props.channel
|
||||
}).then(channel => {
|
||||
this.channel = channel;
|
||||
this.fetching = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.mkw-channel
|
||||
background #fff
|
||||
border solid 1px rgba(#000, 0.075)
|
||||
border-radius 6px
|
||||
overflow hidden
|
||||
|
||||
> .title
|
||||
z-index 2
|
||||
margin 0
|
||||
padding 0 16px
|
||||
line-height 42px
|
||||
font-size 0.9em
|
||||
font-weight bold
|
||||
color #888
|
||||
box-shadow 0 1px rgba(#000, 0.07)
|
||||
|
||||
> [data-fa]
|
||||
margin-right 4px
|
||||
|
||||
> button
|
||||
position absolute
|
||||
z-index 2
|
||||
top 0
|
||||
right 0
|
||||
padding 0
|
||||
width 42px
|
||||
font-size 0.9em
|
||||
line-height 42px
|
||||
color #ccc
|
||||
|
||||
&:hover
|
||||
color #aaa
|
||||
|
||||
&:active
|
||||
color #999
|
||||
|
||||
> .get-started
|
||||
margin 0
|
||||
padding 16px
|
||||
text-align center
|
||||
color #aaa
|
||||
|
||||
> .channel
|
||||
height 200px
|
||||
|
||||
</style>
|
||||
|
|
@ -8,7 +8,6 @@ import wUsers from './users.vue';
|
|||
import wPolls from './polls.vue';
|
||||
import wPostForm from './post-form.vue';
|
||||
import wMessaging from './messaging.vue';
|
||||
import wChannel from './channel.vue';
|
||||
import wProfile from './profile.vue';
|
||||
|
||||
Vue.component('mkw-notifications', wNotifications);
|
||||
|
|
@ -19,5 +18,4 @@ Vue.component('mkw-users', wUsers);
|
|||
Vue.component('mkw-polls', wPolls);
|
||||
Vue.component('mkw-post-form', wPostForm);
|
||||
Vue.component('mkw-messaging', wMessaging);
|
||||
Vue.component('mkw-channel', wChannel);
|
||||
Vue.component('mkw-profile', wProfile);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue