natty
/
misskey-awawa
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wip

This commit is contained in:
syuilo 2018-02-17 03:01:00 +09:00
parent 7d377925a0
commit 684662a475
31 changed files with 119 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/web/app/common/views/components/index.ts
View File

@ -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);

4
src/web/app/common/views/components/messaging.vue
View File

@ -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

2
src/web/app/common/views/components/reactions-viewer.vue
View File

@ -38,7 +38,7 @@ export default Vue.extend({
> span
margin-right 8px
> mk-reaction-icon
> .mk-reaction-icon
font-size 1.4em
> span

126
src/web/app/common/views/components/stream-indicator.vue
View File

@ -1,74 +1,92 @@
<template>
<div>
<p v-if=" stream.state == 'initializing' ">
%fa:spinner .pulse%
<span>%i18n:common.tags.mk-stream-indicator.connecting%<mk-ellipsis/></span>
</p>
<p v-if=" stream.state == 'reconnecting' ">
%fa:spinner .pulse%
<span>%i18n:common.tags.mk-stream-indicator.reconnecting%<mk-ellipsis/></span>
</p>
<p v-if=" stream.state == 'connected' ">
%fa:check%
<span>%i18n:common.tags.mk-stream-indicator.connected%</span>
</p>
</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>
</p>
<p v-if=" stream.state == 'reconnecting' ">
%fa:spinner .pulse%
<span>%i18n:common.tags.mk-stream-indicator.reconnecting%<mk-ellipsis/></span>
</p>
<p v-if=" stream.state == 'connected' ">
%fa:check%
<span>%i18n:common.tags.mk-stream-indicator.connected%</span>
</p>
</div>
</template>
<script lang="typescript">
import * as anime from 'animejs';
import Ellipsis from './ellipsis.vue';
<script lang="ts">
import Vue from 'vue';
import * as anime from 'animejs';
export default {
props: ['stream'],
created() {
export default Vue.extend({
data() {
return {
stream: null
};
},
created() {
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.root.style.opacity = 0;
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,
opacity: 0,
easing: 'linear',
duration: 200
});
}, 1000);
});
this.stream.on('_closed_', () => {
setTimeout(() => {
anime({
targets: this.root,
opacity: 1,
targets: this.$el,
opacity: 0,
easing: 'linear',
duration: 100
duration: 200
});
}, 1000);
},
onDisconnected() {
this.stream = null;
anime({
targets: this.$el,
opacity: 1,
easing: 'linear',
duration: 100
});
}
};
}
});
</script>
<style lang="stylus" scoped>
> div
.mk-stream-indicator
pointer-events none
position fixed
z-index 16384
bottom 8px
right 8px
margin 0
padding 6px 12px
font-size 0.9em
color #fff
background rgba(0, 0, 0, 0.8)
border-radius 4px
> p
display block
pointer-events none
position fixed
z-index 16384
bottom 8px
right 8px
margin 0
padding 6px 12px
font-size 0.9em
color #fff
background rgba(0, 0, 0, 0.8)
border-radius 4px
> p
display block
margin 0
> [data-fa]
margin-right 0.25em
> [data-fa]
margin-right 0.25em
</style>

2
src/web/app/common/views/components/widgets/messaging.vue
View File

@ -52,7 +52,7 @@ export default define({
> [data-fa]
margin-right 4px
> mk-messaging
> .mk-messaging
max-height 250px
overflow auto

2
src/web/app/desktop/views/components/friends-maker.vue
View File

@ -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

2
src/web/app/desktop/views/components/index.ts
View File

@ -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);

2
src/web/app/desktop/views/components/list-user.vue
View File

@ -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

2
src/web/app/desktop/views/components/notifications.vue
View File

@ -197,7 +197,7 @@ export default Vue.extend({
&:last-child
border-bottom none
> mk-time
> .mk-time
display inline
position absolute
top 16px

2
src/web/app/desktop/views/components/post-detail-sub.vue
View File

@ -119,7 +119,7 @@ export default Vue.extend({
font-size 1em
color #717171
> mk-url-preview
> .mk-url-preview
margin-top 8px
</style>

2
src/web/app/desktop/views/components/post-detail.vue
View File

@ -280,7 +280,7 @@ export default Vue.extend({
font-size 1.5em
color #717171
> mk-url-preview
> .mk-url-preview
margin-top 8px
> footer

14
src/web/app/desktop/views/components/posts-post.vue
View File

@ -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

2
src/web/app/desktop/views/components/repost-form.vue
View File

@ -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

2
src/web/app/desktop/views/components/timeline.vue
View File

@ -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

2
src/web/app/desktop/views/components/ui-header-notifications.vue
View File

@ -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

2
src/web/app/desktop/views/pages/user/user-friends.vue
View File

@ -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

2
src/web/app/desktop/views/pages/user/user-home.vue
View File

@ -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

2
src/web/app/desktop/views/pages/user/user-profile.vue
View File

@ -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

4
src/web/app/mobile/views/components/drive.vue
View File

@ -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

2
src/web/app/mobile/views/components/friends-maker.vue
View File

@ -72,7 +72,7 @@ export default Vue.extend({
padding 16px
background #eee
> mk-user-card
> .mk-user-card
&:not(:last-child)
margin-right 16px

2
src/web/app/mobile/views/components/notification.vue
View File

@ -120,7 +120,7 @@ export default Vue.extend({
padding 16px
overflow-wrap break-word
> mk-time
> .mk-time
display inline
position absolute
top 16px

2
src/web/app/mobile/views/components/notifications.vue
View File

@ -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)

2
src/web/app/mobile/views/components/post-card.vue
View File

@ -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

2
src/web/app/mobile/views/components/post-detail.vue
View File

@ -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

4
src/web/app/mobile/views/components/post-form.vue
View File

@ -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

8
src/web/app/mobile/views/components/posts-post.vue
View File

@ -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

2
src/web/app/mobile/views/components/user-card.vue
View File

@ -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

4
src/web/app/mobile/views/pages/user.vue
View File

@ -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

2
src/web/app/mobile/views/pages/user/home-friends.vue
View File

@ -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

2
src/web/app/mobile/views/pages/user/home.vue
View File

@ -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

3
webpack/webpack.config.ts
View File

@ -119,7 +119,6 @@ module.exports = Object.keys(langs).map(lang => {
resolveLoader: {
modules: ['node_modules', './webpack/loaders']
},
cache: true,
devtool: 'eval'
cache: true
};
});