johan/FoundKey
1
0
Fork 0
forked from FoundKeyGang/FoundKey
Code Issues Pull requests Projects Releases Packages 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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/web/app/common/views/components/post-menu.vue
View file

@ -9,7 +9,7 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import anime from 'animejs'; import * as anime from 'animejs';
export default Vue.extend({ export default Vue.extend({
props: ['post', 'source', 'compact'], props: ['post', 'source', 'compact'],

2
src/web/app/common/views/components/reaction-picker.vue
View file

@ -20,7 +20,7 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import anime from 'animejs'; import * as anime from 'animejs';
const placeholder = '%i18n:common.tags.mk-reaction-picker.choose-reaction%'; const placeholder = '%i18n:common.tags.mk-reaction-picker.choose-reaction%';

2
src/web/app/common/views/components/stream-indicator.vue
View file

@ -16,7 +16,7 @@
</template> </template>
<script lang="typescript"> <script lang="typescript">
import anime from 'animejs'; import * as anime from 'animejs';
import Ellipsis from './ellipsis.vue'; import Ellipsis from './ellipsis.vue';
export default { export default {

2
src/web/app/desktop/-tags/contextmenu.tag
View file

@ -96,7 +96,7 @@
</style> </style>
<script lang="typescript"> <script lang="typescript">
import anime from 'animejs'; import * as anime from 'animejs';
import contains from '../../common/scripts/contains'; import contains from '../../common/scripts/contains';
this.root.addEventListener('contextmenu', e => { this.root.addEventListener('contextmenu', e => {

2
src/web/app/desktop/-tags/detailed-post-window.tag
View file

@ -35,7 +35,7 @@
</style> </style>
<script lang="typescript"> <script lang="typescript">
import anime from 'animejs'; import * as anime from 'animejs';
this.mixin('api'); this.mixin('api');

2
src/web/app/desktop/-tags/dialog.tag
View file

@ -83,7 +83,7 @@
</style> </style>
<script lang="typescript"> <script lang="typescript">
import anime from 'animejs'; import * as anime from 'animejs';
this.canThrough = opts.canThrough != null ? opts.canThrough : true; this.canThrough = opts.canThrough != null ? opts.canThrough : true;
this.opts.buttons.forEach(button => { this.opts.buttons.forEach(button => {

2
src/web/app/desktop/-tags/drive/file.tag
View file

@ -141,7 +141,7 @@
</style> </style>
<script lang="typescript"> <script lang="typescript">
import anime from 'animejs'; import * as anime from 'animejs';
import bytesToSize from '../../../common/scripts/bytes-to-size'; import bytesToSize from '../../../common/scripts/bytes-to-size';
this.mixin('i'); this.mixin('i');

2
src/web/app/desktop/-tags/home-widgets/slideshow.tag
View file

@ -49,7 +49,7 @@
</style> </style>
<script lang="typescript"> <script lang="typescript">
import anime from 'animejs'; import * as anime from 'animejs';
this.data = { this.data = {
folder: undefined, folder: undefined,

2
src/web/app/desktop/-tags/home-widgets/tips.tag
View file

@ -27,7 +27,7 @@
</style> </style>
<script lang="typescript"> <script lang="typescript">
import anime from 'animejs'; import * as anime from 'animejs';
this.mixin('widget'); this.mixin('widget');

2
src/web/app/desktop/-tags/user-preview.tag
View file

@ -99,7 +99,7 @@
</style> </style>
<script lang="typescript"> <script lang="typescript">
import anime from 'animejs'; import * as anime from 'animejs';
this.mixin('i'); this.mixin('i');
this.mixin('api'); this.mixin('api');

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

@ -7,7 +7,7 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import anime from 'animejs'; import * as anime from 'animejs';
export default Vue.extend({ export default Vue.extend({
props: ['image'], props: ['image'],

12
src/web/app/desktop/views/components/images-image.vue
View file

@ -10,6 +10,7 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import MkImagesImageDialog from './images-image-dialog.vue';
export default Vue.extend({ export default Vue.extend({
props: ['image'], props: ['image'],
@ -23,7 +24,7 @@ export default Vue.extend({
}, },
methods: { methods: {
onMousemove(e) { onMousemove(e) {
const rect = this.$refs.view.getBoundingClientRect(); const rect = this.$el.getBoundingClientRect();
const mouseX = e.clientX - rect.left; const mouseX = e.clientX - rect.left;
const mouseY = e.clientY - rect.top; const mouseY = e.clientY - rect.top;
const xp = mouseX / this.$el.offsetWidth * 100; const xp = mouseX / this.$el.offsetWidth * 100;
@ -36,11 +37,12 @@ export default Vue.extend({
this.$el.style.backgroundPosition = ''; this.$el.style.backgroundPosition = '';
}, },
onClick(ev) { onClick() {
riot.mount(document.body.appendChild(document.createElement('mk-image-dialog')), { document.body.appendChild(new MkImagesImageDialog({
propsData: {
image: this.image image: this.image
}); }
return false; }).$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[]; const tags = this.$refs.image as Vue[];
if (this.images.length == 1) { 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 as any).gridColumn = '1 / 2';
tags[0].$el.style.gridRow = '1 / 2'; (tags[0].$el.style as any).gridRow = '1 / 2';
} else if (this.images.length == 2) { } else if (this.images.length == 2) {
this.$el.style.gridTemplateColumns = '1fr 1fr'; (this.$el.style as any).gridTemplateColumns = '1fr 1fr';
this.$el.style.gridTemplateRows = '1fr'; (this.$el.style as any).gridTemplateRows = '1fr';
tags[0].$el.style.gridColumn = '1 / 2'; (tags[0].$el.style as any).gridColumn = '1 / 2';
tags[0].$el.style.gridRow = '1 / 2'; (tags[0].$el.style as any).gridRow = '1 / 2';
tags[1].$el.style.gridColumn = '2 / 3'; (tags[1].$el.style as any).gridColumn = '2 / 3';
tags[1].$el.style.gridRow = '1 / 2'; (tags[1].$el.style as any).gridRow = '1 / 2';
} else if (this.images.length == 3) { } else if (this.images.length == 3) {
this.$el.style.gridTemplateColumns = '1fr 0.5fr'; (this.$el.style as any).gridTemplateColumns = '1fr 0.5fr';
this.$el.style.gridTemplateRows = '1fr 1fr'; (this.$el.style as any).gridTemplateRows = '1fr 1fr';
tags[0].$el.style.gridColumn = '1 / 2'; (tags[0].$el.style as any).gridColumn = '1 / 2';
tags[0].$el.style.gridRow = '1 / 3'; (tags[0].$el.style as any).gridRow = '1 / 3';
tags[1].$el.style.gridColumn = '2 / 3'; (tags[1].$el.style as any).gridColumn = '2 / 3';
tags[1].$el.style.gridRow = '1 / 2'; (tags[1].$el.style as any).gridRow = '1 / 2';
tags[2].$el.style.gridColumn = '2 / 3'; (tags[2].$el.style as any).gridColumn = '2 / 3';
tags[2].$el.style.gridRow = '2 / 3'; (tags[2].$el.style as any).gridRow = '2 / 3';
} else if (this.images.length == 4) { } else if (this.images.length == 4) {
this.$el.style.gridTemplateColumns = '1fr 1fr'; (this.$el.style as any).gridTemplateColumns = '1fr 1fr';
this.$el.style.gridTemplateRows = '1fr 1fr'; (this.$el.style as any).gridTemplateRows = '1fr 1fr';
tags[0].$el.style.gridColumn = '1 / 2'; (tags[0].$el.style as any).gridColumn = '1 / 2';
tags[0].$el.style.gridRow = '1 / 2'; (tags[0].$el.style as any).gridRow = '1 / 2';
tags[1].$el.style.gridColumn = '2 / 3'; (tags[1].$el.style as any).gridColumn = '2 / 3';
tags[1].$el.style.gridRow = '1 / 2'; (tags[1].$el.style as any).gridRow = '1 / 2';
tags[2].$el.style.gridColumn = '1 / 2'; (tags[2].$el.style as any).gridColumn = '1 / 2';
tags[2].$el.style.gridRow = '2 / 3'; (tags[2].$el.style as any).gridRow = '2 / 3';
tags[3].$el.style.gridColumn = '2 / 3'; (tags[3].$el.style as any).gridColumn = '2 / 3';
tags[3].$el.style.gridRow = '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 repostFormWindow from './repost-form-window.vue';
import analogClock from './analog-clock.vue'; import analogClock from './analog-clock.vue';
import ellipsisIcon from './ellipsis-icon.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', ui);
Vue.component('mk-ui-header', uiHeader); 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-repost-form-window', repostFormWindow);
Vue.component('mk-analog-clock', analogClock); Vue.component('mk-analog-clock', analogClock);
Vue.component('mk-ellipsis-icon', ellipsisIcon); 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"> <div class="mk-posts">
<template v-for="(post, i) in _posts"> <template v-for="(post, i) in _posts">
<mk-posts-post :post.sync="post" :key="post.id"/> <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> </template>
<footer> <footer>
<slot name="footer"></slot> <slot name="footer"></slot>

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

@ -6,7 +6,7 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import anime from 'animejs'; import * as anime from 'animejs';
export default Vue.extend({ export default Vue.extend({
props: ['message'], props: ['message'],

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

@ -26,7 +26,7 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import anime from 'animejs'; import * as anime from 'animejs';
import contains from '../../../common/scripts/contains'; import contains from '../../../common/scripts/contains';
const minHeight = 40; const minHeight = 40;

2
src/web/app/mobile/tags/notify.tag
View file

@ -16,7 +16,7 @@
</style> </style>
<script lang="typescript"> <script lang="typescript">
import anime from 'animejs'; import * as anime from 'animejs';
this.on('mount', () => { this.on('mount', () => {
anime({ anime({