feat!: columns in dynamic containers (#209)

frappe · Apr 5, 2024 · ea16519 · ea16519
2 parents 2d60646 + 94f53b1
commit ea16519
Show file tree

Hide file tree

Showing 7 changed files with 371 additions and 151 deletions.
diff --git a/print_designer/print_designer/page/print_designer/jinja/macros/relative_containers.html b/print_designer/print_designer/page/print_designer/jinja/macros/relative_containers.html
@@ -1,12 +1,23 @@
 {% from 'print_designer/page/print_designer/jinja/macros/render_element.html' import render_element with context %}
 
-{% macro relative_containers(element, send_to_jinja) -%}
-    <div style="position:relative; left:{{ element.startX }}px; {%- if not element.isDynamicHeight -%} height:{{ element.height }}px; {%- endif -%} {{convert_css(element.style)}} border: none !important;"
+{% macro relative_columns(element, send_to_jinja) -%}
+    <div style="position:relative;  top: 0px; width:{{ element.width }}px; {%- if not element.isDynamicHeight -%} height:{{ element.height }}px; {%- endif -%} {{convert_css(element.style)}}"
     class="rectangle {{ element.classes | join(' ') }}">
         {% if element.childrens %}
             {% for object in element.childrens %}
                 {{ render_element(object, send_to_jinja, element.get("isDynamicHeight", false)) }}
             {% endfor %}
         {% endif %}
     </div>
+{%- endmacro %}
+
+{% macro relative_containers(element, send_to_jinja) -%}
+    <div style="position:relative; left:{{ element.startX }}px; {%- if not element.isDynamicHeight -%} height:{{ element.height }}px; {%- endif -%} {{convert_css(element.style)}}"
+    class="rectangle relative-row {{ element.classes | join(' ') }}">
+        {% if element.childrens %}
+            {% for object in element.childrens %}
+                {{ relative_columns(object, send_to_jinja) }}
+            {% endfor %}
+        {% endif %}
+    </div>
 {%- endmacro %}
diff --git a/print_designer/print_designer/page/print_designer/jinja/macros/styles.html b/print_designer/print_designer/page/print_designer/jinja/macros/styles.html
@@ -24,6 +24,16 @@
             margin: auto !important;
         }
     }
+    /* set margin to 0 for print (Ctrl + p) on client browsers
+    and remove margin container that was added for screen ( viewing )  */
+    @media print {
+       .print-format {
+            margin: 0 !important;
+        }
+        .printview-header-margin {
+            display: none;
+        }
+    }
     .print-designer-container {
         position: absolute;
     }
@@ -71,8 +81,19 @@
     .flexDirectionColumn .baseSpanTag .valueSpanTag {
         display: block;
     }
+    /* https://github.com/wkhtmltopdf/wkhtmltopdf/issues/1522 */
+    .relative-row {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: flex;
+        border-width: 0 !important;
+    }
     .relative-column {
-        margin-right: -4px;
+        border-width: 1px !important;
+        border-color: white !important;
+    }
+    * {
+        -webkit-box-sizing: border-box;
     }
 </style>
 {% endmacro %}
diff --git a/print_designer/print_designer/page/print_designer/jinja/print_format.html b/print_designer/print_designer/page/print_designer/jinja/print_format.html
@@ -11,12 +11,14 @@
 <div id="__print_designer">
     <div id="header-html">
         <div style="position: relative; top:0px; left: 0px; width: 100%; height:{{ settings.page.headerHeightWithMargin }}px;">
+            <div class="visible-pdf" style="height: {{ settings.page.marginTop }}px;"></div>
+            <div class="hidden-pdf printview-header-margin" style="height: {{ settings.page.marginTop }}px;"></div>
             {% if headerElement %}{{ render(pd_format.header, send_to_jinja) }}{%endif%}
         </div>
     </div>
     {% if bodyElement %}{{ render(pd_format.body, send_to_jinja) }}{%endif%}
     <div id="footer-html">
-        <div style="width: 100%; position: relative; top:0px; left: 0px; height:{{ settings.page.footerHeightWithMargin }}px; ">
+        <div style="width: 100%; position: relative; top:0px; left: 0px; height:{{ settings.page.footerHeightWithMargin }}px;">
             {% if footerElement %}{{ render(pd_format.footer, send_to_jinja) }}{%endif%}
         </div>
     </div>

diff --git a/print_designer/public/js/print_designer/PropertiesPanelState.js b/print_designer/public/js/print_designer/PropertiesPanelState.js
@@ -447,7 +447,7 @@ export const createPropertiesPanel = () => {
 								currentEl?.type === "table") ||
 							(currentEl.type === "text" && currentEl.isDynamic)
 						) {
-							return !currentEl.isElementOverlapping;
+							return true;
 						}
 						return false;
 					},

diff --git a/print_designer/public/js/print_designer/components/base/BaseTable.vue b/print_designer/public/js/print_designer/components/base/BaseTable.vue
@@ -163,6 +163,7 @@ const {
 	selectedColumn,
 	selectedDynamicText,
 	DOMRef,
+	isDynamicHeight,
 } = toRefs(props.object);
 
 watch(

diff --git a/print_designer/public/js/print_designer/components/layout/AppCanvas.vue b/print_designer/public/js/print_designer/components/layout/AppCanvas.vue
@@ -635,4 +635,15 @@ watch(
 	margin-right: calc(var(--print-margin-right) * -1);
 	margin-bottom: calc(var(--print-margin-bottom) * -1);
 }
+.relative-row {
+	background-color: transparent !important;
+	border: none !important;
+	z-index: 9999 !important;
+}
+.relative-column {
+	background-color: transparent !important;
+	border: none !important;
+	z-index: 9999 !important;
+	outline: 1px solid var(--primary) !important;
+}
 </style>