Styling fixes (#909)

* changed hover styling of card

* improved styling of menu cards

* other minor styling improvements in cards layout

* Fields always have same size

* style fix active-inactive text in yes-no-field

* moved popover to own component

* refactored labelPopover

* added info icon to label

* truncated placeholder

* bugfix - added missing method back in

* set resizable in textareas to false

* style fix for context info

* fixes due to merge form develop

* reverted padding for context info box

src/components/ADempiere/Field/FieldDate.vue

@@ -23,7 +23,7 @@
     :value-format="formatSend"
     :type="typePicker"
     range-separator="-"
-    :placeholder="metadata.help"
+    :placeholder="metadata.placeholder"
     :start-placeholder="$t('components.dateStartPlaceholder')"
     :end-placeholder="$t('components.dateEndPlaceholder')"
     unlink-panels

src/components/ADempiere/Field/FieldLocator.vue

@@ -19,7 +19,7 @@
   <el-cascader
     :ref="metadata.columnName"
     :v-model="[value]"
-    :placeholder="metadata.help"
+    :placeholder="metadata.placeholder"
     :options="options"
     :readonly="Boolean(metadata.readonly)"
     :disabled="isDisabled"

src/components/ADempiere/Field/FieldNumber.vue

@@ -31,7 +31,7 @@
       type="number"
       :min="minValue"
       :max="maxValue"
-      :placeholder="metadata.help"
+      :placeholder="metadata.placeholder"
       :disabled="isDisabled"
       :precision="precision"
       :controls="isShowControls"
@@ -49,7 +49,7 @@
       key="number-displayed-blur"
       :ref="metadata.columnName"
       v-model="displayedValue"
-      :placeholder="metadata.help"
+      :placeholder="metadata.placeholder"
       :disabled="isDisabled"
       :class="cssClassStyle"
       readonly

src/components/ADempiere/Field/FieldOptions/LabelField.vue

@@ -0,0 +1,48 @@
+<template>
+  <div :style="labelStyle">
+    <span>
+      {{ label }}
+    </span>
+    <span v-if="isMandatory" :style="'color: #f34b4b'">*</span>
+    <i class="el-icon-info" :style="iconStyle" />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    isMandatory: {
+      type: Boolean,
+      default: false
+    },
+    label: {
+      type: String,
+      default: ''
+    },
+    isMobile: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    labelStyle() {
+      let displayStyle
+      this.isMobile ? displayStyle = 'display: flex;width: auto;' : 'display: block;'
+      return displayStyle + ' margin-left: 3px;'
+    },
+    iconStyle() {
+      if (this.isMobile) {
+        return 'margin-left: 5px; margin-top: 7px;'
+      }
+      return 'margin-left: -5px; padding-bottom: 6px;'
+    }
+  }
+}
+</script>
+<style scoped>
+.el-icon-info {
+    font-size: 11px;
+    color: #008fd3;
+}
+</style>
+

src/components/ADempiere/Field/FieldOptions/LabelPopoverOption.vue

@@ -0,0 +1,50 @@
+<template>
+  <div :style="textStyle">
+    <i v-if="!option.svg" :class="option.icon" style="font-weight: bolder;" />
+    <svg-icon v-else :icon-class="option.icon" :style="iconWrapperStyle" />
+    <span>
+      <b class="label">
+        {{ option.name }}
+      </b>
+    </span>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    option: {
+      type: Object,
+      default: () => ({})
+    },
+    isMobile: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    iconWrapperStyle() {
+      if (this.isMobile) {
+        return { 'margin-right': '6px' }
+      }
+      return {
+        'margin-left': '5px',
+        'margin-right': '13px'
+      }
+    },
+    textStyle() {
+      if (!this.isMobile) {
+        return ''
+      }
+      return { 'font-size': '130%', 'margin': '7px' }
+    }
+  }
+}
+</script>
+
+<style >
+.svg-icon-wrapper {
+    margin-left: 5px;
+    margin-right: 13px;
+}
+</style>

src/components/ADempiere/Field/FieldOptions/contextInfo/index.vue

@@ -32,7 +32,7 @@
           <el-form-item :label="$t('field.container.description')">
             {{ fieldAttributes.description }}
           </el-form-item>
-          <el-form-item :label="$t('field.container.help')">
+          <el-form-item :label="$t('field.container.help')" style="word-break: normal">
             {{ fieldAttributes.help }}
           </el-form-item>
         </el-form>

src/components/ADempiere/Field/FieldOptions/index.vue

@@ -28,14 +28,7 @@
       @command="handleCommand"
       @click="false"
     >
-      <div style="display: flex;width: auto;">
-        <span :style="metadata.required && isEmptyValue(valueField) ? 'border: aqua; color: #f34b4b' : 'border: aqua;'">
-          <span key="is-field-name">
-            <!-- label or name of field in mobile -->
-            {{ metadata.name }}
-          </span>
-        </span>
-      </div>
+      <label-field :is-mandatory="metadata.required && isEmptyValue(valueField)" :label="metadata.name" :is-mobile="true" />
       <el-dropdown-menu slot="dropdown">
         <template
           v-for="(option, key) in optionsList"
@@ -46,29 +39,7 @@
             :command="option"
             divided
           >
-            <div class="contents">
-              <div
-                v-if="option.svg"
-                key="icon-svg-mobile"
-                style="margin-right: 5%"
-              >
-                <svg-icon :icon-class="option.icon" style="margin-right: 5px;" />
-              </div>
-              <div
-                v-else
-                key="icon-mobile"
-                style="margin-right: 5%;padding-top: 3%;"
-              >
-                <i :class="option.icon" style="font-weight: bolder;" />
-              </div>
-              <div>
-                <span class="contents">
-                  <b class="label">
-                    {{ option.name }}
-                  </b>
-                </span>
-              </div>
-            </div>
+            <label-popover-option :option="option" :is-mobile="true" />
           </el-dropdown-item>
         </template>
       </el-dropdown-menu>
@@ -88,14 +59,7 @@
     >
       <el-submenu index="menu">
         <template slot="title">
-          <div style="display: block;">
-            <span :style="metadata.required && isEmptyValue(valueField) ? 'border: aqua; color: #f34b4b' : 'border: aqua;'">
-              <span key="is-field-name">
-                <!-- label or name of field in desktop -->
-                {{ metadata.name }}
-              </span>
-            </span>
-          </div>
+          <label-field :is-mandatory="metadata.required && isEmptyValue(valueField)" :label="metadata.name" />
         </template>
         <el-menu-item
           v-for="(option, key) in optionsList"
@@ -115,29 +79,7 @@
               :field-value="valueField"
             />
             <el-button slot="reference" type="text" style="color: #606266;">
-              <div class="contents">
-                <div
-                  v-if="option.svg"
-                  key="icon-svg-desktop"
-                  style="margin-right: 5%;; padding-left: 2%;"
-                >
-                  <svg-icon :icon-class="option.icon" style="margin-right: 5px;" />
-                </div>
-                <div
-                  v-else
-                  key="icon-desktop"
-                  style="margin-right: 5%;padding-top: 3%;"
-                >
-                  <i :class="option.icon" style="font-weight: bolder;" />
-                </div>
-                <div>
-                  <span class="contents">
-                    <b class="label">
-                      {{ option.name }}
-                    </b>
-                  </span>
-                </div>
-              </div>
+              <label-popover-option :option="option" />
             </el-button>
           </el-popover>
         </el-menu-item>
@@ -158,10 +100,16 @@ import {
   documentStatusOptionItem, translateOptionItem,
   zoomInOptionItem, calculatorOptionItem
 } from '@/components/ADempiere/Field/FieldOptions/fieldOptionsList.js'
+import LabelField from './LabelField.vue'
+import LabelPopoverOption from './LabelPopoverOption.vue'
 import { recursiveTreeSearch } from '@/utils/ADempiere/valueUtils.js'
 
 export default defineComponent({
   name: 'FieldOptions',
+  components: {
+    LabelField,
+    LabelPopoverOption
+  },
 
   props: {
     metadata: {

src/components/ADempiere/Field/FieldSelect.vue

@@ -20,7 +20,7 @@
     :ref="metadata.columnName"
     v-model="value"
     :filterable="!isMobile"
-    :placeholder="metadata.help"
+    :placeholder="metadata.placeholder"
     :loading="isLoading"
     value-key="id"
     :class="cssClassStyle"

src/components/ADempiere/Field/FieldSelectMultiple.vue

@@ -21,7 +21,7 @@
     multiple
     filterable
     allow-create
-    :placeholder="metadata.help"
+    :placeholder="metadata.placeholder"
     :class="'custom-field-select custom-field-select-multiple ' + metadata.cssClassName"
     @change="preHandleChange"
   >

src/components/ADempiere/Field/FieldText.vue

@@ -23,7 +23,7 @@
     :rows="rows"
     :class="cssClassStyle"
     :type="typeTextBox"
-    :placeholder="metadata.help"
+    :placeholder="metadata.placeholder"
     :readonly="Boolean(metadata.readonly)"
     :disabled="isDisabled"
     :maxlength="maxLength"
@@ -110,8 +110,11 @@ export default {
 }
 </script>
 
-<style scoped>
+<style>
   .custom-field-text {
     max-height: 34px;
   }
+  .el-textarea__inner {
+    resize: none !important;
+  }
 </style>

src/components/ADempiere/Field/FieldYesNo.vue

@@ -19,8 +19,7 @@
   <el-switch
     :ref="metadata.columnName"
     v-model="value"
-    :inactive-text="$t('components.switchInactiveText')"
-    :active-text="$t('components.switchActiveText')"
+    :active-text="value ? $t('components.switchActiveText') : $t('components.switchInactiveText')"
     :class="cssClassStyle"
     :true-value="true"
     :false-value="false"
@@ -66,6 +65,7 @@ export default {
       return convertStringToBoolean(value)
     },
     preHandleChange(value) {
+      this.metadata.value = value
       this.handleFieldChange({ value })
       if (!this.metadata.inTable && !this.metadata.isAdvancedQuery) {
         this.isReadOnlyForm(this.value)

src/components/ADempiere/Field/index.vue

@@ -24,11 +24,11 @@
     <el-col
       v-if="isDisplayed"
       key="is-panel-template"
-      :xs="sizeFieldResponsive.xs"
-      :sm="sizeFieldResponsive.sm"
-      :md="sizeFieldResponsive.md"
-      :lg="sizeFieldResponsive.lg"
-      :xl="sizeFieldResponsive.xl"
+      :xs="24"
+      :sm="12"
+      :md="8"
+      :lg="8"
+      :xl="8"
       :class="classField"
     >
       <el-form-item>
@@ -160,7 +160,6 @@ export default {
           break
       }
       return field
-      // return () => import(`@/components/ADempiere/Field/${this.field.componentPath}`)
     },
     fieldAttributes() {
       return {
@@ -173,7 +172,8 @@ export default {
         readonly: this.isReadOnly,
         displayed: this.isDisplayed,
         disabled: !this.field.isActive,
-        isSelectCreated: this.isSelectCreated
+        isSelectCreated: this.isSelectCreated,
+        placeholder: this.field.help ? this.field.help.slice(0, 40) + '...' : ''
       }
     },
     isDisplayed() {
@@ -269,75 +269,6 @@ export default {
       }
       return ''
     },
-    sizeFieldResponsive() {
-      if (!this.isDisplayed) {
-        return DEFAULT_SIZE
-      }
-
-      let sizeField = {}
-      if (this.field.size) {
-        // set field size property
-        sizeField = this.field.size
-      }
-      if (this.isEmptyValue(sizeField)) {
-        // set default size
-        sizeField = DEFAULT_SIZE
-      }
-
-      const newSizes = {}
-
-      // in table set max width, used by browser result and tab children of window
-      if (this.inTable) {
-        newSizes.xs = 24
-        newSizes.sm = 24
-        newSizes.md = 24
-        newSizes.lg = 24
-        newSizes.xl = 24
-        return newSizes
-      }
-      if (this.isAdvancedQuery) {
-        newSizes.xs = 24
-        newSizes.sm = 24
-        newSizes.md = 12
-        newSizes.lg = 12
-        newSizes.xl = 12
-        return newSizes
-      }
-
-      if (this.isPanelWindow) {
-        // TODO: Add FieldYesNo and name.length > 12 || 14
-        if (this.field.componentPath === 'FieldTextLong') {
-          return sizeField
-        }
-        // two columns if is mobile or desktop and show record navigation
-        if (this.getWidth <= 768 || (this.getWidth >= 768 && this.field.isShowedRecordNavigation)) {
-          newSizes.xs = 12
-          newSizes.sm = 12
-          newSizes.md = 12
-          newSizes.lg = 12
-          newSizes.xl = 12
-          return newSizes
-        } else if (this.inGroup && this.getWidth >= 992) {
-          newSizes.xs = sizeField.xs
-          newSizes.sm = sizeField.sm * 2
-          if (this.getWidth <= 1199) {
-            newSizes.md = sizeField.md
-          } else {
-            newSizes.md = sizeField.md * 2
-          }
-          if (this.field.groupAssigned !== '') {
-            newSizes.lg = sizeField.lg * 2
-            newSizes.xl = sizeField.xl * 2
-          } else {
-            newSizes.lg = sizeField.lg
-            newSizes.xl = sizeField.xl
-          }
-          return newSizes
-        }
-        return sizeField
-      }
-      return sizeField
-    }
   },
   watch: {
     metadataField(value) {
@@ -382,6 +313,7 @@ export default {
   .el-form-item {
     margin-bottom: 10px !important;
     margin-left: 10px;
+    // this.field.isShowedRecordNavigation
     margin-right: 10px;
   }
 
@@ -425,4 +357,10 @@ export default {
   .pre-formatted {
     white-space: pre;
   }
+  .el-submenu__title {
+    padding: 0;
+  }
+  .el-submenu .el-submenu__icon-arrow  {
+    visibility: hidden;
+  }
 </style>