@geode/opengeodeweb-front 10.13.2-rc.1 → 10.13.2-rc.3

package/app/components/Recaptcha.vue

@@ -5,7 +5,7 @@ const { button_label, button_color, color } = defineProps({
   button_label: {
     type: String,
     required: false,
-    default: "Launch the app",
+    default: "Load the app",
   },
   button_color: {
     type: String,
@@ -60,7 +60,7 @@ function submit() {
           </VRow>
           <VRow>
             <VCol>
-              <VCheckbox label="Launch the app" v-model="launch" />
+              <VCheckbox label="Load the app" v-model="load" />
             </VCol>
           </VRow>
         </VContainer>
@@ -68,8 +68,27 @@ function submit() {
     </VCol>
   </VRow>
   <VRow align="center" justify="center">
-    <VCol cols="4" class="d-flex justify-center align-center">
-      <VBtn :text="button_label" :color="color || button_color" @click="submit" />
+    <VCol cols="auto" class="d-flex justify-center align-center">
+      <VBtn class="load-btn" :text="button_label" :color="color || button_color" @click="submit" />
     </VCol>
   </VRow>
 </template>
+
+<style scoped>
+.load-btn {
+  padding: 0 40px !important;
+  height: 50px !important;
+  border-radius: 8px;
+  text-transform: none !important;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease !important;
+}
+
+.load-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
+}
+</style>

package/app/components/Viewer/ObjectTree/Layout.vue

@@ -11,10 +11,17 @@ const GAP_WIDTH = 10;
 const PERCENT_100 = 100;
 
 const TOTAL_PERCENT = 100;
+const MAX_PANEL_WIDTH_RATIO = 0.8;
+
+const { containerWidth } = defineProps({
+  containerWidth: { type: Number, required: true },
+});
 
 const treeviewStore = useTreeviewStore();
 const emit = defineEmits(["show-menu"]);
 
+const maxWidth = computed(() => containerWidth * MAX_PANEL_WIDTH_RATIO);
+
 const mainView = computed(() => treeviewStore.opened_views[0]);
 const additionalViews = computed(() => treeviewStore.opened_views.slice(1));
 
@@ -41,6 +48,28 @@ watch(
   { immediate: true },
 );
 
+watch(maxWidth, (newMax) => {
+  const hasAdditional = additionalViews.value.length > 0;
+  const gap = hasAdditional ? GAP_WIDTH : 0;
+  const total =
+    treeviewStore.panelWidth + (hasAdditional ? treeviewStore.additionalPanelWidth : 0) + gap;
+
+  if (total > newMax) {
+    if (hasAdditional) {
+      const newAdditionalWidth = newMax - treeviewStore.panelWidth - gap;
+      if (newAdditionalWidth < WIDTH_MIN) {
+        treeviewStore.setAdditionalPanelWidth(WIDTH_MIN);
+        const newMainWidth = newMax - WIDTH_MIN - gap;
+        treeviewStore.setPanelWidth(Math.max(WIDTH_MIN, newMainWidth));
+      } else {
+        treeviewStore.setAdditionalPanelWidth(newAdditionalWidth);
+      }
+    } else {
+      treeviewStore.setPanelWidth(Math.max(WIDTH_MIN, newMax));
+    }
+  }
+});
+
 function onDragStart(index) {
   draggedIndex.value = index;
 }
@@ -61,8 +90,15 @@ function onResizeStart(event) {
   const startX = event.clientX;
   function resize(move_event) {
     const deltaX = move_event.clientX - startX;
-    const newWidth = Math.max(WIDTH_MIN, startWidth + deltaX);
-    treeviewStore.setPanelWidth(newWidth);
+    let newWidth = Math.max(WIDTH_MIN, startWidth + deltaX);
+    const hasAdditional = additionalViews.value.length > 0;
+    const gap = hasAdditional ? GAP_WIDTH : 0;
+    const currentTotalWidth =
+      newWidth + (hasAdditional ? treeviewStore.additionalPanelWidth : 0) + gap;
+    if (currentTotalWidth > maxWidth.value) {
+      newWidth = maxWidth.value - (hasAdditional ? treeviewStore.additionalPanelWidth : 0) - gap;
+    }
+    treeviewStore.setPanelWidth(Math.max(WIDTH_MIN, newWidth));
     document.body.style.userSelect = "none";
   }
   function stopResize() {
@@ -79,8 +115,12 @@ function onAdditionalResizeStart(event) {
   const startX = event.clientX;
   function resize(move_event) {
     const deltaX = move_event.clientX - startX;
-    const newWidth = Math.max(WIDTH_MIN, startWidth + deltaX);
-    treeviewStore.setAdditionalPanelWidth(newWidth);
+    let newWidth = Math.max(WIDTH_MIN, startWidth + deltaX);
+    const currentTotalWidth = treeviewStore.panelWidth + newWidth + GAP_WIDTH;
+    if (currentTotalWidth > maxWidth.value) {
+      newWidth = maxWidth.value - treeviewStore.panelWidth - GAP_WIDTH;
+    }
+    treeviewStore.setAdditionalPanelWidth(Math.max(WIDTH_MIN, newWidth));
     document.body.style.userSelect = "none";
   }
   function stopResize() {

package/app/components/Viewer/Ui.vue

@@ -44,7 +44,10 @@ defineExpose({ get_viewer_id });
 </script>
 
 <template>
-  <ViewerObjectTreeLayout @show-menu="(args) => emit('show-menu', args)" />
+  <ViewerObjectTreeLayout
+    :container-width="containerWidth"
+    @show-menu="(args) => emit('show-menu', args)"
+  />
   <ViewerContextMenu
     v-if="displayMenu"
     :id="menuStore.current_id"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geode/opengeodeweb-front",
-  "version": "10.13.2-rc.1",
+  "version": "10.13.2-rc.3",
   "description": "OpenSource Vue/Nuxt/Pinia/Vuetify framework for web applications",
   "homepage": "https://github.com/Geode-solutions/OpenGeodeWeb-Front",
   "bugs": {