forked from vgaNAR6ta/drags-and-nerds
edit: ajout d'une interface type boite de récéption pour poster des annonces régulières + structure système like et particpation (à reprendre)
This commit is contained in:
@@ -1,7 +1,69 @@
|
||||
<script setup>
|
||||
import CloseIcon from '../assets/icons/close.svg'
|
||||
import { msgDataList } from './msgData.js'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="inboxContainer" class="uiStyle">
|
||||
<div id="inboxHeader">
|
||||
<div id="inboxTitle">
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
|
||||
</div>
|
||||
<div id="msgNumberStyle">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="windowStyle" v-show="msgSelected" id="msgVisualizer" ref="msgPannel">
|
||||
<Moveable
|
||||
className="moveable"
|
||||
:target="$refs.msgPannel"
|
||||
:draggable="true"
|
||||
@drag="onDrag"
|
||||
/>
|
||||
<div class="windowTitle">
|
||||
<p>
|
||||
<b class="windowTitleLower">Message du {{selectedMsgDate}}</b>
|
||||
<br>
|
||||
{{selectedMsgTitle}}
|
||||
</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">
|
||||
<CloseIcon name="close" class="icon"/>
|
||||
</button>
|
||||
</div>
|
||||
<div class="windowContent">
|
||||
<div class="msgReact">
|
||||
<p>{{selectedMsgLikes}}</p>
|
||||
<button type="button" class="iconBtnStyle" @mousedown.stop @touchstart.stop>
|
||||
<CloseIcon name="test" class="icon"/>
|
||||
</button>
|
||||
<p>{{selectedMsgGoings}}</p>
|
||||
<button type="button" class="textBtnStyle" @mousedown.stop @touchstart.stop>
|
||||
JE PARTICIPE!
|
||||
</button>
|
||||
</div>
|
||||
<p id="selectedMsgText" @touchstart.stop>{{selectedMsgContent}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
@@ -18,19 +80,261 @@
|
||||
@media(min-width:1000px){}
|
||||
*/
|
||||
|
||||
#msgVisualizer{
|
||||
position: fixed;
|
||||
top:50%;
|
||||
left:3.33%;
|
||||
width: 333px;
|
||||
height: 333px;
|
||||
}
|
||||
|
||||
/*================ PC LARGE*/
|
||||
@media(min-width:1000px){
|
||||
#msgVisualizer{
|
||||
left: 45%;
|
||||
top: 33.3%;
|
||||
}
|
||||
}
|
||||
|
||||
#inboxContainer{
|
||||
width:100%;
|
||||
position:relative;
|
||||
height:50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
#inboxHeader{
|
||||
width: 100%;
|
||||
height: 20%;
|
||||
position: relative;
|
||||
background-color: var(--main-color);
|
||||
color: var(--back-color);
|
||||
font-size: 16.1px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#inboxTitle{
|
||||
font-family: 'velvelyne';
|
||||
font-weight: bold;
|
||||
padding-left: 33px;
|
||||
}
|
||||
|
||||
#msgNumberStyle{
|
||||
font-family: 'lineal';
|
||||
font-size: 33px;
|
||||
padding-right: 44px;
|
||||
}
|
||||
|
||||
#inboxList{
|
||||
width:100%;
|
||||
height: 75%;
|
||||
overflow-y: scroll;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.msgStyle{
|
||||
width:100%;
|
||||
height: 55px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: var(--main-color);
|
||||
border-style: solid;
|
||||
border-color: var(--main-color);
|
||||
border-width: thin;
|
||||
border-radius: 0;
|
||||
font-family: 'velvelyne';
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.selectedStyle{
|
||||
background-color: var(--main-color);
|
||||
color: var(--accent-color);
|
||||
border-color: var(--accent-color);
|
||||
font-family: 'lineal';
|
||||
}
|
||||
|
||||
.selectedStyle .msgTitle{
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.unreadStyle{
|
||||
font-family: 'lineal';
|
||||
}
|
||||
|
||||
.unreadStyle .msgTitle{
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.msgStyle:hover{
|
||||
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%;
|
||||
font-size: 16.1px;
|
||||
align-items: center;
|
||||
opacity: 0.333;
|
||||
}
|
||||
|
||||
.msgTitle:hover{
|
||||
opacity: inherit;
|
||||
}
|
||||
|
||||
.msgTitle strong{
|
||||
font-family: 'velvelyne';
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.msgReact{
|
||||
padding-right: 33px;
|
||||
padding-top:16.1px;
|
||||
width: 47%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
font-size: 16.1px;
|
||||
}
|
||||
|
||||
.msgReact p{
|
||||
width: 33px;
|
||||
font-family: 'lineal';
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.windowContent .msgReact{
|
||||
width: 99%;
|
||||
justify-content: flex-start;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.windowContent .icon{
|
||||
height: 13.12px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.windowContent .iconBtnStyle{
|
||||
height: 33px;
|
||||
width: 33px;
|
||||
border-radius: 33px;
|
||||
}
|
||||
.windowContent .textBtnStyle{
|
||||
height: 33px;
|
||||
width: 130px;
|
||||
}
|
||||
|
||||
#selectedMsgText{
|
||||
white-space: pre-line;
|
||||
font-size: 16.1px;
|
||||
font-family: 'velvelyne';
|
||||
color: var(--main-color);
|
||||
font-weight: bold;
|
||||
padding-right: 16.1px;
|
||||
padding-left: 7.77px;
|
||||
margin-top: 0;
|
||||
height: 77%;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
|
||||
/*================ PC LARGE*/
|
||||
@media(min-width:1000px){}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import Moveable from 'vue3-moveable';
|
||||
|
||||
export default {
|
||||
name : 'InboxContent',
|
||||
methods:{
|
||||
onDrag({ target, transform }) {
|
||||
target.style.transform = transform;
|
||||
},
|
||||
toggleMsg(){
|
||||
this.msgSelected = !this.msgSelected;
|
||||
if (!this.msgSelected){
|
||||
for (let k in this.msgList){
|
||||
this.msgList[k].isSelected = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
selectMsg(e){
|
||||
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;
|
||||
|
||||
e.isSelected = true;
|
||||
e.wasRead = true;
|
||||
this.unreadMsg();
|
||||
if(!this.msgSelected){
|
||||
this.msgSelected = true;
|
||||
}
|
||||
},
|
||||
unreadMsg(){
|
||||
this.msgNumber = 0;
|
||||
for(let j in this.msgList){
|
||||
if (!this.msgList[j].wasRead)
|
||||
this.msgNumber += 1;
|
||||
}
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
msgList: [...msgDataList],
|
||||
msgNumber: 0,
|
||||
selectedMsgTitle: 'no selected message!',
|
||||
selectedMsgContent: 'no selected message!',
|
||||
selectedMsgLikes: 0,
|
||||
selectedMsgGoings: 0,
|
||||
selectedMsgDate: 'NSM!!!',
|
||||
msgSelected: false
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.msgNumber = this.msgList.length
|
||||
console.log("Inbox content is loaded!");
|
||||
}
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user