[print] print actions and layout

client/style/variables.scss

@@ -3,4 +3,6 @@ $spacer-2: 0.5rem;
 $spacer-3: 1rem;
 $spacer-4: 2rem;
 $spacer-5: 3rem;
-$page-width: 500px;
+$page-width: 500px;
+
+$shadow-width: 0.5rem;

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>

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>

ui/components/PrintView.vue

@@ -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>

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>