forked from FoundKeyGang/FoundKey
wip
This commit is contained in:
syuilo
parent
7d377925a0
commit
684662a475
31 changed files with 119 additions and 94 deletions
|
|
@ -11,6 +11,7 @@ import time from './time.vue';
|
|||
import images from './images.vue';
|
||||
import uploader from './uploader.vue';
|
||||
import specialMessage from './special-message.vue';
|
||||
import streamIndicator from './stream-indicator.vue';
|
||||
|
||||
Vue.component('mk-signin', signin);
|
||||
Vue.component('mk-signup', signup);
|
||||
|
|
@ -23,3 +24,4 @@ Vue.component('mk-time', time);
|
|||
Vue.component('mk-images', images);
|
||||
Vue.component('mk-uploader', uploader);
|
||||
Vue.component('mk-special-message', specialMessage);
|
||||
Vue.component('mk-stream-indicator', streamIndicator);
|
||||
|
|
|
|||
|
|
@ -180,7 +180,7 @@ export default Vue.extend({
|
|||
padding 16px
|
||||
|
||||
> header
|
||||
> mk-time
|
||||
> .mk-time
|
||||
font-size 1em
|
||||
|
||||
> .avatar
|
||||
|
|
@ -381,7 +381,7 @@ export default Vue.extend({
|
|||
margin 0 0 0 8px
|
||||
color rgba(0, 0, 0, 0.5)
|
||||
|
||||
> mk-time
|
||||
> .mk-time
|
||||
position absolute
|
||||
top 0
|
||||
right 0
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ export default Vue.extend({
|
|||
> span
|
||||
margin-right 8px
|
||||
|
||||
> mk-reaction-icon
|
||||
> .mk-reaction-icon
|
||||
font-size 1.4em
|
||||
|
||||
> span
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="mk-stream-indicator" v-if="stream">
|
||||
<p v-if=" stream.state == 'initializing' ">
|
||||
%fa:spinner .pulse%
|
||||
<span>%i18n:common.tags.mk-stream-indicator.connecting%<mk-ellipsis/></span>
|
||||
|
|
@ -15,43 +15,61 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="typescript">
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import * as anime from 'animejs';
|
||||
import Ellipsis from './ellipsis.vue';
|
||||
|
||||
export default {
|
||||
props: ['stream'],
|
||||
export default Vue.extend({
|
||||
data() {
|
||||
return {
|
||||
stream: null
|
||||
};
|
||||
},
|
||||
created() {
|
||||
if (this.stream.state == 'connected') {
|
||||
this.root.style.opacity = 0;
|
||||
}
|
||||
this.stream = this.$root.$data.os.stream.borrow();
|
||||
|
||||
this.$root.$data.os.stream.on('connected', this.onConnected);
|
||||
this.$root.$data.os.stream.on('disconnected', this.onDisconnected);
|
||||
|
||||
this.$nextTick(() => {
|
||||
if (this.stream.state == 'connected') {
|
||||
this.$el.style.opacity = '0';
|
||||
}
|
||||
});
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.$root.$data.os.stream.off('connected', this.onConnected);
|
||||
this.$root.$data.os.stream.off('disconnected', this.onDisconnected);
|
||||
},
|
||||
methods: {
|
||||
onConnected() {
|
||||
this.stream = this.$root.$data.os.stream.borrow();
|
||||
|
||||
this.stream.on('_connected_', () => {
|
||||
setTimeout(() => {
|
||||
anime({
|
||||
targets: this.root,
|
||||
targets: this.$el,
|
||||
opacity: 0,
|
||||
easing: 'linear',
|
||||
duration: 200
|
||||
});
|
||||
}, 1000);
|
||||
});
|
||||
},
|
||||
onDisconnected() {
|
||||
this.stream = null;
|
||||
|
||||
this.stream.on('_closed_', () => {
|
||||
anime({
|
||||
targets: this.root,
|
||||
targets: this.$el,
|
||||
opacity: 1,
|
||||
easing: 'linear',
|
||||
duration: 100
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
> div
|
||||
display block
|
||||
.mk-stream-indicator
|
||||
pointer-events none
|
||||
position fixed
|
||||
z-index 16384
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@ export default define({
|
|||
> [data-fa]
|
||||
margin-right 4px
|
||||
|
||||
> mk-messaging
|
||||
> .mk-messaging
|
||||
max-height 250px
|
||||
overflow auto
|
||||
|
||||
|
|
|
|||
|
|
@ -114,7 +114,7 @@ export default Vue.extend({
|
|||
line-height 16px
|
||||
color #ccc
|
||||
|
||||
> mk-follow-button
|
||||
> .mk-follow-button
|
||||
position absolute
|
||||
top 16px
|
||||
right 16px
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@ import notifications from './notifications.vue';
|
|||
import postForm from './post-form.vue';
|
||||
import repostForm from './repost-form.vue';
|
||||
import followButton from './follow-button.vue';
|
||||
import postPreview from './post-preview.vue';
|
||||
|
||||
Vue.component('mk-ui', ui);
|
||||
Vue.component('mk-ui-header', uiHeader);
|
||||
|
|
@ -53,3 +54,4 @@ Vue.component('mk-notifications', notifications);
|
|||
Vue.component('mk-post-form', postForm);
|
||||
Vue.component('mk-repost-form', repostForm);
|
||||
Vue.component('mk-follow-button', followButton);
|
||||
Vue.component('mk-post-preview', postPreview);
|
||||
|
|
|
|||
|
|
@ -93,7 +93,7 @@ export default Vue.extend({
|
|||
font-size 1.1em
|
||||
color #717171
|
||||
|
||||
> mk-follow-button
|
||||
> .mk-follow-button
|
||||
position absolute
|
||||
top 16px
|
||||
right 16px
|
||||
|
|
|
|||
|
|
@ -197,7 +197,7 @@ export default Vue.extend({
|
|||
&:last-child
|
||||
border-bottom none
|
||||
|
||||
> mk-time
|
||||
> .mk-time
|
||||
display inline
|
||||
position absolute
|
||||
top 16px
|
||||
|
|
|
|||
|
|
@ -119,7 +119,7 @@ export default Vue.extend({
|
|||
font-size 1em
|
||||
color #717171
|
||||
|
||||
> mk-url-preview
|
||||
> .mk-url-preview
|
||||
margin-top 8px
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -280,7 +280,7 @@ export default Vue.extend({
|
|||
font-size 1.5em
|
||||
color #717171
|
||||
|
||||
> mk-url-preview
|
||||
> .mk-url-preview
|
||||
margin-top 8px
|
||||
|
||||
> footer
|
||||
|
|
|
|||
|
|
@ -178,6 +178,7 @@ export default Vue.extend({
|
|||
},
|
||||
reply() {
|
||||
document.body.appendChild(new MkPostFormWindow({
|
||||
parent: this,
|
||||
propsData: {
|
||||
reply: this.p
|
||||
}
|
||||
|
|
@ -185,6 +186,7 @@ export default Vue.extend({
|
|||
},
|
||||
repost() {
|
||||
document.body.appendChild(new MkRepostFormWindow({
|
||||
parent: this,
|
||||
propsData: {
|
||||
post: this.p
|
||||
}
|
||||
|
|
@ -192,6 +194,7 @@ export default Vue.extend({
|
|||
},
|
||||
react() {
|
||||
document.body.appendChild(new MkReactionPicker({
|
||||
parent: this,
|
||||
propsData: {
|
||||
source: this.$refs.reactButton,
|
||||
post: this.p
|
||||
|
|
@ -200,6 +203,7 @@ export default Vue.extend({
|
|||
},
|
||||
menu() {
|
||||
document.body.appendChild(new MkPostMenu({
|
||||
parent: this,
|
||||
propsData: {
|
||||
source: this.$refs.menuButton,
|
||||
post: this.p
|
||||
|
|
@ -303,7 +307,7 @@ export default Vue.extend({
|
|||
.name
|
||||
font-weight bold
|
||||
|
||||
> mk-time
|
||||
> .mk-time
|
||||
position absolute
|
||||
top 16px
|
||||
right 32px
|
||||
|
|
@ -317,7 +321,7 @@ export default Vue.extend({
|
|||
padding 0 16px
|
||||
background rgba(0, 0, 0, 0.0125)
|
||||
|
||||
> mk-post-preview
|
||||
> .mk-post-preview
|
||||
background transparent
|
||||
|
||||
> article
|
||||
|
|
@ -415,7 +419,7 @@ export default Vue.extend({
|
|||
> .dummy
|
||||
display none
|
||||
|
||||
mk-url-preview
|
||||
.mk-url-preview
|
||||
margin-top 8px
|
||||
|
||||
> .channel
|
||||
|
|
@ -451,7 +455,7 @@ export default Vue.extend({
|
|||
background $theme-color
|
||||
border-radius 4px
|
||||
|
||||
> mk-poll
|
||||
> .mk-poll
|
||||
font-size 80%
|
||||
|
||||
> .repost
|
||||
|
|
@ -466,7 +470,7 @@ export default Vue.extend({
|
|||
font-size 28px
|
||||
background #fff
|
||||
|
||||
> mk-post-preview
|
||||
> .mk-post-preview
|
||||
padding 16px
|
||||
border dashed 1px #c0dac6
|
||||
border-radius 8px
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ export default Vue.extend({
|
|||
<style lang="stylus" scoped>
|
||||
.mk-repost-form
|
||||
|
||||
> mk-post-preview
|
||||
> .mk-post-preview
|
||||
margin 16px 22px
|
||||
|
||||
> div
|
||||
|
|
|
|||
|
|
@ -104,7 +104,7 @@ export default Vue.extend({
|
|||
border solid 1px rgba(0, 0, 0, 0.075)
|
||||
border-radius 6px
|
||||
|
||||
> mk-following-setuper
|
||||
> .mk-following-setuper
|
||||
border-bottom solid 1px #eee
|
||||
|
||||
> .loading
|
||||
|
|
|
|||
|
|
@ -148,7 +148,7 @@ export default Vue.extend({
|
|||
border-bottom solid 14px #fff
|
||||
border-left solid 14px transparent
|
||||
|
||||
> mk-notifications
|
||||
> .mk-notifications
|
||||
max-height 350px
|
||||
font-size 1rem
|
||||
overflow auto
|
||||
|
|
|
|||
|
|
@ -109,7 +109,7 @@ export default Vue.extend({
|
|||
line-height 16px
|
||||
color #ccc
|
||||
|
||||
> mk-follow-button
|
||||
> .mk-follow-button
|
||||
position absolute
|
||||
top 16px
|
||||
right 16px
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ export default Vue.extend({
|
|||
padding 16px
|
||||
width calc(100% - 275px * 2)
|
||||
|
||||
> mk-user-timeline
|
||||
> .mk-user-timeline
|
||||
border solid 1px rgba(0, 0, 0, 0.075)
|
||||
border-radius 6px
|
||||
|
||||
|
|
|
|||
|
|
@ -87,7 +87,7 @@ export default Vue.extend({
|
|||
padding 16px
|
||||
border-top solid 1px #eee
|
||||
|
||||
> mk-big-follow-button
|
||||
> .mk-big-follow-button
|
||||
width 100%
|
||||
|
||||
> .followed
|
||||
|
|
|
|||
|
|
@ -509,11 +509,11 @@ export default Vue.extend({
|
|||
color #777
|
||||
|
||||
> .folders
|
||||
> mk-drive-folder
|
||||
> .mk-drive-folder
|
||||
border-bottom solid 1px #eee
|
||||
|
||||
> .files
|
||||
> mk-drive-file
|
||||
> .mk-drive-file
|
||||
border-bottom solid 1px #eee
|
||||
|
||||
> .more
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@ export default Vue.extend({
|
|||
padding 16px
|
||||
background #eee
|
||||
|
||||
> mk-user-card
|
||||
> .mk-user-card
|
||||
&:not(:last-child)
|
||||
margin-right 16px
|
||||
|
||||
|
|
|
|||
|
|
@ -120,7 +120,7 @@ export default Vue.extend({
|
|||
padding 16px
|
||||
overflow-wrap break-word
|
||||
|
||||
> mk-time
|
||||
> .mk-time
|
||||
display inline
|
||||
position absolute
|
||||
top 16px
|
||||
|
|
|
|||
|
|
@ -114,7 +114,7 @@ export default Vue.extend({
|
|||
|
||||
> .notifications
|
||||
|
||||
> mk-notification
|
||||
> .mk-notification
|
||||
margin 0 auto
|
||||
max-width 500px
|
||||
border-bottom solid 1px rgba(0, 0, 0, 0.05)
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@ export default Vue.extend({
|
|||
height 20px
|
||||
background linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 100%)
|
||||
|
||||
> mk-time
|
||||
> .mk-time
|
||||
display inline-block
|
||||
padding 8px
|
||||
color #aaa
|
||||
|
|
|
|||
|
|
@ -285,7 +285,7 @@ export default Vue.extend({
|
|||
@media (min-width 500px)
|
||||
font-size 24px
|
||||
|
||||
> mk-url-preview
|
||||
> .mk-url-preview
|
||||
margin-top 8px
|
||||
|
||||
> .media
|
||||
|
|
|
|||
|
|
@ -130,7 +130,7 @@ export default Vue.extend({
|
|||
max-width 500px
|
||||
margin 0 auto
|
||||
|
||||
> mk-post-preview
|
||||
> .mk-post-preview
|
||||
padding 16px
|
||||
|
||||
> .attaches
|
||||
|
|
@ -159,7 +159,7 @@ export default Vue.extend({
|
|||
background-size cover
|
||||
background-position center center
|
||||
|
||||
> mk-uploader
|
||||
> .mk-uploader
|
||||
margin 8px 0 0 0
|
||||
padding 8px
|
||||
|
||||
|
|
|
|||
|
|
@ -201,7 +201,7 @@ export default Vue.extend({
|
|||
.name
|
||||
font-weight bold
|
||||
|
||||
> mk-time
|
||||
> .mk-time
|
||||
position absolute
|
||||
top 8px
|
||||
right 16px
|
||||
|
|
@ -217,7 +217,7 @@ export default Vue.extend({
|
|||
> .reply-to
|
||||
background rgba(0, 0, 0, 0.0125)
|
||||
|
||||
> mk-post-preview
|
||||
> .mk-post-preview
|
||||
background transparent
|
||||
|
||||
> article
|
||||
|
|
@ -359,7 +359,7 @@ export default Vue.extend({
|
|||
font-size 12px
|
||||
color #ccc
|
||||
|
||||
> mk-poll
|
||||
> .mk-poll
|
||||
font-size 80%
|
||||
|
||||
> .repost
|
||||
|
|
@ -374,7 +374,7 @@ export default Vue.extend({
|
|||
font-size 28px
|
||||
background #fff
|
||||
|
||||
> mk-post-preview
|
||||
> .mk-post-preview
|
||||
padding 16px
|
||||
border dashed 1px #c0dac6
|
||||
border-radius 8px
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ export default Vue.extend({
|
|||
font-size 15px
|
||||
color #ccc
|
||||
|
||||
> mk-follow-button
|
||||
> .mk-follow-button
|
||||
display inline-block
|
||||
margin 8px 0 16px 0
|
||||
|
||||
|
|
|
|||
|
|
@ -141,7 +141,7 @@ export default Vue.extend({
|
|||
border 4px solid #313a42
|
||||
border-radius 12px
|
||||
|
||||
> mk-follow-button
|
||||
> .mk-follow-button
|
||||
float right
|
||||
height 40px
|
||||
|
||||
|
|
@ -199,7 +199,7 @@ export default Vue.extend({
|
|||
> i
|
||||
font-size 14px
|
||||
|
||||
> mk-activity-table
|
||||
> .mk-activity-table
|
||||
margin 12px 0 0 0
|
||||
|
||||
> nav
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ export default Vue.extend({
|
|||
white-space nowrap
|
||||
padding 8px
|
||||
|
||||
> mk-user-card
|
||||
> .mk-user-card
|
||||
&:not(:last-child)
|
||||
margin-right 8px
|
||||
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ export default Vue.extend({
|
|||
max-width 600px
|
||||
margin 0 auto
|
||||
|
||||
> mk-post-detail
|
||||
> .mk-post-detail
|
||||
margin 0 0 8px 0
|
||||
|
||||
> section
|
||||
|
|
|
|||
|
|
@ -119,7 +119,6 @@ module.exports = Object.keys(langs).map(lang => {
|
|||
resolveLoader: {
|
||||
modules: ['node_modules', './webpack/loaders']
|
||||
},
|
||||
cache: true,
|
||||
devtool: 'eval'
|
||||
cache: true
|
||||
};
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue