From 8e6aab2c02a9a629d25599d1b2fc4499329f34a5 Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Thu, 7 Jul 2022 18:40:23 +0530
Subject: [PATCH] fix(ux): persistent back button

---
 src/components/BackLink.vue       | 13 ++++++++++---
 src/components/FormContainer.vue  |  3 +--
 src/components/PageHeader.vue     |  8 ++++----
 src/pages/InvoiceForm.vue         | 12 ++++++------
 src/pages/JournalEntryForm.vue    |  4 ++--
 src/pages/PrintView/PrintView.vue |  2 +-
 6 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/src/components/BackLink.vue b/src/components/BackLink.vue
index 9b896474..ffee6cc1 100644
--- a/src/components/BackLink.vue
+++ b/src/components/BackLink.vue
@@ -1,10 +1,17 @@
 <template>
   <a
-    class="cursor-pointer font-semibold flex items-center"
+    class="
+      cursor-pointer
+      font-semibold
+      flex
+      items-center
+      bg-gray-100
+      px-3
+      rounded-md
+    "
     @click="$router.back()"
   >
-    <feather-icon name="chevron-left" class="w-5 h-5" />
-    <span class="ml-1">{{ t`Back` }}</span>
+    <feather-icon name="chevron-left" class="w-4 h-4" />
   </a>
 </template>
 <script></script>
diff --git a/src/components/FormContainer.vue b/src/components/FormContainer.vue
index d14f283d..d80ac955 100644
--- a/src/components/FormContainer.vue
+++ b/src/components/FormContainer.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col bg-gray-25">
     <!-- Page Header (Title, Buttons, etc) -->
-    <PageHeader :backLink="backLink" :title="title" :border="false">
+    <PageHeader :title="title" :border="false">
       <slot name="header" />
     </PageHeader>
 
@@ -28,7 +28,6 @@ import PageHeader from './PageHeader.vue';
 export default {
   components: { PageHeader },
   props: {
-    backLink: { type: Boolean, default: false },
     title: { type: String, default: '' },
   },
 };
diff --git a/src/components/PageHeader.vue b/src/components/PageHeader.vue
index 478fee4e..ab93569b 100644
--- a/src/components/PageHeader.vue
+++ b/src/components/PageHeader.vue
@@ -11,12 +11,12 @@
     "
     :class="border ? 'border-b' : ''"
   >
-    <h1 class="text-xl font-semibold select-none" v-if="title && !backLink">
+    <h1 class="text-xl font-semibold select-none" v-if="title">
       {{ title }}
     </h1>
-    <BackLink v-if="backLink" class="window-no-drag" />
-    <div class="flex items-stretch window-no-drag gap-2">
+    <div class="flex items-stretch window-no-drag gap-2 ml-auto">
       <slot />
+      <BackLink v-if="backLink" class="window-no-drag" />
       <SearchBar v-if="!hideSearch" />
     </div>
   </div>
@@ -28,7 +28,7 @@ import SearchBar from './SearchBar.vue';
 export default {
   props: {
     title: { type: String, default: '' },
-    backLink: { type: Boolean, default: false },
+    backLink: { type: Boolean, default: true },
     hideSearch: { type: Boolean, default: false },
     border: { type: Boolean, default: true },
   },
diff --git a/src/pages/InvoiceForm.vue b/src/pages/InvoiceForm.vue
index 589a464c..54b32eb1 100644
--- a/src/pages/InvoiceForm.vue
+++ b/src/pages/InvoiceForm.vue
@@ -1,5 +1,5 @@
 <template>
-  <FormContainer :backLink="true">
+  <FormContainer>
     <!-- Page Header (Title, Buttons, etc) -->
     <template #header v-if="doc">
       <StatusBadge :status="status" />
@@ -190,11 +190,11 @@ import StatusBadge from 'src/components/StatusBadge.vue';
 import { fyo } from 'src/initFyo';
 import { docsPathMap } from 'src/utils/misc';
 import {
-docsPath,
-getActionsForDocument,
-openSettings,
-routeTo,
-showMessageDialog
+  docsPath,
+  getActionsForDocument,
+  openSettings,
+  routeTo,
+  showMessageDialog,
 } from 'src/utils/ui';
 import { handleErrorWithDialog } from '../errorHandling';
 
diff --git a/src/pages/JournalEntryForm.vue b/src/pages/JournalEntryForm.vue
index 93f6b910..201dbdda 100644
--- a/src/pages/JournalEntryForm.vue
+++ b/src/pages/JournalEntryForm.vue
@@ -1,5 +1,5 @@
 <template>
-  <FormContainer :backLink="true">
+  <FormContainer>
     <!-- Page Header (Title, Buttons, etc) -->
     <template #header v-if="doc">
       <StatusBadge :status="status" />
@@ -177,7 +177,7 @@ export default {
     };
   },
   activated() {
-    docsPath.value = docsPathMap.JournalEntry
+    docsPath.value = docsPathMap.JournalEntry;
   },
   deactivated() {
     docsPath.value = '';
diff --git a/src/pages/PrintView/PrintView.vue b/src/pages/PrintView/PrintView.vue
index 574361ff..2d146158 100644
--- a/src/pages/PrintView/PrintView.vue
+++ b/src/pages/PrintView/PrintView.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex">
     <div class="flex flex-col flex-1 bg-gray-25">
-      <PageHeader :backLink="true" class="z-10" :border="false">
+      <PageHeader class="z-10" :border="false">
         <Button
           class="text-gray-900 text-xs"
           @click="showCustomiser = !showCustomiser"