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:
@@ -45,6 +45,10 @@ a{
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
p{
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/*=====================Référencement*/
|
||||
.referenceText{
|
||||
position:absolute;
|
||||
@@ -111,6 +115,7 @@ canvas {
|
||||
|
||||
|
||||
/*=============Classes générales*/
|
||||
/*==============Main UI*/
|
||||
.uiStyle{
|
||||
background-color: var(--back-color);
|
||||
border-style: solid;
|
||||
@@ -140,6 +145,7 @@ canvas {
|
||||
.iconBtnStyle:hover{
|
||||
background-color: var(--main-color);
|
||||
color: var(--back-color);
|
||||
border-color: var(--back-color);
|
||||
}
|
||||
|
||||
.textBtnStyle{
|
||||
@@ -156,6 +162,12 @@ canvas {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.textBtnStyle:hover{
|
||||
background-color: var(--main-color);
|
||||
color: var(--back-color);
|
||||
border-color: var(--back-color);
|
||||
}
|
||||
|
||||
/*================ PC LARGE*/
|
||||
@media(min-width:1000px){
|
||||
.textBtnStyle{
|
||||
@@ -163,7 +175,70 @@ canvas {
|
||||
}
|
||||
}
|
||||
|
||||
.textBtnStyle:hover{
|
||||
background-color: var(--main-color);
|
||||
color: var(--back-color);
|
||||
/*==============Window*/
|
||||
.windowStyle{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
background-color: var(--back-color);
|
||||
border-style: solid;
|
||||
border-width: thin;
|
||||
border-radius: 16.1px;
|
||||
border-color: var(--main-color);
|
||||
}
|
||||
|
||||
.windowTitle{
|
||||
width:100%;
|
||||
height:50px;
|
||||
background-color: var(--main-color);
|
||||
border-radius: 16.1px 16.1px 0 0;
|
||||
font-family: 'lineal';
|
||||
font-size: 16.1px;
|
||||
color: var(--back-color);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.windowTitleLower{
|
||||
font-family: 'velvelyne';
|
||||
font-weight: lighter;
|
||||
font-size: 13.12px;
|
||||
}
|
||||
|
||||
.closeBtn{
|
||||
color: var(--back-color);
|
||||
background-color: var(--main-color);
|
||||
border-style: solid;
|
||||
border-width: thin;
|
||||
border-radius: 16.1px;
|
||||
border-color: var(--back-color);
|
||||
width: 50px;
|
||||
height: 33px;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.closeBtn:hover{
|
||||
color: var(--main-color);
|
||||
background-color: var(--back-color);
|
||||
}
|
||||
|
||||
.windowContent{
|
||||
height:77%;
|
||||
width:100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
/*==========================Moveable*/
|
||||
.moveable-control-box {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@@ -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!");
|
||||
}
|
||||
};
|
||||
|
||||
@@ -0,0 +1,36 @@
|
||||
//ecrire les messages ici avec 6 paramètres : title, content, likes, going, isSelected, isEvent
|
||||
// like & going à 0 par défaut (fonctionnel)
|
||||
// isSelected: false par défault (fonctionnel)
|
||||
// isEvent: true si le message concerne un évènement
|
||||
export const msgDataList = [
|
||||
{
|
||||
title: 'Atelier Meetup 1/3',
|
||||
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,
|
||||
going: 0,
|
||||
wasRead: false,
|
||||
isSelected: false,
|
||||
isEvent: true
|
||||
},
|
||||
{
|
||||
title: 'Atelier Meetup 1/3',
|
||||
date: '21/03',
|
||||
content: 'Lorem ipsum dolor sit amet consectetur adipiscing elit.',
|
||||
like: 1,
|
||||
going: 161,
|
||||
isSelected: false,
|
||||
wasRead: false,
|
||||
isEvent: false
|
||||
},
|
||||
{
|
||||
title: 'test00333',
|
||||
date: '21/03',
|
||||
content: 'Lorem ipsum dolor sit amet consectetur adipiscing elit. Lorem ipsum dolor sit amet consectetur adipiscing elit',
|
||||
like: 333,
|
||||
going: 0,
|
||||
isSelected: false,
|
||||
wasRead: false,
|
||||
isEvent: true
|
||||
}
|
||||
]
|
||||
Reference in New Issue
Block a user