feat(segmentGroups): adjust annotations GUI spacing

Kitware · Oct 24, 2024 · 4438c3f · 4438c3f
1 parent d84aa11
commit 4438c3f
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 6 deletions.
diff --git a/src/components/SegmentGroupControls.vue b/src/components/SegmentGroupControls.vue
@@ -163,7 +163,7 @@ function openSaveDialog(id: string) {
 </script>
 
 <template>
-  <div class="my-2" v-if="currentImageID">
+  <div class="mt-2" v-if="currentImageID">
     <div
       class="text-grey text-subtitle-2 d-flex align-center justify-space-evenly mb-2"
     >
@@ -203,11 +203,12 @@ function openSaveDialog(id: string) {
         </v-list>
       </v-menu>
     </div>
-    <v-divider />
+    <v-divider class="my-4" />
 
     <segment-group-opacity
       v-if="currentSegmentGroupID"
       :group-id="currentSegmentGroupID"
+      class="my-1"
     />
     <v-radio-group
       v-model="currentSegmentGroupID"
@@ -260,7 +261,7 @@ function openSaveDialog(id: string) {
         </template>
       </v-radio>
     </v-radio-group>
-    <v-divider />
+    <v-divider class="my-4" />
   </div>
   <div v-else class="text-center text-caption">No selected image</div>
   <segment-list

diff --git a/src/components/SegmentGroupOpacity.vue b/src/components/SegmentGroupOpacity.vue
@@ -25,7 +25,7 @@ const setOpacity = (opacity: number) => {
 
 <template>
   <v-slider
-    class="ma-4"
+    class="mx-4"
     label="Segment Group Opacity"
     min="0"
     max="1"

diff --git a/src/components/SegmentList.vue b/src/components/SegmentList.vue
@@ -159,7 +159,7 @@ function deleteEditingSegment() {
 </script>
 
 <template>
-  <v-btn @click.stop="toggleGlobalVisible">
+  <v-btn @click.stop="toggleGlobalVisible" class="my-1">
     Toggle Segments
     <slot name="append">
       <v-icon v-if="allVisible" class="pl-2">mdi-eye</v-icon>
@@ -171,7 +171,7 @@ function deleteEditingSegment() {
   </v-btn>
 
   <v-slider
-    class="ma-4"
+    class="mx-4 my-1"
     label="Segment Opacity"
     min="0"
     max="1"
@@ -190,6 +190,7 @@ function deleteEditingSegment() {
     item-title="name"
     create-label-text="New segment"
     @create="addNewSegment"
+    class="my-4"
   >
     <template #item-prepend="{ item }">
       <!-- dot container keeps overflowing name from squishing dot width  -->