From 689fb13c817dc0da9f43018f2ea53a5bbd3eb57e Mon Sep 17 00:00:00 2001
From: Elsio Sanchez <45974454+elsiosanchez@users.noreply.github.com>
Date: Tue, 21 Jun 2022 12:31:36 -0400
Subject: [PATCH] Resisze Panel (#191)

* Resisze Panel

* support mobile
---
 src/lang/ADempiere/en/window.js               |  2 +
 src/lang/ADempiere/es/window.js               |  2 +
 src/layout/components/AppMain.vue             |  2 +-
 src/layout/index.vue                          |  1 +
 src/styles/ADempiere/view.scss                |  1 -
 src/styles/index.scss                         |  1 -
 src/views/ADempiere/Window/MultiTabWindow.vue | 93 ++++++++++++-------
 src/views/ADempiere/Window/index.vue          |  2 +-
 src/views/components-demo/mixin.vue           |  4 -
 9 files changed, 66 insertions(+), 42 deletions(-)

diff --git a/src/lang/ADempiere/en/window.js b/src/lang/ADempiere/en/window.js
index c68acffe5ac..bd4862d6243 100644
--- a/src/lang/ADempiere/en/window.js
+++ b/src/lang/ADempiere/en/window.js
@@ -40,6 +40,8 @@ const window = {
   callout: {
     error: 'Error In Callout'
   },
+  toggleSingle: 'Toggle Single',
+  multiRecord: 'Multi Record',
   gridToggle: 'Toggle single/multi record',
   toggleTabContentVisibility: 'Toggle tab content visibility'
 }
diff --git a/src/lang/ADempiere/es/window.js b/src/lang/ADempiere/es/window.js
index 4002b8e462c..003eff01d33 100644
--- a/src/lang/ADempiere/es/window.js
+++ b/src/lang/ADempiere/es/window.js
@@ -39,6 +39,8 @@ const window = {
   callout: {
     error: 'Error En Callout'
   },
+  toggleSingle: 'Cambiar Mono',
+  multiRecord: 'Multi Registro',
   gridToggle: 'Cambiar mono/multi registro',
   toggleTabContentVisibility: 'Cambiar visibilidad del contenido de la pestaña'
 }
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index 4b81df8084b..8c9d9553ebd 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -1,5 +1,5 @@
 <template>
-  <section id="appMain" class="app-main">
+  <section id="appMain" style="height: 100%;">
     <transition name="fade-transform" mode="out-in">
       <keep-alive :include="cachedViews">
         <router-view :key="key" />
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 6eb3d69b054..3826098022c 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -67,6 +67,7 @@ export default {
     @include clearfix;
     position: relative;
     height: 100%;
+    overflow: hidden;
     width: 100%;
 
     &.mobile.openSidebar {
diff --git a/src/styles/ADempiere/view.scss b/src/styles/ADempiere/view.scss
index 8ca5ce1be70..f1ebc1319d3 100644
--- a/src/styles/ADempiere/view.scss
+++ b/src/styles/ADempiere/view.scss
@@ -18,7 +18,6 @@
 .view-base {
   // TODO: Add display stop for views without fields (like cache reset process)
   height: 100%;
-  min-height: calc(100vh - 84px);
 }
 
 .content-collapse {
diff --git a/src/styles/index.scss b/src/styles/index.scss
index f25943cca23..04f87c90883 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -98,7 +98,6 @@ div:focus {
 }
 
 aside {
-  background: #eef1f6;
   padding: 8px 24px;
   margin-bottom: 20px;
   border-radius: 2px;
diff --git a/src/views/ADempiere/Window/MultiTabWindow.vue b/src/views/ADempiere/Window/MultiTabWindow.vue
index 3b0cccc6e94..b02e5b6dfee 100644
--- a/src/views/ADempiere/Window/MultiTabWindow.vue
+++ b/src/views/ADempiere/Window/MultiTabWindow.vue
@@ -17,39 +17,49 @@
 -->
 
 <template>
-  <div>
-    <embedded
-      :visible="showRecordAccess"
-    >
-      <record-access />
-    </embedded>
-
-    <tab-manager
-      :parent-uuid="windowMetadata.uuid"
-      :container-manager="containerManager"
-      :tabs-list="windowMetadata.tabsListParent"
-      :all-tabs-list="allTabsList"
-      :references-manager="referencesManager"
-      :actions-manager="actionsManager"
-    />
-
-    <tab-manager-child
-      v-if="isWithChildsTab"
-      :parent-uuid="windowMetadata.uuid"
-      :container-manager="containerManager"
-      :tabs-list="windowMetadata.tabsListChild"
-      :all-tabs-list="allTabsList"
-      :references-manager="referencesManager"
-      :actions-manager="actionsManager"
-    />
-
-    <modal-dialog
-      v-if="!isEmptyValue(processUuid)"
-      :container-manager="containerManagerProcess"
-      :parent-uuid="currentTabUuid"
-      :container-uuid="processUuid"
-    />
-  </div>
+  <el-container style="height: 100%!important;">
+    <el-main id="mainWindow">
+      <embedded
+        :visible="showRecordAccess"
+      >
+        <record-access />
+      </embedded>
+      <tab-manager
+        :parent-uuid="windowMetadata.uuid"
+        :container-manager="containerManager"
+        :tabs-list="windowMetadata.tabsListParent"
+        :all-tabs-list="allTabsList"
+        :references-manager="referencesManager"
+        :actions-manager="actionsManager"
+      />
+      <modal-dialog
+        v-if="!isEmptyValue(processUuid)"
+        :container-manager="containerManagerProcess"
+        :parent-uuid="currentTabUuid"
+        :container-uuid="processUuid"
+      />
+      <tab-manager-child
+        v-if="isWithChildsTab && isMobile"
+        :parent-uuid="windowMetadata.uuid"
+        :container-manager="containerManager"
+        :tabs-list="windowMetadata.tabsListChild"
+        :all-tabs-list="allTabsList"
+        :references-manager="referencesManager"
+        :actions-manager="actionsManager"
+      />
+    </el-main>
+    <el-footer v-if="!isMobile">
+      <tab-manager-child
+        v-if="isWithChildsTab"
+        :parent-uuid="windowMetadata.uuid"
+        :container-manager="containerManager"
+        :tabs-list="windowMetadata.tabsListChild"
+        :all-tabs-list="allTabsList"
+        :references-manager="referencesManager"
+        :actions-manager="actionsManager"
+      />
+    </el-footer>
+  </el-container>
 </template>
 
 <script>
@@ -113,6 +123,10 @@ export default defineComponent({
       return store.getters.getShowPanelRecordAccess
     })
 
+    const isMobile = computed(() => {
+      return store.state.app.device === 'mobile'
+    })
+
     const currentTabUuid = computed(() => {
       return store.getters.getCurrentTab(props.windowMetadata.uuid).uuid
     })
@@ -245,9 +259,20 @@ export default defineComponent({
       actionsManager,
       showRecordAccess,
       isWithChildsTab,
-      containerManager
+      containerManager,
+      isMobile
     }
   }
 
 })
 </script>
+
+<style>
+.el-footer {
+  height: 50% !important;
+}
+.el-main {
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+</style>
diff --git a/src/views/ADempiere/Window/index.vue b/src/views/ADempiere/Window/index.vue
index 132dea964b7..1029566a38c 100644
--- a/src/views/ADempiere/Window/index.vue
+++ b/src/views/ADempiere/Window/index.vue
@@ -18,7 +18,7 @@
 
 <template>
   <div v-if="isLoaded" key="window-loaded" class="view-base">
-    <el-container style="min-height: calc(100vh - 84px)">
+    <el-container style="height: 90vh;">
       <el-aside style="width: 100%; margin-bottom: 0px; padding-right: 10px; padding-left: 10px;">
         <component
           :is="renderWindowComponent"
diff --git a/src/views/components-demo/mixin.vue b/src/views/components-demo/mixin.vue
index 6cf024cd898..c94be2fbbdb 100644
--- a/src/views/components-demo/mixin.vue
+++ b/src/views/components-demo/mixin.vue
@@ -161,9 +161,5 @@ export default {
 .mixin-components-container {
   background-color: #f0f2f5;
   padding: 30px;
-  min-height: calc(100vh - 84px);
-}
-.component-item{
-  min-height: 100px;
 }
 </style>