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