From c7e9d3b545c6ddfe545976dc078aafe18524402f Mon Sep 17 00:00:00 2001
From: Prateeksha Singh <pratu16x7@gmail.com>
Date: Fri, 13 Jul 2018 12:59:57 +0530
Subject: [PATCH] [print] print actions and layout

---
 client/style/variables.scss          |  4 ++-
 ui/components/Print/PrintActions.vue | 38 ++++++++++++++++++++++
 ui/components/Print/PrintView.vue    | 48 ++++++++++++++++++++++++++++
 ui/components/PrintView.vue          | 20 ------------
 ui/pages/ListAndPrintView.vue        | 12 ++++---
 5 files changed, 97 insertions(+), 25 deletions(-)
 create mode 100644 ui/components/Print/PrintActions.vue
 create mode 100644 ui/components/Print/PrintView.vue
 delete mode 100644 ui/components/PrintView.vue

diff --git a/client/style/variables.scss b/client/style/variables.scss
index ce8f6664..5a25ce0a 100644
--- a/client/style/variables.scss
+++ b/client/style/variables.scss
@@ -3,4 +3,6 @@ $spacer-2: 0.5rem;
 $spacer-3: 1rem;
 $spacer-4: 2rem;
 $spacer-5: 3rem;
-$page-width: 500px;
\ No newline at end of file
+$page-width: 500px;
+
+$shadow-width: 0.5rem;
\ No newline at end of file
diff --git a/ui/components/Print/PrintActions.vue b/ui/components/Print/PrintActions.vue
new file mode 100644
index 00000000..d6eb2f6d
--- /dev/null
+++ b/ui/components/Print/PrintActions.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="frappe-print-actions d-flex justify-content-between align-items-center p-3 border-bottom">
+    <h5 class="m-0">{{ title }}</h5>
+    <f-button primary @click="$emit('print')">{{ _('Print') }}</f-button>
+    <f-button secondary @click="$emit('view-form')">{{ _('View Form') }}</f-button>
+  </div>
+</template>
+
+<script>
+import frappe from 'frappejs';
+
+export default {
+  props: ['title'],
+  data() {
+    return {
+      isDirty: false,
+      showSubmit: false,
+      showRevert: false
+    }
+  },
+  created() {},
+  methods: {},
+  computed: {
+    meta() {
+      return frappe.getMeta(this.doc.doctype);
+    },
+  }
+}
+</script>
+
+<style lang="scss">
+@import "../../styles/variables";
+
+.frappe-print-actions {
+    background-color: $white;
+}
+
+</style>
\ No newline at end of file
diff --git a/ui/components/Print/PrintView.vue b/ui/components/Print/PrintView.vue
new file mode 100644
index 00000000..9ce9d5cb
--- /dev/null
+++ b/ui/components/Print/PrintView.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="print-view">
+    <print-actions
+      v-bind:title="name"
+    ></print-actions>
+    <div class="print-container">
+      <div class="print-template" v-html="printTemplate"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getHTML } from '../../../common/print.js';
+import PrintActions from './PrintActions';
+
+export default {
+  name: 'PrintView',
+  props: ['doctype', 'name'],
+  data() {
+    return {
+      printTemplate: '',
+    }
+  },
+  components: {
+    PrintActions: PrintActions
+  },
+  async created(vm) {
+    this.printTemplate = await getHTML(this.doctype, this.name);
+  },
+}
+</script>
+
+<style lang="scss">
+@import "../../styles/variables";
+
+.print-container {
+  padding: 1rem;
+}
+
+.print-template {
+  padding: 1rem;
+  background-color: $white;
+  box-shadow: 0rem 0rem 0.5rem rgba(0,0,0,0.2);
+}
+
+.print-view {}
+
+</style>
diff --git a/ui/components/PrintView.vue b/ui/components/PrintView.vue
deleted file mode 100644
index e0425710..00000000
--- a/ui/components/PrintView.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<template>
-  <div v-html="printTemplate"></div>
-</template>
-
-<script>
-import { getHTML } from '../../common/print.js';
-
-export default {
-  name: 'PrintView',
-  props: ['doctype', 'name'],
-  data() {
-    return {
-      printTemplate: ''
-    }
-  },
-  async created(vm) {
-    this.printTemplate = await getHTML(this.doctype, this.name);
-  },
-}
-</script>
diff --git a/ui/pages/ListAndPrintView.vue b/ui/pages/ListAndPrintView.vue
index 97b0f0c4..336f9dde 100644
--- a/ui/pages/ListAndPrintView.vue
+++ b/ui/pages/ListAndPrintView.vue
@@ -3,14 +3,14 @@
         <div class="col-4 border-right">
             <frappe-list :doctype="doctype" :filters="filters" :key="doctype" />
         </div>
-        <div class="col-8">
-            <print-view v-if="name" :key="doctype + name" :doctype="doctype" :name="name" @save="onSave" />
+        <div class="col-8 background-gray">
+            <print-view v-if="name" :key="doctype + name" :doctype="doctype" :name="name" />
         </div>
     </div>
 </template>
 <script>
 import List from '../components/List/List';
-import PrintView from '../components/PrintView';
+import PrintView from '../components/Print/PrintView';
 
 export default {
     props: ['doctype', 'name', 'filters'],
@@ -20,8 +20,12 @@ export default {
     },
 }
 </script>
-<style>
+<style lang="scss">
 .frappe-list-form {
     min-height: calc(100vh - 4rem);
 }
+@import "../styles/variables";
+.background-gray {
+    background-color: $gray-100
+}
 </style>