From 0b0d6a5f0059b7d39304c531e2a0345773734d9b Mon Sep 17 00:00:00 2001
From: Sofia Calderon <54033498+sofia-ester-calderon@users.noreply.github.com>
Date: Sat, 12 Jun 2021 07:19:30 +1000
Subject: [PATCH] Inserted line breaks in side menu (#915)

* 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

* inserted line breaks in side menu
---
 src/components/ADempiere/Field/index.vue |  1 -
 src/layout/components/Sidebar/Item.vue   | 43 +++++++++++++-----------
 src/styles/sidebar.scss                  |  9 +++++
 3 files changed, 33 insertions(+), 20 deletions(-)

diff --git a/src/components/ADempiere/Field/index.vue b/src/components/ADempiere/Field/index.vue
index 7441bf85..46a2524d 100644
--- a/src/components/ADempiere/Field/index.vue
+++ b/src/components/ADempiere/Field/index.vue
@@ -61,7 +61,6 @@
 </template>
 
 <script>
-import { DEFAULT_SIZE } from '@/utils/ADempiere/references'
 import { evalutateTypeField, fieldIsDisplayed } from '@/utils/ADempiere/dictionaryUtils'
 import FieldOptions from '@/components/ADempiere/Field/FieldOptions'
 
diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
index aa1f5da4..83623a98 100644
--- a/src/layout/components/Sidebar/Item.vue
+++ b/src/layout/components/Sidebar/Item.vue
@@ -1,7 +1,19 @@
+<template>
+  <el-row class="item-wrapper">
+    <el-col :span="3">
+      <i v-if="icon.includes('el-icon')" class="icon sub-el-icon" />
+      <svg-icon v-else :icon-class="icon" />
+    </el-col>
+    <el-col :span="21">
+
+      <p class="item-title">{{ title }}</p>
+    </el-col>
+  </el-row>
+</template>
+
 <script>
 export default {
   name: 'MenuItem',
-  functional: true,
   props: {
     icon: {
       type: String,
@@ -11,31 +23,24 @@ export default {
       type: String,
       default: ''
     }
-  },
-  render(h, context) {
-    const { icon, title } = context.props
-    const vnodes = []
-
-    if (icon) {
-      if (icon.includes('el-icon')) {
-        vnodes.push(<i class={[icon, 'sub-el-icon']} />)
-      } else {
-        vnodes.push(<svg-icon icon-class={icon}/>)
-      }
-    }
-
-    if (title) {
-      vnodes.push(<span slot='title'>{(title)}</span>)
-    }
-    return vnodes
   }
 }
 </script>
 
 <style scoped>
 .sub-el-icon {
-  color: currentColor;
   width: 1em;
   height: 1em;
 }
+
+.item-wrapper {
+  white-space: break-spaces;
+  line-height: 20px;
+  height: auto;
+  margin: 18px 23px 18px 0;
+}
+
+.item-title {
+  margin: 0 0 0 7px;
+}
 </style>
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 450d8b97..a4bf260f 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -68,6 +68,15 @@
       width: 100% !important;
     }
 
+    .el-menu-item {
+      height: auto !important;
+      padding: 0;
+    }
+
+    .el-submenu__title {
+      height: auto !important;
+    }
+
     // menu hover
     .submenu-title-noDropdown,
     .el-submenu__title {