4nk/ihm_client
5
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

header-signature_close_and_open_ok

Browse Source
This commit is contained in:
Pascal 2025-01-28 14:47:50 +01:00
parent 4d428601b5
commit d64d1430c4
2 changed files with 73 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
public/style/chat.css
View File

@ -335,6 +335,44 @@ body {
border-radius: 10px; border-radius: 10px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
margin: 1% 0% 0.5% 1%; margin: 1% 0% 0.5% 1%;
transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s;
visibility: visible;
}
.signature-area.hidden {
opacity: 0;
visibility: hidden;
display: none;
}
.signature-header {
display: flex;
align-items: center;
justify-content: center;
background-color: var(--primary-color);
color: white;
border-radius: 10px 10px 0 0;
padding-left: 4%;
}
#close-signature {
cursor: pointer;
align-items: center;
margin-left: auto;
margin-right: 2%;
border-radius: 50%;
background-color: var(--primary-color);
color: white;
border: none;
padding: -3%;
margin-top: -5%;
font-size: 1em;
font-weight: bold;
}
#close-signature:hover {
background-color: var(--secondary-color);
color: var(--primary-color);
} }
#message-input { #message-input {

36
src/pages/chat/chat.ts
View File

@ -93,7 +93,7 @@ class ChatElement extends HTMLElement {
<div class="signature-area"> <div class="signature-area">
<div class="signature-header"> <div class="signature-header">
<h1>Signature</h1> <h1>Signature</h1>
<button id="close-signature">x</button> <button id="close-signature" class="close-signature">x</button>
</div> </div>
<div class="signature-content"> <div class="signature-content">
<div class="signature-description"> <div class="signature-description">
@ -953,6 +953,8 @@ class ChatElement extends HTMLElement {
console.log('🎯 Loading all processes'); console.log('🎯 Loading all processes');
console.log("Je suis le processSet dans loadAllProcesses :", processSet); console.log("Je suis le processSet dans loadAllProcesses :", processSet);
this.closeSignature();
const dbRequest = indexedDB.open('4nk'); const dbRequest = indexedDB.open('4nk');
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
@ -1029,6 +1031,17 @@ class ChatElement extends HTMLElement {
} }
li.setAttribute('data-process-id', oneProcess); li.setAttribute('data-process-id', oneProcess);
li.onclick = async (event) => {
event.stopPropagation();
console.log("CLICKED ON PROCESS:", oneProcess);
//viser le h1 de signature-header
const signatureHeader = this.shadowRoot?.querySelector('.signature-header h1');
if (signatureHeader) {
const emoji = await addressToEmoji(oneProcess);
signatureHeader.textContent = `Signature of ${emoji}`;
}
this.openSignature();
};
groupList.appendChild(li); groupList.appendChild(li);
const container = document.createElement('div'); const container = document.createElement('div');
@ -1132,6 +1145,25 @@ class ChatElement extends HTMLElement {
}); });
} }
//fonction qui ferme la signature
private closeSignature() {
const closeSignature = this.shadowRoot?.querySelector('#close-signature');
const signatureArea = this.shadowRoot?.querySelector('.signature-area');
if (closeSignature && signatureArea) {
closeSignature.addEventListener('click', () => {
signatureArea.classList.add('hidden');
});
}
}
//fonction qui ouvre la signature
private openSignature() {
const signatureArea = this.shadowRoot?.querySelector('.signature-area');
if (signatureArea) {
signatureArea.classList.remove('hidden');
}
}
//Load tous les processus où le sp_adress est impliqué et renvoie un tableau d'adresses de processus //Load tous les processus où le sp_adress est impliqué et renvoie un tableau d'adresses de processus
private async getMyProcessId() { private async getMyProcessId() {
const service = await Services.getInstance(); const service = await Services.getInstance();
@ -1234,6 +1266,8 @@ class ChatElement extends HTMLElement {
li.className = 'group-list-item'; li.className = 'group-list-item';
li.setAttribute('data-process-id', processId); li.setAttribute('data-process-id', processId);
const container = document.createElement('div'); const container = document.createElement('div');
container.className = 'group-item-container'; container.className = 'group-item-container';