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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3
webpack/webpack.config.ts
View File

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