From f435520663d59378546426ea7263e78d51362c44 Mon Sep 17 00:00:00 2001 From: Kaalleen <36401965+kaalleen@users.noreply.github.com> Date: Tue, 26 Mar 2019 18:24:02 +0100 Subject: [PATCH] Add Custom Page to Print PDF (#418) --- lib/extensions/print_pdf.py | 8 +- print/resources/inkstitch-logo.svg | 125 +++++++++++--- print/resources/inkstitch.js | 218 ++++++++++++++----------- print/resources/style.css | 139 +++++++++------- print/templates/custom-page.html | 40 +++++ print/templates/index.html | 19 ++- print/templates/operator_overview.html | 2 +- print/templates/ui.html | 67 +++++--- 8 files changed, 402 insertions(+), 216 deletions(-) create mode 100644 print/templates/custom-page.html diff --git a/lib/extensions/print_pdf.py b/lib/extensions/print_pdf.py index c718fa092..4913a32a0 100644 --- a/lib/extensions/print_pdf.py +++ b/lib/extensions/print_pdf.py @@ -353,7 +353,13 @@ class Print(InkstitchExtension): template = env.get_template('index.html') return template.render( - view={'client_overview': False, 'client_detailedview': False, 'operator_overview': True, 'operator_detailedview': True}, + view={ + 'client_overview': False, + 'client_detailedview': False, + 'operator_overview': True, + 'operator_detailedview': True, + 'custom_page': False + }, logo={'src': '', 'title': 'LOGO'}, date=date.today(), client="", diff --git a/print/resources/inkstitch-logo.svg b/print/resources/inkstitch-logo.svg index d9a298cfe..138318b90 100644 --- a/print/resources/inkstitch-logo.svg +++ b/print/resources/inkstitch-logo.svg @@ -1,27 +1,98 @@ - - - - - - - - - - - - - - - - - + + + +image/svg+xml + + + + + + + + + + + + + \ No newline at end of file diff --git a/print/resources/inkstitch.js b/print/resources/inkstitch.js index ac8c72b4c..79c6d9c3c 100644 --- a/print/resources/inkstitch.js +++ b/print/resources/inkstitch.js @@ -285,7 +285,7 @@ $(function() { /* Contendeditable Fields */ - $('body').on('focusout', '[contenteditable="true"]:not(.footer-info)', function() { + $('body').on('focusout', '[contenteditable="true"]:not(.info-text)', function() { /* change svg scale */ var content = $(this).text(); var field_name = $(this).attr('data-field-name'); @@ -326,6 +326,8 @@ $(function() { } else if (item.is('div.footer-info')) { $('#footer-info-text').html(value); item.html(value); + } else if (item.is('#custom-page-content')) { + $('#custom-page-content').html(value); } else { item.text(value); } @@ -339,7 +341,7 @@ $(function() { }, 500); }); - $('body').on('keypress', '[contenteditable="true"]:not(#footer-info-text)', function(e) { + $('body').on('keypress', '[contenteditable="true"]:not(.info-text)', function(e) { if (e.which == 13) { // pressing enter defocuses the element this.blur(); @@ -360,8 +362,8 @@ $(function() { } }); - $('#footer-info-text[contenteditable="true"]').focusout(function() { - updateFooter(); + $('.info-text[contenteditable="true"]').focusout(function() { + updateEditableText($(this)); }); /* Settings Bar */ @@ -415,119 +417,142 @@ $(function() { }); // Footer - function getEditMode(){ - return $('#switch-mode').prop('checked'); + function getEditMode(element){ + return element.closest('fieldset').find('.switch-mode').prop('checked'); } - $('#switch-mode').change(function() { - var editMode = getEditMode(); + $('.switch-mode').change(function() { + var element = $(this); + var info_text = element.closest('fieldset').find('.info-text'); + var editMode = getEditMode(element); if (editMode) { - $('#footer-info-text').text( $('#footer-info-text' ).html()); - $('#tool-bar .edit-only').prop("disabled", true); + info_text.text( info_text.html() ); + element.closest('.tool-bar').find('.tb-button.edit-only').prop("disabled", true); } else { - $('#footer-info-text').css('display', 'block'); - var sourceText = $('#footer-info-text').text(); - $('#footer-info-text').html( sourceText ); - $('#tool-bar .tb-button.edit-only').prop('disabled', false); + info_text.css('display', 'block'); + var sourceText = info_text.text(); + info_text.html( sourceText ); + element.closest('.tool-bar').find('.tb-button.edit-only').prop('disabled', false); } }); - function updateFooter() { - var editMode = getEditMode(); - var footerText = ''; + function updateEditableText(element) { + var editMode = getEditMode(element); + var info_text = element.closest('fieldset').find('.info-text'); + var content = info_text.html(); + var editableText = ''; + if (editMode) { - footerText = $('#footer-info-text' ).text(); + editableText = info_text.text(); } else { - footerText = $('#footer-info-text').html(); + editableText = info_text.html(); + } + + if(info_text.is('#footer-info-text')) { + $('div.footer-info').html(editableText); + $.postJSON('/settings/footer-info', {value: content}); + } else { + $.postJSON('/settings/custom-page-content', {value: content}); } - $('.footer-info').html(footerText); - var content = $('.footer-info').html(); - $.postJSON('/settings/footer-info', {value: content}); } function formatText(selection, value) { - var htmlMode = getEditMode(); - if(!htmlMode) { if(window.getSelection().toString()){ document.execCommand(selection, false, value); - updateFooter(); } - } } - $('#tb-bold').click(function(selection) { - formatText('bold'); - }); - - $('#tb-italic').click(function() { - formatText('italic'); - }); - - $('#tb-underline').click(function() { - formatText('underline'); - }); - - $('#tb-remove').click(function() { - formatText('removeFormat'); - }); - - $('#tb-hyperlink').click(function() { - formatText('createlink', 'tempurl'); - $('#footer-url').css('display', 'block'); - }); - - $('#url-ok').click(function() { - var link = $('#footer-link').val(); - $('#footer-info-text a[href="tempurl"]').attr('href', link); - $('#footer-link').val('https://'); - $('#footer-url').css('display', 'none'); - updateFooter(); - }); - - $('#url-cancel').click(function() { - $('#footer-info-text a[href="tempurl"]').contents().unwrap(); - $('#footer-link').val('https://'); - $('#footer-url').css('display', 'none'); - updateFooter(); - }); - - $('#tb-mail').click(function() { - formatText('createlink', 'tempurl'); - $('#footer-email').css('display', 'block'); - }); - - $('#mail-ok').click(function() { - var link = 'mailto:' + $('#footer-mail').val(); - $('#footer-info-text a[href="tempurl"]').attr('href', link); - $('#footer-mail').val('@'); - $('#footer-email').css('display', 'none'); - updateFooter(); - }); - - $('#mail-cancel').click(function() { - $('#footer-info-text a[href="tempurl"]').contents().unwrap(); - $('#footer-mail').val('@'); - $('#footer-email').css('display', 'none'); - updateFooter(); - }); - - $('#tb-reset').click(function() { - $('#footer-reset').css('display', 'block'); - }); - - $('#reset-ok').click(function() { - var htmlMode = getEditMode(); - if(!htmlMode) { - $('#footer-info-text').html($('#footer-info-original').html()); - } else { - $('#footer-info-text').text($('#footer-info-original').html()); + $('.tb-bold').click(function() { + if(!getEditMode($(this))) { + formatText('bold'); + updateEditableText($(this)); } - $('#footer-reset').css('display', 'none'); - updateFooter(); }); - $('#reset-cancel').click(function() { - $('#footer-reset').css('display', 'none'); + $('.tb-italic').click(function() { + if(!getEditMode($(this))) { + formatText('italic'); + updateEditableText($(this)); + } + }); + + $('.tb-underline').click(function() { + if(!getEditMode($(this))) { + formatText('underline'); + updateEditableText($(this)); + } + }); + + $('.tb-remove').click(function() { + if(!getEditMode($(this))) { + formatText('removeFormat'); + updateEditableText($(this)); + } + }); + + $('.tb-hyperlink').click(function() { + if(!getEditMode($(this))) { + formatText('createlink', 'tempurl'); + updateEditableText($(this)); + $(this).closest('.tool-bar').children('.url-window').css('display', 'block'); + } + }); + + $('.url-ok').click(function() { + var link = $(this).closest('.tool-bar').find('.user-url').val(); + $(this).closest('fieldset').find('.info-text').find('a[href="tempurl"]').attr('href', link); + $('.user-url').val('https://'); + $('.url-window').css('display', 'none'); + updateEditableText($(this)); + }); + + $('.url-cancel').click(function() { + $(this).closest('fieldset').find('.info-text').find('a[href="tempurl"]').contents().unwrap(); + $('.user-url').val('https://'); + $('.url-window').css('display', 'none'); + updateEditableText($(this)); + }); + + $('.tb-mail').click(function() { + if(!getEditMode($(this))) { + formatText('createlink', 'tempurl'); + updateEditableText($(this)); + $(this).closest('.tool-bar').find('.mail-window').css('display', 'block'); + } + }); + + $('.mail-ok').click(function() { + var link = 'mailto:' + $(this).closest('.tool-bar').find('.user-mail').val(); + $(this).closest('fieldset').find('.info-text').find('a[href="tempurl"]').attr('href', link); + $('.user-mail').val('@'); + $('.mail-window').css('display', 'none'); + updateEditableText($(this)); + }); + + $('.mail-cancel').click(function() { + $(this).closest('fieldset').find('.info-text').find('a[href="tempurl"]').contents().unwrap(); + $('.user-mail').val('@'); + $('.mail-window').css('display', 'none'); + updateEditableText($(this)); + }); + + $('.tb-reset').click(function() { + $(this).closest('.tool-bar').find('.reset-window').css('display', 'block'); + }); + + $('.reset-ok').click(function() { + var htmlMode = getEditMode($(this)); + if(!htmlMode) { + $(this).closest('fieldset').find('.info-text').html($(this).closest('.tool-bar').find('.original-info').html()); + } else { + $(this).closest('fieldset').find('.info-text').text($(this).closest('.tool-bar').find('.original-info').html()); + } + $('.reset-window').css('display', 'none'); + updateEditableText($(this)); + }); + + $('.reset-cancel').click(function() { + $('.reset-window').css('display', 'none'); }); $('body').on("click", ".edit-footer-link", function() { @@ -713,6 +738,7 @@ $(function() { settings["operator-overview"] = $("[data-field-name='operator-overview']").is(':checked'); settings["operator-detailedview"] = $("[data-field-name='operator-detailedview']").is(':checked'); settings["operator-detailedview-thumbnail-size"] = $("[data-field-name='operator-detailedview-thumbnail-size']").val(); + settings["custom-page"] = $("[data-field-name='custom-page']").is(':checked'); settings["paper-size"] = $('select#printing-size').find(':selected').val(); var logo = $("figure.brandlogo img").attr('src'); diff --git a/print/resources/style.css b/print/resources/style.css index f697c7dca..9ffff07d8 100644 --- a/print/resources/style.css +++ b/print/resources/style.css @@ -66,30 +66,6 @@ body { position: relative; } -/* Printing Size */ - .page.a4 { - width: 205mm; - height: 292mm; - padding: 15mm; - } - - .page.client-overview.a4 header, .page.operator-overview.a4 header { - height: 50mm; - flex-direction: row; - } - - .page.client-overview.a4 div.job-details, .page.operator-overview.a4 div.job-details { - width: 100%; - } - - .page.client-overview.a4 .client-overview-main figure.inksimulation { - height: 150mm; - } - - .page.client-overview.a4 figure.brandlogo, .page.operator-overview.a4 figure.brandlogo { - margin: -6mm 2.5mm; - } - /* Settings */ .ui { @@ -289,7 +265,7 @@ body { position: relative; } - #footer-info-text { + .info-text { width: 100%; min-height: 5em; border: 1px solid darkgrey; @@ -298,23 +274,25 @@ body { background: white; } - #tool-bar .tb-button { - border: 1px solid darkgrey; + .tb-button { + border: 1px solid darkgrey !important; border-bottom: none; margin-bottom: -0.2em; - cursor: pointer; - color: #413232; height: 2.2em; vertical-align: top; + padding: 5px; + cursor: pointer; + background: white; + color: black; } - #tool-bar .tb-button:disabled { - background: #eaeaea; - color: white; - cursor: auto; + .tb-button:disabled { + background: #eaeaea !important; + color: white !important; + cursor: auto !important; } - #edit-mode { + .edit-mode { display: inline; position: relative; border: 1px solid darkgray; @@ -322,18 +300,18 @@ body { vertical-align: top; } - #edit-mode input { + .edit-mode input { visibility: hidden; } - #edit-mode label { + .edit-mode label { cursor: pointer; vertical-align: middle; background: white; color: #413232; } - #edit-mode label:after { + .edit-mode label:after { opacity: 0.1; content: ''; position: absolute; @@ -348,21 +326,21 @@ body { transform: rotate(-45deg); } - #edit-mode label:hover::after { + .edit-mode label:hover::after { opacity: 0.5; } - #edit-mode input[type=checkbox]:checked + label:after { + .edit-mode input[type=checkbox]:checked + label:after { opacity: 1; } - #edit-mode span { + .edit-mode span { margin-left: 1em; } - div#footer-url, div#footer-email, div#footer-reset { + div.tb-popup { display: none; - position: absolute; + position: absolute !important; background: white; border: 1px solid black; padding: 5mm; @@ -371,7 +349,7 @@ body { z-index: 10; } - div#footer-info-original { + div.original-info { visibility: hidden; width: 0; height: 0; @@ -418,7 +396,6 @@ body { /* Header */ - header { width: 100%; height: 40mm; @@ -434,13 +411,11 @@ body { figure.brandlogo { height: 30mm; width: 30mm; - margin: 2.5mm; + margin: 0 4mm 0 0; } figure.brandlogo label { display: block; - width: 100%; - height: 100%; text-align: center; position: relative; } @@ -472,13 +447,6 @@ body { cursor: pointer; } - .operator-detailedview figure.brandlogo { - height: 20mm; - width: 30mm; - margin: 0 2.5mm; - text-align: left; - } - .operator-detailedview figure.brandlogo img { max-width: 30mm; max-height: 20mm; @@ -488,7 +456,7 @@ body { display: flex; display: -webkit-flex; /* old webkit */ display: -ms-flexbox; /* IE 10 */ - width: calc(100% - 50mm); + width: calc(100% - 40mm); height: 50%; flex-grow: 1; } @@ -515,6 +483,10 @@ body { padding-top: 6mm; } + .operator-overview figure.inksimulation { + height: 210mm; + } + .operator-overview div.job-details, .client-overview div.job-details { padding-top: 2mm; } @@ -904,6 +876,11 @@ body { .opd-color-block.large { display: block; margin: 5mm 0; + font-size: 14pt; + } + + .opd-color-block.large .operator-colorswatch { + font-size: 8pt; } .opd-color-block.large:first-child { @@ -987,6 +964,23 @@ body { display: none; } +/* Custom information sheet */ + .custom-page header { + height: 30mm; + } + + .custom-page main { + height: 230mm + } + #custom-page-tool-bar { + margin-bottom: 0.5em; + } + + #custom-page-content { + height: 200mm; + overflow-y: hidden; + text-align: left; + } /* Color Swatch Logic */ /* reference : http://jsfiddle.net/jrulle/btg63ezy/3/ */ @@ -1120,7 +1114,33 @@ body { height: calc(100% / 5); width: calc(100% / 12); } - + + +/* Print Size A4 */ + + .page.a4 { + width: 210mm; + height: 296mm; + padding: 15mm; + } + + .page.client-overview.a4 header, .page.operator-overview.a4 header { + height: 50mm; + flex-direction: row; + } + + .page.client-overview.a4 div.job-details, .page.operator-overview.a4 div.job-details { + width: 100%; + } + + .page.client-overview.a4 .client-overview-main figure.inksimulation { + height: 150mm; + } + + .page.client-overview.a4 figure.brandlogo, .page.operator-overview.a4 figure.brandlogo { + margin: 0 4mm -2mm 0; + } + @media screen { .page { margin-top: 20mm !important; @@ -1153,8 +1173,11 @@ body { .ui, #settings-ui, #errors, - span.logo-instructions { - display: none; + span.logo-instructions, + #custom-page-tool-bar, + #custom-page-content, + .notice--warning { + display: none !important; } .header-field:not(:empty)::before { diff --git a/print/templates/custom-page.html b/print/templates/custom-page.html new file mode 100644 index 000000000..1ed15dae9 --- /dev/null +++ b/print/templates/custom-page.html @@ -0,0 +1,40 @@ +
+ {% include 'headline.html' %} +
+
+
+
+ + + + + + + +

+ + +

+
+

{{ _("Enter URL") }}:

+

+
+
+

{{ _("Enter E-Mail") }}:

+

+
+
{{ _("Custom Information Sheet") }}
+
+

{{ _("This will reset your custom text to the default.") }}

+

{{ _("All changes will be lost.") }}

+

+
+
+
{{ _("Custom Information Sheet") }}
+

Note: If you are using Firefox, use visible URLs. Links will not be printed to PDF with this browser.

+
+
+ {% include 'footer.html' %} diff --git a/print/templates/index.html b/print/templates/index.html index c7fa5d745..d0ab848f3 100644 --- a/print/templates/index.html +++ b/print/templates/index.html @@ -9,22 +9,23 @@ {% include 'ui.html' %} - {# client overview #} -
{% include 'print_overview.html' %}
+
{% include 'print_overview.html' %}
{# client detailedview #} - {% set printview = 'detailedview' %} - {% for color_block in color_blocks %} - {% set outer_loop = loop %} -
{% include 'print_detail.html' %}
- {% endfor %} + {% set printview = 'detailedview' %} + {% for color_block in color_blocks %} + {% set outer_loop = loop %} +
{% include 'print_detail.html' %}
+ {% endfor %} {# operator overview #} -
{% include 'operator_overview.html' %}
+
{% include 'operator_overview.html' %}
{# operator detailed view #} - {% include 'operator_detailedview.html' %} + {% include 'operator_detailedview.html' %} +{# custom pages #} +
{% include 'custom-page.html' %}
diff --git a/print/templates/operator_overview.html b/print/templates/operator_overview.html index 8f70b4f01..a3090c1f1 100644 --- a/print/templates/operator_overview.html +++ b/print/templates/operator_overview.html @@ -25,7 +25,7 @@
-
+
{{ svg_overview|replace("
  • ", "")|replace("
    • ", "")|safe }} {% include 'ui_svg_action_buttons.html' %}
    diff --git a/print/templates/ui.html b/print/templates/ui.html index 71908b52f..23e391453 100644 --- a/print/templates/ui.html +++ b/print/templates/ui.html @@ -36,11 +36,30 @@
    {{ _('Print Layouts') }} -

    -

    -

    -

    -

    {{ _('Thumbnail size') }}: 15mm

    +

    + + +

    +

    + + +

    +

    + + +

    +

    + + +

    +

    {{ _('Thumbnail size') }}: + + 15mm +

    +

    + + +

    @@ -58,31 +77,31 @@