Feture/support menu field (#737)

* Context menu support for fields in desktop mode

* minimal changes

* change style

src/components/ADempiere/Field/index.vue

@@ -21,10 +21,10 @@
           <el-dropdown
             size="mini"
             :hide-on-click="true"
-            trigger="click"
+            trigger="hover"
             @command="handleCommand"
           >
-            <span class="el-dropdown-link">
+            <span style="border: aqua;">
               <span key="is-field-name">
                 {{ field.name }}
               </span>
@@ -42,6 +42,21 @@
                   :command="option"
                   :divided="true"
                 >
+                  <el-popover
+                    v-if="!isMobile"
+                    placement="top"
+                    width="400"
+                    trigger="click"
+                    style="padding: 0px;"
+                  >
+                    <component
+                      :is="optionFieldFComponentRender"
+                      v-if="visibleForDesktop"
+                      :field-attributes="contextMenuField.fieldAttributes"
+                      :source-field="contextMenuField.fieldAttributes"
+                      :field-value="contextMenuField.valueField"
+                    />
+                    <el-button slot="reference" type="text" style="color: #606266;">
                       <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;" />
@@ -57,6 +72,23 @@
                           </span>
                         </div>
                       </div>
+                    </el-button>
+                  </el-popover>
+                  <div v-if="isMobile" 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>
@@ -125,7 +157,7 @@ export default {
   data() {
     return {
       field: {},
-      visible: this.$store.state.contextMenu.isShowPopoverField
+      visibleForDesktop: false
     }
   },
   computed: {
@@ -133,6 +165,30 @@ export default {
     isMobile() {
       return this.$store.state.app.device === 'mobile'
     },
+    contextMenuField() {
+      return this.$store.getters.getFieldContextMenu
+    },
+    panelContextMenu() {
+      return this.$store.state.contextMenu.isShowRightPanel
+    },
+    optionFieldFComponentRender() {
+      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
+    },
     componentRender() {
       if (this.isEmptyValue(this.field.componentPath || !this.field.isSupported)) {
         return () => import('@/components/ADempiere/Field/FieldText')
@@ -470,6 +526,8 @@ export default {
       }
       if (this.isMobile) {
         this.$store.commit('changeShowRigthPanel', true)
+      } else {
+        this.visibleForDesktop = true
       }
       this.$store.commit('changeShowPopoverField', true)
       this.$store.dispatch('setOptionField', command)
@@ -503,6 +561,27 @@ export default {
   }
 }
 </script>
+<style>
+.el-dropdown-menu__item:not(.is-disabled):hover, .el-dropdown-menu__item:focus {
+  background: white;
+}
+.el-dropdown-menu--mini .el-dropdown-menu__item {
+  line-height: 14px;
+  padding: 0px 15px;
+  padding-top: 0%;
+  padding-right: 15px;
+  padding-bottom: 0%;
+  padding-left: 15px;
+  font-size: 10px;
+  background: white;
+}
+.el-dropdown-menu--mini .el-dropdown-menu__item.el-dropdown-menu__item--divided {
+  margin-top: 0%;
+}
+.el-popper {
+  padding: 0px;
+}
+</style>
 <style scoped>
   .svg-icon {
     width: 1em;
@@ -519,8 +598,8 @@ export default {
     top: 0;
     left: 0;
     z-index: 10;
-    padding: 10px 0;
+    padding: 0px;
-    margin: 5px 0;
+    margin: 0px;
     background-color: #FFFFFF;
     border: 1px solid #e6ebf5;
     border-radius: 4px;