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

src/assets/style.css

@@ -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

@@ -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

@@ -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

@@ -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('welcome')" id="info">
-      <button type="button" class="btnColStyle" @click="openPannel('about')"><p>#</p></button>
+        <WelcomeIcon name="welcome" class="icon"/>
-      <button type="button" class="btnColStyle" @click="openPannel('contact')"><p>@</p></button>
+      </button>
-      <button type="button" class="btnColStyle" @click="openPannel('link')"><p>//</p></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

@@ -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

@@ -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

@@ -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">