vgaNAR6ta/333v1
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

edit: création d'une interface type explorateur de fichier pour afficher les liens externes

Browse Source
This commit is contained in:
Vega
2026-03-06 06:59:26 +01:00
parent 57246f6ae5
commit e975f33232
7 changed files with 154 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/style.css
+8
View File
@@ -139,6 +139,14 @@ p{
background-color: var(--accent-color);
}
.icon{
position: relative;
height:77%;
width:auto;
fill: currentColor;
}
/*=====================Animation*/
.floating {
position: fixed;
src/components/AboutPannel.vue
+7 -1
View File
@@ -1,3 +1,7 @@
<script setup>
import CloseIcon from '../assets/icons/close.svg'
</script>
<template>
<div class="windowContainer" id="aboutPannel" ref="aboutPannel" :style="{top:coordY+'px', left:coordX+'px'}" @mousedown.left="$emit('focus')" >
<Moveable
@@ -9,7 +13,9 @@
<div class="windowTitle">
<div class="titleContent">
<p>./About.333</p>
<button type="button" class="titleBtn" @mousedown.stop @touchstart="$emit('close')" @click="$emit('close')"><p>×</p></button>
<button type="button" class="titleBtn" @mousedown.stop @touchstart="$emit('close')" @click="$emit('close')">
<CloseIcon name="close" class="icon"/>
</button>
</div>
</div>
<p id="about_text">
src/components/ContactPannel.vue
+7 -1
View File
@@ -1,3 +1,7 @@
<script setup>
import CloseIcon from '../assets/icons/close.svg'
</script>
<template>
<div class="windowContainer" id="contactPannel" ref="contactPannel" :style="{top:coordY+'px', left:coordX+'px'}" @mousedown.left="$emit('focus')" >
<Moveable
@@ -9,7 +13,9 @@
<div class="windowTitle">
<div class="titleContent">
<p>./Contact.333</p>
<button type="button" class="titleBtn" @mousedown.stop @touchstart="$emit('close')" @click="$emit('close')"><p>×</p></button>
<button type="button" class="titleBtn" @mousedown.stop @touchstart="$emit('close')" @click="$emit('close')">
<CloseIcon name="close" class="icon"/>
</button>
</div>
</div>
<div class="contactContainer">
src/components/ExtraContent.vue
+17 -6
View File
@@ -1,13 +1,24 @@
<script setup>
import WelcomeIcon from '../assets/icons/info.svg'
import AboutIcon from '../assets/icons/about.svg'
import ContactIcon from '../assets/icons/contact.svg'
import LinksIcon from '../assets/icons/link.svg'
</script>
<template>
<div id="extraContainer">
<div id="btnPannel">
<button type="button" class="btnColStyle" @click="openPannel('welcome')" id="info"><p>i</p></button>
<button type="button" class="btnColStyle" @click="openPannel('about')"><p>#</p></button>
<button type="button" class="btnColStyle" @click="openPannel('contact')"><p>@</p></button>
<button type="button" class="btnColStyle" @click="openPannel('link')"><p>//</p></button>
<button type="button" class="btnColStyle" @click="openPannel('welcome')" id="info">
<WelcomeIcon name="welcome" class="icon"/>
</button>
<button type="button" class="btnColStyle" @click="openPannel('about')">
<AboutIcon name="about" class="icon"/>
</button>
<button type="button" class="btnColStyle" @click="openPannel('contact')">
<ContactIcon name="contact" class="icon"/>
</button>
<button type="button" class="btnColStyle" @click="openPannel('link')">
<LinksIcon name="links" class="icon"/>
</button>
</div>
<div id="contentContainer" ref="contentContainer">
<div class="windowContainer" id="contentPannel">
@@ -46,7 +57,7 @@
z-index: 1;
font-family: 'lineal';
color: var(--light-color);
border-color: var(--Light-color);
border-color: var(--light-color);
border-style: solid;
border-radius: 16.1px;
border-width: thin;
src/components/LinkPannel.vue
+101 -5
View File
@@ -1,3 +1,9 @@
<script setup>
import CloseIcon from '../assets/icons/close.svg'
import FolderIcon from '../assets/icons/folder.svg'
import FileIcon from '../assets/icons/file.svg'
</script>
<template>
<div class="windowContainer" id="linkPannel" ref="linkPannel" :style="{top:coordY+'px', left:coordX+'px'}" @mousedown.left="$emit('focus')">
<Moveable
@@ -6,21 +12,81 @@
:draggable="true"
@drag="onDrag"
/>
<!--TITRE-->
<div class="windowTitle">
<div class="titleContent">
<p>./ExternalLinks.333</p>
<button type="button" class="titleBtn" @mousedown.stop @touchstart="$emit('close')" @click="$emit('close')"><p>×</p></button>
<button type="button" class="titleBtn" @mousedown.stop @touchstart="$emit('close')" @click="$emit('close')">
<CloseIcon name="close" class="icon"/>
</button>
</div>
</div>
<!--CONTENU-->
<div class="theMatrix" @mousedown.stop @touchstart.stop>
<div class="itemStyle" v-for="item in displayedItems" :key="item.caption">
<component :is="item.type==='folder'? FolderIcon : FileIcon" class="icon"/>
<p class="itemCaption">{{item.caption}}</p>
</div>
</div>
</div>
</template>
<style scoped>
/*=====================LinkPannel CSS*/
.theMatrix{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-auto-rows: 180px;
gap: 10px;
width: 100%;
height: 100%;
overflow-y: auto;
align-items: center;
}
.itemStyle{
display: flex;
flex-direction: column;
align-items: center;
padding-top: 13.12px;
border-radius: 8px;
width:90%;
height: auto;
color: var(--light-color);
border-style: solid;
border-width: thin;
border-color: transparent;
}
.itemStyle .icon{
height:auto;
width:50%;
fill: currentColor;
}
.itemStyle:hover{
color: var(--accent-color);
border-color: var(--accent-color);
cursor: pointer;
}
.itemCaption{
text-align: center;
color: var(--light-color);
font-family: 'velvelyne';
font-weight: lighter;
font-size: 16.1px;
pointer-events: all;
cursor:inherit;
}
.itemCaption:hover{
color: var(--accent-color);
}
#linkPannel{
background-color: var(--dark-color);
position:absolute;
cursor:grab;
}
@@ -36,19 +102,43 @@
@media(max-width:800px){
#linkPannel{
width:333px;
height:333px;
height:666px;
}
}
</style>
<script>
import Moveable from 'vue3-moveable';
import Moveable from 'vue3-moveable'
const linksData = [
{
type: "folder",
caption: "Folder001"
},
{
type: "folder",
caption: "Folder002"
},
{
type: "folder",
caption: "Folder333"
},
{
type: "folder",
caption: "test"
},
{
type: "file",
caption: "READ-ME.txt"
}
]
export default {
name : 'LinkPannel',
components:{
Moveable
Moveable,
FileIcon,
FolderIcon
},
emits: ["focus","close"],
methods:{
@@ -74,6 +164,10 @@
});
observer.observe(container);
},
dataFirstLoad(){
this.displayedItems = linksData;
console.log(this.displayedItems);
}
},
data(){
@@ -82,6 +176,7 @@
bodyWidth:0,
coordX:0,
coordY:0,
displayedItems:[]
}
},
mounted(){
@@ -89,6 +184,7 @@
this.observeContainer()
});
console.log('coord:', this.coordX, this.coordY);
this.dataFirstLoad();
console.log("Contact pannel is loaded!");
}
};
src/components/MainContent.vue
+7 -1
View File
@@ -1,3 +1,7 @@
<script setup>
import ReloadIcon from '../assets/icons/reload.svg'
</script>
<template>
<div id="mainContainer">
<generatorDiv ref="generator"></generatorDiv>
@@ -6,7 +10,9 @@
<div class="titleContent">
<p>./MainContent.333</p>
<!--<Teleport to="div#generatorContainer">-->
<button type="button" class="titleBtn" @click="reloadContent()"> <p>RELOAD</p> </button>
<button type="button" class="titleBtn" @click="reloadContent()">
<ReloadIcon name="reload" class="icon"/>
</button>
<!--</Teleport>-->
</div>
</div>
src/components/WelcomePannel.vue
+7 -1
View File
@@ -1,3 +1,7 @@
<script setup>
import CloseIcon from '../assets/icons/close.svg'
</script>
<template>
<div class="windowContainer" id="welcomePannel" ref="welcomePannel" :style="{top:coordY+'px', left:coordX+'px'}" @mousedown.left="$emit('focus')">
<Moveable
@@ -9,7 +13,9 @@
<div class="windowTitle">
<div class="titleContent">
<p>./Welcome:{{guestName}}</p>
<button type="button" class="titleBtn" @mousedown.stop @touchstart="$emit('close')" @click="$emit('close')"><p>×</p></button>
<button type="button" class="titleBtn" @mousedown.stop @touchstart="$emit('close')" @click="$emit('close')">
<CloseIcon name="close" class="icon"/>
</button>
</div>
</div>
<p id="welcomeTxt">