From ec95ba87e60e9038fe3ac91fe09b3c45a517aea4 Mon Sep 17 00:00:00 2001
From: Elsio Sanchez <45974454+elsiosanchez@users.noreply.github.com>
Date: Fri, 23 Apr 2021 18:07:50 -0400
Subject: [PATCH] style context menu the field (#775)

* style context menu the field

* add color to context menu

* minimal changes

Co-authored-by: Elsio Sanchez <elsiosanche@gmail.com>
---
 .../ContextMenu/contextMenuDesktop.vue        |  41 ++++-
 .../ContextMenu/contextMenuMobile.vue         |  21 ++-
 src/components/ADempiere/Field/index.vue      | 147 +++++++++++++-----
 3 files changed, 162 insertions(+), 47 deletions(-)

diff --git a/src/components/ADempiere/ContextMenu/contextMenuDesktop.vue b/src/components/ADempiere/ContextMenu/contextMenuDesktop.vue
index 99fe9b3a..01cde879 100644
--- a/src/components/ADempiere/ContextMenu/contextMenuDesktop.vue
+++ b/src/components/ADempiere/ContextMenu/contextMenuDesktop.vue
@@ -19,9 +19,9 @@
   <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
+      type="primary"
       trigger="click"
       @command="clickRunAction"
       @click="runAction(defaultActionToRun)"
@@ -122,10 +122,9 @@
         </el-scrollbar>
       </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 type="success" plain>
+        {{ $t('components.contextMenuRelations') }}<i class="el-icon-arrow-down el-icon--right" />
       </el-button>
       <el-dropdown-menu slot="dropdown">
         <el-dropdown-item
@@ -155,8 +154,8 @@
       </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 type="warning" plain :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
@@ -315,6 +314,36 @@ export default {
   }
 }
 </script>
+<style>
+  .el-dropdown-menu--medium .el-dropdown-menu__item {
+    line-height: 17px;
+    padding: 0 17px;
+    display: grid;
+    font-size: 14px;
+  }
+  .el-dropdown-menu--medium .el-dropdown-menu__item {
+    line-height: 17px;
+    padding: 0 17px;
+    display: grid;
+    font-size: 14px;
+  }
+  .el-button-group > .el-button:not(:last-child) {
+    margin-right: -1px;
+    color: #409eff;
+    background: #ecf5ff;
+    border-color: #b3d8ff;
+  }
+  .el-button-group .el-button--primary:last-child {
+    margin-right: 1px;
+    color: #409eff;
+    background: #e6f1fd;
+    border-color: #b3d8ff;
+    border-top-color: #b3d8ff;
+    border-right-color: #b3d8ff;
+    border-bottom-color: #b3d8ff;
+    border-left-color: #000000 !important;
+  }
+</style>
 
 <style scoped>
   .el-tree-node__children {
diff --git a/src/components/ADempiere/ContextMenu/contextMenuMobile.vue b/src/components/ADempiere/ContextMenu/contextMenuMobile.vue
index 73d7cb19..cec0e121 100644
--- a/src/components/ADempiere/ContextMenu/contextMenuMobile.vue
+++ b/src/components/ADempiere/ContextMenu/contextMenuMobile.vue
@@ -77,7 +77,7 @@
     </el-dropdown>
     <!-- menu relations -->
     <el-dropdown size="mini" @command="clickRelation">
-      <el-button size="mini">
+      <el-button type="success" plain size="mini">
         {{ $t('components.contextMenuRelations') }} <i class="el-icon-arrow-down el-icon--right" />
       </el-button>
       <el-dropdown-menu slot="dropdown">
@@ -108,7 +108,7 @@
       </el-dropdown-menu>
     </el-dropdown>
     <el-dropdown size="mini" @command="clickReferences">
-      <el-button size="mini" :disabled="!(isReferecesContent && isLoadedReferences)">
+      <el-button type="warning" plain :disabled="!(isReferecesContent && isLoadedReferences)" size="mini">
         {{ $t('components.contextMenuReferences') }} <i class="el-icon-arrow-down el-icon--right" />
       </el-button>
       <el-dropdown-menu slot="dropdown">
@@ -264,7 +264,22 @@ export default {
   }
 }
 </script>
-
+<style>
+  .el-button-group > .el-button:not(:last-child) {
+    margin-right: -1px;
+    color: #409eff;
+    background: #ecf5ff;
+    border-color: #b3d8ff;
+  }
+  .el-button-group > .el-button:last-child {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-right: -1px;
+    color: #409eff;
+    background: #c3defd;
+    border-color: #1682e6;
+  }
+</style>
 <style scoped>
   .el-tree-node__children {
     overflow: hidden;
diff --git a/src/components/ADempiere/Field/index.vue b/src/components/ADempiere/Field/index.vue
index 013e2d62..89190c14 100644
--- a/src/components/ADempiere/Field/index.vue
+++ b/src/components/ADempiere/Field/index.vue
@@ -34,10 +34,10 @@
       <el-form-item>
         <template slot="label">
           <el-dropdown
+            v-if="isMobile"
             size="mini"
             :hide-on-click="true"
             trigger="click"
-            :split-button="true"
             :style="isMobile ? 'text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width:'+labelStyle+'%' : ''"
             @command="handleCommand"
             @click="false"
@@ -110,6 +110,73 @@
               </template>
             </el-dropdown-menu>
           </el-dropdown>
+          <el-menu v-else class="el-menu-demo" mode="horizontal" :unique-opened="true" style="z-index: 0" :menu-trigger="triggerMenu" @open="handleOpen" @close="handleClose" @select="handleSelect">
+            <el-submenu index="menu">
+              <template slot="title">
+                <div :style="isMobile ? 'display: flex;width: auto;' : 'display: block;'">
+                  <span :style="isMandatory && isEmptyValue(valueField) ? 'border: aqua; color: #f34b4b' : 'border: aqua;'">
+                    <span key="is-field-name">
+                      {{ field.name }}
+                    </span>
+                  </span>
+                </div>
+              </template>
+              <el-menu-item
+                v-for="(option, key) in listOption"
+                :key="key"
+                :index="option.name"
+              >
+                <el-popover
+                  v-if="!isMobile"
+                  placement="top"
+                  width="400"
+                  trigger="click"
+                  style="padding: 0px;"
+                  :hide="visibleForDesktop"
+                >
+                  <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;" />
+                      </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-button>
+                </el-popover>
+                <div v-if="false" 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-menu-item>
+            </el-submenu>
+          </el-menu>
         </template>
         <component
           :is="componentRender"
@@ -174,7 +241,8 @@ export default {
   data() {
     return {
       field: {},
-      visibleForDesktop: false
+      visibleForDesktop: false,
+      triggerMenu: 'click'
     }
   },
   computed: {
@@ -185,7 +253,7 @@ export default {
       } else if (this.field.name.length >= 20) {
         return '50'
       }
-      return '90'
+      return '110'
     },
     isMobile() {
       return this.$store.state.app.device === 'mobile'
@@ -499,6 +567,9 @@ export default {
         }
       ]
     },
+    listOption() {
+      return this.optionField.filter(option => option.enabled)
+    },
     permissionRoutes() {
       return this.$store.getters.permission_routes
     },
@@ -541,6 +612,27 @@ export default {
   },
   methods: {
     recursiveTreeSearch,
+    handleOpen(key, keyPath) {
+      this.triggerMenu = 'hover'
+    },
+    handleClose(key, keyPath) {
+      this.triggerMenu = 'click'
+    },
+    handleSelect(key, keyPath) {
+      const option = this.listOption.find(option => option.name === key)
+      if (option.name === this.$t('table.ProcessActivity.zoomIn')) {
+        this.redirect({ window: option.fieldAttributes.reference.zoomWindows[0] })
+        return
+      }
+      if (this.isMobile) {
+        this.$store.commit('changeShowRigthPanel', true)
+      } else {
+        this.visibleForDesktop = true
+      }
+      this.$store.commit('changeShowPopoverField', true)
+      this.$store.dispatch('setOptionField', option)
+      this.triggerMenu = 'hover'
+    },
     focusField() {
       if (this.field.handleRequestFocus || (this.field.displayed && !this.field.readonly)) {
         this.$refs[this.field.columnName].requestFocus()
@@ -596,48 +688,27 @@ export default {
 }
 </style>
 <style>
-.el-button--mini {
-  font-size: 14px;
-  color: #606266 !important;
-  font-weight: 605!important;
-  border: 0;
-  padding-top: 7px;
-  padding-right: 0px;
-  padding-bottom: 7px;
-  padding-left: 15px;
-}
-.el-button:hover, .el-button:focus {
-  color: #606266;
-  cursor: auto;
-}
-.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;
-}
-.el-textarea {
+  .el-popper {
+    padding: 0px;
+  }
+  .el-textarea {
     position: relative;
     width: 100%;
     vertical-align: bottom;
     font-size: 14px;
     display: flex;
-}
+  }
+  .el-menu--horizontal > .el-submenu .el-submenu__title {
+    height: 60px;
+    line-height: 60px;
+    border-bottom: 2px solid transparent;
+    color: #535457e3;
+  }
 </style>
 <style scoped>
+  .el-menu.el-menu--horizontal {
+    border-bottom: solid 0px #E6E6E6;
+  }
   .svg-icon {
     width: 1em;
     height: 1.5em;