diff options
Diffstat (limited to 'print/templates')
| -rw-r--r-- | print/templates/color_swatch.html | 51 | ||||
| -rw-r--r-- | print/templates/footer.html | 7 | ||||
| -rw-r--r-- | print/templates/headline.html | 12 | ||||
| -rw-r--r-- | print/templates/index.html | 32 | ||||
| -rw-r--r-- | print/templates/operator_detailedview.html | 77 | ||||
| -rw-r--r-- | print/templates/operator_overview.html | 33 | ||||
| -rw-r--r-- | print/templates/print_detail.html | 28 | ||||
| -rw-r--r-- | print/templates/print_overview.html | 42 | ||||
| -rw-r--r-- | print/templates/ui.html | 33 |
9 files changed, 315 insertions, 0 deletions
diff --git a/print/templates/color_swatch.html b/print/templates/color_swatch.html new file mode 100644 index 00000000..21cc0c21 --- /dev/null +++ b/print/templates/color_swatch.html @@ -0,0 +1,51 @@ + + {% if printview != 'detailedview' %} + <div class="color-swatch"> + <div class="swatch-info"> + <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 }}"> + <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> + {# We don't want to see rgb if we have more than 7 colorSwatches #} + {% if color_blocks|length < 7 %} + <tspan dy="1.2em" x="2mm" class="color-rgb">{{ _('rgb') }}: {{ color_block.color.rgb }}</tspan> + {% endif %} + {# We don't want to see thread_used if we have more than 7 colorSwatches to show #} + {% if color_blocks|length < 7 %} + <tspan dy="1.2em" x="2mm" class="swatch-thread">{{ _('thread used') }}: {{ color_block.color.thread_description }}</tspan> + {% endif %} + {# We don't want to see num_stitch if we have more than 49 colorSwatches to show #} + {% if color_blocks|length < 49 %} + <tspan dy="1.2em" x="2mm" class="swatch-stitches">{{ _('# stitches') }}: {{ color_block.num_stitches }}</tspan> + {% endif %} + {# We don't want to see stops and trims if we have more than 13 colorSwatches to show #} + {% if color_blocks|length < 13 %} + <tspan dy="1.2em" x="2mm" class="swatch-stops">{{ _('# stops') }}: {{ color_block.num_stops }}</tspan> + <tspan dy="1.2em" x="2mm" class="swatch-trims">{{ _('# trims') }}: {{ color_block.num_trims }}</tspan> + {% endif %} + </text> + </svg> + </div> + </div> + + {% else %} + + <div class="color-swatch"> + <div class="swatch-info"> + <svg width="100%" height="100%" class="colorSwatchSVG" xmlns="http://www.w3.org/2000/svg"> + <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 data-field-name="color-{{ color_block.color.hex_digits }}" contenteditable="true" data-placeholder="Enter thread name...">{{ 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> + <p><span class="swatch-stops">{{ _('# stops') }}:</span><span>{{ color_block.num_stops }}</span></p> + <p><span class="swatch-trims">{{ _('# trims') }}:</span><span>{{ color_block.num_trims }}</span></p> + </div> + </div> + </div> + </div> + + {%endif %} diff --git a/print/templates/footer.html b/print/templates/footer.html new file mode 100644 index 00000000..0c043e2f --- /dev/null +++ b/print/templates/footer.html @@ -0,0 +1,7 @@ +<footer> + <p class="num_pages">{{ _('Page') }} <span class="page-num"></span>/<span class="total-page-num"></span></p> + <p>Proudly generated with <a href="http://inkstitch.org/" target="_blank">Ink/Stitch</a></p> +</footer> + + + diff --git a/print/templates/headline.html b/print/templates/headline.html new file mode 100644 index 00000000..649c02ea --- /dev/null +++ b/print/templates/headline.html @@ -0,0 +1,12 @@ +<figure class="brandlogo"> + <img src="{{ logo.src or "resources/inkstitch-logo.svg" }}" alt="{{ logo.title }}" title="{{ logo.title }}"> +</figure> +<div class="headline"> + <div class="pageTitle"> + <h1><span class="jobtitle" contenteditable="true" data-placeholder="{{ _('Enter job title...') }}" data-field-name="job-title">{{ job.title }}</span></h1> + <p class="header-field" data-label="{{ _('CLIENT') }}:" contenteditable="true" data-placeholder="{{ _('Enter client name...') }}" data-field-name="client-name">{{ client }}</p> + <p class="header-field" data-label="{{ _('PURCHASE ORDER #:') }}" contenteditable="true" data-placeholder="{{ _('Enter purchase order number...') }}" data-field-name="purchase-order">{{ purchase_order }}</p> + </div> + + <div class="currentDate">{{ date|datetimeformat(_('%Y.%m.%d')) }}</div> +</div> diff --git a/print/templates/index.html b/print/templates/index.html new file mode 100644 index 00000000..21ca74ab --- /dev/null +++ b/print/templates/index.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> + <title>Ink/Stitch Print Preview</title> + <script src="resources/jquery-3.3.1.min.js"></script> + <script src="resources/inkstitch.js"></script> + <link rel="stylesheet" href="resources/style.css" /> +</head> +<body> + {% include 'ui.html' %} + +{# client overview #} + <div class="page client-overview" style="display: {{ 'block' if view.client_overview else 'none' }}">{% include 'print_overview.html' %}</div> + +{# client detailedview #} + {% set printview = 'detailedview' %} + {% for color_block in color_blocks %} + {% set outer_loop = loop %} + <div class="page client-detailedview" style="display: {{ 'block' if view.client_detailedview else 'none' }}">{% include 'print_detail.html' %}</div> + {% endfor %} + +{# operator overview #} + <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(13) %} + {% set outer_loop = loop %} + <div class="page operator-detailedview" style="display: {{ 'block' if view.operator_detailedview else 'none' }}">{% include 'operator_detailedview.html' %}</div> + {% endfor %} + +</body> +</html> diff --git a/print/templates/operator_detailedview.html b/print/templates/operator_detailedview.html new file mode 100644 index 00000000..633b9286 --- /dev/null +++ b/print/templates/operator_detailedview.html @@ -0,0 +1,77 @@ + <header> + {% include 'headline.html' %} + </header> + + <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>{{ _('Estimated Time') }}</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') }}: {{ 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>{{ job.estimated_time }}</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 * 13 }}</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.thread_name }}</span> + <span>{{ color_block.color.rgb }}</span> + </p> + <p> + <span>{{ _('thread used') }}: {{ color_block.color.thread_description }}</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>{{ color_block.estimatedtime }}</span> + </p> + </div> + {% endfor %} + </div> + </main> + + {% include 'footer.html' %} + + diff --git a/print/templates/operator_overview.html b/print/templates/operator_overview.html new file mode 100644 index 00000000..25048ab7 --- /dev/null +++ b/print/templates/operator_overview.html @@ -0,0 +1,33 @@ + <header> + {% include 'headline.html' %} + <div class="job-details"> + <div> + <div class="table"> + <p><span>{{ _('Unique Colors') }}:</span><span>{{ job.num_colors }}</span></p> + <p><span>{{ _('Color Blocks') }}:</span><span>{{ job.num_color_blocks }}</span></p> + <p><span>{{ _('Total nr stops') }}:</span><span>{{ job.num_stops }}</span></p> + <p><span>{{ _('Total nr trims') }}:</span><span>{{ job.num_trims }}</span></p> + </div> + </div> + <div> + <div class="table"> + <p><span>{{ _('Design box size') }}:</span><span>{{ job.dimensions }}</span></p> + <p><span>{{ _('Total stitch count') }}:</span><span>{{job.num_stitches }}</span></p> + <p><span>{{ _('Total thread used') }}:</span><span>{{job.estimated_thread }}</span></p> + </div> + </div> + <div> + <div class="table"> + <p><span>{{ _('Job estimated time') }}:</span></p> + <p><span>{{ job.estimated_time }}</span></p> + </div> + </div> + </div> + </header> + <main> + <figure class="inksimulation operator" style="height: 210mm;"> + {{ svg_overview|safe }} + <figcaption>{{ _('Scale') }} <span>{{ svg_scale }}</span></figcaption> + </figure> + </main> + {% include 'footer.html' %} diff --git a/print/templates/print_detail.html b/print/templates/print_detail.html new file mode 100644 index 00000000..18a70bba --- /dev/null +++ b/print/templates/print_detail.html @@ -0,0 +1,28 @@ + <header> + {% include 'headline.html' %} + <div class="job-details"> + <div> + <div class="table"> + <p><span>{{ _('COLOR') }}:</span><span data-field-name="color-{{ color_block.color.hex_digits }}" contenteditable="true" data-placeholder="Enter thread name...">{{ color_block.color.thread_name }}</span></p> + </div> + </div> + <div> + <div class="table"> + <p><span>{{ _('Estimated time') }}:</span></p> + <p><span>{{ color_block.estimatedtime }}</span></p> + </div> + </div> + </div> + </header> + <main> + <figure class="inksimulation"> + {{color_block.svg_preview|safe}} + <figcaption>{{ _('Scale') }} <span>{{ svg_scale }}</span></figcaption> + </figure> + + <div class="color-palette detailed"> + {% include 'color_swatch.html' %} + </div> + </main> + + {% include 'footer.html' %} diff --git a/print/templates/print_overview.html b/print/templates/print_overview.html new file mode 100644 index 00000000..f5632ceb --- /dev/null +++ b/print/templates/print_overview.html @@ -0,0 +1,42 @@ + <header> + {% include 'headline.html' %} + <div class="job-details"> + <div> + <div class="table"> + <p><span>{{ _('Unique Colors') }}:</span><span>{{ job.num_colors }}</span></p> + <p><span>{{ _('Color Blocks') }}:</span><span>{{ job.num_color_blocks }}</span></p> + <p><span>{{ _('Total nr stops') }}:</span><span>{{ job.num_stops }}</span></p> + <p><span>{{ _('Total nr trims') }}:</span><span>{{ job.num_trims }}</span></p> + </div> + </div> + <div> + <div class="table"> + <p><span>{{ _('Design box size') }}:</span><span>{{ job.dimensions }}</span></p> + <p><span>{{ _('Total stitch count') }}:</span><span>{{job.num_stitches }}</span></p> + <p><span>{{ _('Total thread used') }}:</span><span>{{job.estimated_thread }}</span></p> + </div> + </div> + <div> + <div class="table"> + <p><span>{{ _('Job estimated time') }}:</span></p> + <p><span>{{ job.estimated_time }}</span></p> + </div> + </div> + </div> + </header> + <main class="client-overview-main"> + <figure class="inksimulation"> + {{ svg_overview|safe }} + <figcaption>{{ _('Scale') }} <span>{{ svg_scale }}</span></figcaption> + </figure> + + <div class="color-palette"> + {% for color_block in color_blocks %} + {% include 'color_swatch.html' %} + {% endfor %} + + </div> + <div class="signature">{{ _('Client Signature') }}</div> + </main> + + {% include 'footer.html' %} diff --git a/print/templates/ui.html b/print/templates/ui.html new file mode 100644 index 00000000..078f1a4c --- /dev/null +++ b/print/templates/ui.html @@ -0,0 +1,33 @@ + <div class="ui"> + <p class="header">{{ _('Ink/Stitch Print Preview') }}</p> + <div class="buttons"> + <button class="print">{{ _('Print') }}</button> + <button class="settings">{{ _('Settings') }}</button> + <button class="close">{{ _('Close') }}</button> + </div> + <div id="errors"> + {{ _('⚠ 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"> + <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" {{ 'checked' if view.client_overview else '' }}><label for="client-overview">Client Overview</label></p> + <p><input type="checkbox" id="client-detailedview" {{ 'checked' if view.client_detailedview else '' }}><label for="client-detailedview">Client Detailed View</label></p> + <p><input type="checkbox" id="operator-overview" {{ 'checked' if view.operator_overview else '' }}><label for="operator-overview">Operator Overview</label></p> + <p><input type="checkbox" id="operator-detailedview" {{ 'checked' if view.operator_detailedview else '' }}><label for="operator-overview">Operator Detailed View</label></p> + </fieldset> + </div> + </div> |
