Skip to content

Commit 7deb20d

Browse files
Nam HuỳnhNam Huỳnh
Nam Huỳnh
authored and
Nam Huỳnh
committed
Show dimensions under info
1 parent 71e9b35 commit 7deb20d

File tree

2 files changed

+95
-83
lines changed

2 files changed

+95
-83
lines changed

‎src/components/manager/GridView.vue

Lines changed: 73 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,33 @@
11
<template>
2-
<div class="fm-grid">
3-
<div class="d-flex align-content-start flex-wrap">
4-
<div v-if="!isRootPath" v-on:click="levelUp" class="fm-grid-item text-center" >
5-
<div class="fm-item-icon">
6-
<i class="fas fa-level-up-alt fa-5x pb-2"/>
7-
</div>
8-
<div class="fm-item-info"><strong>..</strong></div>
9-
</div>
10-
11-
<div class="fm-grid-item text-center unselectable"
12-
v-for="(directory, index) in directories"
13-
v-bind:key="`d-${index}`"
14-
v-bind:title="directory.basename"
15-
v-bind:class="{'active': checkSelect('directories', directory.path)}"
16-
v-on:click="selectItem('directories', directory.path, $event)"
17-
v-on:dblclick.stop="selectDirectory(directory.path)"
18-
v-on:contextmenu.prevent="contextMenu(directory, $event)">
19-
<div class="fm-item-icon">
20-
<i class="fa-5x pb-2"
21-
v-bind:class="(acl && directory.acl === 0) ? 'fas fa-unlock-alt' : 'far fa-folder'"/>
22-
</div>
23-
<div class="fm-item-info">{{ directory.basename }}</div>
24-
</div>
25-
26-
<div class="fm-grid-item text-center unselectable"
27-
v-for="(file, index) in files"
28-
v-bind:key="`f-${index}`"
29-
v-bind:title="file.basename"
30-
v-bind:class="{'active': checkSelect('files', file.path)}"
31-
v-on:click="selectItem('files', file.path, $event)"
32-
v-on:dblclick="selectAction(file.path, file.extension)"
33-
v-on:contextmenu.prevent="contextMenu(file, $event)">
34-
<div class="fm-item-icon">
35-
<i v-if="acl && file.acl === 0" class="fas fa-unlock-alt fa-5x pb-2"/>
36-
<thumbnail v-else-if="thisImage(file.extension)"
37-
v-bind:disk="disk"
38-
v-bind:file="file">
39-
</thumbnail>
40-
<i v-else class="far fa-5x pb-2"
41-
v-bind:class="extensionToIcon(file.extension)"/>
42-
</div>
43-
<div class="fm-item-info">
44-
{{ `${file.filename}.${file.extension}` }}
45-
<br>
46-
{{ bytesToHuman(file.size) }}
47-
</div>
48-
</div>
2+
<div class="fm-grid" v-if="!isLoading">
3+
<div class="d-flex align-content-start flex-wrap">
4+
<div v-if="!isRootPath" v-on:click="levelUp" class="fm-grid-item text-center">
5+
<div class="fm-item-icon">
6+
<i class="fas fa-level-up-alt fa-5x pb-2" />
7+
</div>
8+
<div class="fm-item-info"><strong>..</strong></div>
9+
</div>
10+
<div class="fm-grid-item text-center unselectable" v-for="(directory, index) in directories" v-bind:key="`d-${index}`" v-bind:title="directory.basename" v-bind:class="{'active': checkSelect('directories', directory.path)}" v-on:click="selectItem('directories', directory.path, $event)" v-on:dblclick.stop="selectDirectory(directory.path)" v-on:contextmenu.prevent="contextMenu(directory, $event)">
11+
<div class="fm-item-icon">
12+
<i class="fa-5x pb-2" v-bind:class="(acl && directory.acl === 0) ? 'fas fa-unlock-alt' : 'far fa-folder'" />
13+
</div>
14+
<div class="fm-item-info">{{ directory.basename }}</div>
15+
</div>
16+
<div class="fm-grid-item text-center unselectable" v-for="(file, index) in files" v-bind:key="`f-${index}`" v-bind:title="file.basename" v-bind:class="{'active': checkSelect('files', file.path)}" v-on:click="selectItem('files', file.path, $event)" v-on:dblclick="selectAction(file.path, file.extension)" v-on:contextmenu.prevent="contextMenu(file, $event)">
17+
<div class="fm-item-icon">
18+
<i v-if="acl && file.acl === 0" class="fas fa-unlock-alt fa-5x pb-2" />
19+
<thumbnail v-else-if="thisImage(file.extension)" v-bind:disk="disk" v-bind:file="file">
20+
</thumbnail>
21+
<i v-else class="far fa-5x pb-2" v-bind:class="extensionToIcon(file.extension)" />
22+
</div>
23+
<div class="fm-item-info">
24+
{{ `${file.filename}.${file.extension}` }}
25+
<br> {{ bytesToHuman(file.size) }}
26+
<br> <small><b>{{ file.dimensions }}</b></small>
4927
</div>
28+
</div>
5029
</div>
30+
</div>
5131
</template>
5232

5333
<script>
@@ -62,6 +42,7 @@ export default {
6242
mixins: [translate, helper, managerHelper],
6343
data() {
6444
return {
45+
isLoading: false,
6546
disk: '',
6647
};
6748
},
@@ -70,6 +51,21 @@ export default {
7051
},
7152
mounted() {
7253
this.disk = this.selectedDisk;
54+
/* eslint space-before-function-paren: ["error", "never"] */
55+
this.isLoading = true;
56+
const filesBuilder = new Promise((resolve) => {
57+
this.files.forEach(async(image, index) => {
58+
const dimensions = await this.getFileDimension(this.disk, image);
59+
this.files[index].dimensions = dimensions;
60+
if (index === this.files.length - 1) {
61+
resolve();
62+
}
63+
});
64+
});
65+
66+
filesBuilder.then(() => {
67+
this.isLoading = false;
68+
});
7369
},
7470
beforeUpdate() {
7571
// if disk changed
@@ -103,41 +99,35 @@ export default {
10399
</script>
104100

105101
<style lang="scss">
106-
.fm-grid {
107-
padding-top: 1rem;
108-
109-
.fm-grid-item {
110-
position: relative;
111-
width: 125px;
112-
padding: 0.4rem;
113-
margin-bottom: 1rem;
114-
margin-right: 1rem;
115-
border-radius: 5px;
116-
117-
&.active {
118-
background-color: #c2e5eb;
119-
box-shadow: 3px 2px 5px gray;
120-
}
121-
122-
&:not(.active):hover {
123-
background-color: #f8f9fa;
124-
box-shadow: 3px 2px 5px gray;
125-
}
126-
127-
.fm-item-icon{
128-
cursor: pointer;
129-
}
130-
131-
.fm-item-icon > i,
132-
.fm-item-icon > figure > i {
133-
color: #6d757d;
134-
}
135-
136-
.fm-item-info {
137-
overflow: hidden;
138-
text-overflow: ellipsis;
139-
white-space: nowrap;
140-
}
141-
}
102+
.fm-grid {
103+
padding-top: 1rem;
104+
.fm-grid-item {
105+
position: relative;
106+
width: 125px;
107+
padding: 0.4rem;
108+
margin-bottom: 1rem;
109+
margin-right: 1rem;
110+
border-radius: 5px;
111+
&.active {
112+
background-color: #c2e5eb;
113+
box-shadow: 3px 2px 5px gray;
114+
}
115+
&:not(.active):hover {
116+
background-color: #f8f9fa;
117+
box-shadow: 3px 2px 5px gray;
118+
}
119+
.fm-item-icon {
120+
cursor: pointer;
121+
}
122+
.fm-item-icon > i,
123+
.fm-item-icon > figure > i {
124+
color: #6d757d;
125+
}
126+
.fm-item-info {
127+
overflow: hidden;
128+
text-overflow: ellipsis;
129+
white-space: nowrap;
142130
}
131+
}
132+
}
143133
</style>

‎src/mixins/helper.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,28 @@ export default {
3131
return date.toLocaleString(this.$store.state.fm.settings.lang);
3232
},
3333

34+
/**
35+
* get file dimensions
36+
* @param disk
37+
* @param file
38+
* @returns {string}
39+
*/
40+
async getFileDimension(disk, file) {
41+
const url = `${this.$store.getters['fm/settings/baseUrl']}preview?disk=${disk || 'images'}&path=${encodeURIComponent(file.path)}&v=${file.timestamp}`;
42+
let dimensions = 'N/A x N/A';
43+
const imageLoadPromise = new Promise((resolve) => {
44+
const img = new Image();
45+
img.onload = function onload() {
46+
dimensions = `${this.width} x ${this.height}`;
47+
resolve();
48+
};
49+
img.src = url;
50+
});
51+
await imageLoadPromise;
52+
53+
return dimensions;
54+
},
55+
3456
/**
3557
* Mime type to icon
3658
* @param mime

0 commit comments

Comments
 (0)