correcting design errors in the Record Access dialog box (#797)

* correcting design errors in the Record Access dialog box

* minimal changes

Co-authored-by: elsiosanchez <elsiosanche@gmail.com>

src/components/ADempiere/Dialog/embedded.vue

@@ -17,7 +17,6 @@
 -->
 <template>
   <el-dialog
-    :title="attributeEmbedded.name"
     :visible="isVisibleDialog"
     show-close
     :before-close="closeDialog"
@@ -26,6 +25,14 @@
     close-on-press-escape
     close-on-click-modal
   >
+    <span slot="title">
+      {{ attributeEmbedded.name }}
+      <el-tooltip :content="lock ? $t('data.lockRecord') : $t('data.unlockRecord')" placement="top">
+        <el-button type="text" @click="lock = !lock">
+          <i :class="lock ? 'el-icon-unlock' : 'el-icon-lock'" style="font-size: 25px;color: black;" />
+        </el-button>
+      </el-tooltip>
+    </span>
     <slot />
   </el-dialog>
 </template>
@@ -60,6 +67,11 @@ export default {
       default: undefined
     }
   },
+  data() {
+    return {
+      lock: false
+    }
+  },
   computed: {
     isMobile() {
       return this.$store.state.app.device === 'mobile'
@@ -201,7 +213,12 @@ export default {
 <style>
   .el-dialog__body {
     padding: 10px 20px;
-    max-height: 65vh;
+    max-height: 75vh;
     overflow: auto;
   }
+  .el-dialog__header {
+    padding: 20px;
+    padding-bottom: 10px;
+    background: #dae6f38c;
+}
 </style>

src/components/ADempiere/Dialog/index.vue

@@ -105,7 +105,7 @@ export default {
       if (this.isMobile) {
         return 80
       }
-      return 80
+      return 95
     },
     isVisibleDialog() {
       return this.$store.state['process/index'].isVisibleDialog

src/components/ADempiere/RecordAccess/recordAccessDesktop.vue

@@ -76,29 +76,25 @@
               v-for="(element, index) in includedList"
               :key="element.roleUuid"
               class="board-item"
-              style="height: 50%;padding-left: 0px;padding-right: 0px;"
+              style="height: 50%;padding-left: 0px;padding-right: 0px;min-width: 550px;max-width: 100%;"
             >
               <el-table
                 v-if="!isEmptyValue(includedList)"
                 :data="[includedList[index]]"
                 border
                 :show-header="false"
+                style="min-width: 120%;padding-left: 0%;padding-right: 0%;"
               >
                 <el-table-column
                   prop="roleName"
-                  min-width="150"
                 />
-                <el-table-column
-                  fixed="right"
-                >
+                <el-table-column>
                   <template slot-scope="scope">
                     {{ $t('data.recordAccess.isReadonly') }} <el-switch v-model="scope.row.isReadOnly" />
                   </template>
                 </el-table-column>
-                <el-table-column
-                  fixed="right"
-                >
-                  <template slot-scope="scope">
+                <el-table-column>
+                  <template slot-scope="scope" min-width="150">
                     {{ $t('data.recordAccess.isDependentEntities') }} <el-switch v-model="scope.row.isDependentEntities" />
                   </template>
                 </el-table-column>
@@ -143,7 +139,6 @@ export default {
     overflow: hidden;
     background: #f0f0f0;
     border-radius: 3px;
-
     .board-column-header {
       height: 50px;
       line-height: 50px;
@@ -154,7 +149,6 @@ export default {
       color: #fff;
       border-radius: 3px 3px 0 0;
     }
-
     .board-column-content {
       height: auto;
       overflow: hidden;
@@ -164,7 +158,6 @@ export default {
       justify-content: flex-start;
       flex-direction: column;
       align-items: center;
-
       .board-item {
         cursor: pointer;
         width: 100%;