blackicedbear/FHC-Core
1
0
Fork 0
mirror of https://github.com/FH-Complete/FHC-Core.git synced 2026-06-01 20:29:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

buttons edit and delete foto: adapt for better visibility, add preview to upload

Browse Source
This commit is contained in:
ma0068
2025-10-27 13:43:59 +01:00
parent 7755dc12d0
commit c12678ca5a
4 changed files with 83 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/components/Detailheader.css
+57 -1
View File
@@ -5,4 +5,60 @@
.bg-unruly {
background-color: #ad1010 !important;
color: white;
}
}
/*.fotosperre {
z-index: 1;
font-size: 1rem;
width: 1.25rem;
height: 1.25rem;
}*/
.foto-container .fotoedit {
opacity: 0;
transition: opacity 0.3s;
backdrop-filter: blur(2px);
}
.fotoedit {
background-color: rgba(0, 0, 0, 0.4);
color: white;
border: none;
z-index: 4;
font-size: 1rem;
width: 1.8rem;
height: 1.8rem;
opacity:0;
transition: opacity 0.2s;
top:20%;
}
/* fotoeditMa {
background-color: rgba(0, 0, 0, 0.4);
color: white;
border: none;
z-index: 4;
font-size: 1rem;
opacity:0;
transition: opacity 0.2s;
top:20%;
}*/
.buttonleft {
margin-left: 1rem;
}
.buttonright {
margin-right: 1rem;
}
/*.fotoEditMa {
z-index: 104;
font-size: 1rem;
width: 2.5rem;
height: 2.5rem;
opacity:0;
transition: opacity 0.2s;
top:13%;"
z-index: 104; font-size: 1rem; width: 2.5rem; height: 2.5rem; opacity:0; transition: opacity 0.2s; top:13%;"
}*/
public/js/components/DetailHeader/DetailHeader.js
+6 -14
View File
@@ -7,12 +7,6 @@ export default {
components: {
ModalUploadFoto
},
/* inject: {
domain: {
from: 'configDomain',
default: 'fhcomplete.info'
},
},*/
props: {
headerData: {
type: Object,
@@ -203,23 +197,21 @@ export default {
/>
<template v-if="person.foto_sperre">
<i
class=" fa fa-lock text-secondary bg-light rounded d-flex justify-content-center align-items-center position-absolute top-0 end-0"
style="z-index: 1; font-size: 1rem; width: 1.25rem; height: 1.25rem;"
></i>
<i class="fa fa-lock text-secondary bg-light rounded d-flex justify-content-center align-items-center position-absolute top-0 end-0"
style="z-index: 1; font-size: 1rem; width: 1.25rem; height: 1.25rem;"
>
</i>
</template>
<template v-if="fotoEditable">
<button
type="button"
class="fotoedit btn btn-outline-dark btn-sm d-flex justify-content-center align-items-center position-absolute start-0"
style="z-index: 4; font-size: 1rem; width: 1.5rem; height: 1.5rem; opacity:0; transition: opacity 0.2s; top:20%; left:2rem;"
class="fotoedit buttonleft btn btn-outline-dark btn-sm d-flex justify-content-center align-items-center position-absolute start-0"
@click="showDeleteModal(headerData[0].person_id)">
<i class="fa fa-xmark"></i>
</button>
<button
type="button"
class="fotoedit btn btn-outline-dark btn-sm d-flex justify-content-center align-items-center position-absolute end-0"
style="z-index: 4; font-size: 1rem; width: 1.5rem; height: 1.5rem; opacity:0; transition: opacity 0.2s; top:20%; right:2rem;"
class="fotoedit buttonright btn btn-outline-dark btn-sm d-flex justify-content-center align-items-center position-absolute end-0"
@click="showModal(headerData[0].person_id)">
<i class="fa fa-pen"></i>
</button>
public/js/components/DetailHeader/Modal/UploadFoto.js
+19 -15
View File
@@ -19,11 +19,9 @@ export default {
},
data(){
return{
formData: {
file: null,
preview: null,
base64Image: null,
},
base64Image: null,
file: null,
preview: null,
}
},
methods:{
@@ -36,6 +34,7 @@ export default {
// convert File in base64
const reader = new FileReader();
reader.onload = (event) => {
this.base64Image = event.target.result;
this.preview = this.base64Image;
@@ -51,19 +50,23 @@ export default {
return this.$api
.call(ApiHandleFoto.uploadFoto(person_id, {
image: this.base64Image, // Base64 String
filename: this.file.name // Original name of file
image: this.base64Image,
filename: this.file.name
}))
.then(result => {
this.$fhcAlert.alertSuccess(this.$p.t('ui', 'successFotoUpload'));
this.resetModal();
this.$refs.modalUploadFoto.hide();
this.closeModal();
this.$emit('reload');
})
.catch(this.$fhcAlert.handleSystemError);
},
resetModal(){
this.formData.foto = [];
this.base64Image = [];
this.file = null;
},
closeModal(){
this.resetModal();
this.$refs.modalUploadFoto.hide();
}
},
template: `
@@ -78,18 +81,19 @@ export default {
<form-form
ref="formUploadFoto"
>
<div>
<input type="file" @change="onFileChange" accept="image/*" />
<div v-if="preview">
<p>Preview:</p>
<img :src="preview" width="200" />
<input class="form-control" type="file" @change="onFileChange" accept="image/*" />
<div class="mt-3">
<div>
<img :src="base64Image" style="width:100px"/>
</div>
</div>
</div>
</form-form>
<template #footer>
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
<button class="btn btn-secondary" @click="closeModal()">{{$p.t('ui', 'cancel')}}</button>
<button type="button" class="btn btn-primary" @click="uploadImage(person_id)">{{$p.t('ui', 'hochladen')}}</button>
</div>
</template>
public/js/components/Stv/Studentenverwaltung/Details.js
+1
View File
@@ -71,6 +71,7 @@ export default {
:headerData="students"
typeHeader="student"
@reload="reloadList"
fotoEditable
>
<template #titleAlphaTile>P_ID</template>
<template #valueAlphaTile>{{students[0].person_id}}</template>