Add Custom Page to Print PDF (#418)

author: Kaalleen <36401965+kaalleen@users.noreply.github.com> 2019-03-26 18:24:02 +0100
committer: GitHub <noreply@github.com> 2019-03-26 18:24:02 +0100
commit: f435520663d59378546426ea7263e78d51362c44 (patch)
tree: e199df485cbc558336e0c7cfabf512c0da1be50d /print/templates
parent: 0b9f95ed88f6d4eb47c774c69e4fa9a03546b4b5 (diff)
4 files changed, 94 insertions, 34 deletions
diff --git a/print/templates/custom-page.html b/print/templates/custom-page.html
new file mode 100644
index 00000000..1ed15dae
--- /dev/null
+++ b/print/templates/custom-page.html
@@ -0,0 +1,40 @@
+        <header>
+          {% include 'headline.html' %}
+        </header>
+        <main>
+            <fieldset id="edit-custom-page">
+              <div id="custom-page-tool-bar" class="tool-bar">
+                <button id="custom-page-bold" class="tb-button tb-bold ff-serif edit-only" title="Bold"><b>B</b></button>
+                <button id="custom-page-italic" class="tb-button tb-italic ff-serif edit-only" title="Italic"><i>I</i></button>
+                <button id="custom-page-underline" class="tb-button tb-underline ff-serif edit-only" title="Underline"><u>U</u></button>
+                <button id="custom-page-remove" class="tb-button tb-remove ff-serif edit-only" title="Remove formatting">
+                    <u style="vertical-align: super; font-size: 60%;">A</u>
+                    <span style="vertical-align: sub; font-size: 80%;">A</span>
+                </button>
+                <button id="custom-page-hyperlink" class="tb-button tb-hyperlink edit-only" title="Hyperlink">☍</button>
+                <button id="custom-page-mail" class="tb-button tb-mail edit-only" title="E-Mail">✉</button>
+                <button id="custom-page-reset" class="tb-button tb-reset" title="Reset text">↺</button>
+                <p id="custom-page-edit-mode" class="edit-mode">
+                    <input type="checkbox" id="custom-page-switch-mode" class="switch-mode" name="custom-page-switch-mode" /> 
+                    <label for="custom-page-switch-mode">{{ ('Show HTML') }}</label>
+                </p>
+                <div id="custom-page-url" class="tb-popup url-window">
+                  <p>{{ _("Enter URL") }}: <input type="text" id="custom-page-link" class="user-url" name="custom-page-link" value="https://" /></p>
+                  <p><button id="custom-page-url-ok" class="url-ok">{{ _("OK") }}</button> <button id="custom-page-url-cancel" class="url-cancel">{{ _("Cancel") }}</button></p>
+                </div>
+                <div id="custom-page-email" class="tb-popup mail-window">
+                  <p>{{ _("Enter E-Mail") }}: <input type="text" id="custom-page-mail" class="user-mail" name="custom-page-mail" value="@" /></p>
+                  <p><button id="custom-page-mail-ok" class="mail-ok">{{ _("OK") }}</button> <button id="custom-page-mail-cancel" class="mail-cancel">{{ _("Cancel") }}</button></p>
+                </div>
+                <div id="custom-page-info-original" class="original-info"><b>{{ _("Custom Information Sheet") }}</b></div>
+                <div id="custom-page-reset" class="tb-popup reset-window">
+                  <p>{{ _("This will reset your custom text to the default.") }}</p>
+                  <p>{{ _("All changes will be lost.") }}</p>
+                  <p><button id="custom-page-reset-ok" class="reset-ok">{{ _("OK") }}</button> <button id="custom-page-reset-cancel" class="reset-cancel">{{ _("Cancel") }}</button></p>
+                </div>
+              </div>
+              <div id="custom-page-content" class="info-text" contenteditable="true" data-field-name="custom-page-content">{{ _("Custom Information Sheet") }}</div>
+              <p class="notice--warning"><b>Note</b>: If you are using Firefox, use visible URLs. Links will not be printed to PDF with this browser.</p>
+            </fieldset>
+        </main>
+        {% include 'footer.html' %}
diff --git a/print/templates/index.html b/print/templates/index.html
index c7fa5d74..d0ab848f 100644
--- a/print/templates/index.html
+++ b/print/templates/index.html
@@ -9,22 +9,23 @@
 </head>
 <body>
     {% include 'ui.html' %}
-    
 {# client overview #}    
-        <div class="page client-overview" style="display: {{ 'block' if view.client_overview else 'none' }}">{% include 'print_overview.html' %}</div>
+    <div class="page client-overview" style="display: {{ 'block' if view.client_overview else 'none' }}">{% include 'print_overview.html' %}</div>
         
 {# client detailedview #}    
-        {% set printview = 'detailedview' %}
-        {% for color_block in color_blocks %}
-            {% set outer_loop = loop %}
-            <div class="page client-detailedview" style="display: {{ 'block' if view.client_detailedview else 'none' }}">{% include 'print_detail.html' %}</div>
-        {% endfor %}
+    {% set printview = 'detailedview' %}
+    {% for color_block in color_blocks %}
+        {% set outer_loop = loop %}
+        <div class="page client-detailedview" style="display: {{ 'block' if view.client_detailedview else 'none' }}">{% include 'print_detail.html' %}</div>
+    {% endfor %}
 
 {# operator overview #}    
-        <div class="page operator-overview" style="display: {{ 'block' if view.operator_overview else 'none' }}">{% include 'operator_overview.html' %}</div>
+    <div class="page operator-overview" style="display: {{ 'block' if view.operator_overview else 'none' }}">{% include 'operator_overview.html' %}</div>
     
 {# operator detailed view #}
-        {% include 'operator_detailedview.html' %}
+    {% include 'operator_detailedview.html' %}
 
+{# custom pages #}
+    <div class="page custom-page" style="display: {{ 'block' if view.custom_page else 'none' }}">{% include 'custom-page.html' %}</div>
 </body>
 </html>
diff --git a/print/templates/operator_overview.html b/print/templates/operator_overview.html
index 8f70b4f0..a3090c1f 100644
--- a/print/templates/operator_overview.html
+++ b/print/templates/operator_overview.html
@@ -25,7 +25,7 @@
             </div>
         </header>
         <main>
-            <figure class="inksimulation operator" data-field-name="operator-overview-transform" style="height: 210mm;" title="{{ _('Ctrl + Scroll to Zoom') }}">
+            <figure class="inksimulation operator" data-field-name="operator-overview-transform" title="{{ _('Ctrl + Scroll to Zoom') }}">
                 {{ svg_overview|replace("<li>", "")|replace("</li>", "")|safe }}
                 {% include 'ui_svg_action_buttons.html' %}
             </figure>
diff --git a/print/templates/ui.html b/print/templates/ui.html
index 71908b52..23e39145 100644
--- a/print/templates/ui.html
+++ b/print/templates/ui.html
@@ -36,11 +36,30 @@
         </fieldset>
         <fieldset>
           <legend>{{ _('Print Layouts') }}</legend>
-          <p><input type="checkbox" class="view" id="client-overview" data-field-name="client-overview" /><label for="client-overview">{{ _('Client Overview') }}</label></p>
-          <p><input type="checkbox" class="view" id="client-detailedview" data-field-name="client-detailedview" /><label for="client-detailedview">{{ _('Client Detailed View') }}</label></p>
-          <p><input type="checkbox" class="view" id="operator-overview" data-field-name="operator-overview" CHECKED /><label for="operator-overview">{{ _('Operator Overview') }}</label></p>
-          <p><input type="checkbox" class="view" id="operator-detailedview" data-field-name="operator-detailedview" CHECKED /><label for="operator-detailedview">{{ _('Operator Detailed View') }}</label></p>
-          <p style="text-indent: 1.5em;">{{ _('Thumbnail size') }}: <input type="range" min="15" max="110" value="15" step="5" id="operator-detailedview-thumbnail-size" data-field-name="operator-detailedview-thumbnail-size" style="vertical-align: middle;"> <span id="display-thumbnail-size">15mm</span></p>
+          <p>
+            <input type="checkbox" class="view" id="client-overview" data-field-name="client-overview" />
+            <label for="client-overview">{{ _('Client Overview') }}</label>
+          </p>
+          <p>
+            <input type="checkbox" class="view" id="client-detailedview" data-field-name="client-detailedview" />
+            <label for="client-detailedview">{{ _('Client Detailed View') }}</label>
+          </p>
+          <p>
+            <input type="checkbox" class="view" id="operator-overview" data-field-name="operator-overview" CHECKED />
+            <label for="operator-overview">{{ _('Operator Overview') }}</label>
+          </p>
+          <p>
+            <input type="checkbox" class="view" id="operator-detailedview" data-field-name="operator-detailedview" CHECKED />
+            <label for="operator-detailedview">{{ _('Operator Detailed View') }}</label>
+          </p>
+          <p style="text-indent: 1.5em;">{{ _('Thumbnail size') }}:
+            <input type="range" min="15" max="110" value="15" step="5" id="operator-detailedview-thumbnail-size" data-field-name="operator-detailedview-thumbnail-size" style="vertical-align: middle;" />
+            <span id="display-thumbnail-size">15mm</span>
+          </p>
+          <p>
+            <input type="checkbox" class="view" id="custom-page" data-field-name="custom-page" />
+            <label for="custom-page">{{ _('Custom information sheet') }}</label>
+          </p>
         </fieldset>
         <button class="save-settings" title="{{ _("Includes these Page Setup, estimated time settings and also the icon.") }}">{{ _("Save as defaults") }}</button>
       </fieldset>
@@ -58,31 +77,31 @@
         </fieldset>
         <fieldset id="edit-footer">
           <legend>{{ _('Footer: Operator contact information') }}</legend>
-          <div id="tool-bar">
-            <button id="tb-bold" class="tb-button ff-serif edit-only" title="Bold"><b>B</b></button>
-            <button id="tb-italic" class="tb-button ff-serif edit-only" title="Italic"><i>I</i></button>
-            <button id="tb-underline" class="tb-button ff-serif edit-only" title="Underline"><u>U</u></button>
-            <button id="tb-remove" class="tb-button ff-serif edit-only" title="Remove formatting"><u style="vertical-align: super; font-size: 60%;">A</u><span style="vertical-align: sub; font-size: 80%;">A</span></button>
-            <button id="tb-hyperlink" class="tb-button edit-only" title="Hyperlink">☍</button>
-            <button id="tb-mail" class="tb-button edit-only" title="E-Mail">✉</button>
-            <button id="tb-reset" class="tb-button" title="Reset text">↺</button>
-            <p id="edit-mode"><input type="checkbox" id="switch-mode" name="switch-mode" /> <label for="switch-mode">{{ ('Show HTML') }}</label></p>
-            <div id="footer-url">
-              <p>{{ _("Enter URL") }}: <input type="text" id="footer-link" name="footer-link" value="https://" /></p>
-              <p><button id="url-ok">{{ _("OK") }}</button> <button id="url-cancel">{{ _("Cancel") }}</button></p>
+          <div id="tool-bar" class="tool-bar">
+            <button id="tb-bold" class="tb-button tb-bold ff-serif edit-only" title="Bold"><b>B</b></button>
+            <button id="tb-italic" class="tb-button tb-italic ff-serif edit-only" title="Italic"><i>I</i></button>
+            <button id="tb-underline" class="tb-button tb-underline ff-serif edit-only" title="Underline"><u>U</u></button>
+            <button id="tb-remove" class="tb-button tb-remove ff-serif edit-only" title="Remove formatting"><u style="vertical-align: super; font-size: 60%;">A</u><span style="vertical-align: sub; font-size: 80%;">A</span></button>
+            <button id="tb-hyperlink" class="tb-button tb-hyperlink edit-only" title="Hyperlink">☍</button>
+            <button id="tb-mail" class="tb-button tb-mail edit-only" title="E-Mail">✉</button>
+            <button id="tb-reset" class="tb-button tb-reset" title="Reset text">↺</button>
+            <p id="edit-mode" class="edit-mode"><input type="checkbox" id="switch-mode" class="switch-mode" name="switch-mode" /> <label for="switch-mode">{{ ('Show HTML') }}</label></p>
+            <div id="footer-url" class="tb-popup url-window">
+              <p>{{ _("Enter URL") }}: <input type="text" id="footer-link" class="user-url" name="footer-link" value="https://" /></p>
+              <p><button id="url-ok" class="url-ok">{{ _("OK") }}</button> <button id="url-cancel" class="url-cancel">{{ _("Cancel") }}</button></p>
             </div>
-            <div id="footer-email">
-              <p>{{ _("Enter E-Mail") }}: <input type="text" id="footer-mail" name="footer-mail" value="@" /></p>
-              <p><button id="mail-ok">{{ _("OK") }}</button> <button id="mail-cancel">{{ _("Cancel") }}</button></p>
+            <div id="footer-email" class="tb-popup mail-window">
+              <p>{{ _("Enter E-Mail") }}: <input type="text" id="footer-mail" class="user-mail" name="footer-mail" value="@" /></p>
+              <p><button id="mail-ok" class="mail-ok">{{ _("OK") }}</button> <button id="mail-cancel" class="mail-cancel">{{ _("Cancel") }}</button></p>
             </div>
-            <div id="footer-info-original">{{ _("Proudly generated with") }} <a href="http://inkstitch.org/" target="_blank">Ink/Stitch</a></div>
-            <div id="footer-reset">
+            <div id="footer-info-original" class="original-info">{{ _("Proudly generated with") }} <a href="http://inkstitch.org/" target="_blank">Ink/Stitch</a></div>
+            <div id="footer-reset" class="tb-popup reset-window">
               <p>{{ _("This will reset your custom text to the default.") }}</p>
               <p>{{ _("All changes will be lost.") }}</p>
-              <p><button id="reset-ok">{{ _("OK") }}</button> <button id="reset-cancel">{{ _("Cancel") }}</button></p>
+              <p><button id="reset-ok" class="reset-ok">{{ _("OK") }}</button> <button id="reset-cancel" class="reset-cancel">{{ _("Cancel") }}</button></p>
             </div>
           </div>
-          <div id="footer-info-text" contenteditable="true"><div>{{ _("Proudly generated with") }} <a href="http://inkstitch.org/" target="_blank">Ink/Stitch</a></div></div>
+          <div id="footer-info-text" class="info-text" contenteditable="true"><div>{{ _("Proudly generated with") }} <a href="http://inkstitch.org/" target="_blank">Ink/Stitch</a></div></div>
           <p class="notice--warning"><b>Note</b>: If you are using Firefox, use visible URLs. Links will not be printed to PDF with this browser.</p>
         </fieldset>
         <button class="save-settings" title="{{ _('Includes these Page Setup, estimated time settings and also the icon.') }}">{{ _("Save as defaults") }}</button>
author	Kaalleen <36401965+kaalleen@users.noreply.github.com>	2019-03-26 18:24:02 +0100
committer	GitHub <noreply@github.com>	2019-03-26 18:24:02 +0100
commit	f435520663d59378546426ea7263e78d51362c44 (patch)
tree	e199df485cbc558336e0c7cfabf512c0da1be50d /print/templates
parent	0b9f95ed88f6d4eb47c774c69e4fa9a03546b4b5 (diff)