edit: ajout icon & bug fix infobulle timer
This commit is contained in:
@@ -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();
|
||||
|
||||
Reference in New Issue
Block a user