feat: user can now change the background of the whole document

print_designer/print_designer/page/print_designer/jinja/macros/styles.html

@@ -1,16 +1,28 @@
 {% macro render_styles(settings) %}
 <style>
+	#filler{
+        background-color: {{ settings.page.backgroundColor}};
+        margin-top: -1px; /* Come back to avoid strange gray line between the content and filler */
+        height: 10000%; /* Fill the entire page even for huge formats */
+        position: fixed;
+        width: 10000%; /* Fill the entire page even for huge formats */
+        z-index: -1; /* Send to back */
+    }
     .print-format {
         box-sizing: border-box;
         padding: 0in;
         max-width: {{convert_uom(number=settings.page.width, to_uom="mm")}} !important;
         dpi: {{settings.PDFPrintDPI or 96}}mm;
         page-width: {{convert_uom(number=settings.page.width, to_uom="mm")}};
+        /* 5mm margin to avoid strange blank */
+        /* vertical line to the right */
+        page-width: {{convert_uom(number=settings.page.width - ((settings.page.width % 2 + 1) * 2), to_uom="mm")}};
         page-height: {{convert_uom(number=settings.page.height, to_uom="mm")}};
         margin-top:{{convert_uom(number=settings.page.headerHeightWithMargin or settings.page.marginTop, to_uom='mm')}};
         margin-bottom:{{convert_uom(number=settings.page.footerHeightWithMargin or settings.page.marginBottom, to_uom='mm')}};
         margin-left:{{convert_uom(number=settings.page.marginLeft, to_uom='mm')}};
         margin-right:{{convert_uom(number=settings.page.marginRight, to_uom='mm')}};
+        background-color: {{ settings.page.backgroundColor}};
     }
     @media screen {
         #__print_designer {
@@ -99,4 +111,4 @@
         -webkit-box-sizing: border-box;
     }
 </style>
-{% endmacro %}
+{% endmacro %}

print_designer/print_designer/page/print_designer/jinja/print_format.html

@@ -33,5 +33,6 @@
         </div>
     </div>
 </div>
+<div id="filler"/>
 
-{{ render_styles(settings) }}
+{{ render_styles(settings) }}

print_designer/public/js/print_designer/PropertiesPanelState.js

@@ -389,6 +389,23 @@ export const createPropertiesPanel = () => {
 					});
 				},
 			},
+                {
+                    label: "Background",
+                    name: "pageBackground",
+                    isLabelled: true,
+                    condtional: null,
+                    frappeControl: (ref, name) => {
+                        const { page } = storeToRefs(MainStore);
+                        makeFeild({
+                            name,
+                            ref,
+                            fieldtype: "Color",
+                            requiredData: () => page.backgroundColor,
+                            reactiveObject: page,
+                            propertyName: "backgroundColor",
+                        });
+                    },
+                },
 			[
 				pageInput("Height", "page_height", "height", {
 					parentBorderTop: true,

print_designer/public/js/print_designer/defaultObjects.js

@@ -267,6 +267,7 @@ export const GoogleFonts = {
 		[400, 500, 600, 700],
 	],
 	BioRhyme: [[200, 300, 400, 700, 800], []],
+	Belleza: [[400], []],
 	Cardo: [[400, 700], [400]],
 	Chivo: [
 		[100, 200, 300, 400, 500, 600, 700, 800, 900],
@@ -328,6 +329,10 @@ export const GoogleFonts = {
 		[100, 200, 300, 400, 500, 600, 700, 800, 900],
 		[100, 200, 300, 400, 500, 600, 700, 800, 900],
 	],
+	Mukta: [
+		[200, 300, 400, 500, 600, 700, 800],
+		[200, 300, 400, 500, 600, 700, 800],
+	],
 	Neuton: [[200, 300, 400, 700, 800], [400]],
 	Nunito: [
 		[200, 300, 400, 500, 600, 700, 800, 900],

print_designer/public/js/print_designer/store/MainStore.js

@@ -91,6 +91,7 @@ export const useMainStore = defineStore("MainStore", {
 			headerHeightWithMargin: 0,
 			footerHeightWithMargin: 0,
 			UOM: "mm",
+            backgroundColor: "#ffffff",
 		},
 		controls: {
 			MousePointer: {
@@ -185,6 +186,7 @@ export const useMainStore = defineStore("MainStore", {
 		},
 		getPageSettings() {
 			return {
+                backgroundColor: this.page.backgroundColor,
 				height:
 					this.convertToPageUOM(
 						this.page.height - (this.page.marginTop + this.page.marginBottom)