editable image add image icon

This commit is contained in:
Bachir Soussi Chiadmi 2024-03-19 21:44:04 +01:00
parent e9b6b90816
commit 4b215617f1
3 changed files with 17 additions and 6 deletions

View File

@ -1070,9 +1070,11 @@ div.editable-image{
text-align: center;
transition: all 0.2s ease-in-out;
position: relative;
>span{
>svg{
display: inline-block;
vertical-align: middle;
width:50px; height:50px;
color: #333;
}
cursor: pointer;
box-sizing: border-box;
@ -1081,6 +1083,9 @@ div.editable-image{
}
}
div.delete-btn{
cursor: pointer;
}
input[type="file"]{
display: none;
}

View File

@ -59,6 +59,7 @@ export default {
<section class="entite">
<section v-if="entite.image.length || entite.can_update" class="image">
<ImageEditable
:can_update="entite.can_update"
:image="entite.image"
:data="{
entitytype: 'node',

View File

@ -9,16 +9,19 @@ import { UserStore } from '@stores/user'
import SvgIcon from '@jamescoyle/vue-icon';
import { mdiTrashCanOutline } from '@mdi/js';
import { mdiImagePlus } from '@mdi/js';
export default {
props: {
can_update: Boolean,
image: Object,
data: Object
},
emits: ['updated'],
data(){
return {
mdiTrashCanOutline_path: mdiTrashCanOutline
mdiTrashCanOutline_path: mdiTrashCanOutline,
mdiImagePlus_path: mdiImagePlus
}
},
computed: {
@ -121,13 +124,15 @@ export default {
<img :src="image[0].url" :alt="image[0].alt"/>
<figcaption v-if="image[0].alt">{{ image[0].alt }}</figcaption>
</figure>
<svg-icon type="mdi" :path="mdiTrashCanOutline_path" @click="onDeleteImg" />
<div v-if="can_update" @click="onDeleteImg" class="delete-btn">
<svg-icon type="mdi" :path="mdiTrashCanOutline_path" />
</div>
</template>
<!-- with out img -->
<template v-else>
<template v-else-if="can_update">
<div @click="addImage" class="btn">
<span>ajouter une image</span>
<svg-icon type="mdi" :path="mdiImagePlus_path" @click="onDeleteImg" />
<!-- <span>ajouter une image</span> -->
</div>
<input ref="image_input" type="file" accept ="image/jpeg, image/png, image/jpg" @input="onInput">
</template>