imacat/lucia-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: File list hover layout done.

Browse Source
This commit is contained in:
chiayin
2024-01-15 12:01:22 +08:00
parent d4f0801ca1
commit d7b372f620
3 changed files with 67 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
package-lock.json generated
View File

@@ -1,12 +1,12 @@
{
"name": "frontend",
"version": "0.99.6",
"version": "0.99.7",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "frontend",
"version": "0.99.6",
"version": "0.99.7",
"dependencies": {
"autoprefixer": "^10.4.13",
"axios": "^1.2.2",

74
src/views/Files/index.vue
View File

@@ -2,11 +2,11 @@
<div class="container pt-4 2xl:max-w-none">
<!-- Recently Used -->
<section class="mb-4">
<h2 class="font-bold py-4 mb-4 border-b border-neutral-500">Recently Used</h2>
<h2 class="h-12 font-bold py-4 mb-4 border-b border-neutral-500">Recently Used</h2>
<!-- card group 最多六個-->
<ul class="flex justify-start items-center gap-4 overflow-x-auto w-full h-[192px] scrollbar pb-4">
<!-- card item v-for -->
<li class="w-[216px] min-w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:bg-primary/10 hover:border-primary duration-300 flex flex-col justify-between cursor-pointer" v-for="(file, index) in recentlyUsedFiles.slice(0, 6)" :key="file.id" @dblclick="enterDiscover(file)" :title="file.name" @contextmenu="onRightClick($event, file)">
<li class="w-[216px] min-w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:bg-primary/10 hover:border-primary duration-300 flex flex-col justify-between cursor-pointer" v-for="(file, index) in recentlyUsedFiles.slice(0, 6)" :key="file.id" @dblclick="enterDiscover(file)" :title="file.name" @contextmenu="onRightClick($event, file)" >
<div>
<span class="material-symbols-outlined mb-2 text-[32px] block">
{{ file.icon }}
@@ -25,10 +25,17 @@
</ul>
</section>
<section>
<div class="py-4 mb-4 border-b flex justify-between items-center border-neutral-500">
<div class="h-12 mb-4 border-b flex justify-between items-center border-neutral-500">
<h2 class="font-bold">All Files</h2>
<ul class="flex items-center">
<li class="mr-4 cursor-pointer" @click="switchListOrGrid = false">
<ul class="flex items-center gap-x-4">
<li v-show="isActive !== null" class="animate-fadein">
<ul class="flex justify-center items-center gap-x-4 px-4 py-1 rounded-full bg-neutral-200 text-neutral-700">
<li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary" @click="rename">edit_square</span></li>
<li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary">download</span></li>
<li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary">delete</span></li>
</ul>
</li>
<li class="cursor-pointer" @click="switchListOrGrid = false">
<IconList class="hover:fill-primary hover:bg-neutral-50 duration-300"></IconList>
</li>
<li class="cursor-pointer" @click="switchListOrGrid = true">
@@ -38,18 +45,26 @@
</div>
<!-- All Files type of List -->
<div class="overflow-y-scroll overflow-x-hidden scrollbar -mx-2 max-h-[calc(100vh_-_480px)]" v-if="!switchListOrGrid">
<DataTable :value="allFiles" dataKey="id" tableClass="w-full !border-separate !border-spacing-x-2 text-sm cursor-pointer" breakpoint="0" @row-dblclick="enterDiscover($event.data)">
<DataTable :value="allFiles" dataKey="id" tableClass="w-full !border-separate !border-spacing-x-2 text-sm cursor-pointer" :rowClass="setRowClass" breakpoint="0" @row-dblclick="enterDiscover($event.data)" contextmenu v-model:contextMenuSelection="selectedTableFile" @row-contextmenu="onRightClickTable">
<Column field="name" header="Name" bodyClass="font-medium fileName" sortable></Column>
<Column field="parentLog" header="Dependency" bodyClass="text-neutral-500" sortable></Column>
<Column field="fileType" header="File Type" bodyClass="text-neutral-500 fileType" sortable></Column>
<Column field="owner.name" header="Owner" bodyClass="text-neutral-500" sortable></Column>
<Column field="updated_at" header="Last Update" bodyClass="text-neutral-500" sortable></Column>
<Column bodyClass="text-neutral-500">
<template #body="slotProps">
<ul class="opacity-0 group-hover:opacity-100 flex justify-end items-center gap-x-2 text-neutral-700">
<li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary" @click="rename">edit_square</span></li>
<li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary">download</span></li>
<li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary">delete</span></li>
</ul>
</template>
</Column>
</DataTable>
</div>
<!-- All Files type of grid -->
<ul class="flex justify-start items-start gap-4 flex-wrap overflow-y-scroll overflow-x-hidden max-h-[calc(100vh_-_480px)] scrollbar" v-else>
<li class="w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:bg-primary/10 hover:border-primary duration-300 flex flex-col justify-between cursor-pointer"
v-for="(file, index) in allFiles" :key="file.id" @dblclick="enterDiscover(file)" :title="file.name" @contextmenu="onRightClick($event, file)">
<li class="w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:bg-primary/10 hover:border-primary duration-300 flex flex-col justify-between cursor-pointer" v-for="(file, index) in allFiles" :key="file.id" :class="{ 'bg-primary/10 border-primary': isActive === index}" @dblclick="enterDiscover(file)" :title="file.name" @contextmenu="onRightClick($event, file)" @click="onGridCardClick(file, index)" :id="'li' + index">
<div>
<span class="material-symbols-outlined mb-2 text-[32px] block">
{{ file.icon }}
@@ -68,7 +83,7 @@
</ul>
</section>
<!-- ContextMenu -->
<ContextMenu ref="menu" :model="items" @hide="selectedFile = null">
<ContextMenu ref="fileRightMenu" :model="items" @hide="selectedFile = null" class="cursor-pointer">
<template #item="{ item }">
<a class="flex align-items-center px-4 py-2 duration-300 hover:bg-primary/20">
<span class="material-symbols-outlined">{{ item.icon }}</span>
@@ -97,8 +112,11 @@
export default {
data() {
return {
isActive: null,
isHover: null,
switchListOrGrid: false,
selectedFile: null,
selectedTableFile: null, // table 右鍵選單 item
selectedFile: null, // 右鍵選單 item
selectedType: null,
selectedId: null,
items: [
@@ -150,6 +168,12 @@
sortFiles.sort((x,y) => new Date(y.updated_base) - new Date(x.updated_base));
return sortFiles;
}
// let data = [ { "type": "log-check", "id": 315460235, "name": "改名 - log-check 2", "parent": { "type": "log", "id": 306508330, "name": "改名 - log 5" }, "owner": { "username": "dsp", "name": "DSP, Inc" }, "updated_at": "2024-01-11 16:35", "accessed_at": "2024-01-12 11:02", "is_deleted": false, "icon": "local_police", "parentLog": "改名 - log 5", "fileType": "Rule", "ownerName": "DSP, Inc", "updated_base": "2024-01-11T16:35:55.922892+08:00", "accessed_base": "2024-01-12T11:02:46.979212+08:00" }, { "type": "filter-check", "id": 428974306, "name": "改名 - filter-check 2", "parent": { "type": "filter", "id": 308980935, "name": "改名 - filter 2" }, "owner": { "username": "dsp", "name": "DSP, Inc" }, "updated_at": "2024-01-11 16:35", "accessed_at": "2024-01-11 12:25", "is_deleted": false, "icon": "local_police", "parentLog": "改名 - filter 2", "fileType": "Rule", "ownerName": "DSP, Inc", "updated_base": "2024-01-11T16:35:40.524919+08:00", "accessed_base": "2024-01-11T12:25:37.345564+08:00" }, ]
// if(data.length !== 0){
// let sortFiles = Array.from(data);
// sortFiles.sort((x,y) => new Date(y.updated_base) - new Date(x.updated_base));
// return sortFiles;
// }
},
/**
* 時間排序，如果沒有 accessed_at 就不加入 data
@@ -162,8 +186,11 @@
},
},
methods: {
rename() {
renameModal(this.store.rename, this.selectedType, this.selectedId);
/**
* Set Row Style
*/
setRowClass() {
return ['group']
},
/**
* 選擇該 files 進入 Discover/Compare/Design 頁面
@@ -210,12 +237,29 @@
onRightClick(event, file) {
this.selectedType = file.type;
this.selectedId = file.id;
this.$refs.menu.show(event)
this.$refs.fileRightMenu.show(event)
},
onRightClickTable(event) {
this.selectedType = event.data.type;
this.selectedId = event.data.id;
this.$refs.fileRightMenu.show(event.originalEvent)
},
onGridCardClick(file, index) {
this.selectedType = file.type;
this.selectedId = file.id;
this.isActive = index;
},
rename() {
renameModal(this.store.rename, this.selectedType, this.selectedId);
},
},
mounted() {
this.isLoading = true;
this.store.fetchAllFiles();
window.addEventListener('click', (e) => {
const clickedLi = e.target.closest('li');
if(!clickedLi || !clickedLi.id.startsWith('li')) this.isActive = null;
})
this.isLoading = false;
},
}
@@ -226,10 +270,10 @@
@apply sticky top-0 bg-neutral-10
}
:deep(table th) {
@apply border-b !border-neutral-500 p-3 text-left font-black !bg-neutral-10 whitespace-nowrap break-keep overflow-hidden text-ellipsis
@apply border-b !border-neutral-500 !p-2 text-left font-black !bg-neutral-10 whitespace-nowrap break-keep overflow-hidden text-ellipsis
}
:deep(table td) {
@apply border-b border-neutral-300 p-3 whitespace-nowrap break-keep overflow-hidden text-ellipsis
@apply border-b border-neutral-300 !p-2 whitespace-nowrap break-keep overflow-hidden text-ellipsis
}
:deep(tbody > tr) {
@apply duration-300 cursor-pointer hover:bg-primary/10 focus:!outline-none

6
tailwind.config.js
View File

@@ -57,6 +57,11 @@ module.exports = {
'50%': { opacity: '0.5' },
'100%': { opacity: '1' },
},
'fadeout': {
'0%': { opacity: '1' },
'0%': { opacity: '0.5' },
'0%': { opacity: '0' },
},
'edit': {
'0%, 100%': { transform: 'rotate(0deg)' },
'25%': { transform: 'rotate(9deg)' },
@@ -65,6 +70,7 @@ module.exports = {
},
animation: {
'fadein': 'fadein 1s ease-in-out',
'fadeout': 'fadeout 1s ease-in-out',
'edit': 'edit 0.6s ease'
},
},