Merge branch 'master' of https://github.com/syuilo/misskey
This commit is contained in:
syuilo
commit
7b0f93464a
@ -654,6 +654,7 @@ mobile:
|
||||
mk-user-timeline:
|
||||
no-posts: "This user seems never post"
|
||||
no-posts-with-media: "There is no posts with media"
|
||||
load-more: "More"
|
||||
|
||||
mk-user:
|
||||
follows-you: "Follows you"
|
||||
|
||||
@ -654,6 +654,7 @@ mobile:
|
||||
mk-user-timeline:
|
||||
no-posts: "このユーザーはまだ投稿していないようです。"
|
||||
no-posts-with-media: "メディア付き投稿はありません。"
|
||||
load-more: "もっとみる"
|
||||
|
||||
mk-user:
|
||||
follows-you: "フォローされています"
|
||||
|
||||
@ -1,63 +0,0 @@
|
||||
<template>
|
||||
<div class="mk-images">
|
||||
<mk-images-image v-for="image in images" ref="image" :image="image" :key="image.id"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
|
||||
export default Vue.extend({
|
||||
props: ['images'],
|
||||
mounted() {
|
||||
const tags = this.$refs.image as Vue[];
|
||||
|
||||
if (this.images.length == 1) {
|
||||
(this.$el.style as any).gridTemplateRows = '1fr';
|
||||
|
||||
(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 as any).gridTemplateColumns = '1fr 1fr';
|
||||
(this.$el.style as any).gridTemplateRows = '1fr';
|
||||
|
||||
(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 as any).gridTemplateColumns = '1fr 0.5fr';
|
||||
(this.$el.style as any).gridTemplateRows = '1fr 1fr';
|
||||
|
||||
(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 as any).gridTemplateColumns = '1fr 1fr';
|
||||
(this.$el.style as any).gridTemplateRows = '1fr 1fr';
|
||||
|
||||
(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';
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.mk-images
|
||||
display grid
|
||||
grid-gap 4px
|
||||
height 256px
|
||||
|
||||
@media (max-width 500px)
|
||||
height 192px
|
||||
</style>
|
||||
@ -11,7 +11,7 @@ import reactionIcon from './reaction-icon.vue';
|
||||
import reactionsViewer from './reactions-viewer.vue';
|
||||
import time from './time.vue';
|
||||
import timer from './timer.vue';
|
||||
import images from './images.vue';
|
||||
import mediaList from './media-list.vue';
|
||||
import uploader from './uploader.vue';
|
||||
import specialMessage from './special-message.vue';
|
||||
import streamIndicator from './stream-indicator.vue';
|
||||
@ -36,7 +36,7 @@ Vue.component('mk-reaction-icon', reactionIcon);
|
||||
Vue.component('mk-reactions-viewer', reactionsViewer);
|
||||
Vue.component('mk-time', time);
|
||||
Vue.component('mk-timer', timer);
|
||||
Vue.component('mk-images', images);
|
||||
Vue.component('mk-media-list', mediaList);
|
||||
Vue.component('mk-uploader', uploader);
|
||||
Vue.component('mk-special-message', specialMessage);
|
||||
Vue.component('mk-stream-indicator', streamIndicator);
|
||||
|
||||
56
src/web/app/common/views/components/media-list.vue
Normal file
56
src/web/app/common/views/components/media-list.vue
Normal file
@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<div class="mk-media-list" :data-count="mediaList.length">
|
||||
<template v-for="media in mediaList">
|
||||
<mk-media-image :image="media" :key="media.id"/>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
|
||||
export default Vue.extend({
|
||||
props: ['mediaList'],
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.mk-media-list
|
||||
display grid
|
||||
grid-gap 4px
|
||||
height 256px
|
||||
|
||||
@media (max-width 500px)
|
||||
height 192px
|
||||
|
||||
&[data-count="1"]
|
||||
grid-template-rows 1fr
|
||||
&[data-count="2"]
|
||||
grid-template-columns 1fr 1fr
|
||||
grid-template-rows 1fr
|
||||
&[data-count="3"]
|
||||
grid-template-columns 1fr 0.5fr
|
||||
grid-template-rows 1fr 1fr
|
||||
:nth-child(1)
|
||||
grid-row 1 / 3
|
||||
:nth-child(3)
|
||||
grid-column 2 / 3
|
||||
grid-row 2/3
|
||||
&[data-count="4"]
|
||||
grid-template-columns 1fr 1fr
|
||||
grid-template-rows 1fr 1fr
|
||||
|
||||
:nth-child(1)
|
||||
grid-column 1 / 2
|
||||
grid-row 1 / 2
|
||||
:nth-child(2)
|
||||
grid-column 2 / 3
|
||||
grid-row 1 / 2
|
||||
:nth-child(3)
|
||||
grid-column 1 / 2
|
||||
grid-row 2 / 3
|
||||
:nth-child(4)
|
||||
grid-column 2 / 3
|
||||
grid-row 2 / 3
|
||||
|
||||
</style>
|
||||
@ -11,8 +11,8 @@ 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 imagesImage from './images-image.vue';
|
||||
import imagesImageDialog from './images-image-dialog.vue';
|
||||
import mediaImage from './media-image.vue';
|
||||
import mediaImageDialog from './media-image-dialog.vue';
|
||||
import notifications from './notifications.vue';
|
||||
import postForm from './post-form.vue';
|
||||
import repostForm from './repost-form.vue';
|
||||
@ -40,8 +40,8 @@ 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-image', imagesImage);
|
||||
Vue.component('mk-images-image-dialog', imagesImageDialog);
|
||||
Vue.component('mk-media-image', mediaImage);
|
||||
Vue.component('mk-media-image-dialog', mediaImageDialog);
|
||||
Vue.component('mk-notifications', notifications);
|
||||
Vue.component('mk-post-form', postForm);
|
||||
Vue.component('mk-repost-form', repostForm);
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="mk-images-image-dialog">
|
||||
<div class="mk-media-image-dialog">
|
||||
<div class="bg" @click="close"></div>
|
||||
<img :src="image.url" :alt="image.name" :title="image.name" @click="close"/>
|
||||
</div>
|
||||
@ -34,7 +34,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.mk-images-image-dialog
|
||||
.mk-media-image-dialog
|
||||
display block
|
||||
position fixed
|
||||
z-index 2048
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<a class="mk-images-image"
|
||||
<a class="mk-media-image"
|
||||
:href="image.url"
|
||||
@mousemove="onMousemove"
|
||||
@mouseleave="onMouseleave"
|
||||
@ -11,7 +11,7 @@
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import MkImagesImageDialog from './images-image-dialog.vue';
|
||||
import MkMediaImageDialog from './media-image-dialog.vue';
|
||||
|
||||
export default Vue.extend({
|
||||
props: ['image'],
|
||||
@ -39,7 +39,7 @@ export default Vue.extend({
|
||||
},
|
||||
|
||||
onClick() {
|
||||
(this as any).os.new(MkImagesImageDialog, {
|
||||
(this as any).os.new(MkMediaImageDialog, {
|
||||
image: this.image
|
||||
});
|
||||
}
|
||||
@ -48,7 +48,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.mk-images-image
|
||||
.mk-media-image
|
||||
display block
|
||||
cursor zoom-in
|
||||
overflow hidden
|
||||
@ -18,7 +18,7 @@
|
||||
<div class="body">
|
||||
<mk-post-html v-if="post.ast" :ast="post.ast" :i="os.i" :class="$style.text"/>
|
||||
<div class="media" v-if="post.media">
|
||||
<mk-images :images="post.media"/>
|
||||
<mk-media-list :media-list="post.media"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -40,7 +40,7 @@
|
||||
<div class="body">
|
||||
<mk-post-html :class="$style.text" v-if="p.ast" :ast="p.ast" :i="os.i"/>
|
||||
<div class="media" v-if="p.media">
|
||||
<mk-images :images="p.media"/>
|
||||
<mk-media-list :media-list="p.media"/>
|
||||
</div>
|
||||
<mk-poll v-if="p.poll" :post="p"/>
|
||||
<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
|
||||
|
||||
@ -42,7 +42,7 @@
|
||||
<a class="rp" v-if="p.repost">RP:</a>
|
||||
</div>
|
||||
<div class="media" v-if="p.media">
|
||||
<mk-images :images="p.media"/>
|
||||
<mk-media-list :media-list="p.media"/>
|
||||
</div>
|
||||
<mk-poll v-if="p.poll" :post="p" ref="pollViewer"/>
|
||||
<div class="tags" v-if="p.tags && p.tags.length > 0">
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
</div>
|
||||
<details v-if="post.media">
|
||||
<summary>({{ post.media.length }}つのメディア)</summary>
|
||||
<mk-images :images="post.media"/>
|
||||
<mk-media-list :media-list="post.media"/>
|
||||
</details>
|
||||
<details v-if="post.poll">
|
||||
<summary>投票</summary>
|
||||
|
||||
@ -4,7 +4,7 @@ import ui from './ui.vue';
|
||||
import timeline from './timeline.vue';
|
||||
import post from './post.vue';
|
||||
import posts from './posts.vue';
|
||||
import imagesImage from './images-image.vue';
|
||||
import mediaImage from './media-image.vue';
|
||||
import drive from './drive.vue';
|
||||
import postPreview from './post-preview.vue';
|
||||
import subPostContent from './sub-post-content.vue';
|
||||
@ -26,7 +26,7 @@ Vue.component('mk-ui', ui);
|
||||
Vue.component('mk-timeline', timeline);
|
||||
Vue.component('mk-post', post);
|
||||
Vue.component('mk-posts', posts);
|
||||
Vue.component('mk-images-image', imagesImage);
|
||||
Vue.component('mk-media-image', mediaImage);
|
||||
Vue.component('mk-drive', drive);
|
||||
Vue.component('mk-post-preview', postPreview);
|
||||
Vue.component('mk-sub-post-content', subPostContent);
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<a class="mk-images-image" :href="image.url" target="_blank" :style="style" :title="image.name"></a>
|
||||
<a class="mk-media-image" :href="image.url" target="_blank" :style="style" :title="image.name"></a>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
@ -19,7 +19,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.mk-images-image
|
||||
.mk-media-image
|
||||
display block
|
||||
overflow hidden
|
||||
width 100%
|
||||
@ -43,7 +43,7 @@
|
||||
<router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=#${tag}`">{{ tag }}</router-link>
|
||||
</div>
|
||||
<div class="media" v-if="p.media">
|
||||
<mk-images :images="p.media"/>
|
||||
<mk-media-list :media-list="p.media"/>
|
||||
</div>
|
||||
<mk-poll v-if="p.poll" :post="p"/>
|
||||
<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
|
||||
|
||||
@ -41,7 +41,7 @@
|
||||
<a class="rp" v-if="p.repost != null">RP:</a>
|
||||
</div>
|
||||
<div class="media" v-if="p.media">
|
||||
<mk-images :images="p.media"/>
|
||||
<mk-media-list :media-list="p.media"/>
|
||||
</div>
|
||||
<mk-poll v-if="p.poll" :post="p" ref="pollViewer"/>
|
||||
<div class="tags" v-if="p.tags && p.tags.length > 0">
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
</div>
|
||||
<details v-if="post.media">
|
||||
<summary>({{ post.media.length }}個のメディア)</summary>
|
||||
<mk-images :images="post.media"/>
|
||||
<mk-media-list :media-list="post.media"/>
|
||||
</details>
|
||||
<details v-if="post.poll">
|
||||
<summary>%i18n:mobile.tags.mk-sub-post-content.poll%</summary>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user