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/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!");
}