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

Compare commits

base: vgaNAR6ta/333v1:57246f6ae5e591382f5f83e079e61cfde0c74552
Branches Tags
vgaNAR6ta/333v1:vgaNAR6ta
...
compare: vgaNAR6ta/333v1:40a0a7e8e39cc2f66a03e8d03e4cded47c6fdff5
Branches Tags
vgaNAR6ta/333v1:vgaNAR6ta

10 Commits
57246f6ae5 ... 40a0a7e8e3

Author SHA1 Message Date
vgaNAR6ta 40a0a7e8e3 edit: remplacement du bouton menu par retour (remonter de 1 element dans l'arboresence) dans link pannel 2026-03-09 17:38:34 +01:00
vgaNAR6ta 8c74c052e4 edit: minor bug fix sur about pannel, problème de hauteur de la barre de titre 2026-03-09 05:30:18 +01:00
vgaNAR6ta 3bccfbb3e4 edit: link pannel methode navigation, 1 click = selection, 2x click = ouvrir + réglages associés + gradient fond plus sombre 2026-03-09 03:21:59 +01:00
vgaNAR6ta feb6f5645a edit: bug fix sur tel, problème de taille et d'overflow forcé amenant la diparition de la bar de titre + modif typo 2026-03-09 00:54:43 +01:00
vgaNAR6ta b15fd618ce edit: ajout d'une animation pour le reload du contenu génératif (qq valeurs à régler peut être) 2026-03-08 07:02:48 +01:00
vgaNAR6ta a26aca6843 edit: ajout method open folder/file dans link pannel 2026-03-07 06:29:42 +01:00
vgaNAR6ta 47513564cd edit: nouveau overlay et minor bug fix sur le format mobile 2026-03-07 05:13:51 +01:00
vgaNAR6ta 60d2e0cb68 edit: reduction taille d'icon 2026-03-06 07:39:48 +01:00
vgaNAR6ta 3c18e22e70 edit: ajout d'un overlay de texture 2026-03-06 07:32:20 +01:00
vgaNAR6ta e975f33232 edit: création d'une interface type explorateur de fichier pour afficher les liens externes 2026-03-06 06:59:26 +01:00
12 changed files with 447 additions and 34 deletions
Expand all files Collapse all files
index.html
+2
View File
@@ -7,6 +7,8 @@
<title>vgaNAR6ta</title> <title>vgaNAR6ta</title>
</head> </head>
<body> <body>
<img src="./overlay001.png" class="overlay">
<img src="./overlay002.jpg" class="overlay" id="denimOver">
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.js"></script> <script type="module" src="/src/main.js"></script>
</body> </body>
public/overlay001.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 MiB

public/overlay002.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 113 KiB

src/assets/icons/back.svg
+4
View File
@@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 123.81 117.86">
<path d="M116.98,39.88c-4.56-7.84-10.78-14.04-18.67-18.59-7.83-4.52-16.53-6.79-26.11-6.83h0s-31.02,0-31.02,0V0L0,26.5v.2l41.18,26.4v-15.82h30.79c5.45,0,10.38,1.27,14.79,3.81,4.41,2.54,7.89,6.01,10.42,10.42,2.54,4.41,3.8,9.3,3.8,14.65s-1.27,10.24-3.8,14.65c-2.54,4.41-6.01,7.89-10.42,10.42-4.41,2.54-9.34,3.8-14.79,3.8h0s-67.74,0-67.74,0v22.82h67.79c9.66,0,18.42-2.29,26.3-6.83,7.89-4.56,14.11-10.75,18.67-18.59,4.56-7.84,6.83-16.6,6.83-26.27s-2.28-18.43-6.83-26.27Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 620 B

src/assets/style.css
+38 -6
View File
@@ -12,7 +12,10 @@
} }
:root[data-theme="green"]{ :root[data-theme="green"]{
--dark-color-overlay: 0 77 51;
--accent-color-overlay: 230 0 230;
--dark-color:#004D33; --dark-color:#004D33;
--darker-color: #000D07;
--light-color: #33FF77; --light-color: #33FF77;
--accent-color: #E600E6; --accent-color: #E600E6;
} }
@@ -49,8 +52,11 @@
#app{ #app{
inset:0; inset:0;
position: fixed; position: fixed;
background-color: var(--dark-color); background: #002613;
background: linear-gradient(200deg,var(--dark-color) 0%, var(--darker-color) 77%);
cursor:cell; cursor:cell;
scrollbar-color: var(--light-color) transparent;
scrollbar-width: thin;
} }
/*===================Desact. Default*/ /*===================Desact. Default*/
@@ -109,6 +115,7 @@ p{
} }
.titleContent{ .titleContent{
position:absolute;
box-sizing: border-box; box-sizing: border-box;
padding-left: 16.1px; padding-left: 16.1px;
display: flex; display: flex;
@@ -139,6 +146,14 @@ p{
background-color: var(--accent-color); background-color: var(--accent-color);
} }
.icon{
position: relative;
height:50%;
width:auto;
fill: currentColor;
}
/*=====================Animation*/ /*=====================Animation*/
.floating { .floating {
position: fixed; position: fixed;
@@ -162,11 +177,11 @@ p{
} }
@keyframes blink { @keyframes blink {
0% { border-color: var(--accent-color);} 0% { background-color: rgba(var(--dark-color-overlay)/33.3%);}
25% { border-color: var(--dark-color);} 25% { background-color: rgba(var(--accent-color-overlay)/33.3%);}
50% { border-color: var(--accent-color);} 50% { background-color: rgba(var(--dark-color-overlay)/33.3%);}
75% { border-color: var(--dark-color);} 75% { background-color: rgba(var(--accent-color-overlay)/33.3%);}
100% { border-color: var(--accent-color);} 100% { background-color: rgba(var(--dark-color-overlay)/33.3%);}
} }
/*==========================Moveable*/ /*==========================Moveable*/
@@ -194,3 +209,20 @@ p{
.zTop .titleBtn:hover { .zTop .titleBtn:hover {
background-color: var(--light-color); background-color: var(--light-color);
} }
/*=====================Overlay*/
.overlay{
position: fixed;
width: 100%;
height: 100%;
pointer-events: none;
opacity: 0.0333;
z-index:333;
margin-top:-5px;
margin-left:-13px;
}
#denimOver{
opacity: 0.0777;
z-index:334;
}
src/components/AboutPannel.vue
+12 -3
View File
@@ -1,3 +1,7 @@
<script setup>
import CloseIcon from '../assets/icons/close.svg'
</script>
<template> <template>
<div class="windowContainer" id="aboutPannel" ref="aboutPannel" :style="{top:coordY+'px', left:coordX+'px'}" @mousedown.left="$emit('focus')" > <div class="windowContainer" id="aboutPannel" ref="aboutPannel" :style="{top:coordY+'px', left:coordX+'px'}" @mousedown.left="$emit('focus')" >
<Moveable <Moveable
@@ -9,7 +13,9 @@
<div class="windowTitle"> <div class="windowTitle">
<div class="titleContent"> <div class="titleContent">
<p>./About.333</p> <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>
</div> </div>
<p id="about_text"> <p id="about_text">
@@ -56,8 +62,11 @@
background-color: var(--dark-color); background-color: var(--dark-color);
position:absolute; position:absolute;
cursor:grab; cursor:grab;
} }
#aboutPannel .windowTitle{
height: 42px;
}
#about_text{ #about_text{
position:relative; position:relative;
padding: 10px; padding: 10px;
@@ -75,7 +84,7 @@
@media(min-width:800px){ @media(min-width:800px){
#aboutPannel{ #aboutPannel{
width: 333px; width: 333px;
height: 60%; height: 66.6%;
} }
} }
src/components/ContactPannel.vue
+10 -4
View File
@@ -1,3 +1,7 @@
<script setup>
import CloseIcon from '../assets/icons/close.svg'
</script>
<template> <template>
<div class="windowContainer" id="contactPannel" ref="contactPannel" :style="{top:coordY+'px', left:coordX+'px'}" @mousedown.left="$emit('focus')" > <div class="windowContainer" id="contactPannel" ref="contactPannel" :style="{top:coordY+'px', left:coordX+'px'}" @mousedown.left="$emit('focus')" >
<Moveable <Moveable
@@ -9,7 +13,9 @@
<div class="windowTitle"> <div class="windowTitle">
<div class="titleContent"> <div class="titleContent">
<p>./Contact.333</p> <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> </div>
<div class="contactContainer"> <div class="contactContainer">
@@ -53,7 +59,7 @@
} }
.btnContact b { .btnContact b {
font-weight: bold; font-family: 'lineal';
} }
#insta{ #insta{
border-radius:0 0 0 16.1px; border-radius:0 0 0 16.1px;
@@ -92,11 +98,11 @@
@media(max-width:800px){ @media(max-width:800px){
#contactPannel{ #contactPannel{
width:222px; width:222px;
height:77px; height:117px;
} }
.btnContact{ .btnContact{
height: 80px; height: 85px;
padding-top: 14px; padding-top: 14px;
} }
} }
src/components/ExtraContent.vue
+17 -6
View File
@@ -1,13 +1,24 @@
<script setup> <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> </script>
<template> <template>
<div id="extraContainer"> <div id="extraContainer">
<div id="btnPannel"> <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>
<div id="contentContainer" ref="contentContainer"> <div id="contentContainer" ref="contentContainer">
<div class="windowContainer" id="contentPannel"> <div class="windowContainer" id="contentPannel">
@@ -46,7 +57,7 @@
z-index: 1; z-index: 1;
font-family: 'lineal'; font-family: 'lineal';
color: var(--light-color); color: var(--light-color);
border-color: var(--Light-color); border-color: var(--light-color);
border-style: solid; border-style: solid;
border-radius: 16.1px; border-radius: 16.1px;
border-width: thin; border-width: thin;
src/components/GeneratedContent.vue
+44 -2
View File
@@ -1,5 +1,8 @@
<template> <template>
<div id="generatorContainer" ref="generatorContainer"> <div id="generatorContainer" ref="generatorContainer">
<div class="loadingOverlay" v-show="overlayIsActive">
<p class="floating" id="loadingOText">Loading...</p>
</div>
<div class="imgContainer" :id="'div'+item.id" :class="{highlightItem: item.isHighlight===1, highlightMax: item.isHighlight===2, graffStyle: item.isHighlight===3}" v-for="item in partOneItem" :key="item.id" :style="{ <div class="imgContainer" :id="'div'+item.id" :class="{highlightItem: item.isHighlight===1, highlightMax: item.isHighlight===2, graffStyle: item.isHighlight===3}" v-for="item in partOneItem" :key="item.id" :style="{
left: item.x + 'px', left: item.x + 'px',
top: item.y + 'px' top: item.y + 'px'
@@ -26,6 +29,28 @@
<style scoped> <style scoped>
/*=====================Generated Content CSS*/ /*=====================Generated Content CSS*/
.loadingOverlay{
position: relative;
margin-top: 4%;
width: 97%;
height: 93%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
z-index: 333;
border-radius: 0 16.1px 16.1px 0;
pointer-events: none;
animation: blink 3.33s ease-in-out infinite;
}
#loadingOText{
position:relative;
z-index: 334;
font-family: 'lineal';
font-size: 33.3px;
color: var(--light-color);
}
#generatorContainer{ #generatorContainer{
pointer-events: none; pointer-events: none;
position:absolute; position:absolute;
@@ -101,7 +126,7 @@
} }
/*=============== (prononcé avec l'intonation de grouz) format moyen mes couilles là*/ /*=============== (*prononcé avec l'intonation de grouz*) format moyen mes couilles là*/
@media (max-width:800px){ @media (max-width:800px){
.imgStyle{ .imgStyle{
width:77px; width:77px;
@@ -195,7 +220,8 @@
partTwoItem:[], partTwoItem:[],
partThreeItem:[], partThreeItem:[],
containerWidth:0, containerWidth:0,
containerHeight:0 containerHeight:0,
overlayIsActive: false
} }
}, },
computed:{ computed:{
@@ -213,6 +239,9 @@
} }
}, },
methods:{ methods:{
delay(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
},
getRandomInt(min,max){ getRandomInt(min,max){
min=Math.ceil(min) min=Math.ceil(min)
max=Math.floor(max) max=Math.floor(max)
@@ -376,6 +405,19 @@
this.genCoord(this.partTwoItem); this.genCoord(this.partTwoItem);
this.genCoord(this.partThreeItem); this.genCoord(this.partThreeItem);
console.log('Content has been generated!'); console.log('Content has been generated!');
},
startContentReload(){
this.reloadContentAnimation();
},
async reloadContentAnimation() {
this.overlayIsActive = true;
for (let i = 0; i < 34; i++) {
this.generateContent();
await this.delay(50);
if(i===33){
this.overlayIsActive = false;
};
}
} }
}, },
mounted(){ mounted(){
src/components/LinkPannel.vue
+304 -9
View File
@@ -1,3 +1,11 @@
<script setup>
import CloseIcon from '../assets/icons/close.svg'
import FolderIcon from '../assets/icons/folder.svg'
import FileIcon from '../assets/icons/file.svg'
import ReloadIcon from '../assets/icons/reload.svg'
import BackIcon from '../assets/icons/back.svg'
</script>
<template> <template>
<div class="windowContainer" id="linkPannel" ref="linkPannel" :style="{top:coordY+'px', left:coordX+'px'}" @mousedown.left="$emit('focus')"> <div class="windowContainer" id="linkPannel" ref="linkPannel" :style="{top:coordY+'px', left:coordX+'px'}" @mousedown.left="$emit('focus')">
<Moveable <Moveable
@@ -6,22 +14,164 @@
:draggable="true" :draggable="true"
@drag="onDrag" @drag="onDrag"
/> />
<!--TITRE-->
<div class="windowTitle"> <div class="windowTitle">
<div class="titleContent"> <div class="titleContent">
<p>./ExternalLinks.333</p> <p>./{{fileName}}</p>
<button type="button" class="titleBtn" @mousedown.stop @touchstart="$emit('close')" @click="$emit('close')"><p>×</p></button> <div class="multiBtnContainer">
<button type="button" class="titleBtn" id="rootBtn" v-show="isNotRoot" @mousedown.stop @touchstart="backToRoot" @click="backToRoot">
<BackIcon name="backwoods" class="icon"/>
</button>
<button type="button" class="titleBtn" @mousedown.stop @touchstart="$emit('close')" @click="closeClicked">
<CloseIcon name="close" class="icon"/>
</button>
</div> </div>
</div> </div>
</div>
<!--CONTENU-->
<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> </div>
</template> </template>
<style scoped> <style scoped>
/*=====================LinkPannel CSS*/ /*=====================LinkPannel CSS*/
.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{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-auto-rows: 180px;
gap: 10px;
width: 97%;
height: 70%;
overflow-y: auto;
align-items: center;
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{
display: flex;
flex-direction: column;
align-items: center;
padding-top: 13.12px;
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;
}
.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;
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);
}
#linkPannel{ #linkPannel{
background-color: var(--dark-color); background-color: var(--dark-color);
position:absolute;
cursor:grab; cursor:grab;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
} }
/*=====================format pc*/ /*=====================format pc*/
@@ -29,26 +179,87 @@
#linkPannel{ #linkPannel{
width:666px; width:666px;
height:666px; height:666px;
margin-left: -333px;
}
.theMatrix{
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-auto-rows: 180px;
} }
} }
/*=====================format tel*/ /*=====================format tel*/
@media(max-width:800px){ @media(max-width:800px){
#linkPannel{ #linkPannel{
position:fixed;
width:333px; width:333px;
height:333px; height:666px;
}
.theMatrix{
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
grid-auto-rows: 180px;
} }
} }
</style> </style>
<script> <script>
import Moveable from 'vue3-moveable'; import Moveable from 'vue3-moveable'
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: ""
}
]
export default { export default {
name : 'LinkPannel', name : 'LinkPannel',
components:{ components:{
Moveable Moveable,
FileIcon,
FolderIcon
}, },
emits: ["focus","close"], emits: ["focus","close"],
methods:{ methods:{
@@ -74,21 +285,105 @@
}); });
observer.observe(container); observer.observe(container);
},
dataFirstLoad(){
this.displayedItems = [...linksData];
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";
},
openFile(e){
this.$emit('focus');
if(e.type === 'folder'){
this.rootFolderContent.push({content:[...this.displayedItems], directory:this.fileName});
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;
}
},
backToRoot(){
let rootDepth = this.rootFolderContent.length-1;
this.displayedItems = this.rootFolderContent[rootDepth].content;
this.fileName = this.rootFolderContent[rootDepth].directory;
this.rootFolderContent.splice(rootDepth,1);
rootDepth = this.rootFolderContent.length
if (rootDepth === 0){
this.isNotRoot = false;
}
this.checkEmptyFolder();
},
closeClicked(){
this.dataFirstLoad();
this.$emit('close');
} }
}, },
data(){ data(){
return { return {
lastClickedItem: null,
dblClickTimer: null,
bodyHeight:0, bodyHeight:0,
bodyWidth:0, bodyWidth:0,
coordX:0, coordX:0,
coordY:0, coordY:0,
displayedItems: null,
rootFolderContent: [],
emptyFolder: false,
displayedDescription: "",
fileName: "",
isNotRoot : false
} }
}, },
mounted(){ mounted(){
this.$nextTick(() => { this.$nextTick(() => {
this.observeContainer() this.observeContainer()
}); });
console.log('coord:', this.coordX, this.coordY); this.dataFirstLoad();
console.log("Contact pannel is loaded!"); console.log("Contact pannel is loaded!");
} }
}; };
src/components/MainContent.vue
+8 -2
View File
@@ -1,3 +1,7 @@
<script setup>
import ReloadIcon from '../assets/icons/reload.svg'
</script>
<template> <template>
<div id="mainContainer"> <div id="mainContainer">
<generatorDiv ref="generator"></generatorDiv> <generatorDiv ref="generator"></generatorDiv>
@@ -6,7 +10,9 @@
<div class="titleContent"> <div class="titleContent">
<p>./MainContent.333</p> <p>./MainContent.333</p>
<!--<Teleport to="div#generatorContainer">--> <!--<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>--> <!--</Teleport>-->
</div> </div>
</div> </div>
@@ -77,7 +83,7 @@
}, },
methods: { methods: {
reloadContent(){ reloadContent(){
this.$refs.generator.generateContent(); this.$refs.generator.startContentReload();
} }
}, },
mounted(){ mounted(){
src/components/WelcomePannel.vue
+7 -1
View File
@@ -1,3 +1,7 @@
<script setup>
import CloseIcon from '../assets/icons/close.svg'
</script>
<template> <template>
<div class="windowContainer" id="welcomePannel" ref="welcomePannel" :style="{top:coordY+'px', left:coordX+'px'}" @mousedown.left="$emit('focus')"> <div class="windowContainer" id="welcomePannel" ref="welcomePannel" :style="{top:coordY+'px', left:coordX+'px'}" @mousedown.left="$emit('focus')">
<Moveable <Moveable
@@ -9,7 +13,9 @@
<div class="windowTitle"> <div class="windowTitle">
<div class="titleContent"> <div class="titleContent">
<p>./Welcome:{{guestName}}</p> <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>
</div> </div>
<p id="welcomeTxt"> <p id="welcomeTxt">