From 23bc203a1bc1ca7255e0aad45a0c6bd75d5641dc Mon Sep 17 00:00:00 2001 From: vgaNAR6ta Date: Thu, 19 Mar 2026 21:34:49 +0100 Subject: [PATCH] =?UTF-8?q?edit:=20r=C3=A9glages=20de=20la=20boite=20de=20?= =?UTF-8?q?r=C3=A9ception=20et=20modif=20syst=C3=A8me=20selection=20du=20m?= =?UTF-8?q?sg?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/infoComponents/InboxContent.vue | 133 ++++++++++-------- .../src/infoComponents/msgData.js | 8 ++ 2 files changed, 81 insertions(+), 60 deletions(-) diff --git a/v1-com-officielle/src/infoComponents/InboxContent.vue b/v1-com-officielle/src/infoComponents/InboxContent.vue index 025de3f..e028370 100644 --- a/v1-com-officielle/src/infoComponents/InboxContent.vue +++ b/v1-com-officielle/src/infoComponents/InboxContent.vue @@ -13,20 +13,18 @@

{{msgNumber}}

+

{{item.date}}
{{item.title}}

-

{{item.like}}

- -

{{item.going}}

- +

{{item.like}}

+ +

{{item.going}}

+

PARTICIPAN.X.S

+

JE PARTICIPE!

@@ -40,9 +38,9 @@ />

- Message du {{selectedMsgDate}} + Message du {{selectedMsg.date}}
- {{selectedMsgTitle}} + {{selectedMsg.title}}

-

{{selectedMsgLikes}}

- -

{{selectedMsgGoings}}

-
-

{{selectedMsgContent}}

+

{{selectedMsg.content}}

@@ -87,7 +85,6 @@ width: 333px; height: 333px; } - /*================ PC LARGE*/ @media(min-width:1000px){ #msgVisualizer{ @@ -105,7 +102,6 @@ align-items: center; justify-content: flex-start; } - #inboxHeader{ width: 100%; height: 20%; @@ -124,7 +120,6 @@ font-weight: bold; padding-left: 33px; } - #msgNumberStyle{ font-family: 'lineal'; font-size: 33px; @@ -164,7 +159,6 @@ border-color: var(--accent-color); font-family: 'lineal'; } - .selectedStyle .msgTitle{ opacity: 1; } @@ -172,7 +166,6 @@ .unreadStyle{ font-family: 'lineal'; } - .unreadStyle .msgTitle{ opacity: 1; } @@ -181,41 +174,22 @@ background-color: var(--accent-color); color: var(--main-color); } - .selectedStyle:hover{ color: var(--back-color); background-color: var(--main-color); border-color: var(--back-color); } - .msgStyle .icon{ - height: 13.12px; - width: auto; - } - - .msgStyle .iconBtnStyle{ - height: 25px; - width: auto; - } - .msgStyle .textBtnStyle{ - font-size: 11px; - height: 25px; - width: 100px; - font-family: 'velvelyne'; - font-weight: bold; - } .msgTitle{ padding-left: 33px; - width: 53%; + width: 47%; font-size: 16.1px; align-items: center; opacity: 0.333; } - .msgTitle:hover{ opacity: inherit; } - .msgTitle strong{ font-family: 'velvelyne'; font-size: 11px; @@ -226,31 +200,54 @@ padding-right: 33px; padding-top:16.1px; width: 47%; + height: 33.3%; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; - font-size: 16.1px; + background-color: transparent; + font-family: 'velvelyne'; + font-weight: bold; + font-size: 13.12px; + } + @media(min-width:1000px){ + .msgReact{ + font-size: 16.1px; + } } - .msgReact p{ - width: 33px; + .reactStatStyle{ font-family: 'lineal'; font-weight: normal; - text-align: center; + width: 20px; + padding-right: 7.77px; + text-align: right; + } + + .msgReact .icon{ + height: 16.1px; + width: auto; + margin-top: -3.33px; } .windowContent .msgReact{ - width: 99%; + margin-left: -16.1%; + width: 77%; justify-content: flex-start; + font-family: 'lineal'; + font-weight: normal; padding: 0; } - - .windowContent .icon{ - height: 13.12px; - width: auto; + .windowContent .reactStatStyle{ + text-align: center; + width: 33px; + padding-right: 0; + } + .windowContent .icon{ + height: 16.1px; + width: auto; + margin-top: 0; } - .windowContent .iconBtnStyle{ height: 33px; width: 33px; @@ -274,6 +271,13 @@ overflow-y: scroll; } + .reactedStyle{ + color: var(--accent-color); + } + + .msgStyle:hover .reactedStyle{ + color: var(--back-color); + } /*================ PC LARGE*/ @media(min-width:1000px){} @@ -300,11 +304,7 @@ for(let i in this.msgList){ this.msgList[i].isSelected = false; } - this.selectedMsgTitle = e.title; - this.selectedMsgContent = e.content; - this.selectedMsgLikes = e.like; - this.selectedMsgGoings = e.going; - this.selectedMsgDate = e.date; + this.selectedMsg = e e.isSelected = true; e.wasRead = true; @@ -319,17 +319,30 @@ if (!this.msgList[j].wasRead) this.msgNumber += 1; } + }, + likeMsg(){ + this.selectedMsg.isLiked = !this.selectedMsg.isLiked; + }, + goingToEvent(){ + this.selectedMsg.isGoing = !this.selectedMsg.isGoing; } }, data(){ return{ msgList: [...msgDataList], msgNumber: 0, - selectedMsgTitle: 'no selected message!', - selectedMsgContent: 'no selected message!', - selectedMsgLikes: 0, - selectedMsgGoings: 0, - selectedMsgDate: 'NSM!!!', + selectedMsg: { + title: '', + date: '', + content: '', + like: 0, + isLiked: false, + going: 0, + isGoing: false, + wasRead: false, + isSelected: false, + isEvent: false + }, msgSelected: false } }, diff --git a/v1-com-officielle/src/infoComponents/msgData.js b/v1-com-officielle/src/infoComponents/msgData.js index b561377..4197f2c 100644 --- a/v1-com-officielle/src/infoComponents/msgData.js +++ b/v1-com-officielle/src/infoComponents/msgData.js @@ -1,6 +1,8 @@ //ecrire les messages ici avec 6 paramètres : title, content, likes, going, isSelected, isEvent // like & going à 0 par défaut (fonctionnel) +// isLiked & isGoing local pour cette session: false par default (fonctionnel) // isSelected: false par défault (fonctionnel) +// wasRead: false par défault (fonctionnel) // isEvent: true si le message concerne un évènement export const msgDataList = [ { @@ -8,7 +10,9 @@ export const msgDataList = [ date: '21/03', content: 'Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos. \n\n Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.', like: 0, + isLiked: false, going: 0, + isGoing: false, wasRead: false, isSelected: false, isEvent: true @@ -18,7 +22,9 @@ export const msgDataList = [ date: '21/03', content: 'Lorem ipsum dolor sit amet consectetur adipiscing elit.', like: 1, + isLiked: false, going: 161, + isGoing: false, isSelected: false, wasRead: false, isEvent: false @@ -28,7 +34,9 @@ export const msgDataList = [ date: '21/03', content: 'Lorem ipsum dolor sit amet consectetur adipiscing elit. Lorem ipsum dolor sit amet consectetur adipiscing elit', like: 333, + isLiked: false, going: 0, + isGoing: false, isSelected: false, wasRead: false, isEvent: true