From 3bccfbb3e4975d096d888b1d99e14b583354eafd Mon Sep 17 00:00:00 2001
From: vgaNAR6ta <vga.nar6.ta@gmail.com>
Date: Mon, 9 Mar 2026 03:21:59 +0100
Subject: [PATCH] =?UTF-8?q?edit:=20link=20pannel=20methode=20navigation,?=
 =?UTF-8?q?=201=20click=20=3D=20selection,=202x=20click=20=3D=20ouvrir=20+?=
 =?UTF-8?q?=20r=C3=A9glages=20associ=C3=A9s=20+=20gradient=20fond=20plus?=
 =?UTF-8?q?=20sombre?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/style.css          |   7 +-
 src/components/LinkPannel.vue | 196 +++++++++++++++++++++++++++-------
 2 files changed, 162 insertions(+), 41 deletions(-)

diff --git a/src/assets/style.css b/src/assets/style.css
index 5cfb969..6e16fdf 100644
--- a/src/assets/style.css
+++ b/src/assets/style.css
@@ -53,8 +53,10 @@
   inset:0;
   position: fixed;
   background: #002613;
-  background: linear-gradient(200deg,var(--dark-color) 0%, var(--darker-color) 100%);
+  background: linear-gradient(200deg,var(--dark-color) 0%, var(--darker-color) 77%);
   cursor:cell;
+  scrollbar-color: var(--light-color) transparent;
+  scrollbar-width: thin;
 }
 
 /*===================Desact. Default*/
@@ -113,6 +115,7 @@ p{
 }
 
 .titleContent{
+  position:absolute;
   box-sizing: border-box;
   padding-left: 16.1px;
   display: flex;
@@ -215,6 +218,8 @@ p{
   pointer-events: none;
   opacity: 0.0333;
   z-index:333;
+  margin-top:-5px;
+  margin-left:-13px;
 }
 
 #denimOver{
diff --git a/src/components/LinkPannel.vue b/src/components/LinkPannel.vue
index f69199f..935696d 100644
--- a/src/components/LinkPannel.vue
+++ b/src/components/LinkPannel.vue
@@ -16,34 +16,51 @@
     <!--TITRE-->
     <div class="windowTitle">
       <div class="titleContent">
-        <p>./ExternalLinks.333</p>
-        <button type="button" class="titleBtn" id="rootBtn" v-show="isNotRoot" @mousedown.stop @touchstart="dataFirstLoad" @click="dataFirstLoad">
-          <ReloadIcon name="close" class="icon"/>
-        </button>
-        <button type="button" class="titleBtn" @mousedown.stop @touchstart="$emit('close')" @click="closeClicked">
-          <CloseIcon name="close" class="icon"/>
-        </button>
+        <p>./{{fileName}}</p>
+        <div class="multiBtnContainer">
+          <button type="button" class="titleBtn" id="rootBtn" v-show="isNotRoot" @mousedown.stop @touchstart="dataFirstLoad" @click="dataFirstLoad">
+            <ReloadIcon name="close" class="icon"/>
+          </button>
+          <button type="button" class="titleBtn" @mousedown.stop @touchstart="$emit('close')" @click="closeClicked">
+            <CloseIcon name="close" class="icon"/>
+          </button>
+        </div>
       </div>
     </div>
     <!--CONTENU-->
-    <p id="emptyFolderText" class="itemCaption" v-show="emptyFolder">Oops! There is nothing to display here...</p>
-    <div class="theMatrix" @mousedown.stop @touchstart.stop @reload="dataFirstLoad">
-      <div class="itemStyle" v-for="item in displayedItems" :key="item.caption" @click="openClickedFile(item)">
+    <p id="emptyFolderText" v-show="emptyFolder">Oops! There is nothing to display here...</p>
+    <div v-show="displayedItems" class="theMatrix" @mousedown.stop @touchstart.stop @reload="dataFirstLoad">
+      <div class="itemStyle" v-for="item in displayedItems" :class="{selectedStyle:item.isSelected, displayStyle: !item.isSelected}" :key="item.caption" @click="itemIsClicked(item)">
         <component :is="item.type==='folder'? FolderIcon : FileIcon" class="icon"/>
         <p class="itemCaption">{{item.caption}}</p>
       </div>
     </div>
+    <div v-show="displayedItems" class="itemDesc" @touchstart.stop>
+      <p>{{displayedDescription}}</p>
+    </div>
   </div>
 </template>
 
 <style scoped>
   /*=====================LinkPannel CSS*/
-  #rootBtn{
-    margin-left: 60%;
+  .multiBtnContainer{
+    align-self: center;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    height: 100%;
+    align-items: center;
+    width:auto;
   }
 
   #emptyFolderText{
+    align-self:center;
+    margin-top: 33px;
     pointer-events: none;
+    color: var(--accent-color);
+    font-family: 'lineal';
+    font-weight: lighter;
+    font-size: 16.1px;
   }
 
   .theMatrix{
@@ -51,11 +68,33 @@
     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
     grid-auto-rows: 180px;
     gap: 10px;
-    width: 100%;
-    height: 100%;
+    width: 97%;
+    height: 70%;
     overflow-y: auto;
     align-items: center;
-    margin-left: 10px;
+    margin-left: 5px;
+  }
+
+  .itemDesc{
+    width: 90%;
+    height: 21%;
+    border-radius: 16.1px;
+    border-color: var(--accent-color);
+    border-style: solid;
+    border-width: thin;
+    margin-top: 2%;
+
+    color: var(--light-color);
+    font-family: 'velvelyne';
+    font-weight: lighter;
+    font-size: 16.1px;
+    pointer-events: all;
+    cursor:inherit;
+
+    align-self: center;
+    padding-left: 2%;
+    padding-right: 3.33%;
+    overflow-y: scroll;
   }
 
   .itemStyle{
@@ -66,34 +105,61 @@
     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;
   }
 
+  .itemStyle:hover{
+    border-color: var(--accent-color);
+  }
+    /*===============Not selected Item*/
+    .displayStyle{
+      color: var(--light-color);
+      border-style: solid;
+      border-width: thin;
+      border-color: transparent;
+    }
+
+    .displayStyle .icon{
+      height:auto;
+      width:50%;
+      fill: currentColor;
+    }
+
+    /*===============Seleted Item*/
+    .selectedStyle{
+      color: var(--accent-color);
+      border-style: solid;
+      border-width: thin;
+      border-color: transparent;
+    }
+
+    .selectedStyle .icon{
+      height:auto;
+      width:50%;
+      fill: currentColor;
+    }
+
   .itemCaption{
     text-align: center;
-    color: var(--light-color);
-    font-family: 'velvelyne';
     font-weight: lighter;
     font-size: 16.1px;
     pointer-events: all;
     cursor:inherit;
   }
 
+  .displayStyle .itemCaption{
+    color: var(--light-color);
+    font-family: 'velvelyne';
+  }
+
+  .selectedStyle .itemCaption{
+    color: var(--accent-color);
+    font-family: 'lineal'
+  }
+
   .itemCaption:hover{
     color: var(--accent-color);
   }
@@ -102,8 +168,9 @@
     background-color: var(--dark-color);
     cursor:grab;
     display: flex;
-    align-items: center;
-    justify-content: space-around;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
   }
 
   /*=====================format pc*/
@@ -113,9 +180,6 @@
       height:666px;
       margin-left: -333px;
     }
-    #rootBtn{
-      margin-left: 390px;
-    }
     .theMatrix{
       grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
       grid-auto-rows: 180px;
@@ -129,9 +193,6 @@
       width:333px;
       height:666px;
     }
-    #rootBtn{
-      margin-left: 59px;
-    }
     .theMatrix{
       grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
       grid-auto-rows: 180px;
@@ -144,36 +205,50 @@
   const linksData = [
     {
       type: "folder",
+      isSelected: false,
       caption: "Folder001",
+      description: "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.",
       children: [{
         type: "folder",
+        isSelected: false,
         caption: "test-open",
+        description: "Nothing for now x333",
         children: []
       },
       {
         type: "file",
+        isSelected: false,
         caption: "READ-ME002.txt",
+        description: "Nothing for now x333",
         src: ""
       }]
     },
     {
       type: "folder",
+      isSelected: false,
       caption: "Folder002",
+      description: "Nothing for now x333",
       children: []
     },
     {
       type: "folder",
+      isSelected: false,
       caption: "Folder333",
+      description: "Nothing for now x333",
       children: []
     },
     {
       type: "folder",
+      isSelected: false,
       caption: "test",
+      description: "Nothing for now x333",
       children: []
     },
     {
       type: "file",
+      isSelected: false,
       caption: "READ-ME.txt",
+      description: "Nothing for now x333",
       src: ""
     }
   ]
@@ -215,19 +290,57 @@
         console.log(this.displayedItems);
         this.isNotRoot = false;
         this.checkEmptyFolder();
+        this.displayedItems.forEach(it => {
+          it.isSelected = false;
+        });
+        this.displayedDescription = "Click an item to get more info !";
+        this.fileName = "ExternalLinks.333";
       },
-      openClickedFile(e){
+      openFile(e){
+        this.$emit('focus');
         if(e.type === 'folder'){
           this.displayedItems = [...e.children];
           this.checkEmptyFolder();
           this.isNotRoot = true;
+          this.displayedDescription = e.description
+          if (this.bodyWidth>this.bodyHeight){
+            console.log('container dimensions:', this.bodyWidth, this.bodyHeight);
+            this.fileName =".../"+ e.caption;
+          }else{
+            this.fileName += "/" + e.caption;
+          }
         } else {
 
         }
       },
+      selectFile(e){
+        this.$emit('focus');
+        this.displayedItems.forEach(it => {
+          it.isSelected = false;
+        })
+        e.isSelected = true;
+        this.displayedDescription = e.description;
+      },
+      itemIsClicked(e){
+        if (!this.dblClickTimer || this.lastClickedItem !== e){
+          clearTimeout(this.dblClickTimer);
+          this.lastClickedItem = e;
+          this.dblClickTimer = setTimeout(() => {
+            this.selectFile(e);
+            this.dblClickTimer = null;
+            this.lastClickedItem = null;
+          }, 200);
+        }else{
+          clearTimeout(this.dblClickTimer);
+          this.dblClickTimer = null;
+          this.lastClickedItem = null;
+          this.openFile(e);
+        }
+      },
       checkEmptyFolder(){
         if (this.displayedItems.length === 0){
           this.emptyFolder = true;
+          this.displayedItems = null;
         }else{
           this.emptyFolder = false;
         }
@@ -239,12 +352,16 @@
   },
   data(){
     return {
+      lastClickedItem: null,
+      dblClickTimer: null,
       bodyHeight:0,
       bodyWidth:0,
       coordX:0,
       coordY:0,
-      displayedItems:[],
+      displayedItems: null,
       emptyFolder: false,
+      displayedDescription: "",
+      fileName: "",
       isNotRoot : false
     }
   },
@@ -252,7 +369,6 @@
     this.$nextTick(() => {
         this.observeContainer()
     });
-    console.log('coord:', this.coordX, this.coordY);
     this.dataFirstLoad();
     console.log("Contact pannel is loaded!");
   }