some changes
This commit is contained in:
Theophyl Hoguet committed
1 parent
522bbc73cf
commit
67a211d221
4 files changed
+112
-100
No files matched your search
+1
-44
@@ -55,12 +55,7 @@ export default defineComponent({
|
||||
<RouterView :images="images" @delete="deleteFile" @updateImageList="updateImageList()" />
|
||||
</template>
|
||||
<style scoped>
|
||||
.navi {
|
||||
/* reduce size of children */
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
pointer-events: none;
|
||||
}
|
||||
@import url("@/navi.css");
|
||||
|
||||
header {
|
||||
display: block;
|
||||
@@ -72,17 +67,6 @@ header {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
ul>li+li {
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
ul>li {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.router-link-active {
|
||||
background-color: #646cff;
|
||||
}
|
||||
@@ -90,31 +74,4 @@ ul>li {
|
||||
.router-link-active>a {
|
||||
color: rgb(205, 201, 194);
|
||||
}
|
||||
|
||||
a {
|
||||
padding: 5px 15px;
|
||||
border-radius: 60px;
|
||||
color: rgb(172, 165, 154);
|
||||
text-decoration: none;
|
||||
font-family: "Aeonik", sans-serif;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-left: 20px;
|
||||
height: 60px;
|
||||
padding-right: 20px;
|
||||
border-radius: 60px;
|
||||
background-color: rgb(24, 26, 27);
|
||||
margin-right: 20px;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -22,7 +22,6 @@ export default defineComponent({
|
||||
data() {
|
||||
return {
|
||||
imageSelectedId: -1,
|
||||
timer: null as ReturnType<typeof setTimeout> | null,
|
||||
editor: false,
|
||||
filter: undefined as Filter | undefined,
|
||||
}
|
||||
@@ -47,35 +46,29 @@ export default defineComponent({
|
||||
this.imageSelectedId = id;
|
||||
else
|
||||
this.imageSelectedId = this.images.keys().next().value;
|
||||
},
|
||||
startTimer() {
|
||||
if (this.timer !== null)
|
||||
clearTimeout(this.timer);
|
||||
this.timer = setTimeout(() => {
|
||||
this.editor = !this.editor;
|
||||
}, 1900);
|
||||
},
|
||||
clearTimer() {
|
||||
if (this.timer !== null) {
|
||||
clearTimeout(this.timer);
|
||||
this.timer = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<div class="flex" v-if="images.size > 0">
|
||||
<h1 v-if="!editor">MODE SÉLECTION</h1>
|
||||
<h1 v-else>MODE ÉDITEUR</h1>
|
||||
<div class="navi">
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<h3 :class="{ active: !editor }" @click="editor = false">Mode selection</h3>
|
||||
</li>
|
||||
<li>
|
||||
<h3 :class="{ active: editor }" @click="editor = true">Mode editeur</h3>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<HomeSelect v-if="!editor" :images="images" :image-selected-id="imageSelectedId" @delete="id => $emit('delete', id)"
|
||||
@updateImageSelectedId="id => updateImageSelectedId(id)"></HomeSelect>
|
||||
<HomeEditor v-else @apply-filter="(newFilter) => filter = newFilter"></HomeEditor>
|
||||
<h5 v-if="!editor">Restez sur l'image pour passer en mode éditeur</h5>
|
||||
<h5 v-else>Restez sur l'image pour passer en mode selection</h5>
|
||||
<Image @mouseleave="clearTimer()" @mouseenter="startTimer()" class="home"
|
||||
v-if="imageSelectedId !== undefined && imageSelectedId !== -1" :id="imageSelectedId" :images="images"
|
||||
:filter="filter">
|
||||
<Image class="home" v-if="imageSelectedId !== undefined && imageSelectedId !== -1" :id="imageSelectedId"
|
||||
:images="images" :filter="filter">
|
||||
</Image>
|
||||
<a class="button" :href="images.get(imageSelectedId)?.data"
|
||||
:download="images.get(imageSelectedId)?.name">Télécharger {{ images.get(imageSelectedId)?.name }}</a>
|
||||
@@ -83,16 +76,13 @@ export default defineComponent({
|
||||
<h1 v-else>Aucune image trouvée</h1>
|
||||
</template>
|
||||
<style scoped>
|
||||
@import url("@/navi.css");
|
||||
|
||||
h1 {
|
||||
color: white;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h5 {
|
||||
color: white;
|
||||
margin: 1vw 0 0 0;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
@@ -106,6 +96,19 @@ html {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4vh;
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: #646cff;
|
||||
}
|
||||
|
||||
.active a {
|
||||
color: rgb(205, 201, 194);
|
||||
}
|
||||
|
||||
.navi h3 {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
@@ -114,29 +117,5 @@ html {
|
||||
width: auto;
|
||||
height: auto;
|
||||
max-height: 60vh;
|
||||
margin: 0 0 2vw 0;
|
||||
}
|
||||
|
||||
div.home.imageContainer:hover {
|
||||
animation: zoom-in-zoom-out 2s cubic-bezier(1, 0, 0.51, 1.01);
|
||||
transform: none;
|
||||
}
|
||||
|
||||
@keyframes zoom-in-zoom-out {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: scale(10);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -17,7 +17,7 @@ export default defineComponent({
|
||||
filterSelectId: 0,
|
||||
open: false,
|
||||
filters: [] as Filter[],
|
||||
error: false,
|
||||
error: "",
|
||||
}
|
||||
},
|
||||
created() {
|
||||
@@ -27,6 +27,8 @@ export default defineComponent({
|
||||
},
|
||||
methods: {
|
||||
applyFilter() {
|
||||
if (this.error !== "")
|
||||
return;
|
||||
if (this.filterSelectId === 0) {
|
||||
this.$emit("applyFilter", undefined);
|
||||
return;
|
||||
@@ -34,11 +36,37 @@ export default defineComponent({
|
||||
const filter = clone(this.filters[this.filterSelectId - 1]);
|
||||
for (const arg of filter.parameters) {
|
||||
if (arg.value === undefined) {
|
||||
this.error = true;
|
||||
this.error = "";
|
||||
return;
|
||||
}
|
||||
}
|
||||
this.$emit("applyFilter", filter);
|
||||
},
|
||||
areInputValid() {
|
||||
if (this.filterSelectId === 0)
|
||||
return "";
|
||||
for (const p of this.filters[this.filterSelectId - 1].parameters) {
|
||||
const input = document.getElementById(p.name) as HTMLInputElement;
|
||||
if (input === null)
|
||||
return "";
|
||||
if (!input.checkValidity())
|
||||
return "Paramètre(s) du filtre invalide(s)";
|
||||
}
|
||||
return "";
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
filters: {
|
||||
handler() {
|
||||
for (const f of this.filters) {
|
||||
for (const p of f.parameters) {
|
||||
if (p.value === undefined)
|
||||
p.value = Math.round((p.max - Math.abs(p.min)) / 2);
|
||||
}
|
||||
}
|
||||
this.error = this.areInputValid();
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -62,12 +90,17 @@ export default defineComponent({
|
||||
</div>
|
||||
<div v-if="filters.length != 0 && filterSelectId !== 0" v-for="parameter in filters[filterSelectId - 1].parameters"
|
||||
class="rangeInput">
|
||||
<label>{{ parameter.name }}: ({{ parameter.value }}) </label>
|
||||
<div class="labelInput">
|
||||
<label>{{ parameter.name }}</label>
|
||||
<input type="number" :min="parameter.min" :max="parameter.max" :step="parameter.step"
|
||||
v-model.number="parameter.value" :id="parameter.name" />
|
||||
</div>
|
||||
<input type="range" :min="parameter.min" :max="parameter.max" :step="parameter.step"
|
||||
v-model.number="parameter.value" />
|
||||
</div>
|
||||
<button @mouseleave="error = false" class="button" :class="{ erreurClass: error }" @click="applyFilter()">
|
||||
{{ error ? "Erreur" : "Appliquer le filtre" }}</button>
|
||||
<button @mouseenter="error = areInputValid()" @mouseleave="error = areInputValid()" class="button"
|
||||
:class="{ errorClass: error !== '' }" @click="applyFilter()">
|
||||
{{ error !== "" ? error : "Appliquer le filtre" }}</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -90,7 +123,7 @@ label {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.erreurClass {
|
||||
.errorClass {
|
||||
background-color: red;
|
||||
color: white;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,43 @@
|
||||
.navi {
|
||||
/* reduce size of children */
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
pointer-events: none;
|
||||
gap: 3vw;
|
||||
}
|
||||
|
||||
.navi ul>li {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.navi h3,
|
||||
.navi a {
|
||||
min-width: 90px;
|
||||
padding: 5px 15px;
|
||||
border-radius: 60px;
|
||||
color: rgb(172, 165, 154);
|
||||
text-decoration: none;
|
||||
font-family: "Aeonik", sans-serif;
|
||||
}
|
||||
|
||||
.navi nav {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-left: 20px;
|
||||
height: 60px;
|
||||
padding-right: 20px;
|
||||
border-radius: 60px;
|
||||
background-color: rgb(24, 26, 27);
|
||||
margin-right: 20px;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
|
||||
.navi ul {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
Reference in new issue
Block a user