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

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