From e8affdc730b39ba749f14cd7db05dfd68343e767 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 13 Feb 2018 09:27:57 +0900
Subject: [PATCH] wip
---
.../app/common/views/components/post-menu.vue | 2 +-
.../views/components/reaction-picker.vue | 2 +-
.../views/components/stream-indicator.vue | 2 +-
src/web/app/desktop/-tags/contextmenu.tag | 2 +-
.../desktop/-tags/detailed-post-window.tag | 2 +-
src/web/app/desktop/-tags/dialog.tag | 2 +-
src/web/app/desktop/-tags/drive/file.tag | 2 +-
.../desktop/-tags/home-widgets/slideshow.tag | 2 +-
.../app/desktop/-tags/home-widgets/tips.tag | 2 +-
src/web/app/desktop/-tags/user-preview.tag | 2 +-
.../views/components/images-image-dialog.vue | 2 +-
.../desktop/views/components/images-image.vue | 14 ++---
.../app/desktop/views/components/images.vue | 54 +++++++++----------
src/web/app/desktop/views/components/index.ts | 6 +++
.../app/desktop/views/components/posts.vue | 2 +-
.../views/components/ui-notification.vue | 2 +-
.../app/desktop/views/components/window.vue | 2 +-
src/web/app/mobile/tags/notify.tag | 2 +-
18 files changed, 56 insertions(+), 48 deletions(-)
diff --git a/src/web/app/common/views/components/post-menu.vue b/src/web/app/common/views/components/post-menu.vue
index 078e4745a4..7a33360f60 100644
--- a/src/web/app/common/views/components/post-menu.vue
+++ b/src/web/app/common/views/components/post-menu.vue
@@ -9,7 +9,7 @@
<script lang="ts">
import Vue from 'vue';
-import anime from 'animejs';
+import * as anime from 'animejs';
export default Vue.extend({
props: ['post', 'source', 'compact'],
diff --git a/src/web/app/common/views/components/reaction-picker.vue b/src/web/app/common/views/components/reaction-picker.vue
index 62ccbfdd04..b17558ba9e 100644
--- a/src/web/app/common/views/components/reaction-picker.vue
+++ b/src/web/app/common/views/components/reaction-picker.vue
@@ -20,7 +20,7 @@
<script lang="ts">
import Vue from 'vue';
-import anime from 'animejs';
+import * as anime from 'animejs';
const placeholder = '%i18n:common.tags.mk-reaction-picker.choose-reaction%';
diff --git a/src/web/app/common/views/components/stream-indicator.vue b/src/web/app/common/views/components/stream-indicator.vue
index 0721c77ad7..564376bba0 100644
--- a/src/web/app/common/views/components/stream-indicator.vue
+++ b/src/web/app/common/views/components/stream-indicator.vue
@@ -16,7 +16,7 @@
</template>
<script lang="typescript">
- import anime from 'animejs';
+ import * as anime from 'animejs';
import Ellipsis from './ellipsis.vue';
export default {
diff --git a/src/web/app/desktop/-tags/contextmenu.tag b/src/web/app/desktop/-tags/contextmenu.tag
index ee4c48fbde..cb9db4f982 100644
--- a/src/web/app/desktop/-tags/contextmenu.tag
+++ b/src/web/app/desktop/-tags/contextmenu.tag
@@ -96,7 +96,7 @@
</style>
<script lang="typescript">
- import anime from 'animejs';
+ import * as anime from 'animejs';
import contains from '../../common/scripts/contains';
this.root.addEventListener('contextmenu', e => {
diff --git a/src/web/app/desktop/-tags/detailed-post-window.tag b/src/web/app/desktop/-tags/detailed-post-window.tag
index 57e390d50d..6803aeacfd 100644
--- a/src/web/app/desktop/-tags/detailed-post-window.tag
+++ b/src/web/app/desktop/-tags/detailed-post-window.tag
@@ -35,7 +35,7 @@
</style>
<script lang="typescript">
- import anime from 'animejs';
+ import * as anime from 'animejs';
this.mixin('api');
diff --git a/src/web/app/desktop/-tags/dialog.tag b/src/web/app/desktop/-tags/dialog.tag
index ba2fa514d1..9a486dca56 100644
--- a/src/web/app/desktop/-tags/dialog.tag
+++ b/src/web/app/desktop/-tags/dialog.tag
@@ -83,7 +83,7 @@
</style>
<script lang="typescript">
- import anime from 'animejs';
+ import * as anime from 'animejs';
this.canThrough = opts.canThrough != null ? opts.canThrough : true;
this.opts.buttons.forEach(button => {
diff --git a/src/web/app/desktop/-tags/drive/file.tag b/src/web/app/desktop/-tags/drive/file.tag
index a669f5fff4..153a038f47 100644
--- a/src/web/app/desktop/-tags/drive/file.tag
+++ b/src/web/app/desktop/-tags/drive/file.tag
@@ -141,7 +141,7 @@
</style>
<script lang="typescript">
- import anime from 'animejs';
+ import * as anime from 'animejs';
import bytesToSize from '../../../common/scripts/bytes-to-size';
this.mixin('i');
diff --git a/src/web/app/desktop/-tags/home-widgets/slideshow.tag b/src/web/app/desktop/-tags/home-widgets/slideshow.tag
index 817b138d31..a69ab74b70 100644
--- a/src/web/app/desktop/-tags/home-widgets/slideshow.tag
+++ b/src/web/app/desktop/-tags/home-widgets/slideshow.tag
@@ -49,7 +49,7 @@
</style>
<script lang="typescript">
- import anime from 'animejs';
+ import * as anime from 'animejs';
this.data = {
folder: undefined,
diff --git a/src/web/app/desktop/-tags/home-widgets/tips.tag b/src/web/app/desktop/-tags/home-widgets/tips.tag
index a352253cef..efe9c90fc2 100644
--- a/src/web/app/desktop/-tags/home-widgets/tips.tag
+++ b/src/web/app/desktop/-tags/home-widgets/tips.tag
@@ -27,7 +27,7 @@
</style>
<script lang="typescript">
- import anime from 'animejs';
+ import * as anime from 'animejs';
this.mixin('widget');
diff --git a/src/web/app/desktop/-tags/user-preview.tag b/src/web/app/desktop/-tags/user-preview.tag
index 10c37de641..18465c2249 100644
--- a/src/web/app/desktop/-tags/user-preview.tag
+++ b/src/web/app/desktop/-tags/user-preview.tag
@@ -99,7 +99,7 @@
</style>
<script lang="typescript">
- import anime from 'animejs';
+ import * as anime from 'animejs';
this.mixin('i');
this.mixin('api');
diff --git a/src/web/app/desktop/views/components/images-image-dialog.vue b/src/web/app/desktop/views/components/images-image-dialog.vue
index 7975d80611..60afa7af82 100644
--- a/src/web/app/desktop/views/components/images-image-dialog.vue
+++ b/src/web/app/desktop/views/components/images-image-dialog.vue
@@ -7,7 +7,7 @@
<script lang="ts">
import Vue from 'vue';
-import anime from 'animejs';
+import * as anime from 'animejs';
export default Vue.extend({
props: ['image'],
diff --git a/src/web/app/desktop/views/components/images-image.vue b/src/web/app/desktop/views/components/images-image.vue
index ac662449f8..8cb9d5e108 100644
--- a/src/web/app/desktop/views/components/images-image.vue
+++ b/src/web/app/desktop/views/components/images-image.vue
@@ -10,6 +10,7 @@
<script lang="ts">
import Vue from 'vue';
+import MkImagesImageDialog from './images-image-dialog.vue';
export default Vue.extend({
props: ['image'],
@@ -23,7 +24,7 @@ export default Vue.extend({
},
methods: {
onMousemove(e) {
- const rect = this.$refs.view.getBoundingClientRect();
+ const rect = this.$el.getBoundingClientRect();
const mouseX = e.clientX - rect.left;
const mouseY = e.clientY - rect.top;
const xp = mouseX / this.$el.offsetWidth * 100;
@@ -36,11 +37,12 @@ export default Vue.extend({
this.$el.style.backgroundPosition = '';
},
- onClick(ev) {
- riot.mount(document.body.appendChild(document.createElement('mk-image-dialog')), {
- image: this.image
- });
- return false;
+ onClick() {
+ document.body.appendChild(new MkImagesImageDialog({
+ propsData: {
+ image: this.image
+ }
+ }).$mount().$el);
}
}
});
diff --git a/src/web/app/desktop/views/components/images.vue b/src/web/app/desktop/views/components/images.vue
index fb2532753c..f02ecbaa8c 100644
--- a/src/web/app/desktop/views/components/images.vue
+++ b/src/web/app/desktop/views/components/images.vue
@@ -20,40 +20,40 @@ export default Vue.extend({
const tags = this.$refs.image as Vue[];
if (this.images.length == 1) {
- this.$el.style.gridTemplateRows = '1fr';
+ (this.$el.style as any).gridTemplateRows = '1fr';
- tags[0].$el.style.gridColumn = '1 / 2';
- tags[0].$el.style.gridRow = '1 / 2';
+ (tags[0].$el.style as any).gridColumn = '1 / 2';
+ (tags[0].$el.style as any).gridRow = '1 / 2';
} else if (this.images.length == 2) {
- this.$el.style.gridTemplateColumns = '1fr 1fr';
- this.$el.style.gridTemplateRows = '1fr';
+ (this.$el.style as any).gridTemplateColumns = '1fr 1fr';
+ (this.$el.style as any).gridTemplateRows = '1fr';
- tags[0].$el.style.gridColumn = '1 / 2';
- tags[0].$el.style.gridRow = '1 / 2';
- tags[1].$el.style.gridColumn = '2 / 3';
- tags[1].$el.style.gridRow = '1 / 2';
+ (tags[0].$el.style as any).gridColumn = '1 / 2';
+ (tags[0].$el.style as any).gridRow = '1 / 2';
+ (tags[1].$el.style as any).gridColumn = '2 / 3';
+ (tags[1].$el.style as any).gridRow = '1 / 2';
} else if (this.images.length == 3) {
- this.$el.style.gridTemplateColumns = '1fr 0.5fr';
- this.$el.style.gridTemplateRows = '1fr 1fr';
+ (this.$el.style as any).gridTemplateColumns = '1fr 0.5fr';
+ (this.$el.style as any).gridTemplateRows = '1fr 1fr';
- tags[0].$el.style.gridColumn = '1 / 2';
- tags[0].$el.style.gridRow = '1 / 3';
- tags[1].$el.style.gridColumn = '2 / 3';
- tags[1].$el.style.gridRow = '1 / 2';
- tags[2].$el.style.gridColumn = '2 / 3';
- tags[2].$el.style.gridRow = '2 / 3';
+ (tags[0].$el.style as any).gridColumn = '1 / 2';
+ (tags[0].$el.style as any).gridRow = '1 / 3';
+ (tags[1].$el.style as any).gridColumn = '2 / 3';
+ (tags[1].$el.style as any).gridRow = '1 / 2';
+ (tags[2].$el.style as any).gridColumn = '2 / 3';
+ (tags[2].$el.style as any).gridRow = '2 / 3';
} else if (this.images.length == 4) {
- this.$el.style.gridTemplateColumns = '1fr 1fr';
- this.$el.style.gridTemplateRows = '1fr 1fr';
+ (this.$el.style as any).gridTemplateColumns = '1fr 1fr';
+ (this.$el.style as any).gridTemplateRows = '1fr 1fr';
- tags[0].$el.style.gridColumn = '1 / 2';
- tags[0].$el.style.gridRow = '1 / 2';
- tags[1].$el.style.gridColumn = '2 / 3';
- tags[1].$el.style.gridRow = '1 / 2';
- tags[2].$el.style.gridColumn = '1 / 2';
- tags[2].$el.style.gridRow = '2 / 3';
- tags[3].$el.style.gridColumn = '2 / 3';
- tags[3].$el.style.gridRow = '2 / 3';
+ (tags[0].$el.style as any).gridColumn = '1 / 2';
+ (tags[0].$el.style as any).gridRow = '1 / 2';
+ (tags[1].$el.style as any).gridColumn = '2 / 3';
+ (tags[1].$el.style as any).gridRow = '1 / 2';
+ (tags[2].$el.style as any).gridColumn = '1 / 2';
+ (tags[2].$el.style as any).gridRow = '2 / 3';
+ (tags[3].$el.style as any).gridColumn = '2 / 3';
+ (tags[3].$el.style as any).gridRow = '2 / 3';
}
}
});
diff --git a/src/web/app/desktop/views/components/index.ts b/src/web/app/desktop/views/components/index.ts
index a529537442..f212338e1e 100644
--- a/src/web/app/desktop/views/components/index.ts
+++ b/src/web/app/desktop/views/components/index.ts
@@ -20,6 +20,9 @@ import postFormWindow from './post-form-window.vue';
import repostFormWindow from './repost-form-window.vue';
import analogClock from './analog-clock.vue';
import ellipsisIcon from './ellipsis-icon.vue';
+import images from './images.vue';
+import imagesImage from './images-image.vue';
+import imagesImageDialog from './images-image-dialog.vue';
Vue.component('mk-ui', ui);
Vue.component('mk-ui-header', uiHeader);
@@ -41,3 +44,6 @@ Vue.component('mk-post-form-window', postFormWindow);
Vue.component('mk-repost-form-window', repostFormWindow);
Vue.component('mk-analog-clock', analogClock);
Vue.component('mk-ellipsis-icon', ellipsisIcon);
+Vue.component('mk-images', images);
+Vue.component('mk-images-image', imagesImage);
+Vue.component('mk-images-image-dialog', imagesImageDialog);
diff --git a/src/web/app/desktop/views/components/posts.vue b/src/web/app/desktop/views/components/posts.vue
index b685bff6af..880ee52242 100644
--- a/src/web/app/desktop/views/components/posts.vue
+++ b/src/web/app/desktop/views/components/posts.vue
@@ -2,7 +2,7 @@
<div class="mk-posts">
<template v-for="(post, i) in _posts">
<mk-posts-post :post.sync="post" :key="post.id"/>
- <p class="date" :key="post.id + '-time'" v-if="i != _posts.length - 1 && _post._date != _posts[i + 1]._date"><span>%fa:angle-up%{{ post._datetext }}</span><span>%fa:angle-down%{{ _posts[i + 1]._datetext }}</span></p>
+ <p class="date" :key="post.id + '-time'" v-if="i != _posts.length - 1 && post._date != _posts[i + 1]._date"><span>%fa:angle-up%{{ post._datetext }}</span><span>%fa:angle-down%{{ _posts[i + 1]._datetext }}</span></p>
</template>
<footer>
<slot name="footer"></slot>
diff --git a/src/web/app/desktop/views/components/ui-notification.vue b/src/web/app/desktop/views/components/ui-notification.vue
index 6ca0cebfad..6f7b46cb7a 100644
--- a/src/web/app/desktop/views/components/ui-notification.vue
+++ b/src/web/app/desktop/views/components/ui-notification.vue
@@ -6,7 +6,7 @@
<script lang="ts">
import Vue from 'vue';
-import anime from 'animejs';
+import * as anime from 'animejs';
export default Vue.extend({
props: ['message'],
diff --git a/src/web/app/desktop/views/components/window.vue b/src/web/app/desktop/views/components/window.vue
index 986b151c40..61a433b36a 100644
--- a/src/web/app/desktop/views/components/window.vue
+++ b/src/web/app/desktop/views/components/window.vue
@@ -26,7 +26,7 @@
<script lang="ts">
import Vue from 'vue';
-import anime from 'animejs';
+import * as anime from 'animejs';
import contains from '../../../common/scripts/contains';
const minHeight = 40;
diff --git a/src/web/app/mobile/tags/notify.tag b/src/web/app/mobile/tags/notify.tag
index 59d1e9dd8f..ec36094972 100644
--- a/src/web/app/mobile/tags/notify.tag
+++ b/src/web/app/mobile/tags/notify.tag
@@ -16,7 +16,7 @@
</style>
<script lang="typescript">
- import anime from 'animejs';
+ import * as anime from 'animejs';
this.on('mount', () => {
anime({