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

edit: ajout d'une série de fenêtre flottantes déplaçable avec sytème de focus + transformation msgVisualizer en composant séparé et réglages associés

Browse Source
This commit is contained in:
Vega
2026-03-20 04:36:56 +01:00
parent bb0ac827bb
commit 6cd8a2e634
14 changed files with 667 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files
v1-com-officielle/src/App.vue
+1
View File
@@ -29,6 +29,7 @@
flex-direction: column;
align-items: center;
justify-content: flex-start;
z-index: 0;
}
/*================ PC LARGE*/
@media(min-width:1300px){
v1-com-officielle/src/assets/style.css
+11 -1
View File
@@ -193,10 +193,20 @@ canvas {
background-color: var(--back-color);
border-style: solid;
border-width: thin;
border-radius: 16.1px;
border-radius: 21px;
border-color: var(--main-color);
}
.zBase{
z-index: 33;
}
.zFocus{
z-index: 333;
border-color: var(--accent-color);
border-width: thick;
}
.windowTitle{
width:100%;
height:50px;
v1-com-officielle/src/components/InfoContent.vue
+1 -1
View File
@@ -1,7 +1,6 @@
<template>
<div id="infoContainer">
<InfoMenuDiv></InfoMenuDiv>
<InboxDiv></InboxDiv>
</div>
</template>
@@ -28,6 +27,7 @@
flex-direction: column;
align-items: center;
justify-content: flex-start;
z-index: 0;
}
/*================ PC LARGE*/
@media(min-width:1300px){
v1-com-officielle/src/dataExchange.js
+16
View File
@@ -0,0 +1,16 @@
import { reactive } from 'vue'
export const dataStorage = reactive({
selectedMsg: { //empty msg template
title: '',
date: '',
content: '',
like: 0,
isLiked: false,
going: 0,
isGoing: false,
wasRead: false,
isSelected: false,
isEvent: false
}
})
v1-com-officielle/src/indieComponents/ArtistPannel.vue
+84
View File
@@ -0,0 +1,84 @@
<script setup>
import CloseIcon from '../assets/icons/close.svg'
</script>
<template>
<div id="artistPannel" class="windowStyle" ref="artistPannel" @mousedown="$emit('focus')" @touchstart="$emit('focus')">
<Moveable
className="moveable"
:target="target"
:draggable="true"
@drag="onDrag"
/>
<div class="windowTitle">
<p>
<b class="windowTitleLower">À PROPOS DE</b>
<br>
Nos Artistes
</p>
<!-- touchstart.capture pour passer en prio sur déplacement fenêtre/ .stop si pas de method-->
<button type="button" class="closeBtn" @mousedown.capture="$emit('close')" @touchstart.capture="$emit('close')">
<CloseIcon name="close" class="icon"/>
</button>
</div>
<div class="windowContent">
</div>
</div>
</template>
<style scoped>
/*================= Mise en page:
=> Mobile First : par défaut, moins de 500px
=> Tablette et PC format haut : de 500 à 1000px
=> PC large : à partir de 1000px
*/
/*+++++++++++++++++ COPYBOX
================ PC HAUT/IPAD
@media(min-width:650px){}
================ PC LARGE
@media(min-width:1300px){}
*/
#artistPannel{
position: fixed;
width: 333px;
height: 500px;
top: 16.1px;
left: 16.1px;
}
/*================ PC LARGE*/
@media(min-width:1300px){
#artistPannel{
height: 777px;
width: 666px;
}
}
</style>
<script>
import Moveable from 'vue3-moveable';
export default {
name : 'ArtistPannel',
components:{
Moveable
},
data(){
return{
target: null
}
},
emits: ['close','focus'],
methods:{
onDrag({ target, transform }) {
target.style.transform = transform;
}
},
mounted(){
this.target = this.$refs.artistPannel;
console.log("Artist pannel is loaded!");
}
};
</script>
v1-com-officielle/src/indieComponents/ContactPannel.vue
+83
View File
@@ -0,0 +1,83 @@
<script setup>
import CloseIcon from '../assets/icons/close.svg'
</script>
<template>
<div id="contactPannel" class="windowStyle" ref="contactPannel" @mousedown="$emit('focus')" @touchstart="$emit('focus')">
<Moveable
className="moveable"
:target="target"
:draggable="true"
@drag="onDrag"
/>
<div class="windowTitle">
<p>
Contacter l'orga :
</p>
<!-- touchstart.capture pour passer en prio sur déplacement fenêtre/ .stop si pas de method-->
<button type="button" class="closeBtn" @mousedown.capture="$emit('close')" @touchstart.capture="$emit('close')">
<CloseIcon name="close" class="icon"/>
</button>
</div>
<div class="windowContent">
</div>
</div>
</template>
<style scoped>
/*================= Mise en page:
=> Mobile First : par défaut, moins de 500px
=> Tablette et PC format haut : de 500 à 1000px
=> PC large : à partir de 1000px
*/
/*+++++++++++++++++ COPYBOX
================ PC HAUT/IPAD
@media(min-width:650px){}
================ PC LARGE
@media(min-width:1300px){}
*/
#contactPannel{
position: fixed;
width: 333px;
height: 333px;
top: 154px;
left: 66px;
}
/*================ PC LARGE*/
@media(min-width:1300px){
#contactPannel{
height: 444px;
width: 444px;
left: 366px;
}
}
</style>
<script>
import Moveable from 'vue3-moveable';
export default {
name : 'ContactPannel',
components:{
Moveable
},
data(){
return{
target: null
}
},
emits: ['close','focus'],
methods:{
onDrag({ target, transform }) {
target.style.transform = transform;
}
},
mounted(){
this.target = this.$refs.contactPannel;
console.log("Contact pannel is loaded!");
}
};
</script>
v1-com-officielle/src/indieComponents/InstaPannel.vue
+83
View File
@@ -0,0 +1,83 @@
<script setup>
import CloseIcon from '../assets/icons/close.svg'
</script>
<template>
<div id="instaPannel" class="windowStyle" ref="instaPannel" @mousedown="$emit('focus')" @touchstart="$emit('focus')">
<Moveable
className="moveable"
:target="target"
:draggable="true"
@drag="onDrag"
/>
<div class="windowTitle">
<p>
ATTENTION!
</p>
<!-- touchstart.capture pour passer en prio sur déplacement fenêtre/ .stop si pas de method-->
<button type="button" class="closeBtn" @mousedown.capture="$emit('close')" @touchstart.capture="$emit('close')">
<CloseIcon name="close" class="icon"/>
</button>
</div>
<div class="windowContent">
</div>
</div>
</template>
<style scoped>
/*================= Mise en page:
=> Mobile First : par défaut, moins de 500px
=> Tablette et PC format haut : de 500 à 1000px
=> PC large : à partir de 1000px
*/
/*+++++++++++++++++ COPYBOX
================ PC HAUT/IPAD
@media(min-width:650px){}
================ PC LARGE
@media(min-width:1300px){}
*/
#instaPannel{
position: fixed;
width: 333px;
height: 161px;
top: 333px;
left: 33px;
}
/*================ PC LARGE*/
@media(min-width:1300px){
#instaPannel{
height: 250px;
width: 444px;
left:333px;
}
}
</style>
<script>
import Moveable from 'vue3-moveable';
export default {
name : 'InstaPannel',
components:{
Moveable
},
data(){
return{
target: null
}
},
emits: ['close','focus'],
methods:{
onDrag({ target, transform }) {
target.style.transform = transform;
}
},
mounted(){
this.target = this.$refs.instaPannel;
console.log("Insta pannel is loaded!");
}
};
</script>
v1-com-officielle/src/indieComponents/MessagePannel.vue
+157
View File
@@ -0,0 +1,157 @@
<script setup>
import CloseIcon from '../assets/icons/close.svg'
</script>
<template>
<div class="windowStyle" id="msgVisualizer" ref="msgPannel" @mousedown="$emit('focus')" @touchstart="$emit('focus')">
<Moveable
className="moveable"
:target="$refs.msgPannel"
:draggable="true"
@drag="onDrag"
/>
<div class="windowTitle">
<p>
<b class="windowTitleLower">Message du {{selectedMsg.date}}</b>
<br>
{{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="closeMsg" @click="closeMsg">
<CloseIcon name="close" class="icon"/>
</button>
</div>
<div class="windowContent">
<div class="msgReact">
<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 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>{{selectedMsg.content}}</p>
</div>
</div>
</template>
<style scoped>
/*================= Mise en page:
=> Mobile First : par défaut, moins de 500px
=> Tablette et PC format haut : de 500 à 1000px
=> PC large : à partir de 1000px
*/
/*+++++++++++++++++ COPYBOX
================ PC HAUT/IPAD
@media(min-width:650px){}
================ PC LARGE
@media(min-width:1300px){}
*/
#msgVisualizer{
position: fixed;
top:50%;
left:3.33%;
width: 333px;
height: 333px;
}
/*================ PC LARGE*/
@media(min-width:1000px){
#msgVisualizer{
left: 45%;
top: 33.3%;
}
}
.windowContent .msgReact{
margin-left: -16.1%;
width: 77%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
font-family: 'lineal';
font-weight: normal;
padding: 0;
}
.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;
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;
}
.reactedStyle{
color: var(--accent-color);
}
</style>
<script>
import Moveable from 'vue3-moveable';
import { dataStorage } from '../dataExchange.js'
export default {
name : 'MessagePannel',
components:{
Moveable
},
data(){
return{
target: null
}
},
emits: ['close','focus'],
computed:{
selectedMsg(){
return dataStorage.selectedMsg
}
},
methods:{
onDrag({ target, transform }) {
target.style.transform = transform;
},
likeMsg(){
dataStorage.selectedMsg.isLiked = !dataStorage.selectedMsg.isLiked
},
goingToEvent(){
dataStorage.selectedMsg.isGoing = !dataStorage.selectedMsg.isGoing;
},
closeMsg(){
this.$emit('close');
dataStorage.selectedMsg.isSelected = false;
}
},
mounted(){
this.target = this.$refs.msgPannel;
console.log("Message pannel is loaded!");
}
};
</script>
v1-com-officielle/src/indieComponents/NewsletterPannel.vue
+83
View File
@@ -0,0 +1,83 @@
<script setup>
import CloseIcon from '../assets/icons/close.svg'
</script>
<template>
<div id="newsletterPannel" class="windowStyle" ref="newsletterPannel" @mousedown="$emit('focus')" @touchstart="$emit('focus')">
<Moveable
className="moveable"
:target="target"
:draggable="true"
@drag="onDrag"
/>
<div class="windowTitle">
<p>
Newsletter
</p>
<!-- touchstart.capture pour passer en prio sur déplacement fenêtre/ .stop si pas de method-->
<button type="button" class="closeBtn" @mousedown.capture="$emit('close')" @touchstart.capture="$emit('close')">
<CloseIcon name="close" class="icon"/>
</button>
</div>
<div class="windowContent">
</div>
</div>
</template>
<style scoped>
/*================= Mise en page:
=> Mobile First : par défaut, moins de 500px
=> Tablette et PC format haut : de 500 à 1000px
=> PC large : à partir de 1000px
*/
/*+++++++++++++++++ COPYBOX
================ PC HAUT/IPAD
@media(min-width:650px){}
================ PC LARGE
@media(min-width:1300px){}
*/
#newsletterPannel{
position: fixed;
width: 333px;
height: 161px;
top: 77px;
left: 33px;
}
/*================ PC LARGE*/
@media(min-width:1300px){
#newsletterPannel{
height: 250px;
width: 444px;
left:333px;
}
}
</style>
<script>
import Moveable from 'vue3-moveable';
export default {
name : 'NewsletterPannel',
components:{
Moveable
},
data(){
return{
target: null
}
},
emits: ['close','focus'],
methods:{
onDrag({ target, transform }) {
target.style.transform = transform;
}
},
mounted(){
this.target = this.$refs.newsletterPannel;
console.log("Newsletter pannel is loaded!");
}
};
</script>
v1-com-officielle/src/infoComponents/InboxContent.vue
+7 -111
View File
@@ -28,40 +28,7 @@
</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 {{selectedMsg.date}}</b>
<br>
{{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">
<CloseIcon name="close" class="icon"/>
</button>
</div>
<div class="windowContent">
<div class="msgReact">
<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 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>{{selectedMsg.content}}</p>
</div>
</div>
</div>
</div>
</template>
<style scoped>
@@ -78,21 +45,6 @@
@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;
@@ -230,47 +182,6 @@
margin-top: -3.33px;
}
.windowContent .msgReact{
margin-left: -16.1%;
width: 77%;
justify-content: flex-start;
font-family: 'lineal';
font-weight: normal;
padding: 0;
}
.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;
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;
}
.reactedStyle{
color: var(--accent-color);
}
@@ -285,33 +196,25 @@
<script>
import Moveable from 'vue3-moveable';
import { dataStorage } from '../dataExchange.js'
export default {
name : 'InboxContent',
emits: ['open'],
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.selectedMsg = e
this.selectedMsg = e;
dataStorage.selectedMsg = this.selectedMsg;
this.$emit('open');
e.isSelected = true;
e.wasRead = true;
this.unreadMsg();
if(!this.msgSelected){
this.msgSelected = true;
}
},
unreadMsg(){
this.msgNumber = 0;
@@ -319,12 +222,6 @@
if (!this.msgList[j].wasRead)
this.msgNumber += 1;
}
},
likeMsg(){
this.selectedMsg.isLiked = !this.selectedMsg.isLiked;
},
goingToEvent(){
this.selectedMsg.isGoing = !this.selectedMsg.isGoing;
}
},
data(){
@@ -342,8 +239,7 @@
wasRead: false,
isSelected: false,
isEvent: false
},
msgSelected: false
}
}
},
mounted(){
v1-com-officielle/src/infoComponents/InfoMenu.vue
+64 -4
View File
@@ -14,20 +14,52 @@
<button type="button" class="textBtnStyle">NOUS SUIVRE HORS DES RÉSEAUX!</button>
</div>
<div id="btnColumn">
<button type="button" class="iconBtnStyle" id="btn001">
<button type="button" class="iconBtnStyle" id="btnArtist" @click="openPannel('artist')">
<CloseIcon name="test" class="icon"/>
</button>
<button type="button" class="iconBtnStyle" id="btn002">
<button type="button" class="iconBtnStyle" id="btnNews" @click="openPannel('news')">
<CloseIcon name="test" class="icon"/>
</button>
<button type="button" class="iconBtnStyle" id="btn003">
<button type="button" class="iconBtnStyle" id="btnInsta" @click="openPannel('insta')">
<CloseIcon name="test" class="icon"/>
</button>
<button type="button" class="iconBtnStyle" id="btn004">
<button type="button" class="iconBtnStyle" id="btnContact" @click="openPannel('contact')">
<CloseIcon name="test" class="icon"/>
</button>
</div>
</div>
<!--'msg' 'insta' 'news' 'contact' 'artist'-->
<InboxDiv @open="openPannel('msg')"></InboxDiv>
<ArtistPan
v-show="isActive.includes('artist')"
@close="closePannel('artist')"
@focus="focusPannel('artist')"
:class="{zBase: isFocused!=='artist', zFocus: isFocused==='artist'}">
</ArtistPan>
<NewsPan
v-show="isActive.includes('news')"
@close="closePannel('news')"
@focus="focusPannel('news')"
:class="{zBase: isFocused!=='news', zFocus: isFocused==='news'}">
</NewsPan>
<ContactPan
v-show="isActive.includes('contact')"
@close="closePannel('contact')"
@focus="focusPannel('contact')"
:class="{zBase: isFocused!=='contact', zFocus: isFocused==='contact'}">
</ContactPan>
<InstaPan
v-show="isActive.includes('insta')"
@close="closePannel('insta')"
@focus="focusPannel('insta')"
:class="{zBase: isFocused!=='insta', zFocus: isFocused==='insta'}">
</InstaPan>
<MessagePan
v-show="isActive.includes('msg')"
@close="closePannel('msg')"
@focus="focusPannel('msg')"
:class="{zBase: isFocused!=='msg', zFocus: isFocused==='msg'}">
</MessagePan>
</template>
<style scoped>
@@ -137,6 +169,34 @@
<script>
export default {
name : 'InfoMenu',
data(){
return{
isActive: [],
isFocused: ""
}
},
methods:{
openPannel(name){
if(!this.isActive.includes(name)){
this.isActive.push(name);
}
this.isFocused = name;
},
focusPannel(name){
if(this.isActive.includes(name)){
this.isFocused = name;
}
},
closePannel(name){
const index = this.isActive.indexOf(name)
if(index !== -1){
this.isActive.splice(index,1);
}
if(this.isFocused === name){
this.isFocused = null;
}
}
},
mounted(){
console.log("Info menu is loaded!");
}
v1-com-officielle/src/main.js
+16
View File
@@ -6,11 +6,19 @@ import App from './App.vue'
// import composants
import TitleContent from './components/TitleContent.vue'
import InfoContent from './components/InfoContent.vue'
//title
import TitleText from './titleComponents/TitleText.vue'
import GeneratedContent from './titleComponents/GeneratedContent.vue'
import MusicPlayer from './titleComponents/MusicPlayer.vue'
//info
import InfoMenu from './infoComponents/InfoMenu.vue'
import InboxContent from './infoComponents/InboxContent.vue'
//indie
import ArtistPannel from './indieComponents/ArtistPannel.vue'
import NewsletterPannel from './indieComponents/NewsletterPannel.vue'
import ContactPannel from './indieComponents/ContactPannel.vue'
import InstaPannel from './indieComponents/InstaPannel.vue'
import MessagePannel from './indieComponents/MessagePannel.vue'
// création app racine
const app = createApp(App);
@@ -18,11 +26,19 @@ const app = createApp(App);
//Composants
app.component('TitleDiv', TitleContent);
app.component('InfoDiv', InfoContent);
//title
app.component('PlayerDiv', MusicPlayer);
app.component('TitleTextDiv', TitleText);
app.component('GeneratedDiv',GeneratedContent);
//info
app.component('InfoMenuDiv', InfoMenu);
app.component('InboxDiv', InboxContent);
//indie
app.component('ArtistPan', ArtistPannel);
app.component('NewsPan', NewsletterPannel);
app.component('ContactPan', ContactPannel);
app.component('InstaPan', InstaPannel);
app.component('MessagePan', MessagePannel);
//Montage dans div#app de index.html
app.mount('#app');
v1-com-officielle/src/titleComponents/MusicPlayer.vue
+60 -5
View File
@@ -1,6 +1,21 @@
<template>
<div id="playerContainer" class="uiStyle">
<script setup>
import CloseIcon from '../assets/icons/close.svg'
</script>
<template>
<div id="playerContainer">
<div id="playerCreditStyle">
<p>Test-333</p>
</div>
<button type="button" class="iconBtnStyle">
<CloseIcon name="test" class="icon"/>
</button>
<button type="button" class="iconBtnStyle">
<CloseIcon name="test" class="icon"/>
</button>
<button type="button" class="iconBtnStyle">
<CloseIcon name="test" class="icon"/>
</button>
</div>
</template>
@@ -21,12 +36,52 @@
#playerContainer{
width:100%;
position:relative;
height:10%;
height:7.77%;
background-color: transparent;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
padding-top: 13.12px;
}
#playerContainer .iconBtnStyle{
width: 33px;
height: 33px;
margin-left: 16.1px;
}
#playerCreditStyle{
width: 50%;
height: 50px;
background-color: var(--back-color);
color: var(--main-color);
display: flex;
align-items: center;
margin-left: 16.1px;
padding-left: 16.1px;
border-radius: 66px;
border-style: solid;
border-color: var(--main-color);
border-width: thin;
font-family: 'velvelyne';
font-size: 16.1px;
font-weight: bold;
}
/*================ PC LARGE*/
@media(min-width:1000px){
@media(min-width:1300px){
#playerContainer{
height: 13%;
height: 7.77%;
padding: 16.1px;
}
#playerCreditStyle{
margin-left: 33px;
width: 33.3%;
}
}
</style>
v1-com-officielle/src/titleComponents/TitleText.vue
+1 -3
View File
@@ -49,9 +49,7 @@
#titleTextContainer{
width:100%;
position:relative;
height:20%;
z-index: 3;
height:24%;
}
#mainTitleContainer{