add editable footer

closes #346 

3 files changed, 116 insertions, 68 deletions

diff --git a/print/templates/footer.html b/print/templates/footer.html
index 0c043e2f..17589628 100644
--- a/print/templates/footer.html
+++ b/print/templates/footer.html
@@ -1,6 +1,7 @@
 <footer>
     <p class="num_pages">{{ _('Page') }} <span class="page-num"></span>/<span class="total-page-num"></span></p>
-    <p>Proudly generated with <a href="http://inkstitch.org/" target="_blank">Ink/Stitch</a></p>
+    <div class="footer-info" data-field-name="footer-info">{{ _('Proudly generated with') }} <a href="http://inkstitch.org/" target="_blank">Ink/Stitch</a></div>
+    <div class="edit-footer-link">✎</div>
 </footer>
 
 
diff --git a/print/templates/headline.html b/print/templates/headline.html
index bf112dea..11ef3ba5 100644
--- a/print/templates/headline.html
+++ b/print/templates/headline.html
@@ -1,7 +1,7 @@
 <figure class="brandlogo">
-  <label for="logo-picker">
+  <label class="logo-upload">
     <img src="{{ logo.src or "resources/inkstitch-logo.svg" }}" alt="{{ logo.title }}" title="{{ logo.title }}" data-field-name="logo">
-    <input type=file id="logo-picker" />
+    <input type=file class="logo-picker" />
     <span class="logo-instructions">{{ _("Click to choose another logo") }}</span>
   </label>
 </figure>
diff --git a/print/templates/ui.html b/print/templates/ui.html
index 5d565aba..2db3a81d 100644
--- a/print/templates/ui.html
+++ b/print/templates/ui.html
@@ -16,82 +16,129 @@
       
       <div id="tabs">
         <button class="tab active">{{ _('Page Setup') }}</button>
+        <button class="tab" id="branding-tab">{{ _('Branding') }}</button>
         <button class="tab">{{ _('Estimated Time') }}</button>
         <button class="tab">{{ _('Design') }}</button>
       </div>
+
       <div id="fieldsets-ui">
+
         <fieldset id="ui-page-setup">
+          <fieldset>
           <legend>{{ _('Page Setup') }}</legend>
-          <div>
-            <p class="select-container">
-              <label for="printing-size">{{ _('Printing Size') }}:</label>
-                <select id="printing-size" data-field-name="paper-size">
-                  <option value="letter" selected="selected">Letter</option>
-                  <option value="a4">A4</option>
-                </select>
-            </p>
-          </div>
-          <div>
-           <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>
-            </fieldset>
-            <button class="save-settings" title="{{ _("Includes these Page Setup, estimated time settings and also the icon.") }}">{{ _("Save as defaults") }}</button>
+          <p class="select-container">
+            <label for="printing-size">{{ _('Printing Size') }}:</label>
+              <select id="printing-size" data-field-name="paper-size">
+                <option value="letter" selected="selected">Letter</option>
+                <option value="a4">A4</option>
+              </select>
+          </p>
+        </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>
+        </fieldset>
+        <button class="save-settings" title="{{ _("Includes these Page Setup, estimated time settings and also the icon.") }}">{{ _("Save as defaults") }}</button>
+      </fieldset>
+
+      <fieldset id="ui-branding" class="ui-tab">
+        <fieldset>
+          <legend>{{ _('Logo') }}</legend>
+          <figure class="brandlogo brandlogo-ui">
+            <label class="logo-legend">
+              {{ ('Choose File') }}
+              <img src="{{ logo.src or "resources/inkstitch-logo.svg" }}" alt="{{ logo.title }}" title="{{ logo.title }}" data-field-name="logo" class="logo-ui">
+              <input type=file class="logo-picker" />
+            </label>
+          </figure>
+        </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>
+            <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>
+            <div id="footer-info-original">{{ _("Proudly generated with") }} <a href="http://inkstitch.org/" target="_blank">Ink/Stitch</a></div>
+            <div id="footer-reset">
+              <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>
+            </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>
+          <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>
-        <fieldset id="ui-time" class="ui-tab">
-          <legend>{{ _('Estimated Time') }}</legend>
-          <fieldset>
-            <legend>{{ _('Machine Settings') }}</legend>
-            <p>
-              <input class="view" type="number" id="machine-speed" data-field-name="machine-speed" min="0" value="700" title="{{ _('Average Machine Speed') }}" /> 
-              <label for="machine-speed">{{ _('stitches per minute ') }}</label>
-            </p>
-          </fieldset>
-          <fieldset>
-            <legend>{{ _('Time Factors') }}</legend>
-            <p>
-                <input type="number" id="time-additional" data-field-name="time-additional" min="0" value="0" />
-                <label for="time-additional" title="{{ _('Includes average time for preparing the machine, thread breaks and/or bobbin changes, etc.') }}">{{ _('seconds to add to total time*') }}</label>
-            </p>
-            <p>
-              <input type="number" id="time-color-change" data-field-name="time-color-change" min="0" value="10" />
-              <label for="time-color-change" title="{{ _('This will be added to the total time.') }}">{{ _('seconds needed for a color change*') }}</label></p>
-            <p>
-              <input type="number" id="time-trims" data-field-name="time-trims" min="0" value="10" />
-              <label for="time-trims">{{ _('seconds needed for trim') }}</label></p>
-          </fieldset>
-          <fieldset>
-            <legend>{{ _('Display Time On') }}</legend>
-            <p>
-              <p><input type="checkbox" class="time-display" id="time-clo" data-field-name="time-clo" /><label for="time-clo">{{ _('Client Overview') }}</label></p>
-              <p><input type="checkbox" class="time-display" id="time-cld" data-field-name="time-cld" /><label for="time-cld">{{ _('Client Detailed View') }}</label></p>
-              <p><input type="checkbox" class="time-display" id="time-opo" data-field-name="time-opo" CHECKED /><label for="time-opo">{{ _('Operator Overview') }}</label></p>
-              <p><input type="checkbox" class="time-display" id="time-opd" data-field-name="time-opd" CHECKED /><label for="time-opd">{{ _('Operator Detailed View') }}</label></p>
-            </p>
-          </fieldset>
-          <button class="save-settings" title="{{ _("Includes these Page Setup, estimated time settings and also the icon.") }}">{{ _("Save as defaults") }}</button>
+        <button class="save-settings" title="{{ _('Includes these Page Setup, estimated time settings and also the icon.') }}">{{ _("Save as defaults") }}</button>
+      </fieldset>
+
+      <fieldset id="ui-time" class="ui-tab">
+        <legend>{{ _('Estimated Time') }}</legend>
+        <fieldset>
+          <legend>{{ _('Machine Settings') }}</legend>
+          <p>
+            <input class="view" type="number" id="machine-speed" data-field-name="machine-speed" min="0" value="700" title="{{ _('Average Machine Speed') }}" /> 
+            <label for="machine-speed">{{ _('stitches per minute ') }}</label>
+          </p>
+        </fieldset>
+        <fieldset>
+          <legend>{{ _('Time Factors') }}</legend>
+          <p>
+              <input type="number" id="time-additional" data-field-name="time-additional" min="0" value="0" />
+              <label for="time-additional" title="{{ _('Includes average time for preparing the machine, thread breaks and/or bobbin changes, etc.') }}">{{ _('seconds to add to total time*') }}</label>
+          </p>
+          <p>
+            <input type="number" id="time-color-change" data-field-name="time-color-change" min="0" value="10" />
+            <label for="time-color-change" title="{{ _('This will be added to the total time.') }}">{{ _('seconds needed for a color change*') }}</label></p>
+          <p>
+            <input type="number" id="time-trims" data-field-name="time-trims" min="0" value="10" />
+            <label for="time-trims">{{ _('seconds needed for trim') }}</label></p>
         </fieldset>
-        <fieldset id="ui-design" class="ui-tab">
-          <legend>{{ _('Design') }}</legend>
-          <p class="select-container"><label for="thread-palette">{{ _('Thread Palette') }}:</label>
-            <select id="thread-palette" data-field-name="thread-palette">
-              {% if selected_palette is none %}
-                <option value="" selected>{{ _('None') }}</option>
-              {% endif %}
-              {% for palette in palettes %}
-                <option value="{{ palette }}" {{ "selected" if palette == selected_palette.name else "" }}>{{ palette }}</option>
-              {% endfor %}
-            </select>
+        <fieldset>
+          <legend>{{ _('Display Time On') }}</legend>
+          <p>
+            <p><input type="checkbox" class="time-display" id="time-clo" data-field-name="time-clo" /><label for="time-clo">{{ _('Client Overview') }}</label></p>
+            <p><input type="checkbox" class="time-display" id="time-cld" data-field-name="time-cld" /><label for="time-cld">{{ _('Client Detailed View') }}</label></p>
+            <p><input type="checkbox" class="time-display" id="time-opo" data-field-name="time-opo" CHECKED /><label for="time-opo">{{ _('Operator Overview') }}</label></p>
+            <p><input type="checkbox" class="time-display" id="time-opd" data-field-name="time-opd" CHECKED /><label for="time-opd">{{ _('Operator Detailed View') }}</label></p>
           </p>
         </fieldset>
-      </div><!-- END FIELDSETS-UI -->
-    </div><!-- END SETTINGS-UI-->
+        <button class="save-settings" title="{{ _('Includes page setup, estimated time and also the branding.') }}">{{ _("Save as defaults") }}</button>
+      </fieldset>
+
+      <fieldset id="ui-design" class="ui-tab">
+        <legend>{{ _('Design') }}</legend>
+        <p class="select-container"><label for="thread-palette">{{ _('Thread Palette') }}:</label>
+          <select id="thread-palette" data-field-name="thread-palette">
+            {% if selected_palette is none %}
+              <option value="" selected>{{ _('None') }}</option>
+            {% endif %}
+            {% for palette in palettes %}
+              <option value="{{ palette }}" {{ "selected" if palette == selected_palette.name else "" }}>{{ palette }}</option>
+            {% endfor %}
+          </select>
+        </p>
+      </fieldset>
+
+    </div><!-- END FIELDSETS-UI -->
+
+  </div><!-- END SETTINGS-UI-->
 
     <div id="modal-background" class="modal"></div>
     <div id="modal-content" class="modal">