From 7a97924d013ad0fbea6c4b20a478651320c836a0 Mon Sep 17 00:00:00 2001 From: syuilo Date: Thu, 22 Feb 2018 07:06:47 +0900 Subject: [PATCH] wip --- src/web/app/common/views/components/index.ts | 2 + .../views/components/messaging-room.vue | 4 +- .../app/common/views/components/post-menu.vue | 59 ++++----- .../desktop/views/components/posts.post.vue | 5 +- .../views/components/drive-file-chooser.vue | 4 +- .../mobile/views/components/drive.folder.vue | 4 +- src/web/app/mobile/views/components/drive.vue | 25 ++-- src/web/app/mobile/views/components/index.ts | 2 + .../app/mobile/views/components/post-form.vue | 73 +++++++---- .../views/components/posts-post-sub.vue | 117 ------------------ .../views/components/posts.post.sub.vue | 108 ++++++++++++++++ .../mobile/views/components/posts.post.vue | 34 +++++ .../app/mobile/views/components/timeline.vue | 2 +- .../app/mobile/views/components/ui.header.vue | 1 - .../app/mobile/views/components/ui.nav.vue | 20 +-- 15 files changed, 265 insertions(+), 195 deletions(-) delete mode 100644 src/web/app/mobile/views/components/posts-post-sub.vue create mode 100644 src/web/app/mobile/views/components/posts.post.sub.vue diff --git a/src/web/app/common/views/components/index.ts b/src/web/app/common/views/components/index.ts index bde313910e..d3f6a425f1 100644 --- a/src/web/app/common/views/components/index.ts +++ b/src/web/app/common/views/components/index.ts @@ -18,6 +18,7 @@ import messaging from './messaging.vue'; import messagingRoom from './messaging-room.vue'; import urlPreview from './url-preview.vue'; import twitterSetting from './twitter-setting.vue'; +import fileTypeIcon from './file-type-icon.vue'; Vue.component('mk-signin', signin); Vue.component('mk-signup', signup); @@ -37,3 +38,4 @@ Vue.component('mk-messaging', messaging); Vue.component('mk-messaging-room', messagingRoom); Vue.component('mk-url-preview', urlPreview); Vue.component('mk-twitter-setting', twitterSetting); +Vue.component('mk-file-type-icon', fileTypeIcon); diff --git a/src/web/app/common/views/components/messaging-room.vue b/src/web/app/common/views/components/messaging-room.vue index 5022655a25..cfb1e23acf 100644 --- a/src/web/app/common/views/components/messaging-room.vue +++ b/src/web/app/common/views/components/messaging-room.vue @@ -15,7 +15,7 @@ @@ -278,7 +278,7 @@ export default Vue.extend({ background rgba(255, 255, 255, 0.95) background-clip content-box - > [ref='notifications'] + > .notifications position absolute top -48px width 100% diff --git a/src/web/app/common/views/components/post-menu.vue b/src/web/app/common/views/components/post-menu.vue index e14d67fc8d..a53680e55a 100644 --- a/src/web/app/common/views/components/post-menu.vue +++ b/src/web/app/common/views/components/post-menu.vue @@ -1,8 +1,8 @@ @@ -14,36 +14,38 @@ import * as anime from 'animejs'; export default Vue.extend({ props: ['post', 'source', 'compact'], mounted() { - const popover = this.$refs.popover as any; + this.$nextTick(() => { + const popover = this.$refs.popover as any; - const rect = this.source.getBoundingClientRect(); - const width = popover.offsetWidth; - const height = popover.offsetHeight; + const rect = this.source.getBoundingClientRect(); + const width = popover.offsetWidth; + const height = popover.offsetHeight; - if (this.compact) { - const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2); - const y = rect.top + window.pageYOffset + (this.source.offsetHeight / 2); - popover.style.left = (x - (width / 2)) + 'px'; - popover.style.top = (y - (height / 2)) + 'px'; - } else { - const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2); - const y = rect.top + window.pageYOffset + this.source.offsetHeight; - popover.style.left = (x - (width / 2)) + 'px'; - popover.style.top = y + 'px'; - } + if (this.compact) { + const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2); + const y = rect.top + window.pageYOffset + (this.source.offsetHeight / 2); + popover.style.left = (x - (width / 2)) + 'px'; + popover.style.top = (y - (height / 2)) + 'px'; + } else { + const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2); + const y = rect.top + window.pageYOffset + this.source.offsetHeight; + popover.style.left = (x - (width / 2)) + 'px'; + popover.style.top = y + 'px'; + } - anime({ - targets: this.$refs.backdrop, - opacity: 1, - duration: 100, - easing: 'linear' - }); + anime({ + targets: this.$refs.backdrop, + opacity: 1, + duration: 100, + easing: 'linear' + }); - anime({ - targets: this.$refs.popover, - opacity: 1, - scale: [0.5, 1], - duration: 500 + anime({ + targets: this.$refs.popover, + opacity: 1, + scale: [0.5, 1], + duration: 500 + }); }); }, methods: { @@ -134,5 +136,6 @@ $border-color = rgba(27, 31, 35, 0.15) > button display block + padding 16px diff --git a/src/web/app/desktop/views/components/posts.post.vue b/src/web/app/desktop/views/components/posts.post.vue index 92218ead35..c757cbc7f2 100644 --- a/src/web/app/desktop/views/components/posts.post.vue +++ b/src/web/app/desktop/views/components/posts.post.vue @@ -8,7 +8,10 @@ avatar - %fa:retweet%{{'%i18n:desktop.tags.mk-timeline-post.reposted-by%'.substr(0, '%i18n:desktop.tags.mk-timeline-post.reposted-by%'.indexOf('{'))}}{{ post.user.name }}{{'%i18n:desktop.tags.mk-timeline-post.reposted-by%'.substr('%i18n:desktop.tags.mk-timeline-post.reposted-by%'.indexOf('}') + 1)}} + %fa:retweet% + {{ '%i18n:desktop.tags.mk-timeline-post.reposted-by%'.substr(0, '%i18n:desktop.tags.mk-timeline-post.reposted-by%'.indexOf('{')) }} + {{ post.user.name }} + {{ '%i18n:desktop.tags.mk-timeline-post.reposted-by%'.substr('%i18n:desktop.tags.mk-timeline-post.reposted-by%'.indexOf('}') + 1) }}

diff --git a/src/web/app/mobile/views/components/drive-file-chooser.vue b/src/web/app/mobile/views/components/drive-file-chooser.vue index 6f1d25f636..6806af0f1e 100644 --- a/src/web/app/mobile/views/components/drive-file-chooser.vue +++ b/src/web/app/mobile/views/components/drive-file-chooser.vue @@ -4,10 +4,10 @@

%i18n:mobile.tags.mk-drive-selector.select-file%({{ files.length }})

- +
- +

%fa:folder%{{ folder.name }}

%fa:angle-right%
@@ -24,7 +24,7 @@ export default Vue.extend({ diff --git a/src/web/app/mobile/views/components/index.ts b/src/web/app/mobile/views/components/index.ts index c90275d686..715e291a77 100644 --- a/src/web/app/mobile/views/components/index.ts +++ b/src/web/app/mobile/views/components/index.ts @@ -5,9 +5,11 @@ import home from './home.vue'; import timeline from './timeline.vue'; import posts from './posts.vue'; import imagesImage from './images-image.vue'; +import drive from './drive.vue'; Vue.component('mk-ui', ui); Vue.component('mk-home', home); Vue.component('mk-timeline', timeline); Vue.component('mk-posts', posts); Vue.component('mk-images-image', imagesImage); +Vue.component('mk-drive', drive); diff --git a/src/web/app/mobile/views/components/post-form.vue b/src/web/app/mobile/views/components/post-form.vue index bba6692295..3e8206c92c 100644 --- a/src/web/app/mobile/views/components/post-form.vue +++ b/src/web/app/mobile/views/components/post-form.vue @@ -3,37 +3,40 @@
- {{ 1000 - refs.text.value.length }} - + {{ 1000 - text.length }} +
- +
-
    -
  • -
    -
  • -
+ +
+
+
+
- - - + + + - - + +
- - - - diff --git a/src/web/app/mobile/views/components/posts.post.sub.vue b/src/web/app/mobile/views/components/posts.post.sub.vue new file mode 100644 index 0000000000..5bb6444a6c --- /dev/null +++ b/src/web/app/mobile/views/components/posts.post.sub.vue @@ -0,0 +1,108 @@ + + + + + + diff --git a/src/web/app/mobile/views/components/posts.post.vue b/src/web/app/mobile/views/components/posts.post.vue index 225a530b5d..9a7d633d44 100644 --- a/src/web/app/mobile/views/components/posts.post.vue +++ b/src/web/app/mobile/views/components/posts.post.vue @@ -69,8 +69,14 @@ diff --git a/src/web/app/mobile/views/components/timeline.vue b/src/web/app/mobile/views/components/timeline.vue index 80fda75605..13f5973605 100644 --- a/src/web/app/mobile/views/components/timeline.vue +++ b/src/web/app/mobile/views/components/timeline.vue @@ -9,7 +9,7 @@ %fa:R comments% %i18n:mobile.tags.mk-home-timeline.empty-timeline% - diff --git a/src/web/app/mobile/views/components/ui.header.vue b/src/web/app/mobile/views/components/ui.header.vue index b9b7b47717..2df5ea162e 100644 --- a/src/web/app/mobile/views/components/ui.header.vue +++ b/src/web/app/mobile/views/components/ui.header.vue @@ -24,7 +24,6 @@ export default Vue.extend({ props: ['func'], data() { return { - func: null, hasUnreadNotifications: false, hasUnreadMessagingMessages: false, connection: null, diff --git a/src/web/app/mobile/views/components/ui.nav.vue b/src/web/app/mobile/views/components/ui.nav.vue index 3796b2765b..5ca7e2e94d 100644 --- a/src/web/app/mobile/views/components/ui.nav.vue +++ b/src/web/app/mobile/views/components/ui.nav.vue @@ -1,6 +1,6 @@