oscar-surf/misskey
oscar-surf/misskey
0
0
Fork 0
Code Issues Pull Requests Packages Releases 2 Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/client/app/common/views/widgets/photo-stream.vue
View File

@ -5,9 +5,9 @@
<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 v-for="image in images"
<div v-for="(image, i) in images" :key="i"
:class="$style.img"
:style="`background-image: url(${image.thumbnailUrl || image.url})`"
:style="`background-image: url(${thumbnail(image)})`"
draggable="true"
@dragstart="onDragstart(image, $event)"
></div>
@ -20,6 +20,7 @@
<script lang="ts">
import define from '../../../common/define-widget';
import i18n from '../../../i18n';
import { getStaticImageUrl } from '../../scripts/get-static-image-url';
export default define({
name: 'photo-stream',
@ -77,6 +78,12 @@ export default define({
e.dataTransfer.effectAllowed = 'move';
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>

15
src/client/app/desktop/views/pages/user/user.photos.vue
View File

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

10
src/client/app/mobile/views/components/note-card.vue
View File

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

10
src/client/app/mobile/views/pages/user.vue
View File

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

14
src/client/app/mobile/views/pages/user/home.photos.vue
View File

@ -2,9 +2,9 @@
<div class="root photos">
<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">
<a v-for="image in images"
<a v-for="(image, i) in images" :key="i"
class="img"
:style="`background-image: url(${image.media.thumbnailUrl})`"
:style="`background-image: url(${thumbnail(image.media)})`"
:href="image.note | notePage"
></a>
</div>
@ -15,6 +15,7 @@
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../../i18n';
import { getStaticImageUrl } from '../../../../common/scripts/get-static-image-url';
export default Vue.extend({
i18n: i18n('mobile/views/pages/user/home.photos.vue'),
@ -50,7 +51,14 @@ export default Vue.extend({
}
this.fetching = false;
});
}
},
methods: {
thumbnail(image: any): string {
return this.$store.state.device.disableShowingAnimatedImages
? getStaticImageUrl(image.thumbnailUrl)
: image.thumbnailUrl;
},
},
});
</script>