Styling fixes for menu cards (#863)

* changed hover styling of card

* improved styling of menu cards

* other minor styling improvements in cards layout

src/components/ADempiere/DropdownMenu/index.vue

@@ -16,54 +16,33 @@
  along with this program.  If not, see <https:www.gnu.org/licenses/>.
 -->
 <template>
-  <el-col v-if="!isEmptyValue(items.children)" key="is-desktop-dropdown" :span="24">
-    <el-collapse v-model="activeNames">
+  <el-col
+    v-if="!isEmptyValue(items.children)"
+    key="is-desktop-dropdown"
+    :span="24"
+  >
+    <el-collapse v-model="activeNames" class="collapse-wrapper">
       <el-collapse-item :title="title" name="1" class="collapse-item">
         <el-row justify="space-around">
-          <template v-for="(item, index) in items.children">
+          <template v-for="(childItems, index) in items.children">
             <el-col :key="index" :span="isMobile">
-              <el-card
-                :key="index"
-                shadow="never"
-                class="custom-card"
-                :body-style="{ padding: '10px', height: '100px' }"
-                @click.native="redirect(item)"
-              >
-                <div class="icon-wrapper">
-                  <svg-icon :icon-class="item.meta.icon" />
-                </div>
-                <div class="text-wrapper">
-                  <b>{{ item.meta.title }}</b>
-                  <p class="three-dots">{{ item.meta.description }}</p>
-                </div>
-              </el-card>
+              <menu-card :items="childItems" size="small" />
             </el-col>
           </template>
         </el-row>
       </el-collapse-item>
     </el-collapse>
   </el-col>
-  <el-col v-else key="is-mobile-dropdown" :span="isMobile">
-    <el-card
-      shadow="never"
-      class="custom-card"
-      :body-style="{ padding: '10px', height: '100px' }"
-      @click.native="redirect(items)"
-    >
-      <div class="icon-wrapper">
-        <svg-icon :icon-class="items.meta.icon" />
-      </div>
-      <div class="text-wrapper">
-        <b>{{ items.meta.title }}</b>
-        <p>{{ items.meta.description }}</p>
-      </div>
-    </el-card>
+  <el-col v-else key="is-mobile-dropdown" :span="isMobile" class="column">
+    <menu-card :items="items" size="medium" />
   </el-col>
 </template>
 
 <script>
+import menuCard from './menuCard.vue'
 export default {
   name: 'DropdownMenu',
+  components: { menuCard },
   props: {
     items: {
       type: Object,
@@ -91,102 +70,22 @@ export default {
       }
       return 8
     }
-  },
-  methods: {
-    redirect(item) {
-      this.openItemMenu(item)
-
-      let tabParent
-      if (item.meta && item.meta.type === 'window') {
-        tabParent = 0
-      }
-
-      this.$router.push({
-        name: item.name,
-        query: {
-          ...this.$router.query,
-          tabParent
-        },
-        params: {
-          ...this.$router.params,
-          childs: item.children
-        }
-      }, () => {})
-    },
-    /**
-     * Clear field values, and set default values with open
-     * @param view router item with meta attributes
-     */
-    openItemMenu(view) {
-      if (view.meta && view.meta.uuid && view.meta.type) {
-        const {
-          parentUuid,
-          uuid: containerUuid,
-          type: panelType
-        } = view.meta
-
-        if (panelType !== 'window') {
-          this.$store.dispatch('setDefaultValues', {
-            parentUuid,
-            containerUuid,
-            panelType,
-            isNewRecord: false
-          })
-
-          if (['browser'].includes(panelType)) {
-            this.$store.dispatch('deleteRecordContainer', {
-              viewUuid: containerUuid
-            })
-          }
-        }
-      }
-    }
   }
 }
 </script>
 
 <style lang="scss">
-  .custom-card {
-    margin: 10px;
-    cursor: pointer;
-  }
-  .icon-wrapper {
-    height: 100%;
-    width: 20%;
-    float: left;
-    font-size: 30px;
-    line-height: 65px;
-    padding: 6px;
-    transition: all 0.38s ease-out;
-    border-radius: 6px;
+
+.collapse-item {
+  .el-collapse-item__header {
+    height: 60px;
+    font-weight: bold;
+    font-size: 16px;
     text-align: center;
-    color: #36a3f7;
-  }
-  .custom-card:hover {
-    .icon-wrapper {
-      color: #fff;
-      background: #36a3f7;
-    }
-  }
-  .text-wrapper {
-    margin-left: 50px;
-    padding-left: 15px;
-    vertical-align: middle;
-    height: 100%;
-    font-size: 13px;
-  }
-  .collapse-item {
-    .el-collapse-item__header {
-      height: 60px;
-      font-weight: bold;
-      font-size: 16px;
-      text-align: center;
-    }
-  }
-  .three-dots{
-    margin-top: 0 !important;
-    overflow: hidden;
-    white-space: normal;
-    text-overflow: ellipsis;
+    margin-left: 16px;
   }
+}
+.collapse-wrapper {
+  margin: 20px 0 30px 0;
+}
 </style>

src/components/ADempiere/DropdownMenu/menuCard.vue

@@ -0,0 +1,145 @@
+<template>
+  <div class="card-wrapper">
+    <el-card
+      shadow="never"
+      class="custom-card"
+      :body-style="{ padding: '10px', height: '100px' }"
+      @click.native="redirect(items)"
+    >
+      <div class="icon-wrapper">
+        <svg-icon :icon-class="items.meta.icon" />
+      </div>
+      <div class="text-wrapper">
+        <div :class="titleClass"><b>{{ items.meta.title }}</b></div>
+        <div :class="[mediumSize ? 'description-medium': '']">{{ items.meta.description }}</div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { isEmptyValue } from '@/utils/ADempiere'
+export default {
+  props: {
+    items: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    size: {
+      type: String,
+      default: 'medium'
+    }
+  },
+  computed: {
+    mediumSize() {
+      return this.size === 'medium'
+    },
+    titleClass() {
+      if (!isEmptyValue(this.items.meta.description)) {
+        return ''
+      }
+      return this.mediumSize ? 'title-medium' : 'title-small'
+    }
+  },
+  methods: {
+    redirect(item) {
+      console.log(item)
+      this.openItemMenu(item)
+
+      let tabParent
+      if (item.meta && item.meta.type === 'window') {
+        tabParent = 0
+      }
+
+      this.$router.push({
+        name: item.name,
+        query: {
+          ...this.$router.query,
+          tabParent
+        },
+        params: {
+          ...this.$router.params,
+          childs: item.children
+        }
+      }, () => {})
+    },
+    /**
+     * Clear field values, and set default values with open
+     * @param view router item with meta attributes
+     */
+    openItemMenu(view) {
+      if (view.meta && view.meta.uuid && view.meta.type) {
+        const {
+          parentUuid,
+          uuid: containerUuid,
+          type: panelType
+        } = view.meta
+
+        if (panelType !== 'window') {
+          this.$store.dispatch('setDefaultValues', {
+            parentUuid,
+            containerUuid,
+            panelType,
+            isNewRecord: false
+          })
+
+          if (['browser'].includes(panelType)) {
+            this.$store.dispatch('deleteRecordContainer', {
+              viewUuid: containerUuid
+            })
+          }
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.card-wrapper {
+    height: 120px;
+}
+
+  .custom-card {
+    margin: 10px;
+    cursor: pointer;
+  }
+
+  .icon-wrapper {
+    height: 100%;
+    width: 20%;
+    float: left;
+    font-size: 30px;
+    line-height: 65px;
+    padding: 6px;
+    transition: all 0.38s ease-out;
+    border-radius: 6px;
+    text-align: center;
+    color: #36a3f7;
+  }
+  .custom-card:hover {
+    background-color: #eaf5fe;
+    border: 1px solid #36a3f7;
+  }
+  .text-wrapper {
+    margin: 6px 0 0 50px;
+    padding-left: 15px;
+    vertical-align: middle;
+    height: 100%;
+    font-size: 13px;
+  }
+
+  .description-medium {
+      margin-top: 14px;
+  }
+
+  .title-small {
+          margin-top: 28px;
+  }
+
+  .title-medium {
+          margin-top: 33px;
+  }
+</style>