Refactor folder component

pull/37/head
Varun Patil 2022-08-20 06:52:46 +00:00
parent 522e1f5e1e
commit 0e57dbf992
2 changed files with 57 additions and 31 deletions

View File

@ -0,0 +1,52 @@
<template>
<div class="folder"
@click="openFolder(data.file_id)"
v-bind:style="{
width: rowHeight + 'px',
height: rowHeight + 'px',
}">
<div class="icon-folder icon-dark"></div>
<div class="name">{{ data.name }}</div>
</div>
</template>
<script>
export default {
name: 'Folder',
props: {
data: {
type: Object,
required: true
},
rowHeight: {
type: Number,
required: true,
}
},
methods: {
/** Open album folder */
openFolder(id) {
this.$router.push({ name: 'albums', params: { id } });
},
}
}
</script>
<style>
.folder {
cursor: pointer;
}
.folder .name {
cursor: pointer;
width: 100%;
text-align: center;
}
.icon-folder {
cursor: pointer;
background-size: 40%;
height: 60%; width: 100%;
background-position: bottom;
opacity: 0.3;
}
</style>

View File

@ -20,16 +20,7 @@
v-bind:style="{ height: rowHeight + 'px' }"> v-bind:style="{ height: rowHeight + 'px' }">
<div class="photo" v-for="img of item.photos"> <div class="photo" v-for="img of item.photos">
<div v-if="img.is_folder" class="folder" <Folder v-if="img.is_folder" :data="img" :rowHeight="rowHeight" />
@click="openFolder(img.file_id)"
v-bind:style="{
width: rowHeight + 'px',
height: rowHeight + 'px',
}">
<div class="icon-folder icon-dark"></div>
<div class="name">{{ img.name }}</div>
</div>
<div v-else> <div v-else>
<div v-if="img.is_video" class="icon-video-white"></div> <div v-if="img.is_video" class="icon-video-white"></div>
<img <img
@ -77,12 +68,16 @@
import * as dav from "../services/DavRequests"; import * as dav from "../services/DavRequests";
import axios from '@nextcloud/axios' import axios from '@nextcloud/axios'
import Folder from "./Folder";
import { generateUrl } from '@nextcloud/router' import { generateUrl } from '@nextcloud/router'
const MAX_PHOTO_WIDTH = 175; const MAX_PHOTO_WIDTH = 175;
const MIN_COLS = 3; const MIN_COLS = 3;
export default { export default {
components: {
Folder,
},
data() { data() {
return { return {
/** Loading days response */ /** Loading days response */
@ -555,11 +550,6 @@ export default {
this.$refs.scroller.scrollToPosition(1000); this.$refs.scroller.scrollToPosition(1000);
}, },
/** Open album folder */
openFolder(id) {
this.$router.push({ name: 'albums', params: { id } });
},
/** Open viewer */ /** Open viewer */
async openFile(img, row) { async openFile(img, row) {
const day = this.days.find(d => d.day_id === row.dayId); const day = this.days.find(d => d.day_id === row.dayId);
@ -656,22 +646,6 @@ export default {
top: 8px; right: 8px; top: 8px; right: 8px;
} }
.photo-row .photo .folder {
cursor: pointer;
}
.photo-row .photo .folder .name {
cursor: pointer;
width: 100%;
text-align: center;
}
.photo-row .photo .icon-folder {
cursor: pointer;
background-size: 40%;
height: 60%; width: 100%;
background-position: bottom;
opacity: 0.3;
}
.head-row { .head-row {
height: 40px; height: 40px;
padding-top: 10px; padding-top: 10px;