From 65cdf46b0697fc65242439bc7aacb95659550b7b Mon Sep 17 00:00:00 2001 From: EdwardAJ <13517115@std.stei.itb.ac.id> Date: Sun, 12 Apr 2020 20:32:21 +0700 Subject: [PATCH] Change UI and handle empty label --- frontend/components/label/Box.vue | 24 ++++++----- frontend/components/label/Toolbar.vue | 4 +- frontend/components/root/Navbar.vue | 4 +- frontend/pages/viewer/index-edit.vue | 62 +++++++++++++++------------ frontend/pages/viewer/index.vue | 12 ++++-- 5 files changed, 61 insertions(+), 45 deletions(-) diff --git a/frontend/components/label/Box.vue b/frontend/components/label/Box.vue index 41fc015..c8ad898 100644 --- a/frontend/components/label/Box.vue +++ b/frontend/components/label/Box.vue @@ -12,7 +12,7 @@ <div v-if="isDeleteActive"> <i - class="icon-trash fas fa-trash shadow" + class="icon-trash fas fa-times shadow" :style="{ top: bTop -8 + 'px', left: bLeft + -4 + 'px'}" @click="deleteBox" /> @@ -189,19 +189,15 @@ export default { <style scoped> .box, .box-delete { position: absolute; - border: 3px #F0F801 solid; + border: 3px #219DFF solid; z-index: 3; } - .box:hover, .box-delete:hover , .box.active { - background-color: rgba(144, 238, 144, .3); + .box:hover, .box-delete, .box.active { + background-color: rgba(30, 136, 155, .3); cursor: pointer; } - .box-delete:hover { - background-color: rgba(214, 36, 70, .3); - } - #bIndex { position: absolute; z-index: 6; @@ -247,14 +243,20 @@ export default { } .icon-trash { - color: red; + color: white; + background-color: #FA6159; + + font-size: 0.75rem; + + border-radius: 5px; + padding: 5px; position: absolute; - z-index: 20; + z-index: 30; cursor: pointer; } .icon-trash:hover { - color: #F0F801; + background-color: red; } diff --git a/frontend/components/label/Toolbar.vue b/frontend/components/label/Toolbar.vue index 11f170d..7cad7bb 100644 --- a/frontend/components/label/Toolbar.vue +++ b/frontend/components/label/Toolbar.vue @@ -38,13 +38,13 @@ export default { <style scoped> .bg-toolbar { - background-color: #F7F7F7; + background-color: #474747; width: 3.75vw; } .icon { font-size: 1.1rem; - color: #707070; + color: #8e8383; margin-top: 27px; } diff --git a/frontend/components/root/Navbar.vue b/frontend/components/root/Navbar.vue index 5088f29..6fb6d90 100644 --- a/frontend/components/root/Navbar.vue +++ b/frontend/components/root/Navbar.vue @@ -1,5 +1,5 @@ <template> - <b-sidebar class="side-bar-layout side-bar-bg side-bar-font side-bar-padding"> + <b-nav class="side-bar-layout side-bar-bg side-bar-font side-bar-padding"> <b-nav vertical> <!-- User profile info --> <b-nav-item link-classes="side-bar-color mt-5 ml-4"> @@ -150,7 +150,7 @@ </b-collapse> </div> </b-nav> - </b-sidebar> + </b-nav> </template> <script> diff --git a/frontend/pages/viewer/index-edit.vue b/frontend/pages/viewer/index-edit.vue index f99d8be..9fb1f69 100644 --- a/frontend/pages/viewer/index-edit.vue +++ b/frontend/pages/viewer/index-edit.vue @@ -179,33 +179,35 @@ export default { async drawAllBox () { var allLabels = await this.getAllLabels() console.log(allLabels) - var labeledCount = Object.keys(allLabels).length - var imageAttributes = { - screenWidth: this.$refs.image.clientWidth, - screenHeight: this.$refs.image.clientHeight, - realWidth: this.$refs.image.naturalWidth, - realHeight: this.$refs.image.naturalHeight - } - while(labeledCount > this.labelCount){ - this.previouslyCreatedBox[this.labelCount + 1] = allLabels[this.labelCount].label_id - var contentName = await this.getContentName(allLabels[this.labelCount].label_content_id) - console.log(contentName) - var screenImagesAttr = this.getScreenAttributes(imageAttributes, allLabels[this.labelCount].label_width, allLabels[this.labelCount].label_height, allLabels[this.labelCount].label_x_center, allLabels[this.labelCount].label_y_center) - let newBox = { - width: screenImagesAttr.width, - height: screenImagesAttr.height, - left: screenImagesAttr.left, - top: screenImagesAttr.top, - content: contentName, - label_id: allLabels[this.labelCount].label_id + if (allLabels) { + var labeledCount = Object.keys(allLabels).length + var imageAttributes = { + screenWidth: this.$refs.image.clientWidth, + screenHeight: this.$refs.image.clientHeight, + realWidth: this.$refs.image.naturalWidth, + realHeight: this.$refs.image.naturalHeight + } + while(labeledCount > this.labelCount){ + this.previouslyCreatedBox[this.labelCount + 1] = allLabels[this.labelCount].label_id + var contentName = await this.getContentName(allLabels[this.labelCount].label_content_id) + console.log(contentName) + var screenImagesAttr = this.getScreenAttributes(imageAttributes, allLabels[this.labelCount].label_width, allLabels[this.labelCount].label_height, allLabels[this.labelCount].label_x_center, allLabels[this.labelCount].label_y_center) + let newBox = { + width: screenImagesAttr.width, + height: screenImagesAttr.height, + left: screenImagesAttr.left, + top: screenImagesAttr.top, + content: contentName, + label_id: allLabels[this.labelCount].label_id + } + this.labelCount++ + this.boxes[this.labelCount] = newBox + this.boxesCount++ + // console.log(newBox.content) + this.changeBoxContent(newBox.content, this.labelCount) + // this.makeCurrentBoxActive(this.labelCount) + this.resetDrawingBox() } - this.labelCount++ - this.boxes[this.labelCount] = newBox - this.boxesCount++ - // console.log(newBox.content) - this.changeBoxContent(newBox.content, this.labelCount) - // this.makeCurrentBoxActive(this.labelCount) - this.resetDrawingBox() } console.log("ANJAAY", this.boxes) console.log("ANJJJAY2", this.previouslyCreatedBox) @@ -585,7 +587,7 @@ export default { .viewer-background { height: 100vh; - background-color: #E4E4E4; + background-color: #262626; } .center-horizontal { @@ -615,6 +617,12 @@ export default { .btn-label-no-border { border: 0; + color: white; + background-color: #474747; + } + + .btn-label-no-border:hover { + background-color: #8e8383; } .btn-lg { diff --git a/frontend/pages/viewer/index.vue b/frontend/pages/viewer/index.vue index bb8ad2d..a9522ef 100644 --- a/frontend/pages/viewer/index.vue +++ b/frontend/pages/viewer/index.vue @@ -60,7 +60,7 @@ <div class="btn-save-section"> <button type="button" - class="btn-label-no-border btn-lg btn-dark btn-text" + class="btn-label-no-border btn-lg btn-light btn-text" @click="saveImage" > Save Image @@ -138,7 +138,7 @@ export default { this.cssCursor = 'cell' break case 'resize-box': - this.cssCursor = 'default' + this.cssCursor = 'pointer' break case 'delete-box': this.cssCursor = 'default' @@ -382,7 +382,7 @@ export default { .viewer-background { height: 100vh; - background-color: #E4E4E4; + background-color: #262626; } .center-horizontal { @@ -412,6 +412,12 @@ export default { .btn-label-no-border { border: 0; + color: white; + background-color: #474747; + } + + .btn-label-no-border:hover { + background-color: #8e8383;; } .btn-lg { -- GitLab