diff options
Diffstat (limited to 'src/web')
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({ |