Skip to content

Commit 45053a7

Browse files
jsbroksjsbroks
committed
Create sidebar for images view
1 parent 05061ae commit 45053a7

File tree

2 files changed

+168
-61
lines changed

2 files changed

+168
-61
lines changed

‎client/src/components/annotator/tools/SelectTool.vue‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -67,14 +67,23 @@ export default {
6767
generateTitle() {
6868
let string = " ";
6969
if (this.hover.category && this.hover.annotation) {
70-
string += `ID: ${this.hover.annotation.annotation.id}`;
71-
string += '\n'
72-
string += `Category: ${this.hover.category.category.name}`;
70+
let id = this.hover.textId;
71+
let category = this.hover.category.category.name
72+
string += "ID: " + id + " \n";
73+
string += "Category: " + category + " \n";
7374
}
75+
76+
if (this.$store.getters["user/loginEnabled"]) {
77+
let creator = this.hover.annotation.annotation.creator;
78+
if (creator != null) {
79+
string += "Created by " + creator + "\n\n";
80+
}
81+
}
82+
7483
return string.replace(/\n/g, " \n ").slice(0, -2);
7584
},
7685
generateStringFromMetadata() {
77-
let string = " ";
86+
let string = "";
7887
let metadata = this.hover.annotation.$refs.metadata.metadataList;
7988
8089
if (metadata == null || metadata.length === 0) {
@@ -88,13 +97,6 @@ export default {
8897
});
8998
}
9099
91-
if (this.$store.getters["user/loginEnabled"]) {
92-
let creator = this.hover.annotation.annotation.creator;
93-
if (creator != null) {
94-
string += "Created by " + creator + "\n";
95-
}
96-
}
97-
98100
return string.replace(/\n/g, " \n ").slice(0, -2);
99101
},
100102
hoverText() {
@@ -115,8 +117,8 @@ export default {
115117
}
116118
117119
this.hover.textId = this.hover.annotation.annotation.id;
118-
let content = this.generateTitle() + ' \n ' +
119-
this.generateStringFromMetadata();
120+
let content =
121+
this.generateTitle() + " \n " + this.generateStringFromMetadata();
120122
121123
this.hover.text = new paper.PointText(position);
122124
this.hover.text.justification = "left";

‎client/src/views/Dataset.vue‎

Lines changed: 153 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,12 @@
11
<template>
2-
<div>
2+
<div @mousemove="mouseMove">
33
<div style="padding-top: 55px" />
44
<div
55
class="album py-5 bg-light"
66
style="overflow: auto; height: calc(100vh - 55px)"
7+
:style="{ 'margin-left': sidebar.width + 'px' }"
78
>
89
<div class="container">
9-
<h2 class="text-center">Dataset of {{ dataset.name }}</h2>
10-
<p class="text-center">
11-
Total of <strong>{{ imageCount }}</strong> images displayed on
12-
<strong>{{ pages }}</strong> pages.
13-
</p>
14-
15-
<div class="row justify-content-md-center">
16-
<div
17-
class="col-md-auto btn-group"
18-
role="group"
19-
style="padding-bottom: 20px"
20-
>
21-
<button
22-
type="button"
23-
class="btn btn-success"
24-
data-toggle="modal"
25-
data-target="#generateDataset"
26-
>
27-
Generate
28-
</button>
29-
<button
30-
type="button"
31-
class="btn btn-primary"
32-
data-toggle="modal"
33-
data-target="#cocoUpload"
34-
>
35-
Import COCO
36-
</button>
37-
<!-- <button type="button" class="btn btn-info">
38-
Download COCO
39-
</button> -->
40-
</div>
41-
</div>
42-
<div v-if="subdirectories.length > 0" class="text-center">
43-
<h5>Subdirectories</h5>
44-
<button
45-
v-for="(subdirectory, subId) in subdirectories"
46-
:key="subId"
47-
class="btn badge badge-pill badge-primary category-badge"
48-
style="margin: 2px"
49-
@click="folders.push(subdirectory)"
50-
>
51-
{{ subdirectory }}
52-
</button>
53-
</div>
54-
5510
<ol class="breadcrumb">
5611
<li class="breadcrumb-item"></li>
5712
<li class="breadcrumb-item active">
@@ -87,6 +42,66 @@
8742
</div>
8843
</div>
8944

45+
<div
46+
id="filter"
47+
ref="sidebar"
48+
class="sidebar"
49+
:style="{ width: sidebar.width + 'px' }"
50+
>
51+
<div style="padding-top: 10px" />
52+
<h3>{{ dataset.name }}</h3>
53+
<p class="text-center" style="color: lightgray">
54+
Total of <strong style="color: white">{{ imageCount }}</strong> images
55+
displayed on <strong style="color: white">{{ pages }}</strong> pages.
56+
</p>
57+
<div class="row justify-content-md-center sidebar-section-buttons">
58+
<button
59+
type="button"
60+
class="btn btn-success btn-block"
61+
data-toggle="modal"
62+
data-target="#generateDataset"
63+
>
64+
Generate
65+
</button>
66+
<button
67+
type="button"
68+
class="btn btn-primary btn-block"
69+
data-toggle="modal"
70+
data-target="#cocoUpload"
71+
>
72+
Import COCO
73+
</button>
74+
75+
<!-- <button type="button" class="btn btn-info">
76+
Download COCO
77+
</button> -->
78+
</div>
79+
<hr />
80+
<h6 class="sidebar-title text-center">Subdirectories</h6>
81+
<div class="sidebar-section" style="max-height: 30%; color: lightgray">
82+
<div v-if="subdirectories.length > 0">
83+
<button
84+
v-for="(subdirectory, subId) in subdirectories"
85+
:key="subId"
86+
class="btn badge badge-pill badge-primary category-badge"
87+
style="margin: 2px"
88+
@click="folders.push(subdirectory)"
89+
>
90+
{{ subdirectory }}
91+
</button>
92+
</div>
93+
<p v-else style="margin: 0; font-size: 13px; color: gray">
94+
No subdirectory found.
95+
</p>
96+
</div>
97+
<hr />
98+
<h6 class="sidebar-title text-center">Filtering Options</h6>
99+
<div
100+
class="sidebar-section"
101+
style="max-height: 30%; color: lightgray"
102+
></div>
103+
</div>
104+
90105
<div class="modal fade" tabindex="-1" role="dialog" id="generateDataset">
91106
<div class="modal-dialog" role="document">
92107
<div class="modal-content">
@@ -216,7 +231,13 @@ export default {
216231
status: {
217232
data: { state: true, message: "Loading data" }
218233
},
219-
keyword: ""
234+
keyword: "",
235+
mouseDown: false,
236+
sidebar: {
237+
drag: false,
238+
width: 300,
239+
canResize: false
240+
}
220241
};
221242
},
222243
methods: {
@@ -279,20 +300,64 @@ export default {
279300
this.axiosReqestError("Loading Dataset", error.response.data.message);
280301
})
281302
.finally(() => this.removeProcess(process));
303+
},
304+
mouseMove(event) {
305+
let element = this.$refs.sidebar;
306+
307+
let sidebarWidth = element.offsetWidth;
308+
let clickWidth = event.x;
309+
let pixelsFromSide = Math.abs(sidebarWidth - clickWidth);
310+
311+
this.sidebar.drag = pixelsFromSide < 4;
312+
313+
if (this.sidebar.canResize) {
314+
event.preventDefault();
315+
let max = window.innerWidth * 0.5;
316+
this.sidebar.width = Math.min(Math.max(event.x, 200), max);
317+
}
318+
},
319+
startDrag() {
320+
this.mouseDown = true;
321+
this.sidebar.canResize = this.sidebar.drag;
322+
},
323+
stopDrag() {
324+
this.mouseDown = false;
325+
this.sidebar.canResize = false;
282326
}
283327
},
284328
watch: {
285329
folders() {
286330
this.updatePage();
331+
},
332+
"sidebar.drag"(canDrag) {
333+
let el = this.$refs.sidebar;
334+
if (canDrag) {
335+
this.$el.style.cursor = "ew-resize";
336+
el.style.borderRight = "4px solid #383c4a";
337+
} else {
338+
this.$el.style.cursor = "default";
339+
el.style.borderRight = "";
340+
}
287341
}
288342
},
289343
beforeRouteUpdate() {
290344
this.dataset.id = parseInt(this.identifier);
291345
this.updatePage();
292346
},
293347
created() {
348+
this.sidebar.width = window.innerWidth * 0.2;
349+
if (this.sidebar.width < 90) this.sidebar.width = 0;
350+
294351
this.dataset.id = parseInt(this.identifier);
295352
this.updatePage();
353+
},
354+
mounted() {
355+
window.addEventListener("mouseup", this.stopDrag);
356+
window.addEventListener("mousedown", this.startDrag);
357+
},
358+
destroyed() {
359+
window.removeEventListener("mouseup", this.stopDrag);
360+
window.removeEventListener("mousedown", this.startDrag);
296361
}
297362
};
298363
</script>
@@ -306,4 +371,44 @@ export default {
306371
.btn-link {
307372
padding: 0px;
308373
}
374+
375+
.sidebar .title {
376+
color: white;
377+
}
378+
379+
.sidebar {
380+
height: 100%;
381+
position: fixed;
382+
color: white;
383+
z-index: 1;
384+
top: 0;
385+
left: 0;
386+
background-color: #4b5162;
387+
overflow-x: hidden;
388+
padding-top: 60px;
389+
}
390+
391+
.sidebar .closebtn {
392+
position: absolute;
393+
top: 0;
394+
right: 25px;
395+
font-size: 36px;
396+
margin-left: 50px;
397+
}
398+
399+
.sidebar-title {
400+
color: white;
401+
}
402+
403+
.sidebar-section-buttons {
404+
margin: 5px;
405+
}
406+
407+
.sidebar-section {
408+
margin: 5px;
409+
border-radius: 5px;
410+
background-color: #383c4a;
411+
padding: 0 5px 2px 5px;
412+
overflow: auto;
413+
}
309414
</style>

0 commit comments

Comments
 (0)