WIP LabelBOT popover

Author: gkourie

resources/assets/js/annotations/components/labelbotPopover.vue

@@ -0,0 +1,46 @@
+<template>
+  <ul class="labelbot-labels">
+    <li class="labelbot-labels-label" v-for="(label, index) in labelBOTLabels" :key="index">
+      <div v-if="index === 0" class="labelbot-labels-label__nameProgress">
+        <!-- Progress bar -->
+        <div class="labelbot-labels-label__progress-bar" :style="{ width: progressWidth + '%' }"></div>
+        <!-- Label name -->
+        <div class="labelbot-labels-label__nameProgressColor">
+          <span class="labelbot-labels-label__color" :style="{ backgroundColor: label.color }"></span>
+          <span>{{ label.name }}</span>
+        </div> 
+      </div>
+      <div v-else class="labelbot-labels-label__name">
+        <span class="labelbot-labels-label__color" :style="{ backgroundColor: label.color }"></span>
+        <span>{{ label.name }}</span>
+      </div>
+    </li>
+    <li class="labelbot-labels-label">
+      <input class="form-control" placeholder="type...">
+    </li>
+  </ul>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      annotationPoints: { x: 222, y: 200 },
+      labelBOTLabels: [
+        { name: "Label 1", color: "red" },
+        { name: "Label 2", color: "blue" },
+        { name: "Label 3", color: "green" }
+      ],
+      progressWidth: 0
+    };
+  },
+  methods: {
+    startAnimation() {
+      this.progressWidth = 100;
+    }
+  },
+  mounted() {
+    this.startAnimation();
+  }
+};
+</script>

resources/assets/sass/annotations/components/_labelbotPopover.scss

@@ -0,0 +1,64 @@
+.labelbot-labels {
+    list-style-type: none;
+    max-width: min-content;
+    display: block;
+    padding: $padding-large-vertical;
+    border: 1px solid $input-border;
+    border-radius: $input-border-radius;
+    margin: 0;
+}
+
+.labelbot-labels-label {
+    position: relative;
+
+    .labelbot-labels-label__color {
+        position: absolute;
+        top: 14px;
+        left: $padding-small-vertical;
+        width: 1em;
+        height: 1em;
+        border: 2px solid white;
+        border-radius: 50%;
+    }
+
+    .labelbot-labels-label__name,
+    .labelbot-labels-label__nameProgressColor {
+        position: relative;
+        padding: $padding-large-vertical 27px;
+        margin-bottom: 4px;
+        border: 1px solid $input-border;
+        border-radius: $input-border-radius;
+        word-wrap: break-word;
+        transition: background-color 0.3s ease;
+
+        &:hover {
+            color: white;
+            cursor: pointer;
+            background-color: $gray-lighter;
+        }
+    }
+
+    .labelbot-labels-label__nameProgress {
+        position: relative;
+
+        .labelbot-labels-label__nameProgressColor {
+            border-color: #219b19;
+
+            &:hover {
+                background-color: #219b19;
+            }
+        }
+
+        .labelbot-labels-label__progress-bar {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 0;
+            height: 100%;
+            background-color: #186612;
+            transition: width 10s ease-in-out;
+            border: 1px solid #219b19;
+            border-radius: $input-border-radius;
+        }
+    }
+}

resources/assets/sass/annotations/main.scss

@@ -46,3 +46,4 @@
 @import "components/minimap";
 @import "components/control-button";
 @import "components/annotation-tooltip";
+@import "components/labelbotPopover";