Merge pull request #644 from frappe/full-width-mode

feat: full width forms

schemas/app/Misc.json

@@ -8,6 +8,12 @@
       "fieldname": "openCount",
       "label": "Open Count",
       "fieldtype": "Int"
+    },
+    {
+      "fieldname": "useFullWidth",
+      "label": "Use Full Width",
+      "fieldtype": "Check",
+      "default": false
     }
   ]
 }

src/components/FormContainer.vue

@@ -5,7 +5,7 @@
       <PageHeader
         v-if="showHeader"
         :title="title"
-        :border="false"
+        :border="useFullWidth"
         :searchborder="searchborder"
       >
         <template #left>
@@ -16,18 +16,11 @@
 
       <!-- Common Form -->
       <div
-        class="
-          border
-          rounded-lg
-          shadow-lg
-          flex flex-col
-          self-center
-          w-form
-          h-full
-          overflow-auto
-          mb-4
-          bg-white
-          mx-4
+        class="flex flex-col self-center h-full overflow-auto bg-white"
+        :class="
+          useFullWidth
+            ? 'w-full'
+            : 'w-form border rounded-lg shadow-lg mb-4 mx-4'
         "
       >
         <slot name="body" />
@@ -46,6 +39,7 @@ export default defineComponent({
   components: { PageHeader },
   props: {
     title: { type: String, default: '' },
+    useFullWidth: { type: Boolean, default: false },
     showHeader: { type: Boolean, default: true },
     searchborder: { type: Boolean, default: true },
   },

src/pages/CommonForm/CommonForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <FormContainer>
+  <FormContainer :use-full-width="useFullWidth">
     <template #header-left v-if="hasDoc">
       <Barcode
         class="h-8"
@@ -45,6 +45,16 @@
       >
         <feather-icon name="printer" class="w-4 h-4"></feather-icon>
       </Button>
+      <Button
+        :icon="true"
+        @click="toggleWidth"
+        :title="t`Toggle between form and full width`"
+      >
+        <feather-icon
+          :name="useFullWidth ? 'minimize' : 'maximize'"
+          class="w-4 h-4"
+        ></feather-icon>
+      </Button>
       <DropdownWithActions
         v-for="group of groupedActions"
         :key="group.label"
@@ -211,6 +221,7 @@ export default defineComponent({
       groupedFields: null,
       isPrintable: false,
       showLinks: false,
+      useFullWidth: false,
       row: null,
     } as {
       errors: Record<string, string>;
@@ -218,9 +229,13 @@ export default defineComponent({
       groupedFields: null | UIGroupedFields;
       isPrintable: boolean;
       showLinks: boolean;
+      useFullWidth: boolean;
       row: null | { index: number; fieldname: string };
     };
   },
+  async beforeMount() {
+    this.useFullWidth = !!this.fyo.singles.Misc?.useFullWidth;
+  },
   async mounted() {
     if (this.fyo.store.isDevelopment) {
       // @ts-ignore
@@ -236,6 +251,7 @@ export default defineComponent({
     this.isPrintable = await isPrintable(this.schemaName);
   },
   activated(): void {
+    this.useFullWidth = !!this.fyo.singles.Misc?.useFullWidth;
     docsPathRef.value = docsPathMap[this.schemaName] ?? '';
     this.shortcuts?.pmod.set(this.context, ['KeyP'], () => {
       if (!this.canPrint) {
@@ -375,6 +391,11 @@ export default defineComponent({
   },
   methods: {
     routeTo,
+    async toggleWidth() {
+      const value = !this.useFullWidth;
+      await this.fyo.singles.Misc?.setAndSync('useFullWidth', value);
+      this.useFullWidth = value;
+    },
     updateGroupedFields(): void {
       if (!this.hasDoc) {
         return;