fix: Style form view. (#452)

src/views/ADempiere/Form/index.vue

@@ -5,6 +5,21 @@
     class="view-base"
     style="height: 84vh;"
   >
+    <el-header style="height: 39px;">
+      <context-menu
+        :menu-parent-uuid="$route.meta.parentUuid"
+        :container-uuid="formUuid"
+        :panel-type="panelType"
+      />
+    </el-header>
+    <el-main>
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <el-card
+            class="content-collapse"
+            :style="isEmptyValue(formMetadata.fieldList) ? 'height: 75vh !important;' : ''"
+          >
+            <h3 class="warn-content text-center">
               <el-popover
                 v-if="!isEmptyValue(formMetadata.help)"
                 ref="helpTitle"
@@ -15,8 +30,6 @@
               >
                 <div v-html="formMetadata.help" />
               </el-popover>
-    <div class="w-33">
-      <div class="center">
               <el-button
                 v-popover:helpTitle
                 type="text"
@@ -24,8 +37,7 @@
               >
                 {{ formTitle }}
               </el-button>
-      </div>
+            </h3>
-    </div>
             <form-panel
               :metadata="{
                 ...formMetadata,
@@ -33,6 +45,10 @@
                 title: formTitle
               }"
             />
+          </el-card>
+        </el-col>
+      </el-row>
+    </el-main>
   </el-container>
   <div
     v-else
@@ -46,18 +62,21 @@
 </template>
 
 <script>
+import ContextMenu from '@/components/ADempiere/ContextMenu'
 import FormPanel from '@/components/ADempiere/Form'
 
 export default {
   name: 'FormView',
   components: {
+    ContextMenu,
     FormPanel
   },
   data() {
     return {
       formUuid: this.$route.meta.uuid,
       formMetadata: {},
-      isLoaded: false
+      isLoaded: false,
+      panelType: 'form'
     }
   },
   computed: {
@@ -94,7 +113,15 @@ export default {
 }
 </script>
 
-<style scoped>
+<style>
+  .el-card__body {
+    padding-top: 0px !important;
+    padding-right: 20px;
+    padding-bottom: 20px;
+    padding-left: 20px;
+  }
+</style>
+<style scoped >
   .view-base {
     height: 100%;
     min-height: calc(100vh - 84px);
@@ -105,18 +132,11 @@ export default {
     height: 100%;
   }
 
-  .custom-title {
+  .title, .custom-title {
-    color: #000000;
+    color: #000;
     text-size-adjust: 20px;
     font-size: 100%;
     font-weight: 605 !important;
-  }
-
-  .title {
-    color: #000000;
-    text-size-adjust: 20px;
-    font-size: 100%;
-    font-weight: 605!important;
     /* left: 50%; */
   }