bachir/ouatterrir-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

editable image add image icon

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/assets/main.scss
View File

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

1
src/components/contents/Entite.vue
View File

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

15
src/components/editable/ImageEditable.vue
View File

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