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

edit: link pannel methode navigation, 1 click = selection, 2x click = ouvrir + réglages associés + gradient fond plus sombre

Browse Source
This commit is contained in:
Vega
2026-03-09 03:21:59 +01:00
parent feb6f5645a
commit 3bccfbb3e4
2 changed files with 162 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/style.css
+6 -1
View File
@@ -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{
src/components/LinkPannel.vue
+142 -26
View File
@@ -16,7 +16,8 @@
<!--TITRE-->
<div class="windowTitle">
<div class="titleContent">
<p>./ExternalLinks.333</p>
<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>
@@ -25,25 +26,41 @@
</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;
border-style: solid;
border-width: thin;
border-color: transparent;
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;
}
.itemStyle .icon{
.displayStyle .icon{
height:auto;
width:50%;
fill: currentColor;
}
.itemStyle:hover{
/*===============Seleted Item*/
.selectedStyle{
color: var(--accent-color);
border-color: var(--accent-color);
cursor: pointer;
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!");
}