vgaNAR6ta/drags-and-nerds
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

edit: réglages de la boite de réception et modif système selection du msg

Browse Source
This commit is contained in:
Vega
2026-03-19 21:34:49 +01:00
parent bee0d73041
commit 23bc203a1b
2 changed files with 81 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
v1-com-officielle/src/infoComponents/InboxContent.vue
+73 -60
View File
@@ -13,20 +13,18 @@
<p>{{msgNumber}}</p>
</div>
</div>
<div id="inboxList">
<div :class="{msgStyle: true, selectedStyle: item.isSelected, unreadStyle: !item.wasRead}" v-for="item in msgList" @click="selectMsg(item)">
<div class="msgTitle">
<p><strong>{{item.date}}</strong><br>{{item.title}}</p>
</div>
<div class="msgReact">
<p>{{item.like}}</p>
<button type="button" class="iconBtnStyle" @click.stop @touchstart.stop>
<CloseIcon name="test" class="icon"/>
</button>
<p v-show="item.isEvent">{{item.going}}</p>
<button type="button" class="textBtnStyle" v-show="item.isEvent" @click.stop @touchstart.stop>
JE PARTICIPE!
</button>
<p class="reactStatStyle">{{item.like}}</p>
<CloseIcon name="testLike" class="icon" :class="{reactedStyle: item.isLiked}"/>
<p class="reactStatStyle"v-show="item.isEvent">{{item.going}}</p>
<p v-show="item.isEvent && !item.isGoing" >PARTICIPAN.X.S</p>
<p v-show="item.isEvent && item.isGoing" class="reactedStyle">JE PARTICIPE!</p>
</div>
</div>
</div>
@@ -40,9 +38,9 @@
/>
<div class="windowTitle">
<p>
<b class="windowTitleLower">Message du {{selectedMsgDate}}</b>
<b class="windowTitleLower">Message du {{selectedMsg.date}}</b>
<br>
{{selectedMsgTitle}}
{{selectedMsg.title}}
</p>
<!-- touchstart.capture pour passer en prio sur déplacement fenêtre/ .stop si pas de method-->
<button type="button" class="closeBtn" @mousedown.stop @touchstart.capture="toggleMsg" @click="toggleMsg">
@@ -51,16 +49,16 @@
</div>
<div class="windowContent">
<div class="msgReact">
<p>{{selectedMsgLikes}}</p>
<button type="button" class="iconBtnStyle" @mousedown.stop @touchstart.stop>
<p class="reactStatStyle">{{selectedMsg.like}}</p>
<button type="button" class="iconBtnStyle" :class="{reactedStyle: selectedMsg.isLiked}" @mousedown.capture="likeMsg" @touchstart.capture="likeMsg">
<CloseIcon name="test" class="icon"/>
</button>
<p>{{selectedMsgGoings}}</p>
<button type="button" class="textBtnStyle" @mousedown.stop @touchstart.stop>
<p v-show="selectedMsg.isEvent" class="reactStatStyle">{{selectedMsg.going}}</p>
<button v-show="selectedMsg.isEvent" type="button" class="textBtnStyle" :class="{reactedStyle: selectedMsg.isGoing}" @mousedown.capture="goingToEvent" @touchstart.capture="goingToEvent">
JE PARTICIPE!
</button>
</div>
<p id="selectedMsgText" @touchstart.stop>{{selectedMsgContent}}</p>
<p id="selectedMsgText" @touchstart.stop>{{selectedMsg.content}}</p>
</div>
</div>
</div>
@@ -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
}
},
v1-com-officielle/src/infoComponents/msgData.js
+8
View File
@@ -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