natty
/
calckey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

mk-images -> mk-media-list, mk-images-image -> mk-media-image

This commit is contained in:
rinsuki 2018-03-26 16:56:46 +09:00
parent 6417c3b780
commit 2dba24d0da
14 changed files with 32 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/web/app/common/views/components/index.ts
View File

@ -11,7 +11,7 @@ import reactionIcon from './reaction-icon.vue';
import reactionsViewer from './reactions-viewer.vue'; import reactionsViewer from './reactions-viewer.vue';
import time from './time.vue'; import time from './time.vue';
import timer from './timer.vue'; import timer from './timer.vue';
import images from './images.vue'; import mediaList from './media-list.vue';
import uploader from './uploader.vue'; import uploader from './uploader.vue';
import specialMessage from './special-message.vue'; import specialMessage from './special-message.vue';
import streamIndicator from './stream-indicator.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-reactions-viewer', reactionsViewer);
Vue.component('mk-time', time); Vue.component('mk-time', time);
Vue.component('mk-timer', timer); Vue.component('mk-timer', timer);
Vue.component('mk-images', images); Vue.component('mk-media-list', mediaList);
Vue.component('mk-uploader', uploader); Vue.component('mk-uploader', uploader);
Vue.component('mk-special-message', specialMessage); Vue.component('mk-special-message', specialMessage);
Vue.component('mk-stream-indicator', streamIndicator); Vue.component('mk-stream-indicator', streamIndicator);

18
src/web/app/common/views/components/images.vue → src/web/app/common/views/components/media-list.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="mk-images"> <div class="mk-media-list">
<mk-images-image v-for="image in images" ref="image" :image="image" :key="image.id"/> <mk-media-image v-for="media in mediaList" ref="media" :image="media" :key="media.id"/>
</div> </div>
</template> </template>
@ -8,16 +8,16 @@
import Vue from 'vue'; import Vue from 'vue';
export default Vue.extend({ export default Vue.extend({
props: ['images'], props: ['mediaList'],
mounted() { mounted() {
const tags = this.$refs.image as Vue[]; const tags = this.$refs.media as Vue[];
if (this.images.length == 1) { if (this.mediaList.length == 1) {
(this.$el.style as any).gridTemplateRows = '1fr'; (this.$el.style as any).gridTemplateRows = '1fr';
(tags[0].$el.style as any).gridColumn = '1 / 2'; (tags[0].$el.style as any).gridColumn = '1 / 2';
(tags[0].$el.style as any).gridRow = '1 / 2'; (tags[0].$el.style as any).gridRow = '1 / 2';
} else if (this.images.length == 2) { } else if (this.mediaList.length == 2) {
(this.$el.style as any).gridTemplateColumns = '1fr 1fr'; (this.$el.style as any).gridTemplateColumns = '1fr 1fr';
(this.$el.style as any).gridTemplateRows = '1fr'; (this.$el.style as any).gridTemplateRows = '1fr';
@ -25,7 +25,7 @@ export default Vue.extend({
(tags[0].$el.style as any).gridRow = '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).gridColumn = '2 / 3';
(tags[1].$el.style as any).gridRow = '1 / 2'; (tags[1].$el.style as any).gridRow = '1 / 2';
} else if (this.images.length == 3) { } else if (this.mediaList.length == 3) {
(this.$el.style as any).gridTemplateColumns = '1fr 0.5fr'; (this.$el.style as any).gridTemplateColumns = '1fr 0.5fr';
(this.$el.style as any).gridTemplateRows = '1fr 1fr'; (this.$el.style as any).gridTemplateRows = '1fr 1fr';
@ -35,7 +35,7 @@ export default Vue.extend({
(tags[1].$el.style as any).gridRow = '1 / 2'; (tags[1].$el.style as any).gridRow = '1 / 2';
(tags[2].$el.style as any).gridColumn = '2 / 3'; (tags[2].$el.style as any).gridColumn = '2 / 3';
(tags[2].$el.style as any).gridRow = '2 / 3'; (tags[2].$el.style as any).gridRow = '2 / 3';
} else if (this.images.length == 4) { } else if (this.mediaList.length == 4) {
(this.$el.style as any).gridTemplateColumns = '1fr 1fr'; (this.$el.style as any).gridTemplateColumns = '1fr 1fr';
(this.$el.style as any).gridTemplateRows = '1fr 1fr'; (this.$el.style as any).gridTemplateRows = '1fr 1fr';
@ -53,7 +53,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mk-images .mk-media-list
display grid display grid
grid-gap 4px grid-gap 4px
height 256px height 256px

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

@ -11,8 +11,8 @@ 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 imagesImage from './images-image.vue'; import mediaImage from './media-image.vue';
import imagesImageDialog from './images-image-dialog.vue'; import mediaImageDialog from './media-image-dialog.vue';
import notifications from './notifications.vue'; import notifications from './notifications.vue';
import postForm from './post-form.vue'; import postForm from './post-form.vue';
import repostForm from './repost-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-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-image', imagesImage); Vue.component('mk-media-image', mediaImage);
Vue.component('mk-images-image-dialog', imagesImageDialog); Vue.component('mk-media-image-dialog', mediaImageDialog);
Vue.component('mk-notifications', notifications); Vue.component('mk-notifications', notifications);
Vue.component('mk-post-form', postForm); Vue.component('mk-post-form', postForm);
Vue.component('mk-repost-form', repostForm); Vue.component('mk-repost-form', repostForm);

4
src/web/app/desktop/views/components/images-image-dialog.vue → src/web/app/desktop/views/components/media-image-dialog.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="mk-images-image-dialog"> <div class="mk-media-image-dialog">
<div class="bg" @click="close"></div> <div class="bg" @click="close"></div>
<img :src="image.url" :alt="image.name" :title="image.name" @click="close"/> <img :src="image.url" :alt="image.name" :title="image.name" @click="close"/>
</div> </div>
@ -34,7 +34,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mk-images-image-dialog .mk-media-image-dialog
display block display block
position fixed position fixed
z-index 2048 z-index 2048

8
src/web/app/desktop/views/components/images-image.vue → src/web/app/desktop/views/components/media-image.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<a class="mk-images-image" <a class="mk-media-image"
:href="image.url" :href="image.url"
@mousemove="onMousemove" @mousemove="onMousemove"
@mouseleave="onMouseleave" @mouseleave="onMouseleave"
@ -11,7 +11,7 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import MkImagesImageDialog from './images-image-dialog.vue'; import MkMediaImageDialog from './media-image-dialog.vue';
export default Vue.extend({ export default Vue.extend({
props: ['image'], props: ['image'],
@ -39,7 +39,7 @@ export default Vue.extend({
}, },
onClick() { onClick() {
(this as any).os.new(MkImagesImageDialog, { (this as any).os.new(MkMediaImageDialog, {
image: this.image image: this.image
}); });
} }
@ -48,7 +48,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mk-images-image .mk-media-image
display block display block
cursor zoom-in cursor zoom-in
overflow hidden overflow hidden

2
src/web/app/desktop/views/components/post-detail.sub.vue
View File

@ -18,7 +18,7 @@
<div class="body"> <div class="body">
<mk-post-html v-if="post.ast" :ast="post.ast" :i="os.i" :class="$style.text"/> <mk-post-html v-if="post.ast" :ast="post.ast" :i="os.i" :class="$style.text"/>
<div class="media" v-if="post.media"> <div class="media" v-if="post.media">
<mk-images :images="post.media"/> <mk-media-list :mediaList="post.media"/>
</div> </div>
</div> </div>
</div> </div>

2
src/web/app/desktop/views/components/post-detail.vue
View File

@ -40,7 +40,7 @@
<div class="body"> <div class="body">
<mk-post-html :class="$style.text" v-if="p.ast" :ast="p.ast" :i="os.i"/> <mk-post-html :class="$style.text" v-if="p.ast" :ast="p.ast" :i="os.i"/>
<div class="media" v-if="p.media"> <div class="media" v-if="p.media">
<mk-images :images="p.media"/> <mk-media-list :mediaList="p.media"/>
</div> </div>
<mk-poll v-if="p.poll" :post="p"/> <mk-poll v-if="p.poll" :post="p"/>
<mk-url-preview v-for="url in urls" :url="url" :key="url"/> <mk-url-preview v-for="url in urls" :url="url" :key="url"/>

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

@ -42,7 +42,7 @@
<a class="rp" v-if="p.repost">RP:</a> <a class="rp" v-if="p.repost">RP:</a>
</div> </div>
<div class="media" v-if="p.media"> <div class="media" v-if="p.media">
<mk-images :images="p.media"/> <mk-media-list :mediaList="p.media"/>
</div> </div>
<mk-poll v-if="p.poll" :post="p" ref="pollViewer"/> <mk-poll v-if="p.poll" :post="p" ref="pollViewer"/>
<div class="tags" v-if="p.tags && p.tags.length > 0"> <div class="tags" v-if="p.tags && p.tags.length > 0">

2
src/web/app/desktop/views/components/sub-post-content.vue
View File

@ -8,7 +8,7 @@
</div> </div>
<details v-if="post.media"> <details v-if="post.media">
<summary>({{ post.media.length }}つのメディア)</summary> <summary>({{ post.media.length }}つのメディア)</summary>
<mk-images :images="post.media"/> <mk-media-list :mediaList="post.media"/>
</details> </details>
<details v-if="post.poll"> <details v-if="post.poll">
<summary>投票</summary> <summary>投票</summary>

4
src/web/app/mobile/views/components/index.ts
View File

@ -4,7 +4,7 @@ import ui from './ui.vue';
import timeline from './timeline.vue'; import timeline from './timeline.vue';
import post from './post.vue'; import post from './post.vue';
import posts from './posts.vue'; import posts from './posts.vue';
import imagesImage from './images-image.vue'; import mediaImage from './media-image.vue';
import drive from './drive.vue'; import drive from './drive.vue';
import postPreview from './post-preview.vue'; import postPreview from './post-preview.vue';
import subPostContent from './sub-post-content.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-timeline', timeline);
Vue.component('mk-post', post); Vue.component('mk-post', post);
Vue.component('mk-posts', posts); 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-drive', drive);
Vue.component('mk-post-preview', postPreview); Vue.component('mk-post-preview', postPreview);
Vue.component('mk-sub-post-content', subPostContent); Vue.component('mk-sub-post-content', subPostContent);

4
src/web/app/mobile/views/components/images-image.vue → src/web/app/mobile/views/components/media-image.vue
View File

@ -1,5 +1,5 @@
<template> <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> </template>
<script lang="ts"> <script lang="ts">
@ -19,7 +19,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mk-images-image .mk-media-image
display block display block
overflow hidden overflow hidden
width 100% width 100%

2
src/web/app/mobile/views/components/post-detail.vue
View File

@ -43,7 +43,7 @@
<router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=#${tag}`">{{ tag }}</router-link> <router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=#${tag}`">{{ tag }}</router-link>
</div> </div>
<div class="media" v-if="p.media"> <div class="media" v-if="p.media">
<mk-images :images="p.media"/> <mk-media-list :mediaList="p.media"/>
</div> </div>
<mk-poll v-if="p.poll" :post="p"/> <mk-poll v-if="p.poll" :post="p"/>
<mk-url-preview v-for="url in urls" :url="url" :key="url"/> <mk-url-preview v-for="url in urls" :url="url" :key="url"/>

2
src/web/app/mobile/views/components/post.vue
View File

@ -41,7 +41,7 @@
<a class="rp" v-if="p.repost != null">RP:</a> <a class="rp" v-if="p.repost != null">RP:</a>
</div> </div>
<div class="media" v-if="p.media"> <div class="media" v-if="p.media">
<mk-images :images="p.media"/> <mk-media-list :mediaList="p.media"/>
</div> </div>
<mk-poll v-if="p.poll" :post="p" ref="pollViewer"/> <mk-poll v-if="p.poll" :post="p" ref="pollViewer"/>
<div class="tags" v-if="p.tags && p.tags.length > 0"> <div class="tags" v-if="p.tags && p.tags.length > 0">

2
src/web/app/mobile/views/components/sub-post-content.vue
View File

@ -7,7 +7,7 @@
</div> </div>
<details v-if="post.media"> <details v-if="post.media">
<summary>({{ post.media.length }}個のメディア)</summary> <summary>({{ post.media.length }}個のメディア)</summary>
<mk-images :images="post.media"/> <mk-media-list :mediaList="post.media"/>
</details> </details>
<details v-if="post.poll"> <details v-if="post.poll">
<summary>%i18n:mobile.tags.mk-sub-post-content.poll%</summary> <summary>%i18n:mobile.tags.mk-sub-post-content.poll%</summary>