sendnrw/misskey
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
syuilo
2018-02-13 09:27:57 +09:00
parent be80c98ee5
commit e8affdc730
18 changed files with 56 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/web/app/desktop/views/components/images-image-dialog.vue
View File

@@ -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'],

14
src/web/app/desktop/views/components/images-image.vue
View File

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

54
src/web/app/desktop/views/components/images.vue
View File

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

6
src/web/app/desktop/views/components/index.ts
View File

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

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

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

2
src/web/app/desktop/views/components/ui-notification.vue
View File

@@ -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'],

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

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