edit: ajout icon & bug fix infobulle timer

This commit is contained in:
2026-03-30 04:14:53 +02:00
parent a50c2d82c8
commit f5ed2a7d9c
25 changed files with 141 additions and 53 deletions
@@ -1,9 +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'
import ReloadIcon from '../assets/icons/reload.svg'
import AboutIcon from '../assets/icons/about.svg'
import TextIcon from '../assets/icons/text.svg'
import ImgIcon from '../assets/icons/img.svg'
import LinkIcon from '../assets/icons/link.svg'
import BackIcon from '../assets/icons/back.svg'
import { loadPeopleData } from '@/data/peopleData.js'
</script>
@@ -36,14 +36,14 @@
<p id="emptyFolderText" v-show="emptyFolder">Oops! There is nothing to display here...</p>
<div v-show="gridDisplay" class="theMatrix" @mousedown.stop @touchstart.stop @reload="dataFirstLoad" @click="deselectAll">
<div class="itemStyle" v-for="item in displayedItems" :class="{selectedItemStyle:item.isSelected, displayStyle: !item.isSelected}" :key="item.caption" @click.stop="itemIsClicked(item)">
<component :is="item.type==='folder'? FolderIcon : item.type === 'text'? FileIcon : item.type === 'link'? AboutIcon : CloseIcon" class="icon"/>
<component :is="item.type==='folder'? FolderIcon : item.type === 'text'? TextIcon : item.type === 'link'? LinkIcon : ImgIcon" class="icon"/>
<p class="itemCaption">{{item.caption}}</p>
</div>
</div>
<div v-show="listDisplay" class="nevrEndingList" @mousedown.stop @touchstart.stop @reload="dataFirstLoad" @click="deselectAll">
<div class="listItemStyle" v-for="item in displayedItems" :class="{selectedItemStyle:item.isSelected, displayStyle: !item.isSelected}" :key="item.caption" @click.stop="itemIsClicked(item)">
<component :is="item.type==='folder'? FolderIcon : item.type === 'text'? FileIcon : item.type === 'link'? AboutIcon : CloseIcon" class="icon"/>
<p class="itemCaption">{{item.caption}}</p>
<component :is="item.type==='folder'? FolderIcon : item.type === 'text'? TextIcon : item.type === 'link'? LinkIcon : ImgIcon" class="icon"/>
<p class="itemCaption" id="listTitle">{{item.caption}}</p>
<p class="itemCaption">*auteurice*</p>
<p class="itemCaption">{{item.date}}</p>
</div>
@@ -258,6 +258,7 @@
border-width: thin;
border-color: transparent;
border-radius: 16.1px;
overflow-x: hidden;
}
.listItemStyle:hover{
@@ -278,7 +279,7 @@
font-size: 16.1px;
pointer-events: none;
cursor:inherit;
width: 30%;
width: 20%;
height: 100%;
text-align: left;
display: flex;
@@ -288,6 +289,9 @@
user-select: none;
}
#listTitle{
width: 50%;
}
</style>
@@ -378,13 +382,11 @@
}
console.log(dataStorage.selectedLink);
}
if (e.type === 'text'){
this.selectFile(e);
}
this.selectFile(e);
},
selectFile(e){
this.$emit('focus');
this.displayedItems.forEach(it => {
it.isSelected = false;
})
@@ -420,8 +422,6 @@
backToRoot(){
this.displayedItems = this.rootFolderContent.at(-1).content;
this.fileName = this.rootFolderContent.at(-1).directory;
this.displayedDescription = this.rootFolderContent.at(-1).description;
this.rootFolderContent.splice(this.rootFolderContent.length-1,1);
this.rootDepth = this.rootFolderContent.length
if (this.rootDepth === 0){
this.isNotRoot = false;
@@ -431,6 +431,8 @@
this.listDisplay = false;
this.gridDisplay = true;
}
this.deselectAll();
this.rootFolderContent.splice(this.rootFolderContent.length-1,1);
},
closeClicked(){
this.dataFirstLoad();