From a91d027920dc4c6a19aa25173cad29ae9eb55ad2 Mon Sep 17 00:00:00 2001
From: Elsio Sanchez <45974454+elsiosanchez@users.noreply.github.com>
Date: Wed, 7 Apr 2021 11:35:31 -0400
Subject: [PATCH] add context menu field mode mobile (#705)

* add context menu field mode mobile

* minimal change

* minimal changes

* minimal changes

* minimal changes

* style button

* change style

Co-authored-by: Elsio Sanchez <elsiosanche@gmail.com>
---
 .../ContextMenu/contextMenuDesktop.vue        | 416 ++++++++++++------
 .../ADempiere/ContextMenu/index.vue           |  10 +
 .../calculator/buttons.js                     |   0
 .../calculator/index.vue                      | 201 +++++----
 .../contextInfo/index.vue}                    |  61 +--
 .../preference/index.vue                      | 179 ++++----
 .../preference/preferenceFields.js            |   0
 .../translated/index.vue}                     | 109 +++--
 src/components/ADempiere/Field/index.vue      | 239 ++++++++--
 src/components/ADempiere/RightPanel/index.vue |  32 +-
 src/components/RightPanel/index.vue           |   2 +-
 src/lang/ADempiere/en.js                      |  17 +-
 src/lang/ADempiere/es.js                      |  17 +-
 src/layout/components/Settings/index.vue      | 100 ++---
 src/store/modules/ADempiere/contextMenu.js    |  14 +
 src/views/ADempiere/Window/index.vue          |  11 +
 .../ADempiere/Window/windowLogicComponent.js  |  27 ++
 src/views/profile/index.vue                   |  28 +-
 18 files changed, 939 insertions(+), 524 deletions(-)
 rename src/components/ADempiere/Field/{popover => contextMenuField}/calculator/buttons.js (100%)
 rename src/components/ADempiere/Field/{popover => contextMenuField}/calculator/index.vue (59%)
 rename src/components/ADempiere/Field/{popover/contextInfo.vue => contextMenuField/contextInfo/index.vue} (55%)
 rename src/components/ADempiere/Field/{popover => contextMenuField}/preference/index.vue (72%)
 rename src/components/ADempiere/Field/{popover => contextMenuField}/preference/preferenceFields.js (100%)
 rename src/components/ADempiere/Field/{popover/translated.vue => contextMenuField/translated/index.vue} (65%)

diff --git a/src/components/ADempiere/ContextMenu/contextMenuDesktop.vue b/src/components/ADempiere/ContextMenu/contextMenuDesktop.vue
index dfc655cc..5a985461 100644
--- a/src/components/ADempiere/ContextMenu/contextMenuDesktop.vue
+++ b/src/components/ADempiere/ContextMenu/contextMenuDesktop.vue
@@ -1,131 +1,125 @@
 <template>
-  <div class="container-submenu container-context-menu">
-    <el-menu
-      ref="contextMenu"
-      v-shortkey="shorcutKey"
-      :router="false"
-      class="el-menu-demo"
-      mode="horizontal"
-      menu-trigger="hover"
-      unique-opened
-      @shortkey.native="actionContextMenu"
+  <div v-if="!isListRecord" class="container-submenu-mobile container-context-menu">
+    <!-- actions or process on container -->
+    <el-dropdown
+      size="mini"
+      :hide-on-click="true"
+      split-button
+      trigger="click"
+      @command="clickRunAction"
+      @click="runAction(defaultActionToRun)"
     >
-      <!-- actions or process on container -->
-      <el-submenu v-if="!isEmptyValue(actions)" class="el-menu-item" index="actions" @click.native="runAction(actions[0])">
-        <template slot="title">
-          {{ $t('components.contextMenuActions') }}
-        </template>
-        <template v-for="(action, index) in actions">
-          <el-submenu v-if="action.childs" :key="index" :index="action.name" :disabled="action.disabled">
-            <template slot="title">
-              {{ action.name }}
-            </template>
-            <el-scrollbar wrap-class="scroll-child">
-              <el-menu-item
-                v-for="(child, key) in action.childs"
-                :key="key"
-                :index="child.uuid"
-                @click="runAction(child)"
-              >
-                {{ child.name }}
-              </el-menu-item>
-            </el-scrollbar>
-          </el-submenu>
-          <el-menu-item
-            v-else
-            v-show="!action.hidden"
+      {{ defaultActionName }}
+      <el-dropdown-menu slot="dropdown">
+        <el-scrollbar wrap-class="scroll-child">
+          <el-dropdown-item
+            command="refreshData"
+          >
+            <div class="contents">
+              <div style="margin-right: 5%;margin-top: 10%;">
+                <i class="el-icon-refresh" style="font-weight: bolder;" />
+              </div>
+              <div>
+                <span class="contents">
+                  <b class="label">
+                    {{ $t('components.contextMenuRefresh') }}
+                  </b>
+                </span>
+                <p
+                  class="description"
+                >
+                  {{ $t('data.noDescription') }}
+                </p>
+              </div>
+            </div>
+          </el-dropdown-item>
+          <el-dropdown-item
+            v-for="(action, index) in actions"
             :key="index"
-            :index="action.name"
-            :disabled="panelType === 'browser' ? isEmptyValue(getDataSelection) : action.disabled"
-            @click="runAction(action)"
+            :command="action"
+            :divided="true"
           >
-            {{ action.name }}
-          </el-menu-item>
-        </template>
-        <!-- other actions -->
-        <el-menu-item v-show="isReport" index="downloadReport">
-          <a :href="downloads" :download="file">
-            {{ $t('components.contextMenuDownload') }}
-          </a>
-        </el-menu-item>
-        <el-submenu
-          v-if="isManageDataRecords"
-          :disabled="isDisabledExportRecord"
-          index="exportRecord"
-          @click.native="exportRecord(defaultFromatExport)"
-        >
-          <template slot="title">
-            {{ $t('data.exportRecord') }}
-          </template>
-          <el-menu-item
-            v-for="(format, keyFormat) in supportedTypes"
-            :key="keyFormat"
-            :index="keyFormat"
-            @click.native="exportRecord(keyFormat)"
-          >
-            {{ format }}
-          </el-menu-item>
-        </el-submenu>
-        <el-menu-item
-          v-show="$route.name === 'Report Viewer'"
-          index="printFormat"
-          @click="redirect"
-        >
-          {{ $t('components.contextMenuPrintFormatSetup') }}
-        </el-menu-item>
-        <el-menu-item
-          v-if="isManageDataRecords"
-          index="refreshData"
-          @click="refreshData"
-        >
-          {{ $t('components.contextMenuRefresh') }}
-        </el-menu-item>
-        <el-menu-item index="shareLink" @click="setShareLink">
-          {{ $t('components.contextMenuShareLink') }}
-        </el-menu-item>
-      </el-submenu>
-      <el-menu-item v-else disabled index="actionsDisabled">
-        {{ $t('components.contextMenuActions') }}
-      </el-menu-item>
-
-      <!-- menu relations -->
-      <el-submenu v-if="!isEmptyChilds" class="el-menu-item" index="1">
-        <template slot="title">
-          {{ $t('components.contextMenuRelations') }}
-        </template>
-        <el-scrollbar wrap-class="scroll">
-          <items-relations v-for="(relation, index) in relationsList" :key="index" :item="relation" />
+            <div class="contents">
+              <div style="margin-right: 5%;margin-top: 10%;">
+                <i :class="iconAction(action)" style="font-weight: bolder;" />
+              </div>
+              <div>
+                <span class="contents">
+                  <b class="label">
+                    {{ action.name }}
+                  </b>
+                </span>
+                <p
+                  class="description"
+                >
+                  {{ $t('data.noDescription') }}
+                </p>
+              </div>
+            </div>
+          </el-dropdown-item>
         </el-scrollbar>
-      </el-submenu>
-      <el-menu-item v-else disabled index="relations">
-        {{ $t('components.contextMenuRelations') }}
-      </el-menu-item>
-      <!-- references of record -->
-      <el-submenu
-        :disabled="!(isReferecesContent && isLoadedReferences)"
-        class="el-menu-item"
-        index="references"
-      >
-        <template slot="title">
-          {{ $t('components.contextMenuReferences') }}
-        </template>
-        <template v-if="references && !isEmptyValue(references.referencesList)">
-          <el-scrollbar wrap-class="scroll-child">
-            <el-menu-item
-              v-for="(reference, index) in references.referencesList"
-              :key="index"
-              :index="reference.displayName"
-              @click="openReference(reference)"
-            >
-              {{ reference.displayName }}
-            </el-menu-item>
-          </el-scrollbar>
-        </template>
-        <el-menu-item v-else index="not-references" disabled>
-          {{ $t('components.withOutReferences') }}
-        </el-menu-item>
-      </el-submenu>
-    </el-menu>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <!-- menu relations -->
+    <el-dropdown size="mini" @command="clickRelation">
+      <el-button size="mini">
+        {{ $t('components.contextMenuRelations') }} <i class="el-icon-arrow-down el-icon--right" />
+      </el-button>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item
+          v-for="(relation, index) in relationsList"
+          :key="index"
+          :command="relation"
+          :divided="true"
+        >
+          <div class="contents">
+            <div style="margin-right: 5%;margin-top: 10%;">
+              <svg-icon :icon-class="relation.meta.icon" />
+            </div>
+            <div>
+              <span class="contents">
+                <b class="label">
+                  {{ relation.meta.title }}
+                </b>
+              </span>
+              <p
+                class="description"
+              >
+                {{ relation.meta.description }}
+              </p>
+            </div>
+          </div>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <el-dropdown size="mini" @command="clickReferences">
+      <el-button size="mini" :disabled="!(isReferecesContent && isLoadedReferences)">
+        {{ $t('components.contextMenuReferences') }} <i class="el-icon-arrow-down el-icon--right" />
+      </el-button>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item
+          v-for="(reference, index) in references.referencesList"
+          :key="index"
+          :command="reference"
+          :divided="true"
+        >
+          <div class="contents">
+            <div>
+              <span class="contents">
+                <b class="label">
+                  {{ reference.displayName }}
+                </b>
+              </span>
+              <p
+                class="description"
+              >
+                {{ $t('data.noDescription') }}
+              </p>
+            </div>
+          </div>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
   </div>
 </template>
 
@@ -133,9 +127,181 @@
 import contextMixin from './contextMenuMixin.js'
 
 export default {
-  name: 'ContextMenuDesktop',
+  name: 'ContextMenuMobile',
   mixins: [
     contextMixin
-  ]
+  ],
+  data() {
+    return {
+      openedsMenu: [
+        'actions'
+      ]
+    }
+  },
+  computed: {
+    isPanelTypeMobile() {
+      if (['process', 'report'].includes(this.$route.meta.type)) {
+        return true
+      }
+      return false
+    },
+    isUndoAction() {
+      if (this.isWindow) {
+        if (!this.isWithRecord) {
+          return true
+        }
+      }
+      return false
+    },
+    typeOfAction() {
+      if (this.isUndoAction) {
+        return 'warning'
+      }
+      return 'default'
+    },
+    isPlain() {
+      if (this.isUndoAction) {
+        return true
+      }
+      return false
+    },
+    defaultActionToRun() {
+      if (this.isUndoAction) {
+        return this.actions[2]
+      }
+      return this.actions[0]
+    },
+    defaultActionName() {
+      if (this.isWindow) {
+        if (this.isWithRecord) {
+          return this.$t('window.newRecord')
+        }
+        return this.$t('data.undo')
+      }
+      return this.$t('components.RunProcess')
+    },
+    iconDefault() {
+      if (this.isPanelTypeMobile) {
+        return 'component'
+      }
+      return 'skill'
+    }
+  },
+  methods: {
+    clickRelation(item) {
+      this.$router.push({
+        name: item.name,
+        query: {
+          tabParent: 0
+        }
+      }, () => {})
+    },
+    clickRunAction(action) {
+      if (action === 'refreshData') {
+        this.refreshData()
+      } else {
+        this.runAction(action)
+      }
+    },
+    clickReferences(reference) {
+      this.openReference(reference)
+    },
+    iconAction(action) {
+      let icon
+      if (action.type === 'dataAction') {
+        switch (action.action) {
+          case 'setDefaultValues':
+            icon = 'el-icon-news'
+            break
+          case 'deleteEntity':
+            icon = 'el-icon-delete'
+            break
+          case 'undoModifyData':
+            icon = 'el-icon-refresh-left'
+            break
+          case 'lockRecord':
+            icon = 'el-icon-lock'
+            break
+          case 'unlockRecord':
+            icon = 'el-icon-unlock'
+            break
+          case 'recordAccess':
+            icon = 'el-icon-c-scale-to-original'
+            break
+        }
+      } else if (action.type === 'process') {
+        icon = 'el-icon-setting'
+      } else {
+        icon = 'el-icon-setting'
+      }
+      return icon
+    },
+    styleLabelAction(value) {
+      if (value) {
+        return 'font-size: 14px;margin-top: 0% !important;margin-left: 0px;margin-bottom: 10%;display: contents;'
+      } else {
+        return 'font-size: 14px;margin-top: 1.5% !important;margin-left: 2%;margin-bottom: 5%;display: contents;'
+      }
+    }
+  }
 }
 </script>
+
+<style scoped>
+  .el-tree-node__children {
+    overflow: hidden;
+    background-color: transparent;
+    max-width: 99%;
+    overflow: auto;
+  }
+  .el-dropdown .el-button-group {
+    display: flex;
+  }
+  .el-dropdown-menu {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 10;
+    padding: 10px 0;
+    margin: 5px 0;
+    background-color: #FFFFFF;
+    border: 1px solid #e6ebf5;
+    border-radius: 4px;
+    -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    max-height: 250px;
+    max-width: 220px;
+    overflow: auto;
+  }
+  .el-dropdown-menu--mini .el-dropdown-menu__item {
+    line-height: 14px;
+    padding: 0px 15px;
+    font-size: 10px;
+  }
+  .el-dropdown-menu__item--divided {
+    position: relative;
+    /* margin-top: 6px; */
+    border-top: 1px solid #e6ebf5;
+  }
+  .svg-icon {
+    width: 1em;
+    height: 2em;
+    vertical-align: -0.15em;
+    fill: currentColor;
+    overflow: hidden;
+  }
+  .label {
+    font-size: 14px;
+    margin-top: 0% !important;
+    margin-left: 0px;
+    text-align: initial;
+  }
+  .description {
+    margin: 0px;
+    font-size: 12px;
+    text-align: initial;
+  }
+  .contents {
+    display: inline-flex;
+  }
+</style>
diff --git a/src/components/ADempiere/ContextMenu/index.vue b/src/components/ADempiere/ContextMenu/index.vue
index d6de5b1e..1bb1416c 100644
--- a/src/components/ADempiere/ContextMenu/index.vue
+++ b/src/components/ADempiere/ContextMenu/index.vue
@@ -77,6 +77,16 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+  .selector {
+    /* definir una altura pequeña para forzar el scroll */
+    height: 100px;
+    overflow-y: scroll;
+    width: 300px;
+
+    /* cambiar el estilo por defecto de la barra de scroll */
+    scrollbar-color: yellow #800080;
+    scrollbar-width: 10px;
+  }
   .el-submenu .el-menu-item {
     height: 50px;
     line-height: 50px;
diff --git a/src/components/ADempiere/Field/popover/calculator/buttons.js b/src/components/ADempiere/Field/contextMenuField/calculator/buttons.js
similarity index 100%
rename from src/components/ADempiere/Field/popover/calculator/buttons.js
rename to src/components/ADempiere/Field/contextMenuField/calculator/buttons.js
diff --git a/src/components/ADempiere/Field/popover/calculator/index.vue b/src/components/ADempiere/Field/contextMenuField/calculator/index.vue
similarity index 59%
rename from src/components/ADempiere/Field/popover/calculator/index.vue
rename to src/components/ADempiere/Field/contextMenuField/calculator/index.vue
index f03a52aa..e44ec23f 100644
--- a/src/components/ADempiere/Field/popover/calculator/index.vue
+++ b/src/components/ADempiere/Field/contextMenuField/calculator/index.vue
@@ -1,100 +1,97 @@
 <template>
-  <el-dropdown trigger="click">
-    <el-button type="text" :disabled="fieldAttributes.readonly" @click="focusCalc">
-      <i class="el-icon-s-operation el-icon--right" />
-    </el-button>
-
-    <el-dropdown-menu slot="dropdown" class="dropdown-calc">
-      <el-input
-        ref="calculatorInput"
-        v-model="calcValue"
-        class="calculator-input"
-        size="mini"
-        readonly
-        @keydown.native="calculateValue"
-        @keyup.enter.native="changeValue"
+  <el-card class="box-card">
+    <div slot="header" class="clearfix">
+      <span>
+        {{ $t('field.field') }}
+        <b> {{ fieldAttributes.name }} </b>
+      </span>
+    </div>
+    <el-form ref="form" label-position="top" label-width="120px" @submit.native.prevent="notSubmitForm">
+      <el-form-item label="Valor">
+        <el-input
+          ref="calculatorInput"
+          v-model="calcValue"
+          class="calculator-input"
+          size="mini"
+          readonly
+          @keydown.native="calculateValue"
+          @keyup.enter.native="changeValue"
+        />
+      </el-form-item>
+    </el-form>
+    <el-table
+      ref="calculator"
+      :data="tableData"
+      style="width: 100%"
+      border
+      size="mini"
+      :show-header="false"
+      :span-method="spanMethod"
+      class="calculator-table"
+      @cell-click="sendValue"
+    >
+      <el-table-column
+        align="center"
+        prop="row1"
+        height="15"
+        width="45"
       >
-        <!--
-        <template slot="append">
-          {{ valueToDisplay }}
+        <template slot-scope="{ row, column }">
+          <el-button type="text" :disabled="isDisabled(row, column)">
+            {{ row.row1.value }}
+          </el-button>
         </template>
-        -->
-      </el-input>
-
-      <el-table
-        ref="calculator"
-        :data="tableData"
-        style="width: 100%"
-        border
-        size="mini"
-        :show-header="false"
-        :span-method="spanMethod"
-        class="calculator-table"
-        @cell-click="sendValue"
+      </el-table-column>
+      <el-table-column
+        align="center"
+        prop="row2"
+        height="15"
+        width="45"
       >
-        <el-table-column
-          align="center"
-          prop="row1"
-          height="15"
-          width="35"
-        >
-          <template slot-scope="{ row, column }">
-            <el-button type="text" :disabled="isDisabled(row, column)">
-              {{ row.row1.value }}
-            </el-button>
-          </template>
-        </el-table-column>
-        <el-table-column
-          align="center"
-          prop="row2"
-          height="15"
-          width="35"
-        >
-          <template slot-scope="{ row, column }">
-            <el-button type="text" :disabled="isDisabled(row, column)">
-              {{ row.row2.value }}
-            </el-button>
-          </template>
-        </el-table-column>
-        <el-table-column
-          align="center"
-          prop="row3"
-          height="15"
-          width="35"
-        >
-          <template slot-scope="{ row, column }">
-            <el-button type="text" :disabled="isDisabled(row, column)">
-              {{ row.row3.value }}
-            </el-button>
-          </template>
-        </el-table-column>
-        <el-table-column
-          align="center"
-          prop="row4"
-          height="15"
-          width="35"
-        >
-          <template slot-scope="{ row, column }">
-            <el-button type="text" :disabled="isDisabled(row, column)">
-              {{ row.row4.value }}
-            </el-button>
-          </template>
-        </el-table-column>
-        <el-table-column
-          align="center"
-          prop="row5"
-          height="15"
-          width="35"
-        >
-          <template slot-scope="{ row, column }">
-            <el-button type="text" :disabled="isDisabled(row, column)">
-              {{ row.row5.value }}
-            </el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-    </el-dropdown-menu>
-  </el-dropdown>
+        <template slot-scope="{ row, column }">
+          <el-button type="text" :disabled="isDisabled(row, column)">
+            {{ row.row2.value }}
+          </el-button>
+        </template>
+      </el-table-column>
+      <el-table-column
+        align="center"
+        prop="row3"
+        height="15"
+        width="45"
+      >
+        <template slot-scope="{ row, column }">
+          <el-button type="text" :disabled="isDisabled(row, column)">
+            {{ row.row3.value }}
+          </el-button>
+        </template>
+      </el-table-column>
+      <el-table-column
+        align="center"
+        prop="row4"
+        height="15"
+        width="45"
+      >
+        <template slot-scope="{ row, column }">
+          <el-button type="text" :disabled="isDisabled(row, column)">
+            {{ row.row4.value }}
+          </el-button>
+        </template>
+      </el-table-column>
+      <el-table-column
+        align="center"
+        prop="row5"
+        height="15"
+        width="45"
+      >
+        <template slot-scope="{ row, column }">
+          <el-button type="text" :disabled="isDisabled(row, column)">
+            {{ row.row5.value }}
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </el-card>
 </template>
 
 <script>
@@ -115,20 +112,33 @@ export default {
   },
   data() {
     return {
-      calcValue: this.fieldValue,
+      calcValue: this.valueField,
       valueToDisplay: ''
     }
   },
   computed: {
     tableData() {
       return buttons
+    },
+    valueField() {
+      return this.$store.getters.getValueOfField({
+        parentUuid: this.fieldAttributes.parentUuid,
+        containerUuid: this.fieldAttributes.containerUuid,
+        columnName: this.fieldAttributes.columnName
+      })
     }
   },
   watch: {
+    valueField(value) {
+      console.log(value)
+    },
     fieldValue(value) {
       this.calcValue = value
     }
   },
+  created() {
+    this.calcValue = this.valueField
+  },
   methods: {
     sendValue(row, column) {
       const button = row[column.property]
@@ -182,6 +192,7 @@ export default {
         .finally(() => {
           this.clearVariables()
           this.$children[0].visible = false
+          this.$store.commit('changeShowRigthPanel', false)
         })
     },
     spanMethod({ row, column }) {
@@ -221,7 +232,7 @@ export default {
       return false
     },
     calculateValue(event) {
-      const result = this.calculationValue(this.fieldValue, event)
+      const result = this.calculationValue(this.valueField, event)
       if (!this.isEmptyValue(result)) {
         this.valueToDisplay = result
       } else {
diff --git a/src/components/ADempiere/Field/popover/contextInfo.vue b/src/components/ADempiere/Field/contextMenuField/contextInfo/index.vue
similarity index 55%
rename from src/components/ADempiere/Field/popover/contextInfo.vue
rename to src/components/ADempiere/Field/contextMenuField/contextInfo/index.vue
index 235f4d8a..af45db9c 100644
--- a/src/components/ADempiere/Field/popover/contextInfo.vue
+++ b/src/components/ADempiere/Field/contextMenuField/contextInfo/index.vue
@@ -1,36 +1,32 @@
 <template>
-  <span>
-    <el-popover
-      ref="contextInfoField"
-      placement="top"
-      width="300"
-      trigger="click"
-    >
-      <p
-        class="pre-formatted"
-        v-html="fieldAttributes.contextInfo.messageText.msgText"
-      />
-      <div>
-        <span class="custom-tittle-popover">
-          {{ fieldAttributes.name }}
+  <div>
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span>
+          {{ $t('field.field') }}
+          <b> {{ fieldAttributes.name }} </b>
         </span>
-        {{ fieldAttributes.help }}
       </div>
-      <template v-for="(zoomItem, index) in fieldAttributes.reference.zoomWindows">
-        <el-button
-          :key="index"
-          type="text"
-          @click="redirect({ window: zoomItem })"
-        >
-          {{ $t('table.ProcessActivity.zoomIn') }}
-          {{ zoomItem.name }}
-        </el-button>
-      </template>
-    </el-popover>
-    <span v-popover:contextInfoField>
-      {{ fieldAttributes.name }}
-    </span>
-  </span>
+      <el-form ref="form" label-position="top" label-width="120px" style="max-height: 70vh; overflow: auto;" @submit.native.prevent="notSubmitForm">
+        <el-form-item :label="$t('field.container.description')">
+          {{ fieldAttributes.description }}
+        </el-form-item>
+        <el-form-item :label="$t('field.container.help')">
+          {{ fieldAttributes.help }}
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <template v-for="(zoomItem, index) in fieldAttributes.reference.zoomWindows">
+      <el-button
+        :key="index"
+        type="text"
+        @click="redirect({ window: zoomItem })"
+      >
+        {{ $t('table.ProcessActivity.zoomIn') }}
+        {{ zoomItem.name }}
+      </el-button>
+    </template>
+  </div>
 </template>
 
 <script>
@@ -64,6 +60,10 @@ export default {
     }
   },
   methods: {
+    notSubmitForm(event) {
+      event.preventDefault()
+      return false
+    },
     redirect({ window }) {
       const viewSearch = recursiveTreeSearch({
         treeData: this.permissionRoutes,
@@ -89,6 +89,7 @@ export default {
           message: this.$t('notifications.noRoleAccess')
         })
       }
+      this.$store.commit('changeShowRigthPanel', false)
     }
   }
 }
diff --git a/src/components/ADempiere/Field/popover/preference/index.vue b/src/components/ADempiere/Field/contextMenuField/preference/index.vue
similarity index 72%
rename from src/components/ADempiere/Field/popover/preference/index.vue
rename to src/components/ADempiere/Field/contextMenuField/preference/index.vue
index c26953cf..6c8fd0f9 100644
--- a/src/components/ADempiere/Field/popover/preference/index.vue
+++ b/src/components/ADempiere/Field/contextMenuField/preference/index.vue
@@ -1,93 +1,89 @@
 <template>
-  <el-dropdown trigger="click">
-    <el-button type="text" :disabled="sourceField.readonly">
-      <i class="el-icon-notebook-2 el-icon--right" @click="isActive = !isActive" />
-    </el-button>
-    <el-dropdown-menu slot="dropdown" class="dropdown-calc">
-      <el-card
-        v-if="!isEmptyValue(metadataList)"
-        class="box-card"
-      >
-        <div slot="header" class="clearfix">
-          <span>
-            {{ $t('components.preference.title') }}
-            <b>
-              {{ sourceField.name }}
-            </b>
-          </span>
-        </div>
-        <div class="text item">
+  <el-card
+    v-if="!isEmptyValue(metadataList)"
+    class="box-card"
+  >
+    <div slot="header" class="clearfix">
+      <span>
+        {{ $t('components.preference.title') }}
+        <b>
+          {{ sourceField.name }}
           {{
-            getDescriptionOfPreference
+            fieldValue
           }}
-        </div>
-        <br>
-        <div class="text item">
-          <el-form
-            :inline="true"
-          >
-            <el-form-item>
-              <p slot="label">
-                {{ sourceField.name }}: {{ code }}
-              </p>
-            </el-form-item>
-          </el-form>
-          <el-form
-            label-position="top"
-            :inline="true"
-            class="demo-form-inline"
-            size="medium"
-          >
-            <el-form-item
-              v-for="(field) in metadataList"
-              :key="field.sequence"
-            >
-              <p slot="label">
-                {{ field.name }}
-              </p>
-              <el-switch
-                v-model="field.value"
-              />
-            </el-form-item>
-          </el-form>
-        </div>
-        <br>
-        <el-row>
-          <el-col :span="24">
-            <samp style="float: left; padding-right: 10px;">
-              <el-button
-                type="danger"
-                class="custom-button-address-location"
-                icon="el-icon-delete"
-                @click="remove()"
-              />
-            </samp>
-            <samp style="float: right; padding-right: 10px;">
-              <el-button
-                type="danger"
-                class="custom-button-address-location"
-                icon="el-icon-close"
-                @click="close()"
-              />
-              <el-button
-                type="primary"
-                class="custom-button-address-location"
-                icon="el-icon-check"
-                @click="sendValue()"
-              />
-            </samp>
-          </el-col>
-        </el-row>
-      </el-card>
-      <div
-        v-else
-        v-loading="isEmptyValue(metadataList)"
-        :element-loading-text="$t('notifications.loading')"
-        element-loading-background="rgba(255, 255, 255, 0.8)"
-        class="loading-window"
-      />
-    </el-dropdown-menu>
-  </el-dropdown>
+        </b>
+      </span>
+    </div>
+    <div class="text item">
+      {{
+        getDescriptionOfPreference
+      }}
+    </div>
+    <br>
+    <div class="text item">
+      <el-form
+        :inline="true"
+      >
+        <el-form-item>
+          <p slot="label">
+            {{ sourceField.name }}: {{ fieldValue }}
+          </p>
+        </el-form-item>
+      </el-form>
+      <el-form
+        label-position="top"
+        :inline="true"
+        class="demo-form-inline"
+        size="medium"
+      >
+        <el-form-item
+          v-for="(field) in metadataList"
+          :key="field.sequence"
+        >
+          <p slot="label">
+            {{ field.name }}
+          </p>
+          <el-switch
+            v-model="field.value"
+          />
+        </el-form-item>
+      </el-form>
+    </div>
+    <br>
+    <el-row>
+      <el-col :span="24">
+        <samp style="float: left; padding-right: 10px;">
+          <el-button
+            type="danger"
+            class="custom-button-address-location"
+            icon="el-icon-delete"
+            @click="remove()"
+          />
+        </samp>
+        <samp style="float: right; padding-right: 10px;">
+          <el-button
+            type="danger"
+            class="custom-button-address-location"
+            icon="el-icon-close"
+            @click="close()"
+          />
+          <el-button
+            type="primary"
+            class="custom-button-address-location"
+            icon="el-icon-check"
+            @click="sendValue()"
+          />
+        </samp>
+      </el-col>
+    </el-row>
+  </el-card>
+  <div
+    v-else
+    v-loading="isEmptyValue(metadataList)"
+    :element-loading-text="$t('notifications.loading')"
+    element-loading-background="rgba(255, 255, 255, 0.8)"
+    class="loading-window"
+  />
 </template>
 
 <script>
@@ -184,10 +180,16 @@ export default {
       }
     }
   },
+  beforeMount() {
+    if (this.isEmptyValue(this.metadataList)) {
+      this.setFieldsList()
+    }
+  },
   methods: {
     createFieldFromDictionary,
     close() {
       this.$children[0].visible = false
+      this.$store.commit('changeShowRigthPanel', false)
     },
     remove() {
       const isForCurrentUser = this.metadataList.find(field => field.columnName === 'AD_User_ID').value
@@ -249,7 +251,7 @@ export default {
       setPreference({
         parentUuid: this.sourceField.parentUuid,
         attribute: this.sourceField.columnName,
-        value: this.code,
+        value: this.fieldValue,
         isForCurrentUser,
         isForCurrentClient,
         isForCurrentOrganization,
@@ -266,6 +268,7 @@ export default {
             message: error.message,
             type: 'error'
           })
+          this.close()
           console.warn(`setPreference error: ${error.message}.`)
         })
     }
diff --git a/src/components/ADempiere/Field/popover/preference/preferenceFields.js b/src/components/ADempiere/Field/contextMenuField/preference/preferenceFields.js
similarity index 100%
rename from src/components/ADempiere/Field/popover/preference/preferenceFields.js
rename to src/components/ADempiere/Field/contextMenuField/preference/preferenceFields.js
diff --git a/src/components/ADempiere/Field/popover/translated.vue b/src/components/ADempiere/Field/contextMenuField/translated/index.vue
similarity index 65%
rename from src/components/ADempiere/Field/popover/translated.vue
rename to src/components/ADempiere/Field/contextMenuField/translated/index.vue
index e4e6c114..c1c79fd3 100644
--- a/src/components/ADempiere/Field/popover/translated.vue
+++ b/src/components/ADempiere/Field/contextMenuField/translated/index.vue
@@ -1,63 +1,58 @@
 <template>
-  <span>
-    <el-popover
-      ref="translatedField"
-      placement="top"
-      width="300"
-      trigger="click"
-      @show="getTranslation"
-    >
-      <div>
-        <span class="custom-tittle-popover">
-          {{ fieldAttributes.name }}
-        </span>
-        <template v-if="!isEmptyValue(fieldAttributes.help)">
-          : {{ fieldAttributes.help }}
-        </template>
-      </div>
-      <el-form-item
-        :required="true"
-      >
-        <template slot="label">
-          {{ $t('language') + ':' }}
-        </template>
-        <el-select
-          v-model="langValue"
-          size="medium"
-          style="width: 100%;"
-          filterable
-          @change="getTranslation"
+  <el-card class="box-card">
+    <div slot="header" class="clearfix">
+      <span>
+        {{ $t('field.field') }}
+        <b> {{ fieldAttributes.name }} </b>
+      </span>
+    </div>
+    <div>
+      <el-form ref="form" label-position="top">
+        <el-form-item :label="$t('field.container.description')">
+          {{ fieldAttributes.description }}
+        </el-form-item>
+        <el-form-item :label="$t('field.container.help')">
+          {{ fieldAttributes.help }}
+        </el-form-item>
+        <el-form-item
+          :required="true"
         >
-          <!-- <el-option
-            key="blank-option"
-            :value="undefined"
-            label=" "
-          /> -->
-          <el-option
-            v-for="(optionLang, key) in languageList"
-            :key="key"
-            :value="optionLang.language"
-            :label="optionLang.languageName"
+          <template slot="label">
+            {{ $t('language') + ':' }}
+          </template>
+          <el-select
+            v-model="langValue"
+            size="medium"
+            style="width: 100%;"
+            filterable
+            @change="getTranslation"
+          >
+            <!-- <el-option
+              key="blank-option"
+              :value="undefined"
+              label=" "
+            /> -->
+            <el-option
+              v-for="(optionLang, key) in languageList"
+              :key="key"
+              :value="optionLang.language"
+              :label="optionLang.languageName"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          :label="$t('field.container.codeTranslation')"
+          :required="true"
+        >
+          <el-input
+            v-model="translatedValue"
+            :disabled="isEmptyValue(langValue)"
+            @change="changeTranslationValue"
           />
-        </el-select>
-      </el-form-item>
-      <el-form-item
-        label="Translated Value:"
-        :required="true"
-      >
-        <el-input
-          v-model="translatedValue"
-          :disabled="isEmptyValue(langValue)"
-          @change="changeTranslationValue"
-        />
-      </el-form-item>
-    </el-popover>
-    <svg-icon
-      v-popover:translatedField
-      class-name="international-icon"
-      icon-class="language"
-    />
-  </span>
+        </el-form-item>
+      </el-form>
+    </div>
+  </el-card>
 </template>
 
 <script>
diff --git a/src/components/ADempiere/Field/index.vue b/src/components/ADempiere/Field/index.vue
index 3a2df190..66e20294 100644
--- a/src/components/ADempiere/Field/index.vue
+++ b/src/components/ADempiere/Field/index.vue
@@ -18,44 +18,49 @@
         :required="isMandatory"
       >
         <template slot="label">
-          <operator-comparison
-            v-if="field.isComparisonField"
-            key="is-field-operator-comparison"
-            :field-attributes="fieldAttributes"
-            :field-value="field.value"
-          />
-          <context-info
-            v-else-if="isContextInfo"
-            key="is-field-context-info"
-            :field-attributes="fieldAttributes"
-            :field-value="field.value"
-          />
-          <span v-else key="is-field-name">
-            {{ isFieldOnly }}
-          </span>
-
-          <document-status
-            v-if="isDocuemntStatus"
-            :field="fieldAttributes"
-          />
-
-          <translated
-            v-if="field.isTranslatedField"
-            :field-attributes="fieldAttributes"
-            :record-uuid="field.recordUuid"
-          />
-
-          <calculator
-            v-if="field.isNumericField && !field.isReadOnlyFromLogic"
-            :field-attributes="fieldAttributes"
-            :field-value="recordDataFields"
-          />
-          <preference
-            v-if="field.panelType !== 'form'"
-            :source-field="fieldAttributes"
-            :field-value="recordDataFields"
-            :panel-type="field.panelType"
-          />
+          <el-dropdown
+            size="mini"
+            :hide-on-click="true"
+            trigger="click"
+            @command="handleCommand"
+          >
+            <span class="el-dropdown-link">
+              <span key="is-field-name">
+                {{ field.name }}
+              </span>
+              <i
+                class="el-icon-more el-icon--right"
+              />
+            </span>
+            <el-dropdown-menu slot="dropdown">
+              <template
+                v-for="(option, key) in optionField"
+              >
+                <el-dropdown-item
+                  v-if="option.enabled"
+                  :key="key"
+                  :command="option"
+                  :divided="true"
+                >
+                  <div class="contents">
+                    <div v-if="option.name !== $t('language')" style="margin-right: 5%;padding-top: 3%;">
+                      <i :class="option.icon" style="font-weight: bolder;" />
+                    </div>
+                    <div v-else style="margin-right: 5%">
+                      <svg-icon :icon-class="option.icon" style="margin-right: 5px;" />
+                    </div>
+                    <div>
+                      <span class="contents">
+                        <b class="label">
+                          {{ option.name }}
+                        </b>
+                      </span>
+                    </div>
+                  </div>
+                </el-dropdown-item>
+              </template>
+            </el-dropdown-menu>
+          </el-dropdown>
         </template>
         <component
           :is="componentRender"
@@ -78,14 +83,11 @@
 </template>
 
 <script>
-import contextInfo from '@/components/ADempiere/Field/popover/contextInfo'
 import documentStatus from '@/components/ADempiere/Field/popover/documentStatus'
-import preference from '@/components/ADempiere/Field/popover/preference/index'
 import operatorComparison from '@/components/ADempiere/Field/popover/operatorComparison'
-import translated from '@/components/ADempiere/Field/popover/translated'
-import calculator from '@/components/ADempiere/Field/popover/calculator'
 import { DEFAULT_SIZE } from '@/utils/ADempiere/references'
 import { evalutateTypeField, fieldIsDisplayed } from '@/utils/ADempiere/dictionaryUtils'
+import { recursiveTreeSearch } from '@/utils/ADempiere/valueUtils.js'
 
 /**
  * This is the base component for linking the components according to the
@@ -94,12 +96,8 @@ import { evalutateTypeField, fieldIsDisplayed } from '@/utils/ADempiere/dictiona
 export default {
   name: 'FieldDefinition',
   components: {
-    contextInfo,
     documentStatus,
-    operatorComparison,
-    translated,
-    calculator,
-    preference
+    operatorComparison
   },
   props: {
     // receives the property that is an object with all the attributes
@@ -126,11 +124,15 @@ export default {
   },
   data() {
     return {
-      field: {}
+      field: {},
+      visible: this.$store.state.contextMenu.isShowPopoverField
     }
   },
   computed: {
     // load the component that is indicated in the attributes of received property
+    isMobile() {
+      return this.$store.state.app.device === 'mobile'
+    },
     componentRender() {
       if (this.isEmptyValue(this.field.componentPath || !this.field.isSupported)) {
         return () => import('@/components/ADempiere/Field/FieldText')
@@ -379,6 +381,53 @@ export default {
       }
       return Boolean(this.field.contextInfo && this.field.contextInfo.isActive) ||
         Boolean(this.field.reference && this.field.reference.zoomWindows.length)
+    },
+    optionField() {
+      return [
+        {
+          name: this.$t('field.info'),
+          enabled: true,
+          fieldAttributes: this.fieldAttributes,
+          icon: 'el-icon-info'
+        },
+        {
+          name: this.$t('table.ProcessActivity.zoomIn'),
+          enabled: this.isContextInfo,
+          fieldAttributes: this.fieldAttributes,
+          icon: 'el-icon-files'
+        },
+        {
+          name: this.$t('language'),
+          enabled: this.field.isTranslatedField,
+          fieldAttributes: this.fieldAttributes,
+          icon: 'language'
+        },
+        {
+          name: this.$t('field.calculator'),
+          enabled: this.field.isNumericField,
+          fieldAttributes: this.fieldAttributes,
+          recordDataFields: this.recordDataFields,
+          valueField: this.valueField,
+          icon: 'el-icon-s-operation'
+        },
+        {
+          name: this.$t('field.preference'),
+          enabled: true,
+          fieldAttributes: this.fieldAttributes,
+          valueField: this.valueField,
+          icon: 'el-icon-notebook-2'
+        }
+      ]
+    },
+    permissionRoutes() {
+      return this.$store.getters.permission_routes
+    },
+    valueField() {
+      return this.$store.getters.getValueOfField({
+        parentUuid: this.fieldAttributes.parentUuid,
+        containerUuid: this.fieldAttributes.containerUuid,
+        columnName: this.fieldAttributes.columnName
+      })
     }
   },
   watch: {
@@ -408,14 +457,108 @@ export default {
     }
   },
   methods: {
+    recursiveTreeSearch,
     focusField() {
       if (this.field.handleRequestFocus || (this.field.displayed && !this.field.readonly)) {
         this.$refs[this.field.columnName].requestFocus()
       }
+    },
+    handleCommand(command) {
+      if (command.name === this.$t('table.ProcessActivity.zoomIn')) {
+        this.redirect({ window: command.fieldAttributes.reference.zoomWindows[0] })
+        return
+      }
+      if (this.isMobile) {
+        this.$store.commit('changeShowRigthPanel', true)
+      }
+      this.$store.commit('changeShowPopoverField', true)
+      this.$store.dispatch('setOptionField', command)
+    },
+    redirect({ window }) {
+      const viewSearch = recursiveTreeSearch({
+        treeData: this.permissionRoutes,
+        attributeValue: window.uuid,
+        attributeName: 'meta',
+        secondAttribute: 'uuid',
+        attributeChilds: 'children'
+      })
+
+      if (viewSearch) {
+        this.$router.push({
+          name: viewSearch.name,
+          query: {
+            action: 'advancedQuery',
+            tabParent: 0,
+            [this.fieldAttributes.columnName]: this.value
+          }
+        }, () => {})
+      } else {
+        this.$message({
+          type: 'error',
+          showClose: true,
+          message: this.$t('notifications.noRoleAccess')
+        })
+      }
     }
   }
 }
 </script>
+<style scoped>
+  .svg-icon {
+    width: 1em;
+    height: 1.5em;
+    vertical-align: -0.15em;
+    fill: currentColor;
+    overflow: hidden;
+  }
+  .el-dropdown .el-button-group {
+    display: flex;
+  }
+  .el-dropdown-menu {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 10;
+    padding: 10px 0;
+    margin: 5px 0;
+    background-color: #FFFFFF;
+    border: 1px solid #e6ebf5;
+    border-radius: 4px;
+    -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    max-height: 250px;
+    max-width: 220px;
+    overflow: auto;
+  }
+  .el-dropdown-menu--mini .el-dropdown-menu__item {
+    line-height: 14px;
+    padding: 0px 15px;
+    padding-top: 1%;
+    padding-right: 15px;
+    padding-bottom: 1%;
+    padding-left: 15px;
+    font-size: 10px;
+  }
+  .el-dropdown-menu__item--divided {
+    position: relative;
+    /* margin-top: 6px; */
+    border-top: 1px solid #e6ebf5;
+  }
+  .label {
+    font-size: 14px;
+    margin-top: 0% !important;
+    margin-left: 0px;
+    text-align: initial;
+  }
+  .description {
+    margin: 0px;
+    font-size: 12px;
+    text-align: initial;
+  }
+  .contents {
+    display: inline-flex;
+  }
+</style>
 
 <style lang="scss">
   .custom-tittle-popover {
diff --git a/src/components/ADempiere/RightPanel/index.vue b/src/components/ADempiere/RightPanel/index.vue
index d7c4c349..81e37ba3 100644
--- a/src/components/ADempiere/RightPanel/index.vue
+++ b/src/components/ADempiere/RightPanel/index.vue
@@ -10,10 +10,10 @@
         <div class="rightMenu">
           <div
             class="handle-button"
-            :style="{ 'top': buttonTop+'%' }"
+            :style="{'top':buttonTop+'px','background-color':theme}"
             @click="isShowRightPanel=!isShowRightPanel"
           >
-            <i :class="icon" style="color: gray;" />
+            <i :class="icon" style="color: white;" />
           </div>
 
           <div class="rightMenu-items">
@@ -36,7 +36,7 @@ export default {
       type: Boolean
     },
     buttonTop: {
-      default: 16,
+      default: 250,
       type: Number
     }
   },
@@ -145,7 +145,7 @@ export default {
   position: fixed;
   height: 100vh;
   width: 100%;
-  max-width: 260px;
+  max-width: 80%;
   top: 0px;
   left: 0px;
   box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
@@ -172,25 +172,21 @@ export default {
 }
 
 .handle-button {
+  width: 48px;
+  height: 48px;
   position: absolute;
-  border: 1px solid #d9d9d9;
-  background: white;
-  left: -34px;
-  border-radius: 6px 0 0 6px !important;
-  width: 35px;
-  height: 35px;
-  pointer-events: auto;
-  z-index: 0;
-  cursor: pointer;
-  pointer-events: auto;
-  font-size: 0px;
+  left: -48px;
   text-align: center;
+  font-size: 24px;
+  border-radius: 6px 0 0 6px !important;
+  z-index: 0;
+  pointer-events: auto;
+  cursor: pointer;
   color: #fff;
   line-height: 48px;
-
   i {
-    font-size: 17px;
-    line-height: 17px;
+    font-size: 24px;
+    line-height: 48px;
   }
 }
 </style>
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
index 8def6d47..9367a549 100644
--- a/src/components/RightPanel/index.vue
+++ b/src/components/RightPanel/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
+  <div v-if="false" ref="rightPanel" :class="{show:show}" class="rightPanel-container">
     <div class="setting">
       <div class="showme">
         <div class="rightPanel-background" />
diff --git a/src/lang/ADempiere/en.js b/src/lang/ADempiere/en.js
index 47360819..0d2f71aa 100644
--- a/src/lang/ADempiere/en.js
+++ b/src/lang/ADempiere/en.js
@@ -269,12 +269,14 @@ export default {
     advancedQuery: 'Advanced Query'
   },
   settings: {
-    title: 'Page style setting',
+    title: 'setting',
     theme: 'Theme Color',
     tagsView: 'Open Tags-View',
     fixedHeader: 'Fixed Header',
     sidebarLogo: 'Sidebar Logo',
-    showContextMenu: 'Show Context Information'
+    showContextMenu: 'Show Context Information',
+    isShowTitle: 'Show Títle',
+    isShowMenu: 'Show Menu'
   },
   profile: {
     aboutMe: 'About Me',
@@ -312,6 +314,17 @@ export default {
       error: 'Error In Callout'
     }
   },
+  field: {
+    field: 'Field',
+    info: 'Information',
+    calculator: 'Calculator',
+    preference: 'Preference',
+    codeTranslation: 'Traduccion de Codigo',
+    container: {
+      help: 'Help',
+      description: 'Description'
+    }
+  },
   data: {
     createRecordSuccessful: 'New record created successfully',
     createNewRecord: 'Mode New record',
diff --git a/src/lang/ADempiere/es.js b/src/lang/ADempiere/es.js
index 2884a029..97e00aca 100644
--- a/src/lang/ADempiere/es.js
+++ b/src/lang/ADempiere/es.js
@@ -244,12 +244,14 @@ export default {
     advancedQuery: 'Consulta Avanzada'
   },
   settings: {
-    title: 'Configuración de estilo de página',
+    title: 'Configuración',
     theme: 'Color del tema',
     tagsView: 'Habilitar Tags-View',
     fixedHeader: 'Encabezado fijo',
     sidebarLogo: 'Logotipo de la barra lateral',
-    showContextMenu: 'Mostrar Menu de Contexto'
+    showContextMenu: 'Mostrar Menu de Contexto',
+    isShowTitle: 'Mostrar Título',
+    isShowMenu: 'Mostrar Menu'
   },
   profile: {
     aboutMe: 'Sobre Mi',
@@ -287,6 +289,17 @@ export default {
       error: 'Error En Callout'
     }
   },
+  field: {
+    field: 'Campo',
+    info: 'Informacion',
+    calculator: 'Calculadora',
+    preference: 'Preferencia',
+    codeTranslation: 'Traduccion de Codigo',
+    container: {
+      help: 'Ayuda',
+      description: 'Descripción'
+    }
+  },
   data: {
     createRecordSuccessful: 'Nuevo registro creado con exito',
     createNewRecord: 'Modo nuevo registro',
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
index a0858c66..e5118a65 100644
--- a/src/layout/components/Settings/index.vue
+++ b/src/layout/components/Settings/index.vue
@@ -1,60 +1,48 @@
 <template>
   <div class="drawer-container">
     <div>
-      <h3 class="drawer-title">{{ $t('settings.title') }}</h3>
-
-      <div class="drawer-item">
-        <span>{{ $t('settings.theme') }}</span>
-        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
-      </div>
-
-      <div class="drawer-item">
-        <span>{{ $t('settings.tagsView') }}</span>
-        <el-switch v-model="tagsView" class="drawer-switch" />
-      </div>
-
-      <div class="drawer-item">
-        <span>{{ $t('settings.showContextMenu') }}</span>
-        <el-switch v-model="showContextMenu" class="drawer-switch" />
-      </div>
-
-      <div class="drawer-item">
-        <span>show Title</span>
-        <el-switch v-model="isShowTitleForm" class="drawer-switch" />
-      </div>
-
-      <div class="drawer-item">
-        <span>{{ $t('settings.fixedHeader') }}</span>
-        <el-switch v-model="fixedHeader" class="drawer-switch" />
-      </div>
-
-      <div class="drawer-item">
-        <span>Show Header</span>
-        <el-switch v-model="showNavar" class="drawer-switch" />
-      </div>
-
-      <div class="drawer-item">
-        <span>Show Menu</span>
-        <el-switch v-model="showMenu" class="drawer-switch" />
-      </div>
-
-      <div class="drawer-item">
-        <span>{{ $t('settings.sidebarLogo') }}</span>
-        <el-switch v-model="sidebarLogo" class="drawer-switch" />
-      </div>
-      <a v-if="isShowJob" href="https://panjiachen.github.io/vue-element-admin-site/zh/job/" target="_blank" class="job-link">
-        <el-alert
-          title="部门目前非常缺人！有兴趣的可以点击了解详情。坐标: 字节跳动"
-          type="success"
-          :closable="false"
-        />
-      </a>
-
-      <div v-if="lang === 'zh'" class="drawer-item">
-        <span>菜单支持拼音搜索</span>
-        <el-switch v-model="supportPinyinSearch" class="drawer-switch" />
-      </div>
-
+      <el-form label-position="top" :inline="true">
+        <el-form-item
+          :label="$t('settings.theme')"
+        >
+          <theme-picker @change="themeChange" />
+        </el-form-item>
+        <el-form-item
+          :label="$t('settings.fixedHeader')"
+        >
+          <el-switch v-model="fixedHeader" />
+        </el-form-item>
+        <el-form-item
+          :label="$t('settings.tagsView')"
+        >
+          <el-switch v-model="tagsView" />
+        </el-form-item>
+        <el-form-item
+          :label="$t('settings.fixedHeader')"
+        >
+          <el-switch v-model="showNavar" />
+        </el-form-item>
+        <el-form-item
+          :label="$t('settings.showContextMenu')"
+        >
+          <el-switch v-model="showContextMenu" />
+        </el-form-item>
+        <el-form-item
+          :label="$t('settings.isShowTitle')"
+        >
+          <el-switch v-model="isShowTitleForm" />
+        </el-form-item>
+        <el-form-item
+          :label="$t('settings.isShowMenu')"
+        >
+          <el-switch v-model="showMenu" />
+        </el-form-item>
+        <el-form-item
+          :label="$t('settings.sidebarLogo')"
+        >
+          <el-switch v-model="sidebarLogo" />
+        </el-form-item>
+      </el-form>
     </div>
   </div>
 </template>
@@ -65,7 +53,9 @@ import ThemePicker from '@/components/ThemePicker'
 export default {
   components: { ThemePicker },
   data() {
-    return {}
+    return {
+      activeName: '1'
+    }
   },
   computed: {
     isShowTitleForm: {
diff --git a/src/store/modules/ADempiere/contextMenu.js b/src/store/modules/ADempiere/contextMenu.js
index 4503d165..c8b13226 100644
--- a/src/store/modules/ADempiere/contextMenu.js
+++ b/src/store/modules/ADempiere/contextMenu.js
@@ -14,6 +14,8 @@ import { requestListDocumentActions, requestListDocumentStatuses } from '@/api/A
 // ]
 const initStateContextMenu = {
   isShowRightPanel: false,
+  isShowPopoverField: false,
+  optionField: {},
   contextMenu: [],
   listDocumentStatus: {
     defaultDocumentAction: undefined,
@@ -47,8 +49,14 @@ const contextMenu = {
     changeShowRigthPanel(state) {
       state.isShowRightPanel = !state.isShowRightPanel
     },
+    changeShowPopoverField(state) {
+      state.isShowPopoverField = !state.isShowPopoverField
+    },
     resetContextMenu(state) {
       state = initStateContextMenu
+    },
+    fieldContextMenu(state, payload) {
+      state.optionField = payload
     }
   },
   actions: {
@@ -143,6 +151,9 @@ const contextMenu = {
             console.warn(`Error getting document statuses list. Code ${error.code}: ${error.message}.`)
           })
       })
+    },
+    setOptionField({ commit }, params) {
+      commit('fieldContextMenu', params)
     }
   },
   getters: {
@@ -175,6 +186,9 @@ const contextMenu = {
     },
     getListDocumentActionByUuid: (state) => (recordUuid) => {
       return state.listDocumentAction.find(itemDocumentAction => itemDocumentAction.recordUuid === recordUuid)
+    },
+    getFieldContextMenu: (state) => {
+      return state.optionField
     }
   }
 }
diff --git a/src/views/ADempiere/Window/index.vue b/src/views/ADempiere/Window/index.vue
index 9cd5526c..dbf63898 100644
--- a/src/views/ADempiere/Window/index.vue
+++ b/src/views/ADempiere/Window/index.vue
@@ -295,6 +295,17 @@
           </el-main>
         </SplitArea>
       </Split>
+      <right-panel
+        v-if="panelContextMenu && isMobile"
+      >
+        <component
+          :is="componentRender"
+          :field-attributes="contextMenuField.fieldAttributes"
+          :source-field="contextMenuField.fieldAttributes"
+          :record-uuid="contextMenuField.fieldAttributes.recordUuid"
+          :field-value="contextMenuField.valueField"
+        />
+      </right-panel>
     </el-container>
   </div>
   <div
diff --git a/src/views/ADempiere/Window/windowLogicComponent.js b/src/views/ADempiere/Window/windowLogicComponent.js
index 6385e926..a52fc0d5 100644
--- a/src/views/ADempiere/Window/windowLogicComponent.js
+++ b/src/views/ADempiere/Window/windowLogicComponent.js
@@ -13,6 +13,8 @@ import RecordLogs from '@/components/ADempiere/ContainerInfo/recordLogs'
 import WorkflowLogs from '@/components/ADempiere/ContainerInfo/workflowLogs'
 // Workflow
 import WorkflowStatusBar from '@/components/ADempiere/WorkflowStatusBar'
+// Panel right the Context Menu Field
+import RightPanel from '@/components/ADempiere/RightPanel'
 
 /**
  * Window Logic Component View
@@ -30,6 +32,7 @@ export default {
     DataTable,
     splitPane,
     ModalDialog,
+    RightPanel,
     ChatEntries,
     RecordLogs,
     WorkflowLogs,
@@ -68,6 +71,30 @@ export default {
     }
   },
   computed: {
+    contextMenuField() {
+      return this.$store.getters.getFieldContextMenu
+    },
+    panelContextMenu() {
+      return this.$store.state.contextMenu.isShowRightPanel
+    },
+    componentRender() {
+      let component
+      switch (this.contextMenuField.name) {
+        case this.$t('field.info'):
+          component = () => import('@/components/ADempiere/Field/contextMenuField/contextInfo')
+          break
+        case this.$t('language'):
+          component = () => import('@/components/ADempiere/Field/contextMenuField/translated/index')
+          break
+        case this.$t('field.calculator'):
+          component = () => import('@/components/ADempiere/Field/contextMenuField/calculator')
+          break
+        case this.$t('field.preference'):
+          component = () => import('@/components/ADempiere/Field/contextMenuField/preference/index')
+          break
+      }
+      return component
+    },
     isNewRecord() {
       return this.isEmptyValue(this.$route.query) ||
         this.isEmptyValue(this.$route.query.action) ||
diff --git a/src/views/profile/index.vue b/src/views/profile/index.vue
index 8f75d628..c6336b5c 100644
--- a/src/views/profile/index.vue
+++ b/src/views/profile/index.vue
@@ -13,6 +13,9 @@
               <el-tab-pane :label="$t('profile.role')" name="role">
                 <role />
               </el-tab-pane>
+              <el-tab-pane :label="$t('settings.title')" :name="$t('settings.title')">
+                <settings />
+              </el-tab-pane>
             </el-tabs>
           </el-card>
         </el-col>
@@ -23,15 +26,17 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import { mapGetters, mapState } from 'vuex'
 import UserCard from './components/UserCard'
 import Role from '@/views/profile/components/role'
+import { Settings } from '@/layout/components'
 
 export default {
   name: 'Profile',
   components: {
     UserCard,
-    Role
+    Role,
+    Settings
   },
   data() {
     return {
@@ -44,7 +49,24 @@ export default {
       'name',
       'avatar',
       'roles'
-    ])
+    ]),
+    ...mapState({
+      sidebar: state => state.app.sidebar,
+      device: state => state.app.device,
+      showSettings: state => state.settings.showSettings,
+      needTagsView: state => state.settings.tagsView,
+      fixedHeader: state => state.settings.fixedHeader,
+      showNavar: state => state.settings.showNavar,
+      showMenu: state => state.settings.showMenu
+    }),
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile'
+      }
+    }
   },
   created() {
     this.getUser()