feat(context-menu): compact items in context-menu

app/components/Basic/Slider.vue

@@ -3,5 +3,5 @@ const model = defineModel();
 </script>
 
 <template>
-  <v-slider v-model="model" hide-details min="0" max="20" step="2" />
+  <v-slider v-model="model" hide-details min="0" max="20" step="2" density="compact" />
 </template>

app/components/Basic/Switch.vue

@@ -3,5 +3,13 @@ const model = defineModel();
 </script>
 
 <template>
-  <v-switch v-model="model" inset hide-details />
+  <v-switch v-model="model" inset hide-details density="compact" class="compact-switch" />
 </template>
+
+<style scoped>
+.compact-switch {
+  transform: scale(0.75);
+  transform-origin: left center;
+  width: 40px;
+}
+</style>

app/components/Viewer/ContextMenu/ContextMenuItem.vue

@@ -5,7 +5,7 @@ import { useMenuStore } from "@ogw_front/stores/menu";
 import { useTheme } from "vuetify";
 import { useTreeviewStore } from "@ogw_front/stores/treeview";
 
-const CARD_WIDTH = 320;
+const CARD_WIDTH = 300;
 const CARD_HEIGHT = 500;
 const MARGIN = 60;
 const RADIUS = 80;
@@ -170,8 +170,10 @@ function toggleOptions() {
         class="elevation-24"
         style="overflow: hidden; display: flex; flex-direction: column"
       >
-        <v-card-title>{{ tooltip }}</v-card-title>
-        <v-card-text class="pa-5" style="overflow-y: auto; flex: 1; min-height: 0">
+        <v-card-title class="text-subtitle-1 pt-3 pb-0 px-3 font-weight-bold">{{
+          tooltip
+        }}</v-card-title>
+        <v-card-text class="px-3 pb-3 pt-1" style="overflow-y: auto; flex: 1; min-height: 0">
           <slot name="options" />
         </v-card-text>
       </GlassCard>
@@ -252,4 +254,40 @@ function toggleOptions() {
 .options-left {
   right: 60px;
 }
+
+:deep(.v-field) {
+  min-height: 30px !important;
+  height: 30px !important;
+  border-radius: 6px !important;
+}
+
+:deep(.v-field__input) {
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+  min-height: 30px !important;
+  height: 30px !important;
+  font-size: 0.95rem !important;
+  align-items: center;
+}
+
+:deep(.v-field__append-inner) {
+  align-items: center;
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+  height: 30px !important;
+}
+
+:deep(.v-field__append-inner .v-icon) {
+  font-size: 16px !important;
+}
+
+:deep(.v-field-label) {
+  font-size: 0.75rem !important;
+  top: 6px !important;
+}
+
+:deep(.v-field-label--floating) {
+  top: -8px !important;
+  font-size: 0.7rem !important;
+}
 </style>

app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue

@@ -119,25 +119,19 @@ const edge_attribute_color_map = computed({
     <template #options>
       <ViewerOptionsVisibilitySwitch data-testid="meshEdgesVisibilitySwitch" v-model="visibility" />
       <template v-if="visibility">
-        <v-row class="pa-0" align="center">
-          <v-divider />
-          <ViewerOptionsWidthSlider v-model="width" />
-        </v-row>
-        <v-row>
-          <v-col>
-            <ViewerOptionsColoringTypeSelector
-              :id="id"
-              v-model:coloring_style_key="coloring_style_key"
-              v-model:color="color"
-              v-model:vertex_attribute_name="vertex_attribute_name"
-              v-model:vertex_attribute_range="vertex_attribute_range"
-              v-model:vertex_attribute_color_map="vertex_attribute_color_map"
-              v-model:edge_attribute_name="edge_attribute_name"
-              v-model:edge_attribute_range="edge_attribute_range"
-              v-model:edge_attribute_color_map="edge_attribute_color_map"
-            />
-          </v-col>
-        </v-row>
+        <v-divider class="my-2" />
+        <ViewerOptionsWidthSlider v-model="width" />
+        <ViewerOptionsColoringTypeSelector
+          :id="id"
+          v-model:coloring_style_key="coloring_style_key"
+          v-model:color="color"
+          v-model:vertex_attribute_name="vertex_attribute_name"
+          v-model:vertex_attribute_range="vertex_attribute_range"
+          v-model:vertex_attribute_color_map="vertex_attribute_color_map"
+          v-model:edge_attribute_name="edge_attribute_name"
+          v-model:edge_attribute_range="edge_attribute_range"
+          v-model:edge_attribute_color_map="edge_attribute_color_map"
+        />
       </template>
     </template>
   </ViewerContextMenuItem>

app/components/Viewer/Generic/Mesh/EdgesOptions.vue

@@ -68,19 +68,13 @@ const color = computed({
     <template #options>
       <ViewerOptionsVisibilitySwitch data-testid="meshEdgesVisibilitySwitch" v-model="visibility" />
       <template v-if="visibility">
-        <v-row class="pa-0" align="center">
-          <v-divider />
-          <ViewerOptionsWidthSlider data-testid="meshEdgesWidthSlider" v-model="size" />
-        </v-row>
-        <v-row>
-          <v-col>
-            <ViewerOptionsColoringTypeSelector
-              :id="id"
-              v-model:coloring_style_key="coloring_style_key"
-              v-model:color="color"
-            />
-          </v-col>
-        </v-row>
+        <v-divider class="my-2" />
+        <ViewerOptionsWidthSlider data-testid="meshEdgesWidthSlider" v-model="size" />
+        <ViewerOptionsColoringTypeSelector
+          :id="id"
+          v-model:coloring_style_key="coloring_style_key"
+          v-model:color="color"
+        />
       </template>
     </template>
   </ViewerContextMenuItem>

app/components/Viewer/Generic/Mesh/PointsOptions.vue

@@ -98,23 +98,17 @@ const vertex_attribute_color_map = computed({
         v-model="visibility"
       />
       <template v-if="visibility">
-        <v-row class="pa-0" align="center">
-          <v-divider />
-          <ViewerOptionsSizeSlider data-testid="meshPointsSizeSlider" v-model="size" />
-        </v-row>
-        <v-row>
-          <v-col>
-            <ViewerOptionsColoringTypeSelector
-              :id="id"
-              v-model:coloring_style_key="coloring_style_key"
-              v-model:color="color"
-              v-model:vertex_attribute_name="vertex_attribute_name"
-              v-model:vertex_attribute_range="vertex_attribute_range"
-              v-model:vertex_attribute_color_map="vertex_attribute_color_map"
-              :capabilities="{ vertex: { available: false } }"
-            />
-          </v-col>
-        </v-row>
+        <v-divider class="my-2" />
+        <ViewerOptionsSizeSlider data-testid="meshPointsSizeSlider" v-model="size" />
+        <ViewerOptionsColoringTypeSelector
+          :id="id"
+          v-model:coloring_style_key="coloring_style_key"
+          v-model:color="color"
+          v-model:vertex_attribute_name="vertex_attribute_name"
+          v-model:vertex_attribute_range="vertex_attribute_range"
+          v-model:vertex_attribute_color_map="vertex_attribute_color_map"
+          :capabilities="{ vertex: { available: false } }"
+        />
       </template>
     </template>
   </ViewerContextMenuItem>

app/components/Viewer/Generic/Model/BlocksOptions.vue

@@ -206,51 +206,41 @@ const polyhedronSchema = back_schemas.opengeodeweb_back.model_component_polyhedr
 </script>
 
 <template>
-  <div>
-    <OptionsSection title="Blocks Options" class="mt-6">
-      <VisibilitySwitch v-model="blocksVisibility" />
-      <v-row class="mt-2 pa-0">
-        <v-col class="pa-0">
-          <ViewerOptionsColoringTypeSelector
-            :id="modelId"
-            :componentId="targetBlockIds[0]"
-            v-model:coloring_style_key="blocksColorMode"
-            v-model:color="blocksColor"
-            v-model:vertex_attribute_name="blocksVertexAttributeName"
-            v-model:vertex_attribute_range="blocksVertexAttributeRange"
-            v-model:vertex_attribute_color_map="blocksVertexAttributeColorMap"
-            v-model:polyhedron_attribute_name="blocksPolyhedronAttributeName"
-            v-model:polyhedron_attribute_range="blocksPolyhedronAttributeRange"
-            v-model:polyhedron_attribute_color_map="blocksPolyhedronAttributeColorMap"
-            :capabilities="capabilities"
-            :schemas="{ vertex: vertexSchema, polyhedron: polyhedronSchema }"
-            :allowRandom="true"
-          />
-        </v-col>
-      </v-row>
-    </OptionsSection>
-
-    <OptionsSection v-if="blockId" title="Component Options" class="mt-6">
-      <VisibilitySwitch v-model="blockVisibility" />
-      <v-row class="mt-2 pa-0">
-        <v-col class="pa-0">
-          <ViewerOptionsColoringTypeSelector
-            :id="modelId"
-            :componentId="blockId"
-            v-model:coloring_style_key="blockColorMode"
-            v-model:color="blockColor"
-            v-model:vertex_attribute_name="vertexAttributeName"
-            v-model:vertex_attribute_range="vertexAttributeRange"
-            v-model:vertex_attribute_color_map="vertexAttributeColorMap"
-            v-model:polyhedron_attribute_name="polyhedronAttributeName"
-            v-model:polyhedron_attribute_range="polyhedronAttributeRange"
-            v-model:polyhedron_attribute_color_map="polyhedronAttributeColorMap"
-            :capabilities="capabilities"
-            :schemas="{ vertex: vertexSchema, polyhedron: polyhedronSchema }"
-            :allowRandom="true"
-          />
-        </v-col>
-      </v-row>
-    </OptionsSection>
-  </div>
+  <OptionsSection title="Blocks Options" class="mt-4">
+    <VisibilitySwitch v-model="blocksVisibility" />
+    <ViewerOptionsColoringTypeSelector
+      :id="modelId"
+      :componentId="targetBlockIds[0]"
+      v-model:coloring_style_key="blocksColorMode"
+      v-model:color="blocksColor"
+      v-model:vertex_attribute_name="blocksVertexAttributeName"
+      v-model:vertex_attribute_range="blocksVertexAttributeRange"
+      v-model:vertex_attribute_color_map="blocksVertexAttributeColorMap"
+      v-model:polyhedron_attribute_name="blocksPolyhedronAttributeName"
+      v-model:polyhedron_attribute_range="blocksPolyhedronAttributeRange"
+      v-model:polyhedron_attribute_color_map="blocksPolyhedronAttributeColorMap"
+      :capabilities="capabilities"
+      :schemas="{ vertex: vertexSchema, polyhedron: polyhedronSchema }"
+      :allowRandom="true"
+    />
+  </OptionsSection>
+
+  <OptionsSection v-if="blockId" title="Component Options" class="mt-4">
+    <VisibilitySwitch v-model="blockVisibility" />
+    <ViewerOptionsColoringTypeSelector
+      :id="modelId"
+      :componentId="blockId"
+      v-model:coloring_style_key="blockColorMode"
+      v-model:color="blockColor"
+      v-model:vertex_attribute_name="vertexAttributeName"
+      v-model:vertex_attribute_range="vertexAttributeRange"
+      v-model:vertex_attribute_color_map="vertexAttributeColorMap"
+      v-model:polyhedron_attribute_name="polyhedronAttributeName"
+      v-model:polyhedron_attribute_range="polyhedronAttributeRange"
+      v-model:polyhedron_attribute_color_map="polyhedronAttributeColorMap"
+      :capabilities="capabilities"
+      :schemas="{ vertex: vertexSchema, polyhedron: polyhedronSchema }"
+      :allowRandom="true"
+    />
+  </OptionsSection>
 </template>

app/components/Viewer/Generic/Model/CornersOptions.vue

@@ -143,45 +143,35 @@ const vertexSchema = back_schemas.opengeodeweb_back.model_component_vertex_attri
 </script>
 
 <template>
-  <div>
-    <OptionsSection title="Corners Options" class="mt-6">
-      <VisibilitySwitch v-model="cornersVisibility" />
-      <v-row class="mt-2 pa-0">
-        <v-col class="pa-0">
-          <ViewerOptionsColoringTypeSelector
-            :id="modelId"
-            :componentId="targetCornerIds[0]"
-            v-model:coloring_style_key="cornersColorMode"
-            v-model:color="cornersColor"
-            v-model:vertex_attribute_name="cornersVertexAttributeName"
-            v-model:vertex_attribute_range="cornersVertexAttributeRange"
-            v-model:vertex_attribute_color_map="cornersVertexAttributeColorMap"
-            :capabilities="capabilities"
-            :schemas="{ vertex: vertexSchema }"
-            :allowRandom="true"
-          />
-        </v-col>
-      </v-row>
-    </OptionsSection>
-
-    <OptionsSection v-if="cornerId" title="Component Options" class="mt-6">
-      <VisibilitySwitch v-model="cornerVisibility" />
-      <v-row class="mt-2 pa-0">
-        <v-col class="pa-0">
-          <ViewerOptionsColoringTypeSelector
-            :id="modelId"
-            :componentId="cornerId"
-            v-model:coloring_style_key="cornerColorMode"
-            v-model:color="cornerColor"
-            v-model:vertex_attribute_name="vertexAttributeName"
-            v-model:vertex_attribute_range="vertexAttributeRange"
-            v-model:vertex_attribute_color_map="vertexAttributeColorMap"
-            :capabilities="capabilities"
-            :schemas="{ vertex: vertexSchema }"
-            :allowRandom="true"
-          />
-        </v-col>
-      </v-row>
-    </OptionsSection>
-  </div>
+  <OptionsSection title="Corners Options" class="mt-4">
+    <VisibilitySwitch v-model="cornersVisibility" />
+    <ViewerOptionsColoringTypeSelector
+      :id="modelId"
+      :componentId="targetCornerIds[0]"
+      v-model:coloring_style_key="cornersColorMode"
+      v-model:color="cornersColor"
+      v-model:vertex_attribute_name="cornersVertexAttributeName"
+      v-model:vertex_attribute_range="cornersVertexAttributeRange"
+      v-model:vertex_attribute_color_map="cornersVertexAttributeColorMap"
+      :capabilities="capabilities"
+      :schemas="{ vertex: vertexSchema }"
+      :allowRandom="true"
+    />
+  </OptionsSection>
+
+  <OptionsSection v-if="cornerId" title="Component Options" class="mt-4">
+    <VisibilitySwitch v-model="cornerVisibility" />
+    <ViewerOptionsColoringTypeSelector
+      :id="modelId"
+      :componentId="cornerId"
+      v-model:coloring_style_key="cornerColorMode"
+      v-model:color="cornerColor"
+      v-model:vertex_attribute_name="vertexAttributeName"
+      v-model:vertex_attribute_range="vertexAttributeRange"
+      v-model:vertex_attribute_color_map="vertexAttributeColorMap"
+      :capabilities="capabilities"
+      :schemas="{ vertex: vertexSchema }"
+      :allowRandom="true"
+    />
+  </OptionsSection>
 </template>