UI to select different thread paette

2 files changed, 48 insertions, 4 deletions

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 */