Merge branch '93-media-control-buttons-onclick' into 'master'

Resolve "media-control buttons onclick"

Closes #93

See merge request troebs/pycs!85

webui/src/components/media/media-control.vue

@@ -34,11 +34,11 @@
       >
     </button-input>
 
-    <button-input type="transparent" v-if="project.model.supports.includes('labeled-images')">
+    <button-input type="transparent" v-if="project.model.supports.includes('labeled-images')"
+                  @touchstart.stop @mousedown.stop
+                  @click.stop="showLabelSelection = true">
       <img alt="label" src="@/assets/icons/tag.svg"
-           :class="{tagged: currentLabel}"
-           @touchstart.stop @mousedown.stop
-           @click.stop="showLabelSelection = true">
+           :class="{tagged: currentLabel}">
     </button-input>
 
     <select v-if="showLabelSelection"
@@ -55,10 +55,10 @@
       </option>
     </select>
 
-    <button-input type="transparent" v-if="project.model.supports.includes('bounding-boxes') || project.model.supports.includes('labeled-bounding-boxes')">
-      <img alt="label" src="@/assets/icons/people.svg"
-           @touchstart.stop @mousedown.stop
-           @click.stop="showFilterSelection = true">
+    <button-input type="transparent" v-if="project.model.supports.includes('bounding-boxes') || project.model.supports.includes('labeled-bounding-boxes')"
+                  @touchstart.stop @mousedown.stop
+                  @click.stop="showFilterSelection = true">
+      <img alt="label" src="@/assets/icons/people.svg">
     </button-input>
 
     <select v-if="showFilterSelection"
@@ -71,16 +71,16 @@
     </select>
 
     <button-input type="transparent"
-                  v-if="!extremeClicking && (project.model.supports.includes('bounding-boxes') || project.model.supports.includes('labeled-bounding-boxes'))">
-      <img alt="label" src="@/assets/icons/flame.svg"
-           @touchstart.stop @mousedown.stop
-           @click.stop="$emit('extremeClicking', true)">
+                  v-if="!extremeClicking && (project.model.supports.includes('bounding-boxes') || project.model.supports.includes('labeled-bounding-boxes'))"
+                  @touchstart.stop @mousedown.stop
+                  @click.stop="$emit('extremeClicking', true)">
+      <img alt="label" src="@/assets/icons/flame.svg">
     </button-input>
 
-    <button-input type="transparent" v-if="extremeClicking">
-      <img alt="label" src="@/assets/icons/check.svg"
-           @touchstart.stop @mousedown.stop
-           @click.stop="$emit('extremeClicking', false)">
+    <button-input type="transparent" v-if="extremeClicking"
+                  @touchstart.stop @mousedown.stop
+                  @click.stop="$emit('extremeClicking', false)">
+      <img alt="label" src="@/assets/icons/check.svg">
     </button-input>
   </div>