fix: Calculator popover style. (#547)

* fix: Calculator popover style.

* fixed global styles in common table.

Co-authored-by: EdwinBetanc0urt <EdwinBetanco0urt@outlook.com>

src/components/ADempiere/Field/popover/calculator/buttons.js

@@ -0,0 +1,112 @@
+export default [
+  {
+    row1: {
+      type: 'operator',
+      value: '%'
+    },
+    row2: {
+      type: 'operator',
+      value: '/'
+    },
+    row3: {
+      type: 'operator',
+      value: '*'
+    },
+    row4: {
+      type: 'operator',
+      value: '−'
+    },
+    row5: {
+      type: 'clear',
+      value: 'C'
+    }
+  },
+  {
+    row1: {
+      type: 'value',
+      value: '7'
+    },
+    row2: {
+      type: 'value',
+      value: '8'
+    },
+    row3: {
+      type: 'value',
+      value: '9'
+    },
+    row4: {
+      type: 'operator',
+      value: '+'
+    },
+    row5: {
+      type: 'clear',
+      value: 'AC'
+    }
+  },
+  {
+    row1: {
+      type: 'value',
+      value: '4'
+    },
+    row2: {
+      type: 'value',
+      value: '5'
+    },
+    row3: {
+      type: 'value',
+      value: '7'
+    },
+    row4: {
+      type: 'operator',
+      value: '('
+    },
+    row5: {
+      type: undefined,
+      value: undefined
+    }
+  },
+  {
+    row1: {
+      type: 'value',
+      value: '1'
+    },
+    row2: {
+      type: 'value',
+      value: '2'
+    },
+    row3: {
+      type: 'value',
+      value: '3'
+    },
+    row4: {
+      type: 'result',
+      value: '='
+    },
+    row5: {
+      type: 'operator',
+      value: ')'
+    }
+  },
+  {
+    row1: {
+      type: 'value',
+      value: '0'
+    },
+    row2: {
+      type: 'operator',
+      value: '.'
+    },
+    row3: {
+      type: 'operator',
+      value: '+/-'
+    },
+    row4: {
+      type: undefined,
+      value: undefined
+    },
+    row5: {
+      type: undefined,
+      value: undefined
+    }
+  }
+]

src/components/ADempiere/Field/popover/calculator/index.vue

@@ -3,74 +3,93 @@
     <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="calc-input"
+        class="calculator-input"
+        size="mini"
+        readonly
         @keydown.native="calculateValue"
         @keyup.enter.native="changeValue"
       >
-        <template slot="append">{{ valueToDisplay }}</template>
+        <!--
+        <template slot="append">
+          {{ valueToDisplay }}
+        </template>
+        -->
       </el-input>
+
       <el-table
         ref="calculator"
         :data="tableData"
         style="width: 100%"
         border
+        size="mini"
         :show-header="false"
         :span-method="spanMethod"
-        class="calc-table"
+        class="calculator-table"
         @cell-click="sendValue"
       >
         <el-table-column
           align="center"
           prop="row1"
-          height="50"
+          height="15"
-          width="50"
+          width="35"
         >
           <template slot-scope="{ row, column }">
-            <el-button type="text" :disabled="isDisabled(row, column)">{{ row.row1.value }}</el-button>
+            <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="50"
+          height="15"
-          width="50"
+          width="35"
         >
           <template slot-scope="{ row, column }">
-            <el-button type="text" :disabled="isDisabled(row, column)">{{ row.row2.value }}</el-button>
+            <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="50"
+          height="15"
-          width="50"
+          width="35"
         >
           <template slot-scope="{ row, column }">
-            <el-button type="text" :disabled="isDisabled(row, column)">{{ row.row3.value }}</el-button>
+            <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="50"
+          height="15"
-          width="50"
+          width="35"
         >
           <template slot-scope="{ row, column }">
-            <el-button type="text" :disabled="isDisabled(row, column)">{{ row.row4.value }}</el-button>
+            <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="50"
+          height="15"
-          width="50"
+          width="35"
         >
           <template slot-scope="{ row, column }">
-            <el-button type="text" :disabled="isDisabled(row, column)">{{ row.row5.value }}</el-button>
+            <el-button type="text" :disabled="isDisabled(row, column)">
+              {{ row.row5.value }}
+            </el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -80,6 +99,7 @@
 
 <script>
 import { ID, INTEGER } from '@/utils/ADempiere/references'
+import buttons from './buttons.js'
 
 export default {
   name: 'FieldCalc',
@@ -96,113 +116,12 @@ export default {
   data() {
     return {
       calcValue: this.fieldValue,
-      valueToDisplay: '',
+      valueToDisplay: ''
-      tableData: [{
-        row1: {
-          type: 'operator',
-          value: '%'
-        },
-        row2: {
-          type: 'operator',
-          value: '/'
-        },
-        row3: {
-          type: 'operator',
-          value: '*'
-        },
-        row4: {
-          type: 'operator',
-          value: '-'
-        },
-        row5: {
-          type: 'clear',
-          value: 'C'
     }
-      }, {
-        row1: {
-          type: 'value',
-          value: '7'
   },
-        row2: {
+  computed: {
-          type: 'value',
+    tableData() {
-          value: '8'
+      return buttons
-        },
-        row3: {
-          type: 'value',
-          value: '9'
-        },
-        row4: {
-          type: 'operator',
-          value: '+'
-        },
-        row5: {
-          type: 'clear',
-          value: 'AC'
-        }
-      }, {
-        row1: {
-          type: 'value',
-          value: '4'
-        },
-        row2: {
-          type: 'value',
-          value: '5'
-        },
-        row3: {
-          type: 'value',
-          value: '7'
-        },
-        row4: {
-          type: 'operator',
-          value: '('
-        },
-        row5: {
-          type: undefined,
-          value: undefined
-        }
-      }, {
-        row1: {
-          type: 'value',
-          value: '1'
-        },
-        row2: {
-          type: 'value',
-          value: '2'
-        },
-        row3: {
-          type: 'value',
-          value: '3'
-        },
-        row4: {
-          type: 'result',
-          value: '='
-        },
-        row5: {
-          type: 'operator',
-          value: ')'
-        }
-      }, {
-        row1: {
-          type: 'value',
-          value: '0'
-        },
-        row2: {
-          type: 'operator',
-          value: '.'
-        },
-        row3: {
-          type: 'operator',
-          value: '+/-'
-        },
-        row4: {
-          type: undefined,
-          value: undefined
-        },
-        row5: {
-          type: undefined,
-          value: undefined
-        }
-      }]
     }
   },
   watch: {
@@ -212,9 +131,11 @@ export default {
   },
   methods: {
     sendValue(row, column) {
-      const isAcceptedType = ['result', 'clear'].includes(row[column.property].type)
+      const button = row[column.property]
+      const { value, type } = button
+      const isAcceptedType = ['result', 'clear'].includes(type)
       if (!isAcceptedType && !this.isDisabled(row, column)) {
-        this.isEmptyValue(this.calcValue) ? this.calcValue = row[column.property].value : this.calcValue += row[column.property].value
+        this.isEmptyValue(this.calcValue) ? this.calcValue = value : this.calcValue += value
         const result = this.calculationValue(this.calcValue, event)
         if (!this.isEmptyValue(result)) {
           this.valueToDisplay = result
@@ -222,15 +143,15 @@ export default {
           this.valueToDisplay = '...'
         }
       }
-      if (row[column.property].type === 'clear') {
+      if (type === 'clear') {
-        if (row[column.property].value === 'C') {
+        if (value === 'C') {
           this.calcValue = this.calcValue.slice(0, -1)
-        } else if (row[column.property].value === 'AC') {
+        } else if (value === 'AC') {
           this.calcValue = ''
           this.valueToDisplay = ''
         }
       }
-      if (row[column.property].value === '=') {
+      if (value === '=') {
         this.changeValue()
       }
     },
@@ -263,46 +184,37 @@ export default {
       //     this.$children[0].visible = false
       //   })
     },
-    spanMethod({ row, column, rowIndex, columnIndex }) {
+    spanMethod({ row, column }) {
-      if (rowIndex === 1) {
+      const button = row[column.property]
-        if (row[column.property].value === '+') {
+      const { value } = button
-          return {
+      if (this.isEmptyValue(value)) {
-            rowspan: 2,
-            colspan: 1
-          }
-        }
-      } else if (rowIndex === 2) {
-        if (this.isEmptyValue(row[column.property].value)) {
         return {
           rowspan: 0,
           colspan: 0
         }
       }
-      } else if (rowIndex === 3) {
+      if (['+', '='].includes(value)) {
-        if (row[column.property].value === '=') {
         return {
           rowspan: 2,
           colspan: 1
         }
       }
-      } else if (rowIndex === 4) {
+      if (value === '0') {
-        if (row[column.property].value === '0') {
         return {
           rowspan: 1,
           colspan: 2
         }
-        } else if (this.isEmptyValue(row[column.property].value)) {
+      }
+
       return {
-            rowspan: 0,
+        rowspan: 1,
-            colspan: 0
+        colspan: 1
-          }
-        }
       }
     },
     isDisabled(row, column) {
       // Integer or ID
       const isInteger = [ID.id, INTEGER.id].includes(this.fieldAttributes.displayType)
-      const value = row[column.property].value
+      const { value } = row[column.property]
       if (isInteger && value === ',') {
         return true
       }
@@ -322,16 +234,50 @@ export default {
   }
 }
 </script>
+
 <style>
+  .calculator-input > .el-input__inner,
+  .calculator-input .el-input__inner {
+    border-radius: 0px !important;
+  }
+
+  .calculator-input {
+    width: 202px;
+    font-size: 16px;
+    padding-left: 4px;
+  }
+
+  /* row color with hover */
 	.el-table--enable-row-hover .el-table__body tr:hover > td {
 		background-color: #ffffff !important;
 	}
-  .calc-table .el-table__body-wrapper > table {
+
+  .calculator-table .el-table__body-wrapper > table {
     border-spacing: 5px;
   }
-  .calc-table .el-table__body tr > td {
+
-    box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.5);
+  /* Button shadow and border */
+  .calculator-table .el-table__body tr > td {
+    box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.5);
     border-radius: 5px;
     cursor: pointer;
   }
+
+  .calculator-table th, .calculator-table td,
+  .calculator-table > th, .calculator-table > td {
+    padding: 0px !important;
+    height: 0px !important;
+    padding-left: 0px !important;
+  }
+
+  .calculator-table .el-table .cell {
+    padding-right: 5px !important;
+    padding-left: 5px !important;
+  }
+  .calculator-table .el-table > .cell, .calculator-table .el-table .cell {
+    padding-left: 0px !important;
+  }
+  .calculator-table .el-table th.is-leaf, .el-table td {
+    border-bottom: 0px solid #dfe6ec !important;
+  }
 </style>