From c234d6ed2c7d8cd7b7991643dbec4383bed9e2dc Mon Sep 17 00:00:00 2001
From: Lex Neva <github.com@lexneva.name>
Date: Mon, 23 Apr 2018 23:12:48 -0400
Subject: UI to select different thread paette

---
 print/resources/inkstitch.js | 22 +++++++++++++++-
 print/resources/style.css    | 30 +++++++++++++++++++---
 print/templates/ui.html      | 61 ++++++++++++++++++++++++++++++++------------
 3 files changed, 92 insertions(+), 21 deletions(-)

(limited to 'print')

diff --git a/print/resources/inkstitch.js b/print/resources/inkstitch.js
index 4a4e4456..60d17f61 100644
--- a/print/resources/inkstitch.js
+++ b/print/resources/inkstitch.js
@@ -154,7 +154,7 @@ $(function() {
 
   $('[contenteditable="true"]').on('focusout', function() {
         /* change svg scale */
-    var content = $.trim($(this).text());
+    var content = $(this).html();
     var field_name = $(this).attr('data-field-name');
     if(field_name == 'svg-scale') {
       var scale     = parseInt(content);
@@ -255,6 +255,26 @@ $(function() {
     $.postJSON('/settings/paper-size', {value: size});
   });
 
+  // Thread Palette
+  $('select#thread-palette').change(function(){
+    $('.modal').show();
+  }).on('update', function() {
+    $(this).data('current-value', $(this).find(':selected').val());
+    console.log("selected: " + $(this).data('current-value'));
+  }).trigger('update');
+
+  $('#modal-yes').on('click', function(){
+    // do shit with the newly-selected palette...
+    $("select#thread-palette").trigger("update");
+    $('.modal').hide();
+  });
+
+  $('#modal-no').on('click', function(){
+    var select = $("select#thread-palette");
+    select.find('[value="' + select.data('current-value') + '"]').prop('selected', true);
+    $('.modal').hide();
+  });
+
   //Checkbox
   $(':checkbox').change(function() {
     var checked = $(this).prop('checked');
diff --git a/print/resources/style.css b/print/resources/style.css
index 97dee6a8..58ec8714 100644
--- a/print/resources/style.css
+++ b/print/resources/style.css
@@ -214,9 +214,6 @@ body {
     border-bottom: 1px solid rgb(188, 188, 188);
     border-bottom: 1px solid rgba(129, 129, 129, 0.5);
     box-shadow: 0 1px 1px 1px rgba(194, 191, 191, 0.5);
-  }
-
-  #settings-ui div {
     text-align: left;
     font-size: 12pt;
   }
@@ -238,6 +235,33 @@ body {
     margin-bottom: 1em;
   }
 
+  #modal-background {
+    display: none;
+    z-index: 3;
+    position: fixed;
+    background: black;
+    opacity: 0.5;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+  }
+
+  #modal-content {
+    display: none;
+    z-index: 4;
+    position: fixed;
+    width: 50%;
+    height: 25%%;
+    top: 200px;
+    left: 25%;
+    background: rgb(255, 255, 255);
+    border-bottom: 1px solid rgb(188, 188, 188);
+    box-shadow: 0 1px 1px 1px rgb(194, 191, 191);
+    text-align: center;
+    font-size: 16pt;
+  }
+
 /* Header */
 
 
diff --git a/print/templates/ui.html b/print/templates/ui.html
index f7246962..112a342e 100644
--- a/print/templates/ui.html
+++ b/print/templates/ui.html
@@ -9,26 +9,53 @@
           {{ _('⚠ lost connection to Ink/Stitch') }}
         </div>
     </div>
-    
+
     <div id="settings-ui">
       <p id="close-settings">X</p>
       <h1>{{ _('Settings') }}</h1>
-      <div>
-        <p>{{ _('Printing Size') }}: 
-          <select id="printing-size" data-field-name="paper-size">
-            <option value="letter" selected="selected">Letter</option>
-            <option value="a4">A4</option>
+      <fieldset>
+        <legend>{{ _('Page Setup') }}</legend>
+        <div>
+          <p>{{ _('Printing Size') }}:
+            <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" id="client-overview" data-field-name="client-overview" /><label for="client-overview">Client Overview</label></p>
+            <p><input type="checkbox" id="client-detailedview" data-field-name="client-detailedview" /><label for="client-detailedview">Client Detailed View</label></p>
+            <p><input type="checkbox" id="operator-overview" data-field-name="operator-overview" CHECKED /><label for="operator-overview">Operator Overview</label></p>
+            <p><input type="checkbox" id="operator-detailedview" data-field-name="operator-detailedview" CHECKED /><label for="operator-detailedview">Operator Detailed View</label></p>
+          </fieldset>
+          <button id="save-settings" title="{{ _("Includes these Page Setup settings and also the icon.") }}">{{ _("Save as defaults") }}</button>
+        </div>
+      </fieldset>
+      <fieldset>
+        <legend>{{ _('Design') }}</legend>
+        <p>{{ _('Thread Palette') }}:
+          <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 else "" }}>{{ palette }}</option>
+            {% endfor %}
           </select>
         </p>
-      </div>
-      <div>
-       <fieldset>
-          <legend>{{ _('Print Layouts') }}:</legend>
-          <p><input type="checkbox" id="client-overview" data-field-name="client-overview" /><label for="client-overview">Client Overview</label></p>
-          <p><input type="checkbox" id="client-detailedview" data-field-name="client-detailedview" /><label for="client-detailedview">Client Detailed View</label></p>
-          <p><input type="checkbox" id="operator-overview" data-field-name="operator-overview" CHECKED /><label for="operator-overview">Operator Overview</label></p>
-          <p><input type="checkbox" id="operator-detailedview" data-field-name="operator-detailedview" CHECKED /><label for="operator-detailedview">Operator Detailed View</label></p>
-        </fieldset>
-        <button id="save-settings" title="{{ _("Includes all settings visible here and also the icon.") }}">{{ _("Save as defaults") }}</button>
-      </div>
+      </fieldset>
+    </div>
+
+    <div id="modal-background" class="modal"></div>
+    <div id="modal-content" class="modal">
+        <p>
+          {{ _("Changing the thread palette will cause thread names and catalog numbers to be recalculated based on the new palette.  Any changes you have made to color or thread names will be lost.  Are you sure?") }}
+        </p>
+        <p>
+          <button id="modal-yes">{{ _("Yes") }}</button>
+          <button id="modal-no">{{ _("No") }}</button>
+        </p>
     </div>
-- 
cgit v1.2.3