From f5cdbfa6206c5f20eb76485855cc40af8cf20787 Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchamp.faris@gmail.com>
Date: Mon, 16 Jul 2018 16:50:24 +0530
Subject: [PATCH] Minor UI Fixes

- Remove top border from Navbar
- Link dropdown in Child Table
- Form Modal
---
 ui/components/Form/Form.vue        | 20 ++++++++++----------
 ui/components/Form/FormActions.vue |  2 +-
 ui/components/Modal/Modal.vue      | 13 ++++++++++---
 ui/components/ModelTable.vue       |  8 ++++++++
 ui/components/Navbar.vue           |  2 +-
 ui/plugins/formModal.js            |  3 +--
 6 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/ui/components/Form/Form.vue b/ui/components/Form/Form.vue
index 180201a8..4307fb3d 100644
--- a/ui/components/Form/Form.vue
+++ b/ui/components/Form/Form.vue
@@ -1,6 +1,7 @@
 <template>
     <div class="frappe-form">
         <form-actions
+          class="p-3 border-bottom"
           v-if="shouldRenderForm"
           :doc="doc"
           :links="links"
@@ -8,15 +9,14 @@
           @submit="submit"
           @revert="revert"
         />
-        <div class="p-3">
-          <form-layout
-            v-if="shouldRenderForm"
-            :doc="doc"
-            :fields="meta.fields"
-            :layout="meta.layout"
-            :invalid="invalid"
-          />
-        </div>
+        <form-layout
+          class="p-3"
+          v-if="shouldRenderForm"
+          :doc="doc"
+          :fields="meta.fields"
+          :layout="meta.layout"
+          :invalid="invalid"
+        />
         <not-found v-if="notFound" />
     </div>
 </template>
@@ -88,7 +88,7 @@ export default {
         }
 
         this.$emit('save', this.doc);
-        
+
       } catch (e) {
         console.error(e);
         return;
diff --git a/ui/components/Form/FormActions.vue b/ui/components/Form/FormActions.vue
index cb469f54..b413e851 100644
--- a/ui/components/Form/FormActions.vue
+++ b/ui/components/Form/FormActions.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="frappe-form-actions d-flex justify-content-between align-items-center p-3 border-bottom">
+  <div class="frappe-form-actions d-flex justify-content-between align-items-center">
     <h5 class="m-0">{{ title }}</h5>
     <div class="d-flex">
       <f-button primary v-if="showSave" :disabled="disableSave" @click="$emit('save')">{{ _('Save') }}</f-button>
diff --git a/ui/components/Modal/Modal.vue b/ui/components/Modal/Modal.vue
index 7c3b548c..c2d07420 100644
--- a/ui/components/Modal/Modal.vue
+++ b/ui/components/Modal/Modal.vue
@@ -1,15 +1,15 @@
 <template>
-  <div :class="['modal fade show d-block']"
+  <div :class="['modal fade show d-block']" @click.self="onBackdropClick"
     tabindex="-1" role="dialog" aria-labelledby="frappe-modal-label" aria-hidden="true">
     <div class="modal-dialog" role="document">
       <div class="modal-content shadow">
-        <div class="modal-header">
+        <div class="modal-header" v-if="!noHeader">
           <h5 class="modal-title">{{ title }}</h5>
           <button type="button" class="close" data-dismiss="modal" aria-label="Close" @click="closeModal">
             <span aria-hidden="true">&times;</span>
           </button>
         </div>
-        <div class="modal-body modal-height">
+        <div class="modal-body modal-height p-0">
           <component ref="modalComponent" :is="component" v-bind="props" v-on="events"/>
         </div>
         <div class="modal-footer">
@@ -39,6 +39,10 @@ export default {
     },
     events: {
       type: Object
+    },
+    noHeader: {
+      type: Boolean,
+      default: false
     }
   },
   methods: {
@@ -47,6 +51,9 @@ export default {
     },
     onPrimaryAction() {
       this.primaryAction.handler(this.$refs.modalComponent);
+    },
+    onBackdropClick(e) {
+      this.closeModal();
     }
   }
 };
diff --git a/ui/components/ModelTable.vue b/ui/components/ModelTable.vue
index e7f932f5..932a4960 100644
--- a/ui/components/ModelTable.vue
+++ b/ui/components/ModelTable.vue
@@ -168,5 +168,13 @@ export default {
     height: 100%;
     padding: 0;
   }
+
+  .awesomplete > ul {
+    position: fixed;
+    top: auto;
+    left: auto;
+    width: auto;
+    min-width: 120px;
+  }
 }
 </style>
diff --git a/ui/components/Navbar.vue b/ui/components/Navbar.vue
index 3d37aa1e..44848ab2 100644
--- a/ui/components/Navbar.vue
+++ b/ui/components/Navbar.vue
@@ -1,5 +1,5 @@
 <template>
-	<nav class="frappe-navbar navbar navbar-light bg-light row no-gutters border-bottom border-top">
+	<nav class="frappe-navbar navbar navbar-light bg-light row no-gutters border-bottom">
 		<form v-if="showSearch" class="form-inline col-4 pr-3">
 			<input type="text"
 				v-model="searchValue"
diff --git a/ui/plugins/formModal.js b/ui/plugins/formModal.js
index 3a757603..e1520913 100644
--- a/ui/plugins/formModal.js
+++ b/ui/plugins/formModal.js
@@ -1,4 +1,3 @@
-import frappe from 'frappejs';
 import Form from '../components/Form/Form';
 
 export default function installFormModal(Vue) {
@@ -19,7 +18,7 @@ export default function installFormModal(Vue) {
               onClose
             },
             modalProps: {
-              title: frappe._('Form Modal')
+              noHeader: true
             }
           });
         }