GENERAL MERCHANT

You are using an outdated browser. Recommended are IE11, Google Chrome, Safari, Firefox latest versions.

back

Create Your Layout

Description

Preview

▼► layout preview

layout proof PDF

Width:
Height:
Zoom:

</td>

<td class="cell2 inactive colorSelect" data-title="Color">
            
                <a class="tro_colorpicker ui-selectmenu ui-widget utypiaColorDD ui-state-default ui-corner-all ui-selectmenu-dropdown" data-bind="click: function(data, event) { $root.ShowColorPicker('colorPicker', Model().FontColorHex, data, event) }">
        <span class="ui-selectmenu-status" data-bind="style : { 'backgroundColor': Model().FontColorHexComputed}">
        </span>
        <span class="ui-selectmenu-icon ui-icon ui-icon-triangle-1-s">
            <span class="ui-arrow"></span>
        </span>
    </a>

<div class="tro_color"><span class="ui-selectmenu-status" data-bind="style : { 'backgroundColor': Model().FontColorHexComputed}"></span></div>
            
        </td>
        
        <td class="cell3 inactive" data-title="Font" data-bind="'if': $root.CW().TextTabFontVisible()">
            <div class="tro_fontdd fontsUtypiaContainer" data-bind="visible: Model().LineEditable()">

<tr class="tro_wizardTableHeader">
        <th class="cell0" data-bind="visible: $root.TextLineLabelVisible()">
            Create Your Layout
        </th>
        <th class="cell1">
            <span data-bind="text: $data.textColumnTitle"></span>
        </th>
        <th class="cell2" data-bind="visible: $root.CW().ColorPickerVisible()">
            Color
        </th>
        <th class="cell3" data-bind="'if': $root.CW().TextTabFontVisible()">
            <span>Font</span> 
        </th>
        <th class="cell4" data-bind="'if': $root.CW().TextTabFontSizeVisible()">
            Size
        </th>
        <th class="cell5" data-bind="'if': $root.CW().TextTabBoldVisible()">
            B
        </th>
        <th class="cell6" data-bind="'if': $root.CW().TextTabItalicVisible()">
            <i>I</i>
        </th>
        <th class="cell7" data-bind="'if': $root.CW().TextTabUnderlineVisible()">
            <span class="underline" data-bind="visible: $data.underlineVisible">U</span>
        </th>
        <th class="cell8" aria-label="Horizontal Alignment" data-bind="'if': $root.CW().Model().HorizontalAlignVisible(), visible: $data.horizontalAlignVisible">
            Hor. Align
        </th>
    </tr>

<tr data-bind="attr: { 'class': LastLine() ? 'last' : '' }">
        <td class="cell1">
            <span data-bind="text: Model().LineText() !== null ? Model().LineText().replace(/\[\%\%[\s\S]*\%\%\]/, 'The [%SOURCE_DESIGN%] data will be included in [%DEST_DESIGN%]') : ''" />
        </td>
        
        <td class="cell3" data-title="line positioning" nowrap>
            <div class="linePositioning" data-bind="visible: Model().LineEditable()">
                <a href="#" aria-label="line positioning" class="btntop" data-bind="click: function() { Model().SetLinePositioning(0,-5)}"></a>
                <a href="#" aria-label="line positioning" class="btnbottom" data-bind="click: function() { Model().SetLinePositioning(0,5)}"></a>
                <a href="#" aria-label="line positioning" class="btnleft" data-bind="click: function() { Model().SetLinePositioning(-10,0)}"></a>
                <a href="#" aria-label="line positioning" class="btnright" data-bind="click: function() { Model().SetLinePositioning(10,0)}"></a>
            </div>
        </td>
        <td class="cell4" data-title="V. Space" nowrap>
            <input type="text" class="textfield tro_vspace" maxlength="4" data-bind="visible: Model().LineEditable(), attr: { 'tabIndex' : $index() + 400}, numericValue: Model().LineSpacing" aria-label="V. Space"/>
            <span data-bind="visible: !Model().LineEditable(), text: Model().LineSpacing" />
            <span data-bind="text: UOMString"></span>
        </td>
        <td class="cell5" data-title="Indent" nowrap>
            <input type="text" class="textfield tro_indent" maxlength="4" data-bind="visible: Model().LineEditable(), attr: { 'tabIndex' : $index() + 500}, numericValue: Model().LineIndent"  aria-label="Indent"/>
            <span data-bind="visible: !Model().LineEditable(), text: Model().LineIndent" />
            <span data-bind="text: UOMString"></span>
        </td>
        <td class="cell6" data-title="Align to line" nowrap>
            <select data-bind="visible: Model().LineEditable(), options: AlignToLineItems, optionsText: 'Text', optionsValue: 'Value', optionsCaption: '--', value: Model().PrintAlignToLine" aria-label="Align to line"></select>
        </td>
        <td class="cell7" data-title="" nowrap>
            <input type="checkbox" aria-label="Invert colors" 
                   data-bind="enable: Model().LineEditable(), 
                              visible: Model().InvertColorsVisible(), 
                              checked: Model().InvertColors"> 
            <span data-bind="visible: Model().InvertColorsVisible()">Invert colors</span>
        </td>
        <td class="cell8" data-title="Rotation" nowrap></td>
    </tr>