forked from vgaNAR6ta/drags-and-nerds
edit: ajout du 2 animé + MAXI REGLAGE (responsive, couleur, positionnement etc.) + ajout vue liste panneau dans panneau à propos + likes dans images + class gen reactBar
This commit is contained in:
@@ -34,13 +34,21 @@
|
||||
</div>
|
||||
<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)">
|
||||
<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"/>
|
||||
<p class="itemCaption">{{item.caption}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="displayedItems" class="itemDesc" @touchstart.stop>
|
||||
<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>
|
||||
<p class="itemCaption">*auteurice*</p>
|
||||
<p class="itemCaption">{{item.date}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="displayedItems" class="itemDesc" @touchstart.stop @click.stop>
|
||||
<p>{{displayedDescription}}</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -110,6 +118,7 @@
|
||||
font-size: 16.1px;
|
||||
}
|
||||
|
||||
/*=================GRID DISPLAY*/
|
||||
.theMatrix{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
@@ -158,7 +167,7 @@
|
||||
border-style: solid;
|
||||
border-width: thin;
|
||||
border-color: transparent;
|
||||
cursor: pointer;
|
||||
cursor: cell;
|
||||
}
|
||||
|
||||
.itemStyle:hover{
|
||||
@@ -187,8 +196,7 @@
|
||||
}
|
||||
.selectedItemStyle .icon{
|
||||
height:auto;
|
||||
width:50%;
|
||||
fill: currentColor;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.itemCaption{
|
||||
@@ -222,6 +230,65 @@
|
||||
grid-auto-rows: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
/*======================LIST DISPLAY*/
|
||||
.nevrEndingList{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
width: 95%;
|
||||
height: 66%;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
padding-right: 7.77px;
|
||||
}
|
||||
|
||||
.listItemStyle{
|
||||
width:100%;
|
||||
height: 33px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
margin-top: 7.77px;
|
||||
margin-left: 1.61px;
|
||||
cursor: cell;
|
||||
border-style: solid;
|
||||
border-width: thin;
|
||||
border-color: transparent;
|
||||
border-radius: 16.1px;
|
||||
}
|
||||
|
||||
.listItemStyle:hover{
|
||||
border-color: var(--main-color);
|
||||
}
|
||||
|
||||
.listItemStyle .icon{
|
||||
height: 16.1px;
|
||||
width: 33px;
|
||||
margin-left: 16.1px;
|
||||
margin-right: 16.1px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.listItemStyle .itemCaption{
|
||||
font-family: 'velvelyne';
|
||||
font-weight: bold;
|
||||
font-size: 16.1px;
|
||||
pointer-events: none;
|
||||
cursor:inherit;
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding-top: 1.61px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
@@ -242,9 +309,12 @@
|
||||
displayedItems: null,
|
||||
rootFolderContent: [],
|
||||
emptyFolder: false,
|
||||
gridDisplay: true,
|
||||
listDisplay: false,
|
||||
displayedDescription: "",
|
||||
fileName: "",
|
||||
isNotRoot : false
|
||||
isNotRoot : false,
|
||||
rootDepth: 0
|
||||
}
|
||||
},
|
||||
emits: ['close','focus','openImg','openLink'],
|
||||
@@ -257,27 +327,45 @@
|
||||
console.log(this.displayedItems);
|
||||
this.isNotRoot = false;
|
||||
this.checkEmptyFolder();
|
||||
this.deselectAll();
|
||||
this.fileName = "./";
|
||||
if(!this.emptyFolder){
|
||||
this.gridDisplay = true;
|
||||
this.listDisplay = false;
|
||||
};
|
||||
},
|
||||
deselectAll(){
|
||||
this.displayedItems.forEach(it => {
|
||||
it.isSelected = false;
|
||||
});
|
||||
this.displayedDescription = "1x click pour plus d'infos \n 2x click pour accéder au contenu";
|
||||
this.fileName = "./";
|
||||
if(!this.isNotRoot){
|
||||
this.displayedDescription = "1x click pour plus d'infos \n 2x click pour accéder au contenu";
|
||||
}else{
|
||||
this.displayedDescription = this.rootFolderContent.at(-1).description;
|
||||
}
|
||||
},
|
||||
openFile(e){
|
||||
this.$emit('focus');
|
||||
if(e.type === 'folder'){
|
||||
this.rootFolderContent.push({content:[...this.displayedItems], directory:this.fileName, description: this.displayedDescription});
|
||||
this.rootDepth = this.rootFolderContent.length;
|
||||
this.displayedItems = [...e.children];
|
||||
this.checkEmptyFolder();
|
||||
this.isNotRoot = true;
|
||||
this.displayedDescription = e.description
|
||||
this.fileName += e.caption + '/';
|
||||
if (e.caption === 'Autres'){
|
||||
this.gridDisplay = false;
|
||||
this.listDisplay = true;
|
||||
}
|
||||
}
|
||||
if(e.type === 'image'){
|
||||
this.$emit('openImg');
|
||||
dataStorage.selectedImg = {
|
||||
src: e.src,
|
||||
caption: e.caption
|
||||
caption: e.caption,
|
||||
like: e.like,
|
||||
isLiked: e.isLiked
|
||||
}
|
||||
this.displayedDescription = e.description;
|
||||
}
|
||||
@@ -322,22 +410,27 @@
|
||||
checkEmptyFolder(){
|
||||
if (this.displayedItems.length === 0){
|
||||
this.emptyFolder = true;
|
||||
this.gridDisplay = false;
|
||||
this.listDisplay = false;
|
||||
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.displayedDescription = this.rootFolderContent[rootDepth].description;
|
||||
this.rootFolderContent.splice(rootDepth,1);
|
||||
rootDepth = this.rootFolderContent.length
|
||||
if (rootDepth === 0){
|
||||
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;
|
||||
}
|
||||
this.checkEmptyFolder();
|
||||
if(this.listDisplay){
|
||||
this.listDisplay = false;
|
||||
this.gridDisplay = true;
|
||||
}
|
||||
},
|
||||
closeClicked(){
|
||||
this.dataFirstLoad();
|
||||
|
||||
Reference in New Issue
Block a user