para/puzzle
1
1
Fork 0
Code Issues 8 Pull requests Releases Wiki Activity

add layers for new image and new game

Browse source
This commit is contained in:
Zutatensuppe 2021-05-21 00:43:02 +02:00
parent e9b209edf1
commit bdd061dd1a
18 changed files with 551 additions and 99 deletions
Download patch file Download diff file Expand all files Collapse all files

163
src/frontend/components/NewImageDialog.vue Normal file
View file

@ -0,0 +1,163 @@
"Upload image" clicked: what it looks like when the image was uploaded.
Probably needs a (x) in the upper right corner of the image to allow the
user to remove the image if a wrong one was selected. The image should
be uploaded to the actual gallery only when the user presses "post to
gallery", if possible!
<template>
<div class="overlay new-image-dialog" @click="$emit('bgclick')">
<div class="overlay-content" @click.stop="">
<div class="area-image" :class="{'has-image': !!image.url, 'no-image': !image.url}">
<!-- TODO: ... -->
<div v-if="image.url" class="has-image">
<span class="remove btn" @click="image.url=''">X</span>
<responsive-image :src="image.url" />
</div>
<div v-else>
<!-- TODO: drop area for image -->
<upload class="upload" @uploaded="mediaImgUploaded($event)" accept="image/*" label="Upload an image" />
</div>
</div>
<div class="area-settings">
<table>
<tr>
<td><label>Title</label></td>
<td><input type="text" v-model="image.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="image.category" placeholder="Plants" /></td>
</tr>
</table>
</div>
<div class="area-buttons">
<!-- <button class="btn" :disabled="!canPostToGallery" @click="postToGallery">🖼️ Post to gallery</button> -->
<button class="btn" :disabled="!canSetupGameClick" @click="setupGameClick">🧩 Post to gallery <br /> + set up game</button>
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import Upload from './Upload.vue'
import ResponsiveImage from './ResponsiveImage.vue'
import { Image } from '../../common/GameCommon'
export default defineComponent({
name: 'new-image-dialog',
components: {
Upload,
ResponsiveImage,
},
emits: {
bgclick: null,
setupGameClick: null,
},
data () {
return {
image: {
file: '',
url: '',
title: '',
category: '',
} as Image,
}
},
computed: {
canPostToGallery () {
return !!this.image.url
},
canSetupGameClick () {
return !!this.image.url
},
},
methods: {
mediaImgUploaded(data: any) {
this.image.file = data.image.file
this.image.url = data.image.url
},
postToGallery () {
this.$emit('postToGallery', this.image)
},
setupGameClick () {
this.$emit('setupGameClick', this.image)
},
},
})
</script>
// TODO: scoped vs .new-image-dialog
<style>
.new-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%;
}
.new-image-dialog .area-image {
grid-area: image;
}
.new-image-dialog .area-image.no-image {
align-content: center;
display: grid;
text-align: center;
margin: 20px;
border: dashed 6px;
position: relative;
}
.new-image-dialog .area-image .has-image {
position: relative;
width: 100%;
height: 100%;
}
.new-image-dialog .area-image .has-image .remove {
position: absolute;
top: .5em;
left: .5em;
}
.new-image-dialog .area-settings {
grid-area: settings;
}
.new-image-dialog .area-settings table input[type="text"] {
width: 100%;
box-sizing: border-box;
}
.new-image-dialog .area-buttons {
align-self: end;
grid-area: buttons;
}
.new-image-dialog .area-buttons button {
width: 100%;
}
.new-image-dialog .upload {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: pointer;
}
.new-image-dialog .upload .btn {
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
}
</style>