fix: Fields options popover style. (#1317)

* fix: Fields options popover style. * rename fields options. * fix lang and composition api.
adempiere · Nov 2, 2021 · 4169daa · 4169daa
1 parent c78a270
commit 4169daa
Show file tree

Hide file tree

Showing 19 changed files with 429 additions and 298 deletions.
diff --git a/src/components/ADempiere/Field/FieldOptions/CalculatorField/index.vue b/src/components/ADempiere/Field/FieldOptions/CalculatorField/index.vue
@@ -17,8 +17,8 @@
 -->
 
 <template>
-  <el-card class="box-card calculator-option">
-    <div slot="header" class="clearfix">
+  <el-card class="field-option-card calculator-option">
+    <div slot="header">
       <span>
         {{ $t('fieldOptions.field') }}:
         <b> {{ fieldAttributes.name }} </b>
@@ -379,6 +379,8 @@ export default {
 }
 </script>
 
+<style lang="scss" src="../common-style.scss">
+</style>
 <style lang="scss">
 .calculator-option {
   .el-card__header {

diff --git a/...e/Field/FieldOptions/changeLogs/index.vue → ...e/Field/FieldOptions/ChangeLogs/index.vue b/...e/Field/FieldOptions/changeLogs/index.vue → ...e/Field/FieldOptions/ChangeLogs/index.vue
@@ -15,14 +15,16 @@
  You should have received a copy of the GNU General Public License
  along with this program.  If not, see <https:www.gnu.org/licenses/>.
 -->
+
 <template>
-  <el-card class="box-card">
-    <div slot="header" class="clearfix">
+  <el-card class="field-option-card change-log">
+    <div slot="header">
       <span>
         {{ $t('field.logsField') }}
         <b> {{ fieldAttributes.name }} </b>
       </span>
     </div>
+
     <div>
       <el-scrollbar v-if="!isEmptyValue(listLogsField)" :wrap-class="classIsMobilePanel">
         <el-timeline>
@@ -79,7 +81,8 @@
 <script>
 
 export default {
-  name: 'FieldChangeLogs',
+  name: 'ChangeLogsField',
+
   props: {
     fieldAttributes: {
       type: Object,
@@ -90,13 +93,15 @@ export default {
       default: undefined
     }
   },
+
   data() {
     return {
       isLoading: false,
       currentKey: 0,
       typeAction: 0
     }
   },
+
   computed: {
     language() {
       return this.$store.getters.language
@@ -133,6 +138,7 @@ export default {
       return 'scroll-child'
     }
   },
+
   methods: {
     sortSequence(itemA, itemB) {
       return new Date().setTime(new Date(itemB.logDate).getTime()) - new Date().setTime(new Date(itemA.logDate).getTime())
@@ -149,9 +155,12 @@ export default {
       }
     }
   }
+
 }
 </script>
 
+<style lang="scss" src="../common-style.scss">
+</style>
 <style lang="scss" scoped>
   .custom-tittle-popover {
     font-size: 14px;

diff --git a/src/components/ADempiere/Field/FieldOptions/ContextInfo/index.vue b/src/components/ADempiere/Field/FieldOptions/ContextInfo/index.vue
@@ -17,52 +17,65 @@
 -->
 
 <template>
-  <div>
-    <el-card class="box-card" style="padding: 1%;">
-      <div slot="header" class="clearfix">
-        <span>
-          {{ $t('field.field') }}
-          <b> {{ fieldAttributes.name }} </b>
-        </span>
-      </div>
-      <el-scrollbar wrap-class="scroll-child">
-        <el-form
-          ref="form"
-          label-position="top"
-          label-width="120px"
-          style="overflow: auto;"
-          @submit.native.prevent="notSubmitForm"
+  <el-card class="field-option-card context-info">
+    <div slot="header">
+      <span>
+        {{ $t('field.field') }}
+        <b> {{ fieldAttributes.name }} </b>
+      </span>
+    </div>
+
+    <el-scrollbar wrap-class="scroll-child">
+      <el-form
+        ref="form"
+        class="form-context-info"
+        label-position="top"
+        label-width="120px"
+        style="overflow: auto;"
+        @submit.native.prevent="notSubmitForm"
+      >
+        <el-form-item
+          v-if="!isEmptyValue(messageText)"
+          :label="$t('field.contextInfo')"
+          class="justify-text"
         >
-          <el-form-item v-if="!isEmptyValue(messageText)" :label="$t('field.contextInfo')">
-            {{ messageText }}
-          </el-form-item>
-
-          <el-form-item :label="$t('field.container.description')">
-            {{ fieldAttributes.description }}
-          </el-form-item>
-
-          <el-form-item :label="$t('field.container.help')" style="word-break: normal">
-            {{ fieldAttributes.help }}
-          </el-form-item>
-        </el-form>
-      </el-scrollbar>
-
-      <template v-for="(zoomItem, index) in fieldAttributes.reference.zoomWindows">
-        <el-button
-          :key="index"
-          type="text"
-          @click="redirect({ window: zoomItem })"
+          {{ messageText }}
+        </el-form-item>
+
+        <el-form-item
+          :label="$t('field.container.description')"
+          class="justify-text"
+        >
+          {{ fieldAttributes.description }}
+        </el-form-item>
+
+        <el-form-item
+          v-if="!isEmptyValue(fieldAttributes.help)"
+          :label="$t('field.container.help')"
+          class="justify-text"
         >
-          {{ $t('table.ProcessActivity.zoomIn') }}
-          {{ zoomItem.name }}
-        </el-button>
-      </template>
-    </el-card>
-  </div>
+          {{ fieldAttributes.help }}
+        </el-form-item>
+      </el-form>
+    </el-scrollbar>
+
+    <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-card>
 </template>
 
 <script>
 import { defineComponent, computed } from '@vue/composition-api'
+
+// utils and helper methods
 import { zoomIn } from '@/utils/ADempiere/coreUtils.js'
 import { parseContext } from '@/utils/ADempiere/contextUtils'
 
@@ -96,11 +109,6 @@ export default defineComponent({
       return ''
     })
 
-    function notSubmitForm(event) {
-      event.preventDefault()
-      return false
-    }
-
     function redirect({ window }) {
       const { columnName } = props.fieldAttributes
 
@@ -147,9 +155,30 @@ export default defineComponent({
       // computeds
       messageText,
       // methods
-      notSubmitForm,
       redirect
     }
   }
 })
 </script>
+
+<style lang="scss" src="../common-style.scss">
+</style>
+<style lang="scss">
+.context-info {
+  &.el-card {
+    max-width: 300px;
+
+    .form-context-info {
+      .el-form-item {
+        // spacing between form items
+        padding-bottom: 10px;
+
+        .el-form-item__content {
+          // text content interline
+          line-height: 20px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/...eld/FieldOptions/documentStatus/index.vue → ...eld/FieldOptions/DocumentStatus/index.vue b/...eld/FieldOptions/documentStatus/index.vue → ...eld/FieldOptions/DocumentStatus/index.vue
@@ -15,6 +15,7 @@
  You should have received a copy of the GNU General Public License
  along with this program.  If not, see <https:www.gnu.org/licenses/>.
 -->
+
 <template>
   <el-popover
     v-if="(fieldAttributes.columnName === 'DocStatus') && (!isEmptyValue(processOrderUuid))"
@@ -59,7 +60,7 @@
 
 <script>
 export default {
-  name: 'FieldDocumentStatus',
+  name: 'DocumentStatusField',
 
   props: {
     fieldAttributes: {
@@ -159,5 +160,6 @@ export default {
       this.valueActionDocument = ''
     }
   }
+
 }
 </script>
diff --git a/src/components/ADempiere/Field/FieldOptions/LabelField.vue b/src/components/ADempiere/Field/FieldOptions/LabelField.vue
@@ -24,22 +24,25 @@ export default defineComponent({
     label: {
       type: String,
       default: ''
-    },
-    isMobile: {
-      type: Boolean,
-      default: false
     }
   },
 
-  setup(props) {
+  setup(props, { root }) {
+    const isMobile = computed(() => {
+      return root.$store.state.app.device === 'mobile'
+    })
+
     const labelStyle = computed(() => {
-      let displayStyle
-      props.isMobile ? displayStyle = 'display: flex; width: auto;' : 'display: block;'
+      let displayStyle = 'display: block;'
+      if (isMobile.value) {
+        displayStyle = 'display: flex; width: auto;'
+      }
+
       return displayStyle + ' margin-left: 3px;'
     })
 
     const iconStyle = computed(() => {
-      if (props.isMobile) {
+      if (isMobile.value) {
         return 'margin-left: 5px; margin-top: 7px;'
       }
       return 'margin-left: -5px; padding-bottom: 6px;'

diff --git a/src/components/ADempiere/Field/FieldOptions/LabelPopoverOption.vue b/src/components/ADempiere/Field/FieldOptions/LabelPopoverOption.vue
@@ -1,7 +1,16 @@
 <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" />
+  <div class="label-popover-option" :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 }}
@@ -11,7 +20,11 @@
 </template>
 
 <script>
-export default {
+import { defineComponent, computed } from '@vue/composition-api'
+
+export default defineComponent({
+  name: 'LabelPopoverOption',
+
   props: {
     option: {
       type: Object,
@@ -22,29 +35,44 @@ export default {
       default: false
     }
   },
-  computed: {
-    iconWrapperStyle() {
-      if (this.isMobile) {
-        return { 'margin-right': '6px' }
+
+  setup(props) {
+    const iconWrapperStyle = computed(() => {
+      if (props.isMobile) {
+        return {
+          'margin-right': '6px'
+        }
       }
       return {
         'margin-left': '5px',
         'margin-right': '13px'
       }
-    },
-    textStyle() {
-      if (!this.isMobile) {
-        return ''
+    })
+
+    const textStyle = computed(() => {
+      if (props.isMobile) {
+        return {
+          'font-size': '130%',
+          'margin': '7px'
+        }
       }
-      return { 'font-size': '130%', 'margin': '7px' }
+      return ''
+    })
+
+    return {
+      iconWrapperStyle,
+      textStyle
     }
   }
-}
+
+})
 </script>
 
-<style >
-.svg-icon-wrapper {
+<style lang="scss">
+.label-popover-option {
+  .svg-icon-wrapper {
     margin-left: 5px;
     margin-right: 13px;
+  }
 }
 </style>
diff --git a/...FieldOptions/operatorComparison/index.vue → ...FieldOptions/OperatorComparison/index.vue b/...FieldOptions/operatorComparison/index.vue → ...FieldOptions/OperatorComparison/index.vue
@@ -40,7 +40,7 @@
 import { computed, defineComponent, ref } from '@vue/composition-api'
 
 export default defineComponent({
-  name: 'FieldOperatorComparison',
+  name: 'OperatorComparisonField',
 
   props: {
     fieldAttributes: {