make thread names editable in operator detail view

also:
  * pressing enter in contenteditable field removes focus
  * switched to data-field-name for linked editable fields
  * use data-placeholder instead of placeholder for consistency

inkstitch/threads/color.py

@@ -34,7 +34,11 @@ class ThreadColor(object):
         return "ThreadColor" + repr(self.rgb)
 
     def to_hex_str(self):
-        return "#%02X%02X%02X" % self.rgb
+        return "#%s" % self.hex_digits
+
+    @property
+    def hex_digits(self):
+        return "%02X%02X%02X" % self.rgb
 
     @property
     def rgb_normalized(self):

print/resources/inkstitch.js

@@ -48,13 +48,22 @@ $(function() {
   document.querySelectorAll('[contenteditable="true"]').forEach(function(elem) {
     elem.addEventListener('focusout', function() {
         var content = $(this).html();
-        var style = $(this).attr('class');
-        $('.' + style).html(content);
+        var field_name = $(this).attr('data-field-name');
+        $('[data-field-name="' + field_name + '"]').html(content);
     });
   });
   
-  // Prevent line breaks in contenteditable fields
-  $('[contenteditable="true"]').keypress(function(e){ return e.which != 13; });
+  $('[contenteditable="true"]').keypress(function(e) {
+      if (e.which == 13) {
+          // pressing enter defocuses the element
+          this.blur();
+
+          // also suppress the enter keystroke to avoid adding a new line
+          return false;
+      } else {
+          return true;
+      }
+    });
   
   
   /* Settings Bar */

print/resources/style.css

@@ -269,7 +269,7 @@ body {
   }
 
   [contenteditable=true]:empty::before{
-    content: attr(placeholder);
+    content: attr(data-placeholder);
     color: rgb(200, 200, 200);
     font-weight: normal;
     display: inline-block;

print/templates/color_swatch.html

@@ -5,10 +5,7 @@
        <svg width="100%" height="100%" class="color-swatch-svg" xmlns="http://www.w3.org/2000/svg">
         <rect fill="rgb{{ color_block.color.rgb }}" stroke="rgb(192, 192, 192)" stroke-width="1px" width="100%" height="100%" />
         <text fill="rgb{{ color_block.color.font_color }}">
-            {# We don't want to see empty color names #}
-            {% if color_block.color.thread_name %}
-            <tspan dy="1.2em" x="2mm" y="2mm" class="color-name">{{ _('Color') }}: {{ color_block.color.thread_name }}</tspan>
-            {% endif %}
+            <tspan dy="1.2em" x="2mm" y="2mm" class="color-name">{{ _('Color') }}: </tspan><tspan data-field-name="color-{{ color_block.color.hex_digits }}">{{ color_block.color.thread_name }}</tspan>
             {# If color name is not empty, we don't want to see rgb if we have more than 7 colorSwatches #}
             {% if color_blocks|length < 7 or not color_block.color.thread_name %}
             <tspan dy="1.2em" x="2mm" {{ '' if color_block.color.thread_name else 'y="2mm"' }} }} class="color-rgb">{{ _('rgb') }}: {{ color_block.color.rgb }}</tspan>
@@ -39,8 +36,8 @@
         <rect fill="rgb{{ color_block.color.rgb }}" stroke="rgb(192, 192, 192)" width="40mm" height="100%" />
        </svg>
        <div class="color-info">
-        <div>    
-          <p><span class="color-name">{{ _('Color') }}:</span><span>{{ color_block.color.thread_name }}</span></p>
+        <div>
+          <p><span class="color-name">{{ _('Color') }}:</span><span data-field-name="color-{{ color_block.color.hex_digits }}">{{ color_block.color.thread_name }}</span></p>
           <p><span class="color-rgb">{{ _('rgb') }}:</span><span>{{ color_block.color.rgb }}</span></p>
           <p><span class="swatch-thread">{{ _('thread used') }}:</span><span>{{ color_block.color.thread_description }}</span></p>
           <p><span class="swatch-stitches">{{ _('# stitches') }}:</span><span>{{ color_block.num_stitches }}</span></p>

print/templates/headline.html

@@ -3,9 +3,9 @@
 </figure>
 <div class="headline">
   <div class="pageTitle">
-      <h1><span class="jobtitle" contenteditable="true" placeholder="{{ _('Enter job title...') }}">{{ job.title }}</span></h1>
+      <h1><span class="jobtitle" contenteditable="true" data-placeholder="{{ _('Enter job title...') }}" data-field-name="job-title">{{ job.title }}</span></h1>
       <p>{{ _('CLIENT') }}:&nbsp;
-        <span class="client" contenteditable="true" placeholder="{{ _('Enter client name...') }}">{{ client }}</span>
+        <span class="client" contenteditable="true" data-placeholder="{{ _('Enter client name...') }}" data-field-name="client-name">{{ client }}</span>
       </p>
   </div>
   

print/templates/operator_detailedview.html

@@ -51,8 +51,7 @@
                   {{ color_block.svg_preview|safe }}
               </p>
               <p>
-                <span>Thread Company Name</span>
-                <span>{{ color_block.color.thread_name }}</span>
+                <span data-field-name="color-{{ color_block.color.hex_digits }}" contenteditable="true" data-placeholder="Enter thread name...">{{ color_block.color.thread_name }}</span>
                 <span>{{ color_block.color.rgb }}</span>
               </p>
               <p>