133 lines
2.9 KiB
Vue
133 lines
2.9 KiB
Vue
|
<template>
|
|||
|
|
<div class="overlay edit-image-dialog" @click="$emit('bgclick')">
|
|||
|
|
<div class="overlay-content" @click.stop="">
|
|||
|
|
|
|||
|
|
<div class="area-image">
|
|||
|
|
<div class="has-image">
|
|||
|
|
<responsive-image :src="image.url" :title="image.title" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="area-settings">
|
|||
|
|
<table>
|
|||
|
|
<tr>
|
|||
|
|
<td><label>Title</label></td>
|
|||
|
|
<td><input type="text" v-model="title" placeholder="Flower by @artist" /></td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td colspan="2">
|
|||
|
|
<div class="hint">Feel free to leave a credit to the artist/photographer in the title :)</div>
|
|||
|
|
</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<!-- TODO: autocomplete category -->
|
|||
|
|
<td><label>Category</label></td>
|
|||
|
|
<td><input type="text" v-model="category" placeholder="Plants" /></td>
|
|||
|
|
</tr>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="area-buttons">
|
|||
|
|
<button class="btn" @click="saveImage">🖼️ Save image</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
<script lang="ts">
|
|||
|
|
import { defineComponent, PropType } from 'vue'
|
|||
|
|
import { Image } from '../../common/GameCommon'
|
|||
|
|
|
|||
|
|
import ResponsiveImage from './ResponsiveImage.vue'
|
|||
|
|
|
|||
|
|
export default defineComponent({
|
|||
|
|
name: 'edit-image-dialog',
|
|||
|
|
components: {
|
|||
|
|
ResponsiveImage,
|
|||
|
|
},
|
|||
|
|
props: {
|
|||
|
|
image: {
|
|||
|
|
type: Object as PropType<Image>,
|
|||
|
|
required: true,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
emits: {
|
|||
|
|
bgclick: null,
|
|||
|
|
saveClick: null,
|
|||
|
|
},
|
|||
|
|
data () {
|
|||
|
|
return {
|
|||
|
|
title: '',
|
|||
|
|
category: '',
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
created () {
|
|||
|
|
this.title = this.image.title
|
|||
|
|
this.category = this.image.categories.length > 0 ? this.image.categories[0].title : ''
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
saveImage () {
|
|||
|
|
this.$emit('saveClick', {
|
|||
|
|
id: this.image.id,
|
|||
|
|
title: this.title,
|
|||
|
|
category: this.category,
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
// TODO: scoped vs .edit-image-dialog
|
|||
|
|
<style>
|
|||
|
|
.edit-image-dialog .overlay-content {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: auto 450px;
|
|||
|
|
grid-template-rows: auto;
|
|||
|
|
grid-template-areas:
|
|||
|
|
"image settings"
|
|||
|
|
"image buttons";
|
|||
|
|
height: 90%;
|
|||
|
|
width: 80%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.edit-image-dialog .area-image {
|
|||
|
|
grid-area: image;
|
|||
|
|
margin: 20px;
|
|||
|
|
}
|
|||
|
|
.edit-image-dialog .area-image.no-image {
|
|||
|
|
align-content: center;
|
|||
|
|
display: grid;
|
|||
|
|
text-align: center;
|
|||
|
|
border: dashed 6px;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
.edit-image-dialog .area-image .has-image {
|
|||
|
|
position: relative;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
.edit-image-dialog .area-image .has-image .remove {
|
|||
|
|
position: absolute;
|
|||
|
|
top: .5em;
|
|||
|
|
left: .5em;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.edit-image-dialog .area-settings {
|
|||
|
|
grid-area: settings;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.edit-image-dialog .area-settings table input[type="text"] {
|
|||
|
|
width: 100%;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.edit-image-dialog .area-buttons {
|
|||
|
|
align-self: end;
|
|||
|
|
grid-area: buttons;
|
|||
|
|
}
|
|||
|
|
.edit-image-dialog .area-buttons button {
|
|||
|
|
width: 100%;
|
|||
|
|
margin-top: .5em;
|
|||
|
|
}
|
|||
|
|
</style>
|