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