アニメーション停止箇所の追加 (#4138)

This commit is contained in:
MeiMei 2019-02-05 06:22:39 +09:00 committed by syuilo
parent 7b7359fbdc
commit 4162981081
5 changed files with 48 additions and 12 deletions

View file

@ -5,9 +5,9 @@
<p :class="$style.fetching" v-if="fetching"><fa icon="spinner" pulse fixed-width/>{{ $t('@.loading') }}<mk-ellipsis/></p> <p :class="$style.fetching" v-if="fetching"><fa icon="spinner" pulse fixed-width/>{{ $t('@.loading') }}<mk-ellipsis/></p>
<div :class="$style.stream" v-if="!fetching && images.length > 0"> <div :class="$style.stream" v-if="!fetching && images.length > 0">
<div v-for="image in images" <div v-for="(image, i) in images" :key="i"
:class="$style.img" :class="$style.img"
:style="`background-image: url(${image.thumbnailUrl || image.url})`" :style="`background-image: url(${thumbnail(image)})`"
draggable="true" draggable="true"
@dragstart="onDragstart(image, $event)" @dragstart="onDragstart(image, $event)"
></div> ></div>
@ -20,6 +20,7 @@
<script lang="ts"> <script lang="ts">
import define from '../../../common/define-widget'; import define from '../../../common/define-widget';
import i18n from '../../../i18n'; import i18n from '../../../i18n';
import { getStaticImageUrl } from '../../scripts/get-static-image-url';
export default define({ export default define({
name: 'photo-stream', name: 'photo-stream',
@ -77,6 +78,12 @@ export default define({
e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('mk_drive_file', JSON.stringify(file)); e.dataTransfer.setData('mk_drive_file', JSON.stringify(file));
}, },
thumbnail(image: any): string {
return this.$store.state.device.disableShowingAnimatedImages
? getStaticImageUrl(image.thumbnailUrl)
: image.thumbnailUrl;
},
} }
}); });
</script> </script>

View file

@ -3,8 +3,8 @@
<p class="title"><fa icon="camera"/>{{ $t('title') }}</p> <p class="title"><fa icon="camera"/>{{ $t('title') }}</p>
<p class="initializing" v-if="fetching"><fa icon="spinner" pulse fixed-width/>{{ $t('loading') }}<mk-ellipsis/></p> <p class="initializing" v-if="fetching"><fa icon="spinner" pulse fixed-width/>{{ $t('loading') }}<mk-ellipsis/></p>
<div class="stream" v-if="!fetching && images.length > 0"> <div class="stream" v-if="!fetching && images.length > 0">
<div v-for="image in images" class="img" <div v-for="(image, i) in images" :key="i" class="img"
:style="`background-image: url(${image.thumbnailUrl})`" :style="`background-image: url(${thumbnail(image)})`"
></div> ></div>
</div> </div>
<p class="empty" v-if="!fetching && images.length == 0">{{ $t('no-photos') }}</p> <p class="empty" v-if="!fetching && images.length == 0">{{ $t('no-photos') }}</p>
@ -14,6 +14,8 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import i18n from '../../../../i18n'; import i18n from '../../../../i18n';
import { getStaticImageUrl } from '../../../../common/scripts/get-static-image-url';
export default Vue.extend({ export default Vue.extend({
i18n: i18n('desktop/views/pages/user/user.photos.vue'), i18n: i18n('desktop/views/pages/user/user.photos.vue'),
props: ['user'], props: ['user'],
@ -44,7 +46,14 @@ export default Vue.extend({
} }
this.fetching = false; this.fetching = false;
}); });
} },
methods: {
thumbnail(image: any): string {
return this.$store.state.device.disableShowingAnimatedImages
? getStaticImageUrl(image.thumbnailUrl)
: image.thumbnailUrl;
},
},
}); });
</script> </script>

View file

@ -2,7 +2,7 @@
<div class="mk-note-card"> <div class="mk-note-card">
<a :href="note | notePage"> <a :href="note | notePage">
<header> <header>
<img :src="note.user.avatarUrl" alt="avatar"/> <img :src="avator" alt="avatar"/>
<h3><mk-user-name :user="note.user"/></h3> <h3><mk-user-name :user="note.user"/></h3>
</header> </header>
<div> <div>
@ -16,13 +16,19 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import summary from '../../../../../misc/get-note-summary'; import summary from '../../../../../misc/get-note-summary';
import { getStaticImageUrl } from '../../../common/scripts/get-static-image-url';
export default Vue.extend({ export default Vue.extend({
props: ['note'], props: ['note'],
computed: { computed: {
text(): string { text(): string {
return summary(this.note); return summary(this.note);
} },
avator(): string {
return this.$store.state.device.disableShowingAnimatedImages
? getStaticImageUrl(this.note.user.avatarUrl)
: this.note.user.avatarUrl;
},
} }
}); });
</script> </script>

View file

@ -1,6 +1,6 @@
<template> <template>
<mk-ui> <mk-ui>
<template slot="header" v-if="!fetching"><img :src="user.avatarUrl" alt=""> <template slot="header" v-if="!fetching"><img :src="avator" alt="">
<mk-user-name :user="user"/> <mk-user-name :user="user"/>
</template> </template>
<main v-if="!fetching"> <main v-if="!fetching">
@ -11,7 +11,7 @@
<div class="body"> <div class="body">
<div class="top"> <div class="top">
<a class="avatar"> <a class="avatar">
<img :src="user.avatarUrl" alt="avatar"/> <img :src="avator" alt="avatar"/>
</a> </a>
<button class="menu" ref="menu" @click="menu"><fa icon="ellipsis-h"/></button> <button class="menu" ref="menu" @click="menu"><fa icon="ellipsis-h"/></button>
<mk-follow-button v-if="$store.getters.isSignedIn && $store.state.i.id != user.id" :user="user"/> <mk-follow-button v-if="$store.getters.isSignedIn && $store.state.i.id != user.id" :user="user"/>
@ -82,6 +82,7 @@ import parseAcct from '../../../../../misc/acct/parse';
import Progress from '../../../common/scripts/loading'; import Progress from '../../../common/scripts/loading';
import XUserMenu from '../../../common/views/components/user-menu.vue'; import XUserMenu from '../../../common/views/components/user-menu.vue';
import XHome from './user/home.vue'; import XHome from './user/home.vue';
import { getStaticImageUrl } from '../../../common/scripts/get-static-image-url';
export default Vue.extend({ export default Vue.extend({
i18n: i18n('mobile/views/pages/user.vue'), i18n: i18n('mobile/views/pages/user.vue'),
@ -99,6 +100,11 @@ export default Vue.extend({
age(): number { age(): number {
return age(this.user.profile.birthday); return age(this.user.profile.birthday);
}, },
avator(): string {
return this.$store.state.device.disableShowingAnimatedImages
? getStaticImageUrl(this.user.avatarUrl)
: this.user.avatarUrl;
},
style(): any { style(): any {
if (this.user.bannerUrl == null) return {}; if (this.user.bannerUrl == null) return {};
return { return {

View file

@ -2,9 +2,9 @@
<div class="root photos"> <div class="root photos">
<p class="initializing" v-if="fetching"><fa icon="spinner" pulse fixed-width/>{{ $t('@.loading') }}<mk-ellipsis/></p> <p class="initializing" v-if="fetching"><fa icon="spinner" pulse fixed-width/>{{ $t('@.loading') }}<mk-ellipsis/></p>
<div class="stream" v-if="!fetching && images.length > 0"> <div class="stream" v-if="!fetching && images.length > 0">
<a v-for="image in images" <a v-for="(image, i) in images" :key="i"
class="img" class="img"
:style="`background-image: url(${image.media.thumbnailUrl})`" :style="`background-image: url(${thumbnail(image.media)})`"
:href="image.note | notePage" :href="image.note | notePage"
></a> ></a>
</div> </div>
@ -15,6 +15,7 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import i18n from '../../../../i18n'; import i18n from '../../../../i18n';
import { getStaticImageUrl } from '../../../../common/scripts/get-static-image-url';
export default Vue.extend({ export default Vue.extend({
i18n: i18n('mobile/views/pages/user/home.photos.vue'), i18n: i18n('mobile/views/pages/user/home.photos.vue'),
@ -50,7 +51,14 @@ export default Vue.extend({
} }
this.fetching = false; this.fetching = false;
}); });
} },
methods: {
thumbnail(image: any): string {
return this.$store.state.device.disableShowingAnimatedImages
? getStaticImageUrl(image.thumbnailUrl)
: image.thumbnailUrl;
},
},
}); });
</script> </script>