operator detailedview dynamic thumbnail size (#221)

11 files changed, 511 insertions, 231 deletions

diff --git a/print/resources/favicon.ico b/print/resources/favicon.ico
new file mode 100644
index 00000000..1b5455bd
--- /dev/null
+++ b/print/resources/favicon.ico
diff --git a/print/resources/inkstitch.js b/print/resources/inkstitch.js
index 6bcb183d..9f67bc90 100644
--- a/print/resources/inkstitch.js
+++ b/print/resources/inkstitch.js
@@ -17,6 +17,85 @@ function ping() {
    .fail(function() { $('#errors').attr('class', 'show') });
 }
 
+//function to chunk opd view into pieces 
+  // source: https://stackoverflow.com/questions/3366529/wrap-every-3-divs-in-a-div
+$.fn.chunk = function(size) {
+  var arr = [];
+  for (var i = 0; i < this.length; i += size) {
+    arr.push(this.slice(i, i + size));
+  }
+  return this.pushStack(arr, "chunk", size);
+}
+
+// build operator detailed view (opd)
+function buildOpd(thumbnail_size = $('#operator-detailedview-thumbnail-size').val() ) {
+
+  var thumbnail_size    = parseInt(thumbnail_size);
+  var thumbnail_size_mm = thumbnail_size  + 'mm';
+  
+  var thumbnail_layout  = (thumbnail_size >= 60) ? 'medium' : 'small';
+  
+  // remove old settings
+  $( "div.page.operator-detailedview header" ).remove();
+  $( "div.page.operator-detailedview footer" ).remove();
+  $( "div.page.operator-detailedview .job-headline" ).remove();
+  $('div.page.operator-detailedview .opd-color-block').parentsUntil('div.page.operator-detailedview').addBack().unwrap();
+  $('.opd-color-block').removeClass('medium large');
+  $('.opd-color-block').removeAttr('style');
+  
+  // set thumbnail size
+  $('.operator-svg.operator-preview').css({
+      'width': thumbnail_size_mm, 
+      'height': thumbnail_size_mm,
+      'max-width': thumbnail_size_mm
+  });
+  
+  // calculate number of blocks per page
+  var num_blocks_per_page = 1;
+  if(thumbnail_layout == 'medium') {
+    $('.opd-color-block').addClass('medium');
+    // set width to be able to calculate the height
+    $('.opd-color-block').css({ 'width': thumbnail_size_mm });
+    // calculate max height -> source: https://stackoverflow.com/questions/6060992/element-with-the-max-height-from-a-set-of-elements
+    var color_box_height = Math.max.apply(null, $('.opd-color-block').map(function () { return $(this).height(); }).get());
+    var container_height = $('#opd-info').height();
+    var num_rows = Math.floor(container_height / color_box_height);
+    var num_columns = Math.floor(175 / thumbnail_size);
+    // if only two blocks fit into one row, use 50% of the space for each of them
+    if(num_columns == 2) { $('.opd-color-block').css({ 'width': 'calc(50% - 2mm)' }); }
+    // set equal height for all color blocks
+    $('.opd-color-block').css({ 'height': color_box_height });
+    // set number of color blocks per page for medium thumbnails
+    num_blocks_per_page = num_columns * num_rows;
+    // use layout for large thumbnails if only 2 or less color blocks fit on one page
+    if(num_blocks_per_page <= 2) { 
+      $('.opd-color-block').removeClass('medium').removeAttr('style').addClass('large');
+      thumbnail_layout = 'large';
+      // set number of color blocks per page for large thumbnails
+      num_blocks_per_page = 2;
+    }
+  } else {
+    // set number of color blocks per page for small thumbnails
+    num_blocks_per_page = Math.floor(220 / thumbnail_size);
+  }
+  // set number of color blocks per page to 1 if it defaults to zero
+    // this should never happen, but we want to avoid the browser to crash 
+  num_blocks_per_page = (num_blocks_per_page <= 0) ? '1' : num_blocks_per_page;
+  
+  // adjust to new settings
+  var header = $('#opd-info header').prop('outerHTML');
+  var footer = $('#opd-info footer').prop('outerHTML');
+  var job_headline = $('#opd-info .job-headline').prop('outerHTML');
+  var opd_visibility = ($('#operator-detailedview').is(':checked')) ? 'block' :'none';
+  var paper_size = $('#printing-size').val();
+  $('.opd-color-block').chunk(num_blocks_per_page).wrap('<div class="page operator-detailedview ' + paper_size + ' ' + thumbnail_layout +'" style="display:'+ opd_visibility +'"><main class="operator-detailedview"><div class="operator-job-info"></div></main></div>');
+  $('div.operator-detailedview').prepend(header);
+  $('.operator-job-info').prepend(job_headline);
+  $('div.operator-detailedview').append(footer);
+  // update page numbers
+  setPageNumbers();
+}
+
 // set pagenumbers
 function setPageNumbers() {
   var totalPageNum = $('body').find('.page:visible').length;
@@ -46,11 +125,13 @@ function scaleSVG(element, scale = 'fit') {
   element.find('.scale').text(label);
 }
 
-// set preview svg scale to fit into its box if transform is not set
+// set preview svg scale to fit into its box if display block and transform is not set
 function scaleAllSvg() {
     $('.page').each(function() {
-      if( $(this).find('.inksimulation svg').css('transform') == 'none') {
-        scaleSVG($(this).find('.inksimulation'), 'fit');
+      if( $(this).css('display') == 'block' ) {
+        if( $(this).find('.inksimulation svg').css('transform') == 'none') {
+          scaleSVG($(this).find('.inksimulation'), 'fit');
+        }
       }
     });
 }
@@ -74,8 +155,6 @@ function setSVGTransform(figure, transform) {
 
 $(function() {
   setTimeout(ping, 1000);
-  setPageNumbers();
-
   /* SCALING AND MOVING SVG  */
 
   /* Mousewheel scaling */
@@ -192,6 +271,9 @@ $(function() {
                 item.attr('src', value);
             } else if (item.is('select')) {
                 item.val(value).trigger('initialize');
+            } else if (item.is('input[type=range]')) {
+                item.val(value).trigger('initialize');
+                $('#display-thumbnail-size').html(value + 'mm');
             } else if (item.is('figure.inksimulation')) {
                 setSVGTransform(item, value);
             } else {
@@ -200,8 +282,11 @@ $(function() {
         });
     });
 
-    // wait until page size is set (if they've specified one) and then scale SVGs to fit
-    setTimeout(function() { scaleAllSvg() }, 500);
+    // wait until page size is set (if they've specified one) and then scale SVGs to fit and build operator detailed view
+    setTimeout(function() { 
+      scaleAllSvg();
+      buildOpd();
+    }, 500);
   });
 
   $('[contenteditable="true"]').keypress(function(e) {
@@ -258,12 +343,37 @@ $(function() {
 
   /* Settings */
 
+  // Settings Tabs
+  $('#tabs button').click(function() {
+    var active_fieldset_position = $(this).index() +1;
+    $('#settings-ui #fieldsets-ui > fieldset').css({'display': 'none'});
+    $('#settings-ui #fieldsets-ui > fieldset:nth-child('+active_fieldset_position+')').css({'display': 'block'});
+    $('#tabs .tab.active').removeClass("active");
+    $(this).addClass("active");
+  });
+
   // Paper Size
   $('select#printing-size').on('change initialize', function(){
     $('.page').toggleClass('a4', $(this).find(':selected').val() == 'a4');
   }).on('change', function() {
     $.postJSON('/settings/paper-size', {value: $(this).find(':selected').val()});
   });
+  
+  // Operator detailed view: thumbnail size setting
+  $(document).on('input', '#operator-detailedview-thumbnail-size', function() {
+    var thumbnail_size_mm = $(this).val()  + 'mm';
+    $('#display-thumbnail-size').html( thumbnail_size_mm );
+  });
+   
+  // Operator detailed view: thumbnail size setting action
+  $('#operator-detailedview-thumbnail-size').change(function() {
+    // set thumbnail size
+    var thumbnail_size = $(this).val();
+    // set page break positions
+    buildOpd(thumbnail_size);
+    
+    $.postJSON('/settings/operator-detailedview-thumbnail-size', {value: thumbnail_size});
+  });
 
   // Thread Palette
   $('select#thread-palette').change(function(){
@@ -303,6 +413,7 @@ $(function() {
     var field_name = $(this).attr('data-field-name');
 
     $('.' + field_name).toggle($(this).prop('checked'));
+    scaleAllSvg();
     setPageNumbers();
   }).on('change', function() {
     var field_name = $(this).attr('data-field-name');
@@ -397,6 +508,7 @@ $(function() {
       settings["client-detailedview"] = $("[data-field-name='client-detailedview']").is(':checked');
       settings["operator-overview"] = $("[data-field-name='operator-overview']").is(':checked');
       settings["operator-detailedview"] = $("[data-field-name='operator-detailedview']").is(':checked');
+      settings["operator-detailedview-thumbnail-size"] = $("[data-field-name='operator-detailedview-thumbnail-size']").val();
       settings["paper-size"] = $('select#printing-size').find(':selected').val();
 
       var logo = $("figure.brandlogo img").attr('src');
diff --git a/print/resources/style.css b/print/resources/style.css
index 81b2ea7e..174b21dd 100644
--- a/print/resources/style.css
+++ b/print/resources/style.css
@@ -42,65 +42,6 @@
   src: url(barlow-condensed-extra-bold.ttf) format('truetype');
 }
 
-@media screen {
-    .page {
-        margin-top: 20mm !important;
-        outline: 1px dotted grey;
-    }
-
-    .header-field::before {
-        content: attr(data-label);
-        padding-right: 0.5em;
-    }
-
-    [contenteditable=true]:empty::after{
-      content: attr(data-placeholder);
-      color: rgb(200, 200, 200);
-      font-weight: normal;
-    }
-}
-
-@media print {
-    body {
-      margin-bottom: 0 !important;
-    }
-
-    .page {
-        page-break-after: always;
-        margin: 0 !important;
-    }
-
-    figure.inksimulation div {
-      display: none;
-    }
-
-    .ui {
-      display: none;
-    }
-
-    #settings-ui {
-      display: none !important;
-    }
-
-    #errors {
-      display: none !important;
-    }
-
-    .header-field:not(:empty)::before {
-        content: attr(data-label);
-        padding-right: 0.5em;
-    }
-
-    span.logo-instructions {
-      display: none;
-    }
-}
-
-@page {
-    size: auto;   /* auto is the initial value */
-    margin: 0;
-}
-
 body {
     font-family: "Barlow", sans-serif;
     font-size: 8pt;
@@ -131,7 +72,24 @@ body {
     height: 292mm;
     padding: 15mm;
   }
+  
+  .page.client-overview.a4 header, .page.operator-overview.a4 header {
+    height: 50mm;
+    flex-direction: row;
+  }
+  
+  .page.client-overview.a4 div.job-details, .page.operator-overview.a4 div.job-details {
+    width: 100%;
+  }
 
+  .page.client-overview.a4 .client-overview-main figure.inksimulation {
+    height: 150mm;
+  }
+  
+  .page.client-overview.a4 figure.brandlogo, .page.operator-overview.a4 figure.brandlogo {
+    margin: -6mm 2.5mm;
+  }
+  
 /* Settings */
 
   .ui {
@@ -230,9 +188,71 @@ body {
     border-radius: 5px;
     cursor: pointer;
   }
+  
+  #settings-ui #tabs {
+    margin-left: 20px;
+    z-index: 1;
+  }
+  
+  #settings-ui button {
+    background: transparent;
+    border: 1px solid #413232;
+    padding: 5px;
+  }
+  
+  #settings-ui button.active {
+    border-bottom: 1px solid white;
+  }
+  
+  #settings-ui #ui-design {
+    display: none;
+  }
+  
+  #settings-ui > #fieldsets-ui > fieldset > legend {
+    display: none;
+  }
 
   #settings-ui fieldset {
+    margin-top: -1px;
     margin-bottom: 1em;
+    border: 1px solid rgb(80,80,80);
+    z-index: 2;
+  }
+  
+  #settings-ui div {
+    position: relative;
+  }
+  
+  #settings-ui .select-container {
+    position: relative;
+    display: inline-block;
+  }
+  
+  #settings-ui select {
+    margin-left: 1em;
+    height: 35px;
+    padding: 0px 25px 0 5px;
+    font-size: 16px;
+    background-color: transparent;
+    border: 1px solid rgb(80,80,80);
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+  }
+  
+  #settings-ui select::-ms-expand {
+    display: none;
+  }
+  
+  #settings-ui .select-container::after {
+    content: '▾';
+    position: absolute;
+    right: 0;
+    top: 0;
+    padding: 0 5px;
+    border-left: 1px solid rgb(80,80,80);
+    line-height: 35px;
+    pointer-events: none;
   }
 
   #modal-background {
@@ -287,8 +307,8 @@ body {
     display: block;
     width: 100%;
     height: 100%;
-    line-height: 30mm;
     text-align: center;
+    position: relative;
   }
 
   figure.brandlogo img {
@@ -308,14 +328,15 @@ body {
   }
 
   .logo-instructions {
-    white-space: nowrap;
-
-    /* chrome ignores this :(
+    display: block;
     text-align: center;
-    */
-
+    font-weight: bold;
     font-size: 10px;
-    color: rgb(192, 192, 192);
+    color: rgb(117, 117, 117);
+    background: rgba(255,255,255, 0.8);
+    position: absolute;
+    bottom: 3mm;
+    cursor: pointer;
   }
 
   .operator-detailedview figure.brandlogo {
@@ -482,13 +503,9 @@ body {
   }
 
   input.realistic {
-    position: absolute;
     transform: scale(0.7);
-    margin-left: 2px;
-  }
-
-  label.realistic {
-    margin-left: 20px;
+    margin: 0;
+    vertical-align: bottom;
   }
 
   /* prevents Chrome from sending a double event for the checkbox
@@ -599,26 +616,26 @@ body {
     height: 230mm;
   }
 
-  .operator-job-info {
+  .operator-detailedview.small .operator-job-info {
     display: table;
     width: 100%;
   }
 
-  .operator-job-info div {
+  .operator-detailedview.small .operator-job-info div {
     display: table-row;
   }
 
-  div.job-headline {
+  .operator-detailedview.small div.job-headline {
     display: table-header-group;
     font-size: 9pt;
     font-weight: bold;
   }
 
-  div.job-headline p {
+  .operator-detailedview.small div.job-headline p {
     height: 1em;
   }
 
-  .operator-job-info p {
+  .operator-detailedview.small .operator-job-info p {
     height: 15mm;
     max-width: 15mm;
     display: table-cell;
@@ -628,11 +645,11 @@ body {
     border: 1px solid rgb(239,239,239);
   }
 
-  .operator-job-info span {
+  .operator-detailedview.small .operator-job-info span {
     display: block;
   }
 
-  .operator-job-info span.color-index {
+  .operator-detailedview.small .operator-job-info span.color-index {
      position: absolute;
      top: 0;
      left: 0;
@@ -640,25 +657,126 @@ body {
      width: 10mm;
    }
 
-  .operator-svg.operator-colorswatch {
-    width: 15mm;
+  .operator-detailedview.small .operator-svg.operator-colorswatch {
+    width: 10mm;
   }
 
-  .operator-svg.operator-preview {
-    min-width: 15mm;
-    max-width: 20mm;
+  .operator-detailedview.small .operator-svg.operator-preview {
+    width: 15mm;
     height: 15mm;
   }
 
-  .operator-svg svg {
+  .operator-detailedview.small .operator-svg svg {
     position: absolute;
     top: 0;
     left: 0;
-    width: auto;
-    max-width: 30mm;
+    right: 0;
+    width: 100%;
     height: 100%;
   }
+  
+  /* opd medium/large thumbnails */
+  
+  .operator-detailedview.medium div.job-headline,
+  .operator-detailedview.large div.job-headline {
+    display: none;
+  }
+  
+  .opd-color-block.medium,
+  .opd-color-block.large {
+    overflow: hidden;
+    position: relative;
+    border: 0.5mm solid rgb(239,239,239);
+  }
+  
+  .opd-color-block.medium .operator-colorswatch,
+  .opd-color-block.large .operator-colorswatch {
+    position: absolute;
+    top: 0;
+    padding: 0;
+    margin: 0;
+    width: 10mm;
+    height: 10mm;
+    border-right: 0.5mm solid rgb(239,239,239);
+    border-bottom: 0.5mm solid rgb(239,239,239);
+  }
+  
+  .opd-color-block.medium .operator-colorswatch svg,
+  .opd-color-block.medium .opd-summary p:first-child span,
+  .opd-color-block.medium .operator-preview svg,
+  .opd-color-block.large .operator-colorswatch svg,
+  .opd-color-block.large .opd-summary p:first-child span,
+  .opd-color-block.large .operator-preview svg {
+    height: 100%;
+    width: 100%;
+  }
+  
+  /* opd medium thumbnails */
+  
+  .opd-color-block.medium {
+    display: inline-block;
+    float: left;
+    margin: 1mm;
+  }
+  
+  .opd-color-block.medium p {
+    margin: 0 auto;
+  }
+  
+  .opd-color-block.medium p:last-child {
+    margin-bottom: 1mm;
+  }
+  
+  .opd-color-block.medium .operator-preview {
+    margin: 1mm auto 0 auto;
+  }
+  
+  .opd-color-block.medium.opd-summary .operator-colorswatch {
+    display: none;
+  }
+  
+  .opd-color-block.medium span::before {
+    content: ' \00B7 ';
+    line-height: 0;
+    display: inline-block;
+    margin: 0 1mm;
+    vertical-align: super;
+  }
+  
+  .opd-color-block.medium span:first-child::before {
+    content: '';
+  }
+  
+  /* opd large thumbnails */
+  
+  .opd-color-block.large {
+    display: block;
+    margin: 5mm 0;
+  }
+  
+  .opd-color-block.large:first-child {
+    margin-top: 0;
+  }
 
+  .opd-color-block.large .operator-preview {
+    margin: 0;
+  }
+  
+  .opd-color-block.large .operator-preview {
+    float: left;
+  }
+  
+  .opd-color-block.large p {
+    text-align: left;
+  }
+  
+  .opd-color-block.large p:nth-child(3) {
+    margin-top: 5mm;
+  }
+  
+  .opd-color-block.large span {
+    display: block;
+  }
 
 /* Footer */
 
@@ -830,3 +948,62 @@ body {
       height: calc(100% / 5);
       width: calc(100% / 12);
   }
+  
+@media screen {
+  .page {
+      margin-top: 20mm !important;
+      outline: 1px dotted grey;
+  }
+
+  .header-field::before {
+      content: attr(data-label);
+      padding-right: 0.5em;
+  }
+
+  [contenteditable=true]:empty::after{
+    content: attr(data-placeholder);
+    color: rgb(200, 200, 200);
+    font-weight: normal;
+  }
+}
+
+@media print {
+    body {
+      margin-bottom: 0 !important;
+    }
+
+    .page {
+        page-break-after: always;
+        margin: 0 !important;
+    }
+
+    figure.inksimulation div {
+      display: none;
+    }
+
+    .ui {
+      display: none;
+    }
+
+    #settings-ui {
+      display: none !important;
+    }
+
+    #errors {
+      display: none !important;
+    }
+
+    .header-field:not(:empty)::before {
+        content: attr(data-label);
+        padding-right: 0.5em;
+    }
+
+    span.logo-instructions {
+      display: none;
+    }
+}
+
+@page {
+    size: auto;   /* auto is the initial value */
+    margin: 0;
+}
diff --git a/print/templates/headline.html b/print/templates/headline.html
index 7a7059b9..369c370e 100644
--- a/print/templates/headline.html
+++ b/print/templates/headline.html
@@ -2,8 +2,8 @@
   <label for="logo-picker">
     <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" />
+    <span class="logo-instructions">{{ _("Click to choose another logo") }}</span>
   </label>
-  <span class="logo-instructions">{{ _("Click to choose another logo") }}</span>
 </figure>
 <div class="headline">
   <div class="pageTitle">
diff --git a/print/templates/index.html b/print/templates/index.html
index 0c9cedfd..c7fa5d74 100644
--- a/print/templates/index.html
+++ b/print/templates/index.html
@@ -5,6 +5,7 @@
     <script src="resources/jquery-3.3.1.min.js"></script>
     <script src="resources/inkstitch.js"></script>
     <link rel="stylesheet" href="resources/style.css" />
+    <link rel="shortcut icon" type="image/png" href="/favicon.png"/>
 </head>
 <body>
     {% include 'ui.html' %}
@@ -23,10 +24,7 @@
         <div class="page operator-overview" style="display: {{ 'block' if view.operator_overview else 'none' }}">{% include 'operator_overview.html' %}</div>
     
 {# operator detailed view #}
-    {% for color_block_part in color_blocks | batch(12) %}
-        {% set outer_loop = loop %}
-        <div class="page operator-detailedview" style="display: {{ 'block' if view.operator_detailedview else 'none' }}">{% include 'operator_detailedview.html' %}</div>
-    {% endfor %}
+        {% include 'operator_detailedview.html' %}
 
 </body>
 </html>
diff --git a/print/templates/operator_detailedview.html b/print/templates/operator_detailedview.html
index 0b948cb0..e1899db4 100644
--- a/print/templates/operator_detailedview.html
+++ b/print/templates/operator_detailedview.html
@@ -1,76 +1,76 @@
+    <div id="opd-info" style="display: none; height: 220mm; width: 175mm;">
         <header>
           {% include 'headline.html' %}
         </header>
+        {% include 'footer.html' %}
+        <div class="job-headline">
+          <p class="operator-svg operator-colorswatch">{# svg color #}</p>
+          <p>{# svg preview #}</p>
+          <p>{{ _('Color') }}</p>
+          <p>{{ _('Thread Consumption') }}</p>
+          <p>{{ _('Stops and Trims') }}</p>
+          <p>{{ _('Notes') }}</p>
+        </div>
+    </div>
+
+        <div class="opd-summary opd-color-block">
+          <p class="operator-svg operator-colorswatch">
+            <span>##</span>
+          </p>
+          <p class="operator-svg operator-preview">
+            {{ svg_overview|safe }}
+          </p>
+          <p>
+            <span>{{ _('Unique Colors') }}: {{ job.num_colors }}</span>
+            <span>{{ _('Color Blocks') }}: {{ job.num_color_blocks }}</span>
+          </p>
+          <p>
+            <span>{{ _('Design box size') }}: {{ "%0.1fmm X %0.1fmm" | format(*job.dimensions) }}</span>
+            <span>{{ _('Total thread used') }}: {{job.estimated_thread }}</span>
+            <span>{{ _('Total stitch count') }}: {{job.num_stitches }}</span>
+          </p>
+          <p>
+            <span>{{ _('Total nr stops') }}: {{ job.num_stops }}</span>
+            <span>{{ _('Total nr trims') }}: {{ job.num_trims }}</span>
+          </p>
+          <p>
+            <span></span>
+          </p>
+        </div>
+  
+
+        {% for color_block in color_blocks %}
 
-        <main>
-          <div class="operator-job-info">
-            <div class="job-headline">
-              <p class="operator-svg operator-colorswatch">{# svg color #}</p>
-              <p>{# svg preview #}</p>
-              <p>{{ _('Color') }}</p>
-              <p>{{ _('Thread Consumption') }}</p>
-              <p>{{ _('Stops and Trims') }}</p>
-              <p>{{ _('Notes') }}</p>
-            </div>
-            {% if outer_loop.index == 1 %}
-            <div>
-              <p>
-                <span>##</span>
-              </p>
-              <p class="operator-svg operator-preview">
-                {{ svg_overview|safe }}
-              </p>
-              <p>
-                <span>{{ _('Unique Colors') }}: {{ job.num_colors }}</span>
-                <span>{{ _('Color Blocks') }}: {{ job.num_color_blocks }}</span>
-              </p>
-              <p>
-                <span>{{ _('Design box size') }}: {{ "%0.1fmm X %0.1fmm" | format(*job.dimensions) }}</span>
-                <span>{{ _('Total thread used') }}: {{job.estimated_thread }}</span>
-                <span>{{ _('Total stitch count') }}: {{job.num_stitches }}</span>
-              </p>
-              <p>
-                <span>{{ _('Total nr stops') }}: {{ job.num_stops }}</span>
-                <span>{{ _('Total nr trims') }}: {{ job.num_trims }}</span>
-              </p>
-              <p>
-                <span></span>
-              </p>
-            </div>
-            {% endif %}
-            {% for color_block in color_block_part %}
 
-            <div style="display: table-row;">
-              <p class="operator-svg operator-colorswatch">
-                <svg xmlns="http://www.w3.org/2000/svg">
-                  <rect fill="rgb{{ color_block.color.rgb }}" width="15mm" height="100%" />
-                  <text fill="rgb{{ color_block.color.font_color }}">
-                    <tspan x="4mm" y="7.5mm" class="color-index">#{{ loop.index + outer_loop.index0 * 12 }}</tspan>
-                  </text>
-                </svg>
-              </p>
-              <p class="operator-svg operator-preview">
-                  {{ color_block.svg_preview|safe }}
-              </p>
-              <p>
-                <span data-field-name="color-{{ color_block.color.hex_digits }}" contenteditable="true" data-placeholder="Enter thread name...">{{ color_block.color.name }}</span>
-                <span>{{ color_block.color.rgb }}</span>
-                <span data-field-name="thread-{{ color_block.color.hex_digits }}" contenteditable="true">{{ color_block.color.manufacturer }} {{ "#" + color_block.color.number if color_block.color.number }}</span>
-              </p>
-              <p>
-                <span>{{ _('thread used') }}:</span>
-                <span>{{ _('# stitches') }}: {{ color_block.num_stitches }}</span>
-              </p>
-              <p>
-                <span>{{ _('# stops') }}: {{ color_block.num_stops }}</span>
-                <span>{{ _('# trims') }}: {{ color_block.num_trims }}</span>
-              </p>
-              <p>
-                <span class="notes" contenteditable="true" data-field-name="operator-notes-block{{ loop.index0 + outer_loop.index0 * 12 }}" data-placeholder="{{ _("Enter operator notes...") }}"></span>
-              </p>
-            </div>
-          {% endfor %}
+          <div class="opd-color-block">
+            <p class="operator-svg operator-colorswatch">
+              <svg xmlns="http://www.w3.org/2000/svg">
+                <rect fill="rgb{{ color_block.color.rgb }}" width="15mm" height="100%" />
+                <text fill="rgb{{ color_block.color.font_color }}">
+                  <tspan x="2mm" y="5mm" class="color-index">#{{ loop.index }}</tspan>
+                </text>
+              </svg>
+            </p>
+            <p class="operator-svg operator-preview">
+                {{ color_block.svg_preview|safe }}
+            </p>
+            <p>
+              <span data-field-name="color-{{ color_block.color.hex_digits }}" contenteditable="true" data-placeholder="Enter thread name...">{{ color_block.color.name }}</span>
+              <span>{{ color_block.color.rgb }}</span>
+              <span data-field-name="thread-{{ color_block.color.hex_digits }}" contenteditable="true">{{ color_block.color.manufacturer }} {{ "#" + color_block.color.number if color_block.color.number }}</span>
+            </p>
+            <p>
+              <span>{{ _('thread used') }}:</span>
+              <span>{{ _('# stitches') }}: {{ color_block.num_stitches }}</span>
+            </p>
+            <p>
+              <span>{{ _('# stops') }}: {{ color_block.num_stops }}</span>
+              <span>{{ _('# trims') }}: {{ color_block.num_trims }}</span>
+            </p>
+            <p>
+              <span class="notes" contenteditable="true" data-field-name="operator-notes-block{{ loop.index }}" data-placeholder="{{ _("Enter operator notes...") }}"></span>
+            </p>
           </div>
-        </main>
+        {% endfor %}
+
 
-        {% include 'footer.html' %}
diff --git a/print/templates/operator_overview.html b/print/templates/operator_overview.html
index 6fa46911..0c379316 100644
--- a/print/templates/operator_overview.html
+++ b/print/templates/operator_overview.html
@@ -27,16 +27,7 @@
         <main>
             <figure class="inksimulation operator" data-field-name="operator-overview-transform" style="height: 210mm;" title="{{ _('Ctrl + Scroll to Zoom') }}">
                 {{ svg_overview|safe }}
-                <figcaption>{{ _('Scale') }} <span class="scale" data-field-name="svg-scale" contenteditable="true" data-placeholder=""></span>%</figcaption>
-                <div>
-                  <button class="svg-fit">{{ _('Fit') }}</button>
-                  <button class="svg-full">100%</button>
-                  <button class="svg-apply">{{ _('Apply to all') }}</button>
-                  <button class="svg-realistic">
-                    <input type="checkbox" id="realistic-operator-overview" data-field-name="overview" class="realistic" />
-                    <label for="realistic-operator-overview" class="realistic">Realistic</label>
-                  </button>
-                </div>
+                {% include 'ui_svg_action_buttons.html' %}
             </figure>
         </main>
         {% include 'footer.html' %}
diff --git a/print/templates/print_detail.html b/print/templates/print_detail.html
index e73fe918..241ac88b 100644
--- a/print/templates/print_detail.html
+++ b/print/templates/print_detail.html
@@ -17,16 +17,7 @@
         <main>
             <figure class="inksimulation" data-field-name="client-detail-transform-block{{ loop.index0 }}" title="{{ _('Ctrl + Scroll to Zoom') }}">
                 {{color_block.svg_preview|safe}}
-                <figcaption>{{ _('Scale') }} <span class="scale" data-field-name="svg-scale" contenteditable="true" data-placeholder=""></span>%</figcaption>
-                <div>
-                  <button class="svg-fit">Fit</button>
-                  <button class="svg-full">100%</button>
-                  <button class="svg-apply">Apply to all</button>
-                  <button class="svg-realistic">
-                    <input type="checkbox" id="realistic-color-block-{{ loop.index0 }}" data-field-name="block{{ loop.index0 }}" class="realistic" />
-                    <label for="realistic-color-block-{{ loop.index0 }}" class="realistic">Realistic</label>
-                  </button>
-                </div>
+                {% include 'ui_svg_action_buttons.html' %}
             </figure>
             <div class="color-palette detailed">
                 {% include 'color_swatch.html' %}
diff --git a/print/templates/print_overview.html b/print/templates/print_overview.html
index b42ab7a9..ca8638ff 100644
--- a/print/templates/print_overview.html
+++ b/print/templates/print_overview.html
@@ -27,16 +27,7 @@
         <main class="client-overview-main">
             <figure class="inksimulation" data-field-name="client-overview-transform" title="{{ _('Ctrl + Scroll to Zoom') }}">
                 {{ svg_overview|safe }}
-                <figcaption>{{ _('Scale') }} <span class="scale" data-field-name="svg-scale" contenteditable="true" data-placeholder=""></span>%</figcaption>
-                <div>
-                  <button class="svg-fit">Fit</button>
-                  <button class="svg-full">100%</button>
-                  <button class="svg-apply">Apply to all</button>
-                  <button class="svg-realistic">
-                    <input type="checkbox" id="realistic-client-overview" data-field-name="overview" class="realistic" />
-                    <label for="realistic-client-overview" class="realistic">Realistic</label>
-                  </button>
-                </div>
+                {% include 'ui_svg_action_buttons.html' %}
             </figure>
 
             <div class="color-palette">
diff --git a/print/templates/ui.html b/print/templates/ui.html
index 3b11f345..bc6c57b9 100644
--- a/print/templates/ui.html
+++ b/print/templates/ui.html
@@ -13,41 +13,51 @@
     <div id="settings-ui">
       <p id="close-settings">X</p>
       <h1>{{ _('Settings') }}</h1>
-      <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>
+      
+      <div id="tabs">
+        <button class="tab active">{{ _('Page Setup') }}</button>
+        <button class="tab">{{ _('Design') }}</button>
+      </div>
+      <div id="fieldsets-ui">
+        <fieldset id="ui-page-setup">
+          <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 id="save-settings" title="{{ _("Includes these Page Setup settings and also the icon.") }}">{{ _("Save as defaults") }}</button>
+          </div>
+        </fieldset>
+        <fieldset id="ui-design">
+          <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>
-        </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>
-          </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.name else "" }}>{{ palette }}</option>
-            {% endfor %}
-          </select>
-        </p>
-      </fieldset>
-    </div>
+        </fieldset>
+      </div><!-- END FIELDSETS-UI -->
+    </div><!-- END SETTINGS-UI-->
 
     <div id="modal-background" class="modal"></div>
     <div id="modal-content" class="modal">
diff --git a/print/templates/ui_svg_action_buttons.html b/print/templates/ui_svg_action_buttons.html
new file mode 100644
index 00000000..c111d634
--- /dev/null
+++ b/print/templates/ui_svg_action_buttons.html
@@ -0,0 +1,10 @@
+<figcaption>{{ _('Scale') }} <span class="scale" data-field-name="svg-scale" contenteditable="true" data-placeholder=""></span>%</figcaption>
+<div>
+  <button class="svg-fit">{{ _('Fit') }}</button>
+  <button class="svg-full">100%</button>
+  <button class="svg-apply">{{ _('Apply to all') }}</button>
+  <button class="svg-realistic">
+    <input type="checkbox" id="realistic-operator-overview" data-field-name="overview" class="realistic" />
+    <label for="realistic-operator-overview" class="realistic">{{ _('Realistic') }}</label>
+  </button>
+</div>