edit: interface type explorateur de fichier pour infos artistes & orga (texte & dossier, image en projet)
This commit is contained in:
@@ -1,5 +1,9 @@
|
||||
<script setup>
|
||||
import CloseIcon from '../assets/icons/close.svg'
|
||||
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>
|
||||
@@ -14,15 +18,29 @@
|
||||
<p>
|
||||
<b class="windowTitleLower">À PROPOS DE</b>
|
||||
<br>
|
||||
Nos Artistes
|
||||
Nous, Nos Artistes, etc.
|
||||
</p>
|
||||
<!-- touchstart.capture pour passer en prio sur déplacement fenêtre/ .stop si pas de method-->
|
||||
<button type="button" class="closeBtn" @mousedown.capture="$emit('close')" @touchstart.capture="$emit('close')">
|
||||
<CloseIcon name="close" class="icon"/>
|
||||
</button>
|
||||
<div class="dblBtnContainer">
|
||||
<button type="button" class="iconBtnStyle" id="rootBtn" v-show="isNotRoot" @mousedown.stop @touchstart="backToRoot" @click="backToRoot">
|
||||
<BackIcon name="backwoods" class="icon"/>
|
||||
</button>
|
||||
<button type="button" class="iconBtnStyle" @mousedown.stop @touchstart="$emit('close')" @click="closeClicked">
|
||||
<CloseIcon name="close" class="icon"/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="windowContent">
|
||||
|
||||
<div class="windowContent" id="artistContent">
|
||||
<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="{selectedItemStyle: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>
|
||||
@@ -48,17 +66,211 @@
|
||||
top: 16.1px;
|
||||
left: 16.1px;
|
||||
}
|
||||
|
||||
#artistContent{
|
||||
width:100%;
|
||||
height:87%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.dblBtnContainer{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
height: 100%;
|
||||
width: 100px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dblBtnContainer .iconBtnStyle{
|
||||
height: 33px;
|
||||
width: 50px;
|
||||
margin-left: 7.77px;
|
||||
background-color: var(--main-color);
|
||||
color: var(--back-color);
|
||||
border-color: var(--back-color);
|
||||
}
|
||||
|
||||
.dblBtnContainer .iconBtnStyle:hover{
|
||||
background-color: var(--back-color);
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
#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(150px, 1fr));
|
||||
grid-auto-rows: 133px;
|
||||
gap: 10px;
|
||||
width: 97%;
|
||||
height: 66%;
|
||||
overflow-y: auto;
|
||||
align-items: center;
|
||||
margin-left: 5px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.itemDesc{
|
||||
width: 90%;
|
||||
height: 23%;
|
||||
border-radius: 16.1px;
|
||||
border-color: var(--main-color);
|
||||
border-style: solid;
|
||||
border-width: thin;
|
||||
margin-top: 2%;
|
||||
|
||||
color: var(--main-color);
|
||||
font-family: 'velvelyne';
|
||||
font-weight: bold;
|
||||
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(--main-color);
|
||||
}
|
||||
/*===============Not selected Item*/
|
||||
.displayStyle{
|
||||
color: var(--main-color);
|
||||
border-style: solid;
|
||||
border-width: thin;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.displayStyle .icon{
|
||||
height:auto;
|
||||
width:50%;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
/*===============Seleted Item*/
|
||||
.selectedItemStyle{
|
||||
color: var(--accent-color);
|
||||
border-style: solid;
|
||||
border-width: thin;
|
||||
border-color: transparent;
|
||||
}
|
||||
.selectedItemStyle .icon{
|
||||
height:auto;
|
||||
width:50%;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.itemCaption{
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-size: 16.1px;
|
||||
pointer-events: all;
|
||||
cursor:inherit;
|
||||
}
|
||||
.itemCaption:hover{
|
||||
color: var(--accent-color);
|
||||
}
|
||||
.displayStyle .itemCaption{
|
||||
color: var(--main-color);
|
||||
font-family: 'velvelyne';
|
||||
}
|
||||
.selectedItemStyle .itemCaption{
|
||||
color: var(--accent-color);
|
||||
font-family: 'lineal'
|
||||
}
|
||||
|
||||
/*================ PC LARGE*/
|
||||
@media(min-width:1300px){
|
||||
#artistPannel{
|
||||
height: 777px;
|
||||
width: 666px;
|
||||
}
|
||||
.theMatrix{
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
grid-auto-rows: 180px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
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 {
|
||||
name : 'ArtistPannel',
|
||||
@@ -67,17 +279,102 @@
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
target: null
|
||||
target: null,
|
||||
lastClickedItem: null,
|
||||
dblClickTimer: null,
|
||||
displayedItems: null,
|
||||
rootFolderContent: [],
|
||||
emptyFolder: false,
|
||||
displayedDescription: "",
|
||||
fileName: "",
|
||||
isNotRoot : false
|
||||
}
|
||||
},
|
||||
emits: ['close','focus'],
|
||||
methods:{
|
||||
onDrag({ target, transform }) {
|
||||
target.style.transform = transform;
|
||||
},
|
||||
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');
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.target = this.$refs.artistPannel;
|
||||
this.dataFirstLoad();
|
||||
console.log("Artist pannel is loaded!");
|
||||
}
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user