forked from vgaNAR6ta/drags-and-nerds
edit: réglages de la boite de réception et modif système selection du msg
This commit is contained in:
@@ -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
|
||||
}
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user