Mizah/Sharkey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
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
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 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);

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