diff --git a/frappe/printing/page/print/print.js b/frappe/printing/page/print/print.js index 42353ec1bc..0928a067da 100644 --- a/frappe/printing/page/print/print.js +++ b/frappe/printing/page/print/print.js @@ -36,11 +36,13 @@ frappe.ui.form.PrintView = class { make() { this.print_wrapper = this.page.main.empty().html( `
-
+
` ); + this.print_settings = frappe.model.get_doc( ':Print Settings', 'Print Settings' @@ -378,15 +380,14 @@ frappe.ui.form.PrintView = class { } preview() { - const $print_format = this.print_wrapper.find('.print-format').empty(); + const $print_format = this.print_wrapper.find('iframe'); + this.$print_format_body = $print_format.contents(); this.get_print_html((out) => { if (!out.html) { out.html = this.get_no_preview_html(); } - $print_format.html(out.html); - this.show_footer(); - this.set_style(out.style); + this.setup_print_format_dom(out, $print_format); const print_height = $print_format.get(0).offsetHeight; const $message = this.wrapper.find('.page-break-message'); @@ -402,6 +403,34 @@ frappe.ui.form.PrintView = class { }); } + setup_print_format_dom(out, $print_format) { + this.$print_format_body.find('head').html( + ` + ` + ); + + this.$print_format_body.find('body').html( + `
${out.html}
` + ); + + this.show_footer(); + + $print_format.css({ + 'min-height': this.$print_format_body.find('.print-format').height() + }); + + this.wrapper.find('.print-format').css({ + display: 'flex', + flexDirection: 'column', + }); + + this.$print_format_body.find('.page-break').css({ + display: 'flex', + 'flex-direction': 'column', + flex: '1', + }); + } + hide() { if (this.frm.setup_done && this.frm.page.current_view_name === 'print') { this.frm.page.set_view( @@ -415,21 +444,12 @@ frappe.ui.form.PrintView = class { show_footer() { // footer is hidden by default as reqd by pdf generation // simple hack to show it in print preview - this.wrapper.find('.print-format').css({ - display: 'flex', - flexDirection: 'column', - }); - this.wrapper.find('.page-break').css({ - display: 'flex', - 'flex-direction': 'column', - flex: '1', - }); - this.wrapper.find('#footer-html').attr( + + this.$print_format_body.find('#footer-html').attr( 'style', ` display: block !important; order: 1; - margin-top: auto; ` ); } diff --git a/frappe/public/build.json b/frappe/public/build.json index 01a14568c1..e532251967 100755 --- a/frappe/public/build.json +++ b/frappe/public/build.json @@ -95,7 +95,10 @@ "public/css/desk-rtl.css", "public/css/report-rtl.css" ], - "css/printview.css": "public/scss/print.scss", + "css/printview.css": [ + "public/css/bootstrap.css", + "public/scss/print.scss" + ], "concat:js/libs.min.js": [ "public/js/lib/awesomplete/awesomplete.min.js", "public/js/lib/Sortable.min.js", diff --git a/frappe/public/html/print_template.html b/frappe/public/html/print_template.html index 78df4aca94..bdb09541c9 100644 --- a/frappe/public/html/print_template.html +++ b/frappe/public/html/print_template.html @@ -1,22 +1,20 @@ - - - - - - - {{ title }} - - + + + + + + + {{ title }} + - - -
- {% if print_settings.repeat_header_footer %} + + +
+ {% if print_settings.repeat_header_footer %} - + {% if print_settings.letter_head %} +
+
{{ print_settings.letter_head.header }}
+
+ {% endif %} + {{ content }} +
+
+ diff --git a/frappe/public/scss/desk/css-variables.scss b/frappe/public/scss/desk/css-variables.scss new file mode 100644 index 0000000000..2eda6fbc7a --- /dev/null +++ b/frappe/public/scss/desk/css-variables.scss @@ -0,0 +1,207 @@ +:root { + --pink-900: #5B1E34; + --pink-800: #702440; + --pink-700: #97264F; + --pink-600: #D2326D; + --pink-500: #F2508B; + --pink-400: #F46B9E; + --pink-300: #F584AE; + --pink-200: #FAB9D1; + --pink-100: #FCDCE8; + --pink-50 : #FEEDF3; + + --blue-900: #1A4469; + --blue-800: #154875; + --blue-700: #1366AE; + --blue-600: #1579D0; + --blue-500: #2490EF; + --blue-400: #50A6F2; + --blue-300: #7CBCF5; + --blue-200: #A7D3F9; + --blue-100: #D3E9FC; + --blue-50 : #F0F8FE; + + --green-900: #2D401D; + --green-800: #44622A; + --green-700: #518B21; + --green-600: #68AB30; + --green-500: #8CCF54; + --green-400: #A5D97A; + --green-300: #BCE39B; + --green-200: #D2ECBD; + --green-100: #E9F6DE; + --green-50 : #F4FAEE; + + --dark-green-900: #1F3E2B; + --dark-green-800: #29593B; + --dark-green-700: #286840; + --dark-green-600: #2E844E; + --dark-green-500: #2F9D58; + --dark-green-400: #59B179; + --dark-green-300: #82C49B; + --dark-green-200: #ACD8BC; + --dark-green-100: #DFEEE5; + --dark-green-50: #EAF5EE; + + --gray-900: #192734; + --gray-800: #313B44; + --gray-700: #4C5A67; + --gray-600: #74808B; + --gray-500: #A6B1B9; + --gray-400: #C8CFD5; + --gray-300: #E2E6E9; + --gray-200: #EEF0F2; + --gray-100: #F4F5F6; + --gray-50: #F9FAFA; + + --red-900: #631D1D; + --red-800: #802121; + --red-700: #9B2C2C; + --red-600: #C53030; + --red-500: #E24C4C; + --red-400: #EC645E; + --red-300: #FCA4A4; + --red-200: #FCC8C8; + --red-100: #FFECEC; + --red-50 : #FFF5F5; + + --yellow-900: #5F370E; + --yellow-800: #744210; + --yellow-700: #975A16; + --yellow-600: #B7791F; + --yellow-500: #D69E2E; + --yellow-400: #ECB64B; + --yellow-300: #F6C35E; + --yellow-200: #FAD489; + --yellow-100: #FEE9BF; + --yellow-50: #FEF4E2; + + --orange-900: #653019; + --orange-800: #7B3A1E; + --orange-700: #9C4621; + --orange-600: #CB5A2A; + --orange-500: #F8814F; + --orange-400: #F9966C; + --orange-300: #FDAE8C; + --orange-200: #FECDB8; + --orange-100: #FFEAE1; + --orange-50: #FFF5F0; + + --purple-900: #343360; + --purple-800: #45438F; + --purple-700: #4946BF; + --purple-600: #6461D6; + --purple-500: #8684FF; + --purple-400: #9897F7; + --purple-300: #B9B8FA; + --purple-200: #DAD9F7; + --purple-100: #EAEAFB; + --purple-50: #F2F2FD; + + + --padding-xs: 5px; + --padding-sm: 10px; + --padding-md: 15px; + --padding-lg: 20px; + --padding-xl: 30px; + --padding-2xl: 40px; + + --margin-xs: 5px; + --margin-sm: 8px; + --margin-md: 15px; + --margin-lg: 20px; + --margin-xl: 30px; + --margin-2xl: 40px; + + --text-xs: 11px; + --text-sm: 12px; + --text-md: 13px; + --text-base: 14px; + --text-lg: 16px; + --text-xl: 18px; + --text-2xl: 20px; + --text-3xl: 22px; + + --font-stack: "-apple-system", "BlinkMacSystemFont","Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell","Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; + + --navbar-height: 60px; + + --text-bold: 500; + + // --shadow-xs: 0px 0px 0.5px rgba(0,0,0,0.75), 0px 1px 2px rgba(0,0,0,0.13); + --shadow-xs: rgba(0, 0, 0, 0.05) 0px 0.5px 0px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.05) 0px 2px 4px 0px; + --shadow-sm: 0px 1px 2px rgba(25, 39, 52, 0.05), 0px 0px 4px rgba(25, 39, 52, 0.1); + --shadow-base: 0px 4px 8px rgba(25, 39, 52, 0.06), 0px 0px 4px rgba(25, 39, 52, 0.12); + --shadow-md: 0px 8px 14px rgba(25, 39, 52, 0.08), 0px 2px 6px rgba(25, 39, 52, 0.04); + --shadow-lg: 0px 18px 22px rgba(25, 39, 52, 0.1), 0px 1px 10px rgba(0, 0, 0, 0.06), 0px 0.5px 5px rgba(25, 39, 52, 0.04); + + --modal-shadow: var(--shadow-md); + --card-shadow: var(--shadow-sm); + --btn-shadow: var(--shadow-xs); + + // Type Colors + --text-muted: var(--gray-600); + --text-light: var(--gray-700); + --text-color: var(--gray-900); + --heading-color: var(--gray-900); + + // SVG Colors + --icon-fill: transparent; + --icon-fill-bg: var(--fg-color); + --icon-stroke: var(--gray-900); + + // Layout Colors + --bg-color: var(--gray-50); + --fg-color: white; + --fg-hover-color: var(--gray-100); + --card-bg: var(--fg-color); + --control-bg: var(--gray-100); + --awesomebar-focus-bg: var(--fg-color); + --modal-bg: white; + --toast-bg: var(--modal-bg); + --popover-bg: white; + + // Background Text Color Pairs + --bg-blue: var(--blue-50); + --bg-green: var(--dark-green-50); + --bg-yellow: var(--yellow-50); + --bg-orange: var(--orange-50); + --bg-red: var(--red-50); + --bg-gray: var(--gray-200); + --bg-light-gray: var(--gray-100); + + --text-on-blue: var(--blue-600); + --text-on-green: var(--dark-green-500); + --text-on-yellow: var(--yellow-500); + --text-on-orange: var(--orange-500); + --text-on-red: var(--red-500); + --text-on-gray: var(--gray-600); + --text-on-light-gray: var(--gray-800); + + // Other Colors + --sidebar-select-color: var(--gray-200); + + --shadow-inset: inset 0px -1px 0px var(--gray-300); + --border-color: var(--gray-100); + --dark-border-color: var(--gray-300); + --highlight-color: var(--gray-50); + --yellow-highlight-color: var(--yellow-50); + + // Border Sizes + --border-radius-sm: 4px; + --border-radius: 6px; + --border-radius-md: 8px; + --border-radius-lg: 12px; + --border-radius-full: 999px; + + --checkbox-right-margin: var(--margin-xs); + --base-checkbox-size: 14px; + --custom-checkbox-size: 14px; + + --primary-color: #2490EF; + + --appreciation-color: var(--dark-green-600); + --appreciation-bg: var(--dark-green-100); + --criticism-color: var(--red-600); + --criticism-bg: var(--red-100); +} \ No newline at end of file diff --git a/frappe/public/scss/desk/index.scss b/frappe/public/scss/desk/index.scss index 7ce6d9775d..f2fe9baf4f 100644 --- a/frappe/public/scss/desk/index.scss +++ b/frappe/public/scss/desk/index.scss @@ -1,4 +1,5 @@ @import "variables"; +@import "css-variables"; @import "mixins"; @import "~bootstrap/scss/bootstrap"; diff --git a/frappe/public/scss/desk/quill.scss b/frappe/public/scss/desk/quill.scss index 37be1d6ea3..de49b7d909 100644 --- a/frappe/public/scss/desk/quill.scss +++ b/frappe/public/scss/desk/quill.scss @@ -38,6 +38,13 @@ max-height: 600px; } +.print-format { + .ql-snow .ql-editor { + height: auto; + min-height: 0; + } +} + .ql-snow .ql-picker { font-size: var(--text-sm); } diff --git a/frappe/public/scss/desk/variables.scss b/frappe/public/scss/desk/variables.scss index 6302eaff32..15ebea9592 100644 --- a/frappe/public/scss/desk/variables.scss +++ b/frappe/public/scss/desk/variables.scss @@ -1,3 +1,8 @@ +html, body { + font-size: 16px; +} + +// colors $gray-900: #192734; $gray-800: #313B44; $gray-700: #4C5A67; @@ -18,218 +23,6 @@ $primary-light: lighten($primary, 42%) !default; $card-box-shadow: 0px 0px 1px rgba(17, 43, 66, 0.16), 0px 1px 3px rgba(17, 43, 66, 0.1); -:root { - --pink-900: #5B1E34; - --pink-800: #702440; - --pink-700: #97264F; - --pink-600: #D2326D; - --pink-500: #F2508B; - --pink-400: #F46B9E; - --pink-300: #F584AE; - --pink-200: #FAB9D1; - --pink-100: #FCDCE8; - --pink-50 : #FEEDF3; - - --blue-900: #1A4469; - --blue-800: #154875; - --blue-700: #1366AE; - --blue-600: #1579D0; - --blue-500: #2490EF; - --blue-400: #50A6F2; - --blue-300: #7CBCF5; - --blue-200: #A7D3F9; - --blue-100: #D3E9FC; - --blue-50 : #F0F8FE; - - --green-900: #2D401D; - --green-800: #44622A; - --green-700: #518B21; - --green-600: #68AB30; - --green-500: #8CCF54; - --green-400: #A5D97A; - --green-300: #BCE39B; - --green-200: #D2ECBD; - --green-100: #E9F6DE; - --green-50 : #F4FAEE; - - --dark-green-900: #1F3E2B; - --dark-green-800: #29593B; - --dark-green-700: #286840; - --dark-green-600: #2E844E; - --dark-green-500: #2F9D58; - --dark-green-400: #59B179; - --dark-green-300: #82C49B; - --dark-green-200: #ACD8BC; - --dark-green-100: #DFEEE5; - --dark-green-50: #EAF5EE; - - --gray-900: #{$gray-900}; - --gray-800: #{$gray-800}; - --gray-700: #{$gray-700}; - --gray-600: #{$gray-600}; - --gray-500: #{$gray-500}; - --gray-400: #{$gray-400}; - --gray-300: #{$gray-300}; - --gray-200: #{$gray-200}; - --gray-100: #{$gray-100}; - --gray-50: #{$gray-50}; - - --red-900: #631D1D; - --red-800: #802121; - --red-700: #9B2C2C; - --red-600: #C53030; - --red-500: #E24C4C; - --red-400: #EC645E; - --red-300: #FCA4A4; - --red-200: #FCC8C8; - --red-100: #FFECEC; - --red-50 : #FFF5F5; - - --yellow-900: #5F370E; - --yellow-800: #744210; - --yellow-700: #975A16; - --yellow-600: #B7791F; - --yellow-500: #D69E2E; - --yellow-400: #ECB64B; - --yellow-300: #F6C35E; - --yellow-200: #FAD489; - --yellow-100: #FEE9BF; - --yellow-50: #FEF4E2; - - --orange-900: #653019; - --orange-800: #7B3A1E; - --orange-700: #9C4621; - --orange-600: #CB5A2A; - --orange-500: #F8814F; - --orange-400: #F9966C; - --orange-300: #FDAE8C; - --orange-200: #FECDB8; - --orange-100: #FFEAE1; - --orange-50: #FFF5F0; - - --purple-900: #343360; - --purple-800: #45438F; - --purple-700: #4946BF; - --purple-600: #6461D6; - --purple-500: #8684FF; - --purple-400: #9897F7; - --purple-300: #B9B8FA; - --purple-200: #DAD9F7; - --purple-100: #EAEAFB; - --purple-50: #F2F2FD; - - - --padding-xs: 5px; - --padding-sm: 10px; - --padding-md: 15px; - --padding-lg: 20px; - --padding-xl: 30px; - --padding-2xl: 40px; - - --margin-xs: 5px; - --margin-sm: 8px; - --margin-md: 15px; - --margin-lg: 20px; - --margin-xl: 30px; - --margin-2xl: 40px; - - --text-xs: 11px; - --text-sm: 12px; - --text-md: 13px; - --text-base: 14px; - --text-lg: 16px; - --text-xl: 18px; - --text-2xl: 20px; - --text-3xl: 22px; - - --font-stack: "-apple-system", "BlinkMacSystemFont","Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell","Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; - - --navbar-height: 60px; - - --text-bold: 500; - - // --shadow-xs: 0px 0px 0.5px rgba(0,0,0,0.75), 0px 1px 2px rgba(0,0,0,0.13); - --shadow-xs: rgba(0, 0, 0, 0.05) 0px 0.5px 0px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.05) 0px 2px 4px 0px; - --shadow-sm: 0px 1px 2px rgba(25, 39, 52, 0.05), 0px 0px 4px rgba(25, 39, 52, 0.1); - --shadow-base: 0px 4px 8px rgba(25, 39, 52, 0.06), 0px 0px 4px rgba(25, 39, 52, 0.12); - --shadow-md: 0px 8px 14px rgba(25, 39, 52, 0.08), 0px 2px 6px rgba(25, 39, 52, 0.04); - --shadow-lg: 0px 18px 22px rgba(25, 39, 52, 0.1), 0px 1px 10px rgba(0, 0, 0, 0.06), 0px 0.5px 5px rgba(25, 39, 52, 0.04); - - --modal-shadow: var(--shadow-md); - --card-shadow: var(--shadow-sm); - --btn-shadow: var(--shadow-xs); - - // Type Colors - --text-muted: var(--gray-600); - --text-light: var(--gray-700); - --text-color: var(--gray-900); - --heading-color: var(--gray-900); - - // SVG Colors - --icon-fill: transparent; - --icon-fill-bg: var(--fg-color); - --icon-stroke: var(--gray-900); - - // Layout Colors - --bg-color: var(--gray-50); - --fg-color: white; - --fg-hover-color: var(--gray-100); - --card-bg: var(--fg-color); - --control-bg: var(--gray-100); - --awesomebar-focus-bg: var(--fg-color); - --modal-bg: white; - --toast-bg: var(--modal-bg); - --popover-bg: white; - - // Background Text Color Pairs - --bg-blue: var(--blue-50); - --bg-green: var(--dark-green-50); - --bg-yellow: var(--yellow-50); - --bg-orange: var(--orange-50); - --bg-red: var(--red-50); - --bg-gray: var(--gray-200); - --bg-light-gray: var(--gray-100); - - --text-on-blue: var(--blue-600); - --text-on-green: var(--dark-green-500); - --text-on-yellow: var(--yellow-500); - --text-on-orange: var(--orange-500); - --text-on-red: var(--red-500); - --text-on-gray: var(--gray-600); - --text-on-light-gray: var(--gray-800); - - // Other Colors - --sidebar-select-color: var(--gray-200); - - --shadow-inset: inset 0px -1px 0px var(--gray-300); - --border-color: var(--gray-100); - --dark-border-color: var(--gray-300); - --highlight-color: var(--gray-50); - --yellow-highlight-color: var(--yellow-50); - - // Border Sizes - --border-radius-sm: 4px; - --border-radius: 6px; - --border-radius-md: 8px; - --border-radius-lg: 12px; - --border-radius-full: 999px; - - --checkbox-right-margin: var(--margin-xs); - --base-checkbox-size: 14px; - --custom-checkbox-size: 14px; - - --primary-color: #{$primary}; - - --appreciation-color: var(--dark-green-600); - --appreciation-bg: var(--dark-green-100); - --criticism-color: var(--red-600); - --criticism-bg: var(--red-100); -} - -html, body { - font-size: 16px; -} - $border-color: var(--border-color); $code-color: var(--purple-600); @@ -338,3 +131,4 @@ $grid-breakpoints: ( @import '~bootstrap/scss/functions'; @import '~bootstrap/scss/variables'; @import "~bootstrap/scss/mixins"; +@import 'css-variables'; diff --git a/frappe/public/scss/print.scss b/frappe/public/scss/print.scss index 68b1ddc9c5..81914cc19e 100644 --- a/frappe/public/scss/print.scss +++ b/frappe/public/scss/print.scss @@ -1,137 +1,13 @@ -@import "~bootstrap/scss/bootstrap"; +// @import "~bootstrap/scss/bootstrap"; @import './desk/quill'; - -.col-xs-1 { @extend .col-md-1; } -.col-xs-2 { @extend .col-md-2; } -.col-xs-3 { @extend .col-3; } -.col-xs-4 { @extend .col-4; } -.col-xs-5 { @extend .col-md-5; } -.col-xs-6 { @extend .col-6; } -.col-xs-7 { @extend .col-7; } -.col-xs-8 { @extend .col-8; } -.col-xs-9 { @extend .col-9; } -.col-xs-10 { @extend .col-10; } -.col-xs-11 { @extend .col-11; } -.col-xs-12 { @extend .col-12; } - -// @media print { -// *, -// *:before, -// *:after { -// color: #000; -// background: transparent; -// text-shadow: none !important; -// -webkit-box-shadow: none !important; -// box-shadow: none !important; -// } -// a, -// a:visited { -// text-decoration: underline; -// } -// abbr[title]:after { -// content: " (" attr(title) ")"; -// } -// a[href^="#"]:after, -// a[href^="javascript:"]:after { -// content: ""; -// } -// pre, -// blockquote { -// border: 1px solid #999; - -// page-break-inside: avoid; -// } -// thead { -// display: table-header-group; -// } -// tr, -// img { -// page-break-inside: avoid; -// } -// img { -// max-width: 100% !important; -// } -// p, -// h2, -// h3 { -// orphans: 3; -// widows: 3; -// } -// h2, -// h3 { -// page-break-after: avoid; -// } -// select { -// background: #fff !important; -// } -// .navbar { -// display: none; -// } -// .btn > .caret, -// .dropup > .btn > .caret { -// border-top-color: #000 !important; -// } -// .label { -// border: 1px solid #000; -// } -// .table { -// border-collapse: collapse !important; -// } -// .table td, -// .table th { -// background-color: #fff; -// } -// .table-bordered th, -// .table-bordered td { -// border: 1px solid #ddd; -// } -// } +@import "./desk/css-variables"; -// .visible-print { -// display: none !important; -// } -// @media print { -// .visible-print { -// display: block !important; -// } -// table.visible-print { -// display: table; -// } -// tr.visible-print { -// display: table-row !important; -// } -// th.visible-print, -// td.visible-print { -// display: table-cell !important; -// } -// } -// .visible-print-block { -// display: none !important; -// } -// @media print { -// .visible-print-block { -// display: block !important; -// } -// } -// .visible-print-inline { -// display: none !important; -// } -// @media print { -// .visible-print-inline { -// display: inline !important; -// } -// } -// .visible-print-inline-block { -// display: none !important; -// } -// @media print { -// .visible-print-inline-block { -// display: inline-block !important; -// } -// } -// @media print { -// .hidden-print { -// display: none !important; -// } -// } +// .print-format { +// .ql-snow .ql-editor { +// height: auto; +// min-height: 0; +// // max-height: 0; +// } +// } + diff --git a/frappe/templates/print_formats/standard.html b/frappe/templates/print_formats/standard.html index ac87ee2849..fde0158b53 100644 --- a/frappe/templates/print_formats/standard.html +++ b/frappe/templates/print_formats/standard.html @@ -26,7 +26,7 @@

{{ _(section.label) }}

{%- endif -%} {% for column in section.columns %} -
+
{% for df in column.fields %} {{ render_field(df, doc) }} {% endfor %} diff --git a/frappe/templates/print_formats/standard_macros.html b/frappe/templates/print_formats/standard_macros.html index ef86ef2e3b..167e9461a3 100644 --- a/frappe/templates/print_formats/standard_macros.html +++ b/frappe/templates/print_formats/standard_macros.html @@ -164,8 +164,9 @@ data-fieldname="{{ df.fieldname }}" data-fieldtype="{{ df.fieldtype }}" {{ frappe.render_template(doc.print_heading_template, {"doc":doc}) }} {% else %}
-

{{ doc.select_print_heading or (doc.print_heading if doc.print_heading != None - else _(doc.doctype)) }}
+

+
{{ doc.select_print_heading or (doc.print_heading if doc.print_heading != None + else _(doc.doctype)) }}
{{ doc.sub_heading if doc.sub_heading != None else doc.name }}

diff --git a/frappe/templates/styles/standard.css b/frappe/templates/styles/standard.css index c87725da7c..49aa5fec69 100644 --- a/frappe/templates/styles/standard.css +++ b/frappe/templates/styles/standard.css @@ -74,6 +74,7 @@ } .table { + font-size: inherit; margin: 20px 0px; }