kopia lustrzana https://github.com/inkstitch/inkstitch
operator detailedview dynamic thumbnail size (#221)
Kaalleen
GitHub
rodzic
b23f735874
commit
d4c4f2c7cc
|
|
@ -58,11 +58,7 @@ class InkStitchMetadata(MutableMapping):
|
|||
|
||||
def __setitem__(self, name, value):
|
||||
item = self._find_item(name)
|
||||
|
||||
if value:
|
||||
item.text = json.dumps(value)
|
||||
else:
|
||||
item.getparent().remove(item)
|
||||
item.text = json.dumps(value)
|
||||
|
||||
def _find_item(self, name, create=True):
|
||||
tag = inkex.addNS(name, "inkstitch")
|
||||
|
|
|
|||
20
messages.po
20
messages.po
|
|
@ -8,7 +8,7 @@ msgid ""
|
|||
msgstr ""
|
||||
"Project-Id-Version: PROJECT VERSION\n"
|
||||
"Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
|
||||
"POT-Creation-Date: 2018-06-30 13:02-0400\n"
|
||||
"POT-Creation-Date: 2018-07-10 19:54-0400\n"
|
||||
"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
|
||||
"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
|
||||
"Language-Team: LANGUAGE <LL@li.org>\n"
|
||||
|
|
@ -441,15 +441,6 @@ msgstr ""
|
|||
msgid "Ctrl + Scroll to Zoom"
|
||||
msgstr ""
|
||||
|
||||
msgid "Scale"
|
||||
msgstr ""
|
||||
|
||||
msgid "Fit"
|
||||
msgstr ""
|
||||
|
||||
msgid "Apply to all"
|
||||
msgstr ""
|
||||
|
||||
msgid "COLOR"
|
||||
msgstr ""
|
||||
|
||||
|
|
@ -507,3 +498,12 @@ msgstr ""
|
|||
msgid "No"
|
||||
msgstr ""
|
||||
|
||||
msgid "Scale"
|
||||
msgstr ""
|
||||
|
||||
msgid "Fit"
|
||||
msgstr ""
|
||||
|
||||
msgid "Apply to all"
|
||||
msgstr ""
|
||||
|
||||
|
|
|
|||
Plik binarny nie jest wyświetlany.
|
Po Szerokość: | Wysokość: | Rozmiar: 100 KiB |
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,76 +1,76 @@
|
|||
<div id="opd-info" style="display: none; height: 220mm; width: 175mm;">
|
||||
<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>{{ _('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>
|
||||
</main>
|
||||
|
||||
{% 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 %}
|
||||
|
||||
|
||||
<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>
|
||||
{% endfor %}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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' %}
|
||||
|
|
|
|||
|
|
@ -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' %}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Ładowanie…
Reference in New Issue