From 684662a475685787eb2aa09158bc78a4e80fbf85 Mon Sep 17 00:00:00 2001 From: syuilo <syuilotan@yahoo.co.jp> Date: Sat, 17 Feb 2018 03:01:00 +0900 Subject: [PATCH] wip --- src/web/app/common/views/components/index.ts | 2 + .../app/common/views/components/messaging.vue | 4 +- .../views/components/reactions-viewer.vue | 2 +- .../views/components/stream-indicator.vue | 126 ++++++++++-------- .../views/components/widgets/messaging.vue | 2 +- .../views/components/friends-maker.vue | 2 +- src/web/app/desktop/views/components/index.ts | 2 + .../desktop/views/components/list-user.vue | 2 +- .../views/components/notifications.vue | 2 +- .../views/components/post-detail-sub.vue | 2 +- .../desktop/views/components/post-detail.vue | 2 +- .../desktop/views/components/posts-post.vue | 14 +- .../desktop/views/components/repost-form.vue | 2 +- .../app/desktop/views/components/timeline.vue | 2 +- .../components/ui-header-notifications.vue | 2 +- .../desktop/views/pages/user/user-friends.vue | 2 +- .../desktop/views/pages/user/user-home.vue | 2 +- .../desktop/views/pages/user/user-profile.vue | 2 +- src/web/app/mobile/views/components/drive.vue | 4 +- .../mobile/views/components/friends-maker.vue | 2 +- .../mobile/views/components/notification.vue | 2 +- .../mobile/views/components/notifications.vue | 2 +- .../app/mobile/views/components/post-card.vue | 2 +- .../mobile/views/components/post-detail.vue | 2 +- .../app/mobile/views/components/post-form.vue | 4 +- .../mobile/views/components/posts-post.vue | 8 +- .../app/mobile/views/components/user-card.vue | 2 +- src/web/app/mobile/views/pages/user.vue | 4 +- .../mobile/views/pages/user/home-friends.vue | 2 +- src/web/app/mobile/views/pages/user/home.vue | 2 +- webpack/webpack.config.ts | 3 +- 31 files changed, 119 insertions(+), 94 deletions(-) diff --git a/src/web/app/common/views/components/index.ts b/src/web/app/common/views/components/index.ts index 10d09ce65c..e3f105f586 100644 --- a/src/web/app/common/views/components/index.ts +++ b/src/web/app/common/views/components/index.ts @@ -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); diff --git a/src/web/app/common/views/components/messaging.vue b/src/web/app/common/views/components/messaging.vue index 386e705b01..f45f99b535 100644 --- a/src/web/app/common/views/components/messaging.vue +++ b/src/web/app/common/views/components/messaging.vue @@ -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 diff --git a/src/web/app/common/views/components/reactions-viewer.vue b/src/web/app/common/views/components/reactions-viewer.vue index 696aef3350..f6a27d9139 100644 --- a/src/web/app/common/views/components/reactions-viewer.vue +++ b/src/web/app/common/views/components/reactions-viewer.vue @@ -38,7 +38,7 @@ export default Vue.extend({ > span margin-right 8px - > mk-reaction-icon + > .mk-reaction-icon font-size 1.4em > span diff --git a/src/web/app/common/views/components/stream-indicator.vue b/src/web/app/common/views/components/stream-indicator.vue index 564376bba0..00bd58c1f9 100644 --- a/src/web/app/common/views/components/stream-indicator.vue +++ b/src/web/app/common/views/components/stream-indicator.vue @@ -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> diff --git a/src/web/app/common/views/components/widgets/messaging.vue b/src/web/app/common/views/components/widgets/messaging.vue index 19ef704310..f31acc5c63 100644 --- a/src/web/app/common/views/components/widgets/messaging.vue +++ b/src/web/app/common/views/components/widgets/messaging.vue @@ -52,7 +52,7 @@ export default define({ > [data-fa] margin-right 4px - > mk-messaging + > .mk-messaging max-height 250px overflow auto diff --git a/src/web/app/desktop/views/components/friends-maker.vue b/src/web/app/desktop/views/components/friends-maker.vue index add6c10a35..caa5f4913c 100644 --- a/src/web/app/desktop/views/components/friends-maker.vue +++ b/src/web/app/desktop/views/components/friends-maker.vue @@ -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 diff --git a/src/web/app/desktop/views/components/index.ts b/src/web/app/desktop/views/components/index.ts index 7a7438214e..1e4c2bafcd 100644 --- a/src/web/app/desktop/views/components/index.ts +++ b/src/web/app/desktop/views/components/index.ts @@ -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); diff --git a/src/web/app/desktop/views/components/list-user.vue b/src/web/app/desktop/views/components/list-user.vue index 28304e4755..adaa8f092c 100644 --- a/src/web/app/desktop/views/components/list-user.vue +++ b/src/web/app/desktop/views/components/list-user.vue @@ -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 diff --git a/src/web/app/desktop/views/components/notifications.vue b/src/web/app/desktop/views/components/notifications.vue index d211a933fd..f19766dc84 100644 --- a/src/web/app/desktop/views/components/notifications.vue +++ b/src/web/app/desktop/views/components/notifications.vue @@ -197,7 +197,7 @@ export default Vue.extend({ &:last-child border-bottom none - > mk-time + > .mk-time display inline position absolute top 16px diff --git a/src/web/app/desktop/views/components/post-detail-sub.vue b/src/web/app/desktop/views/components/post-detail-sub.vue index 42f8be3b1c..8d81e6860a 100644 --- a/src/web/app/desktop/views/components/post-detail-sub.vue +++ b/src/web/app/desktop/views/components/post-detail-sub.vue @@ -119,7 +119,7 @@ export default Vue.extend({ font-size 1em color #717171 - > mk-url-preview + > .mk-url-preview margin-top 8px </style> diff --git a/src/web/app/desktop/views/components/post-detail.vue b/src/web/app/desktop/views/components/post-detail.vue index 6c36f06fac..d23043dd40 100644 --- a/src/web/app/desktop/views/components/post-detail.vue +++ b/src/web/app/desktop/views/components/post-detail.vue @@ -280,7 +280,7 @@ export default Vue.extend({ font-size 1.5em color #717171 - > mk-url-preview + > .mk-url-preview margin-top 8px > footer diff --git a/src/web/app/desktop/views/components/posts-post.vue b/src/web/app/desktop/views/components/posts-post.vue index 2a4c39a97b..e611b2513e 100644 --- a/src/web/app/desktop/views/components/posts-post.vue +++ b/src/web/app/desktop/views/components/posts-post.vue @@ -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 diff --git a/src/web/app/desktop/views/components/repost-form.vue b/src/web/app/desktop/views/components/repost-form.vue index 9e9f7174f7..f0e4a2bdfc 100644 --- a/src/web/app/desktop/views/components/repost-form.vue +++ b/src/web/app/desktop/views/components/repost-form.vue @@ -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 diff --git a/src/web/app/desktop/views/components/timeline.vue b/src/web/app/desktop/views/components/timeline.vue index b24e78fe45..63b36ff547 100644 --- a/src/web/app/desktop/views/components/timeline.vue +++ b/src/web/app/desktop/views/components/timeline.vue @@ -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 diff --git a/src/web/app/desktop/views/components/ui-header-notifications.vue b/src/web/app/desktop/views/components/ui-header-notifications.vue index 779ee48864..5ffa28c917 100644 --- a/src/web/app/desktop/views/components/ui-header-notifications.vue +++ b/src/web/app/desktop/views/components/ui-header-notifications.vue @@ -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 diff --git a/src/web/app/desktop/views/pages/user/user-friends.vue b/src/web/app/desktop/views/pages/user/user-friends.vue index eed8748978..15fb7a96ea 100644 --- a/src/web/app/desktop/views/pages/user/user-friends.vue +++ b/src/web/app/desktop/views/pages/user/user-friends.vue @@ -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 diff --git a/src/web/app/desktop/views/pages/user/user-home.vue b/src/web/app/desktop/views/pages/user/user-home.vue index 926a1f571e..dc0a03dabe 100644 --- a/src/web/app/desktop/views/pages/user/user-home.vue +++ b/src/web/app/desktop/views/pages/user/user-home.vue @@ -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 diff --git a/src/web/app/desktop/views/pages/user/user-profile.vue b/src/web/app/desktop/views/pages/user/user-profile.vue index 6b88b47acd..66385ab2ec 100644 --- a/src/web/app/desktop/views/pages/user/user-profile.vue +++ b/src/web/app/desktop/views/pages/user/user-profile.vue @@ -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 diff --git a/src/web/app/mobile/views/components/drive.vue b/src/web/app/mobile/views/components/drive.vue index a3dd959730..c842caacb3 100644 --- a/src/web/app/mobile/views/components/drive.vue +++ b/src/web/app/mobile/views/components/drive.vue @@ -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 diff --git a/src/web/app/mobile/views/components/friends-maker.vue b/src/web/app/mobile/views/components/friends-maker.vue index a7a81aeb72..45ee4a6440 100644 --- a/src/web/app/mobile/views/components/friends-maker.vue +++ b/src/web/app/mobile/views/components/friends-maker.vue @@ -72,7 +72,7 @@ export default Vue.extend({ padding 16px background #eee - > mk-user-card + > .mk-user-card &:not(:last-child) margin-right 16px diff --git a/src/web/app/mobile/views/components/notification.vue b/src/web/app/mobile/views/components/notification.vue index 1b46087240..98390f1c11 100644 --- a/src/web/app/mobile/views/components/notification.vue +++ b/src/web/app/mobile/views/components/notification.vue @@ -120,7 +120,7 @@ export default Vue.extend({ padding 16px overflow-wrap break-word - > mk-time + > .mk-time display inline position absolute top 16px diff --git a/src/web/app/mobile/views/components/notifications.vue b/src/web/app/mobile/views/components/notifications.vue index 3cad1d514a..8813bef5b0 100644 --- a/src/web/app/mobile/views/components/notifications.vue +++ b/src/web/app/mobile/views/components/notifications.vue @@ -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) diff --git a/src/web/app/mobile/views/components/post-card.vue b/src/web/app/mobile/views/components/post-card.vue index 4dd6ceb282..08a2bebfce 100644 --- a/src/web/app/mobile/views/components/post-card.vue +++ b/src/web/app/mobile/views/components/post-card.vue @@ -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 diff --git a/src/web/app/mobile/views/components/post-detail.vue b/src/web/app/mobile/views/components/post-detail.vue index ba28e7be30..da4f3fee76 100644 --- a/src/web/app/mobile/views/components/post-detail.vue +++ b/src/web/app/mobile/views/components/post-detail.vue @@ -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 diff --git a/src/web/app/mobile/views/components/post-form.vue b/src/web/app/mobile/views/components/post-form.vue index 49f6a94d8e..091056bcd3 100644 --- a/src/web/app/mobile/views/components/post-form.vue +++ b/src/web/app/mobile/views/components/post-form.vue @@ -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 diff --git a/src/web/app/mobile/views/components/posts-post.vue b/src/web/app/mobile/views/components/posts-post.vue index 4dd82e6486..56b42d9c22 100644 --- a/src/web/app/mobile/views/components/posts-post.vue +++ b/src/web/app/mobile/views/components/posts-post.vue @@ -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 diff --git a/src/web/app/mobile/views/components/user-card.vue b/src/web/app/mobile/views/components/user-card.vue index f70def48f8..729421616e 100644 --- a/src/web/app/mobile/views/components/user-card.vue +++ b/src/web/app/mobile/views/components/user-card.vue @@ -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 diff --git a/src/web/app/mobile/views/pages/user.vue b/src/web/app/mobile/views/pages/user.vue index 4cc152c1ed..6c784b05f4 100644 --- a/src/web/app/mobile/views/pages/user.vue +++ b/src/web/app/mobile/views/pages/user.vue @@ -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 diff --git a/src/web/app/mobile/views/pages/user/home-friends.vue b/src/web/app/mobile/views/pages/user/home-friends.vue index 2a7e8b9617..7c5a50559d 100644 --- a/src/web/app/mobile/views/pages/user/home-friends.vue +++ b/src/web/app/mobile/views/pages/user/home-friends.vue @@ -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 diff --git a/src/web/app/mobile/views/pages/user/home.vue b/src/web/app/mobile/views/pages/user/home.vue index 56b9285591..a23825f227 100644 --- a/src/web/app/mobile/views/pages/user/home.vue +++ b/src/web/app/mobile/views/pages/user/home.vue @@ -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 diff --git a/webpack/webpack.config.ts b/webpack/webpack.config.ts index 2b66dd7f76..9a85e91896 100644 --- a/webpack/webpack.config.ts +++ b/webpack/webpack.config.ts @@ -119,7 +119,6 @@ module.exports = Object.keys(langs).map(lang => { resolveLoader: { modules: ['node_modules', './webpack/loaders'] }, - cache: true, - devtool: 'eval' + cache: true }; });