operator detailedview dynamic thumbnail size (#221)

author: Kaalleen <36401965+kaalleen@users.noreply.github.com> 2018-07-12 21:16:22 +0200
committer: GitHub <noreply@github.com> 2018-07-12 21:16:22 +0200
commit: d4c4f2c7cc947eea71d99ef6030ecb4401508835 (patch)
tree: b1ab84eef12fe7f0e22807fb5d2010eee563dca7 /print/templates
parent: b23f7358748f928e8b66d0e698677b489bee8405 (diff)
8 files changed, 128 insertions, 137 deletions
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>
author	Kaalleen <36401965+kaalleen@users.noreply.github.com>	2018-07-12 21:16:22 +0200
committer	GitHub <noreply@github.com>	2018-07-12 21:16:22 +0200
commit	d4c4f2c7cc947eea71d99ef6030ecb4401508835 (patch)
tree	b1ab84eef12fe7f0e22807fb5d2010eee563dca7 /print/templates
parent	b23f7358748f928e8b66d0e698677b489bee8405 (diff)