web-apps/apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template

<div id="id-chart-settings-dlg-style" class="settings-panel active">
    <div class="inner-content">
        <table cols="2" style="">
            <tr>
                <td class="padding-large">
                    <label class="header"><%= scope.textType %></label>
                    <div id="chart-dlg-button-type" style="margin-right: 15px;"></div>
                </td>
                <td class="padding-large">
                    <label class="header"><%= scope.textStyle %></label>
                    <div id="chart-dlg-button-style" style=""></div>
                </td>
            </tr>
        </table>
    </div>
    <div class="separator horizontal padding-large"></div>
    <div class="inner-content">
        <table cols="2" style="width: 100%;">
            <tr>
                <td colspan=2 >
                    <label class="header"><%= scope.textDataRange %></label>
                </td>
            </tr>
            <tr>
                <td class="padding-small" width="200">
                    <div id="chart-dlg-txt-range" class="input-row" style="margin-right: 10px;"></div>
                </td>
                <td class="padding-small" style="text-align: right;">
                    <button type="button" class="btn btn-text-default" id="chart-dlg-btn-data" style="min-width: 100px;"><%= scope.textSelectData %></button>
                </td>
            </tr>
            <tr>
                <td colspan=2 class="padding-small">
                    <label class="input-label"><%= scope.textDataSeries %></label>
                    <div id="chart-dlg-combo-range" class="input-group-nr" style="width:120px;"></div>
                </td>
            </tr>
        </table>
    </div>
</div>
<div id="id-chart-settings-dlg-layout" class="settings-panel">
    <div class="inner-content">
        <table cols="2" style="width: 100%;">
            <tr>
                <td class="padding-small" width="50%">
                    <label class="input-label"><%= scope.textChartTitle %></label>
                    <div id="chart-dlg-combo-chart-title" class="input-group-nr" style="margin-right: 7px;"></div>
                </td>
                <td class="padding-small" width="50%">
                    <label class="input-label" style="margin-left: 7px;"><%= scope.textLegendPos %></label>
                    <div id="chart-dlg-combo-legend-pos" class="input-group-nr" style="margin-left: 7px;" />
                </td>
            </tr>
            <tr>
                <td class="padding-small" width="50%">
                    <label class="input-label"><%= scope.textDataLabels %></label>
                    <div id="chart-dlg-combo-data-labels" class="input-group-nr" style="margin-right: 7px;"></div>
                </td>
                <td rowspan="2" class="padding-small" width="50%">
                    <div id="chart-dlg-check-series" style="margin: 20px 0 9px 7px;"></div>
                    <div id="chart-dlg-check-category" style="margin: 0 0 9px 7px;"></div>
                    <div id="chart-dlg-check-value" style="margin: 0 0 5px 7px;"></div>
                </td>
            </tr>
            <tr>
                <td class="padding-small" width="50%">
                    <label class="input-label"><%= scope.textSeparator %></label>
                    <div id="chart-dlg-txt-separator" class="input-row"  style="margin-right: 7px;"/>
                </td>
            </tr>
            <tr>
                <td width="50%">
                    <label id="chart-dlg-label-lines" class="input-label"><%= scope.textLines %></label>
                    <div id="chart-dlg-combo-lines" class="input-group-nr padding-small" style="margin-right: 7px;"></div>
                </td>
                <td style="vertical-align: bottom;" width="50%">
                    <div id="chart-dlg-check-markers" style="margin: 0 0 12px 7px;"></div>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <label class="header padding-small" style="padding-top: 8px;"><%= scope.textAxisSettings %></label>
                </td>
            </tr>
            <tr>
                <td class="padding-small" width="50%">
                    <label class="input-label"><%= scope.textHorAxis %></label>
                    <div id="chart-dlg-combo-hor-show" class="input-group-nr" style="margin-right: 7px;"></div>
                </td>
                <td class="padding-small" width="50%">
                    <label class="input-label" style="margin-left: 7px;"><%= scope.textVertAxis %></label>
                    <div id="chart-dlg-combo-vert-show" class="input-group-nr" style="margin-left: 7px;" />
                </td>
            </tr>
            <tr>
                <td class="padding-large" width="50%">
                    <label class="input-label"><%= scope.textHorTitle %></label>
                    <div id="chart-dlg-combo-hor-title" class="input-group-nr" style="margin-right: 7px;"></div>
                </td>
                <td class="padding-large" width="50%">
                    <label class="input-label" style="margin-left: 7px;"><%= scope.textVertTitle %></label>
                    <div id="chart-dlg-combo-vert-title" class="input-group-nr" style="margin-left: 7px;" />
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <label class="header  padding-small"><%= scope.textGridLines %></label>
                </td>
            </tr>
            <tr>
                <td class="padding-small" width="50%">
                    <label class="input-label"><%= scope.textHorGrid %></label>
                    <div id="chart-dlg-combo-hor-grid" class="input-group-nr" style="margin-right: 7px;"></div>
                </td>
                <td class="padding-small" width="50%">
                    <label class="input-label" style="margin-left: 7px;"><%= scope.textVertGrid %></label>
                    <div id="chart-dlg-combo-vert-grid" class="input-group-nr" style="margin-left: 7px;" />
                </td>
            </tr>
        </table>
    </div>
</div>
<div id="id-chart-settings-dlg-vert" class="settings-panel">
    <div class="inner-content">
        <table cols="3" style="width: 100%">
            <tr>
                <td colspan="3">
                    <label class="header  padding-small"><%= scope.textAxisOptions %></label>
                </td>
            </tr>
            <tr>
                <td class="padding-small" width="100">
                    <label class="input-label"><%= scope.textMinValue %></label>
                </td>
                <td class="padding-small" width="115" style="padding-right: 10px;">
                    <div id="chart-dlg-combo-mintype"></div>
                </td>
                <td class="padding-small" width="90">
                    <div id="chart-dlg-input-min-value"></div>
                </td>
            </tr>
            <tr>
                <td class="padding-large" width="100">
                    <label class="input-label"><%= scope.textMaxValue %></label>
                </td>
                <td class="padding-large" width="115" style="padding-right: 10px;">
                    <div id="chart-dlg-combo-maxtype"></div>
                </td>
                <td class="padding-large" width="90">
                    <div id="chart-dlg-input-max-value"></div>
                </td>
            </tr>
            <tr>
                <td class="padding-large" width="100">
                    <label class="input-label"><%= scope.textAxisCrosses %></label>
                </td>
                <td class="padding-large" width="115" style="padding-right: 10px;">
                    <div id="chart-dlg-combo-v-crosstype"></div>
                </td>
                <td class="padding-large" width="90">
                    <div id="chart-dlg-input-v-axis-crosses"></div>
                </td>
            </tr>
        </table>
    </div>
    <div class="inner-content">
        <table cols="1" style="width: 100%;">
            <tr>
                <td class="padding-large">
                    <label class="input-label"><%= scope.textUnits %></label>
                    <div id="chart-dlg-combo-units" class="input-group-nr" style="width:140px;"></div>
                </td>
            </tr>
            <tr>
                <td class="padding-large">
                    <div id="chart-dlg-check-v-reverse"></div>
                </td>
            </tr>
        </table>
    </div>
    <div class="separator horizontal padding-large"></div>
    <div class="inner-content">
        <table cols="2" style="width: 100%;">
            <tr>
                <td colspan=2 class="padding-small">
                    <label class="header"><%= scope.textTickOptions %></label>
                </td>
            </tr>
            <tr>
                <td class="padding-large">
                    <label class="input-label"><%= scope.textMajorType %></label>
                    <div id="chart-dlg-combo-v-major-type" class="input-group-nr"></div>
                </td>
                <td class="padding-large">
                    <label class="input-label" style="margin-left: 15px;"><%= scope.textMinorType %></label>
                    <div id="chart-dlg-combo-v-minor-type" class="input-group-nr" style="margin-left: 15px;" />
                </td>
            </tr>
        </table>
    </div>
    <div class="separator horizontal padding-large"></div>
    <div class="inner-content">
        <table cols="1" style="width: 100%;">
            <tr>
                <td class="padding-small">
                    <label class="header"><%= scope.textLabelOptions %></label>
                </td>
            </tr>
            <tr>
                <td>
                    <label class="input-label"><%= scope.textLabelPos %></label>
                    <div id="chart-dlg-combo-v-label-pos" class="input-group-nr" style="width:140px;"></div>
                </td>
            </tr>
        </table>
    </div>
</div>
<div id="id-chart-settings-dlg-hor" class="settings-panel">
    <div class="inner-content">
        <table cols="3" style="width: 100%">
            <tr>
                <td colspan="3">
                    <label class="header  padding-small"><%= scope.textAxisOptions %></label>
                </td>
            </tr>
            <tr>
                <td class="padding-small" width="100">
                    <label class="input-label"><%= scope.textAxisCrosses %></label>
                </td>
                <td class="padding-small" width="115" style="padding-right: 10px;">
                    <div id="chart-dlg-combo-h-crosstype"></div>
                </td>
                <td class="padding-small" width="90">
                    <div id="chart-dlg-input-h-axis-crosses"></div>
                </td>
            </tr>
        </table>
    </div>
    <div class="inner-content">
        <table cols="1" style="width: 100%;">
            <tr>
                <td class="padding-large" width="140">
                    <label class="input-label"><%= scope.textAxisPos %></label>
                    <div id="chart-dlg-combo-axis-pos" class="input-group-nr" style="width:140px;"></div>
                </td>
            </tr>
            <tr>
                <td class="padding-large">
                    <div id="chart-dlg-check-h-reverse"></div>
                </td>
            </tr>
        </table>
    </div>
    <div class="separator horizontal padding-large"></div>
    <div class="inner-content">
        <table cols="2" style="width: 100%;">
            <tr>
                <td colspan=2 class="padding-small">
                    <label class="header"><%= scope.textTickOptions %></label>
                </td>
            </tr>
            <tr>
                <td class="padding-small" width="140">
                    <label class="input-label"><%= scope.textMajorType %></label>
                    <div id="chart-dlg-combo-h-major-type" class="input-group-nr"></div>
                </td>
                <td class="padding-small">
                    <label class="input-label" style="margin-left: 15px;"><%= scope.textMinorType %></label>
                    <div id="chart-dlg-combo-h-minor-type" class="input-group-nr" style="margin-left: 15px;"></div>
                </td>
            </tr>
            <tr>
                <td width="100%" colspan="2">
                    <label class="input-label"><%= scope.textMarksInterval %></label>
                </td>
            </tr>
            <tr>
                <td class="padding-large" width="140">
                    <div id="chart-dlg-input-marks-interval"></div>
                </td>
                <td class="padding-large">
                </td>
            </tr>
        </table>
    </div>
    <div class="separator horizontal padding-large"></div>
    <div class="inner-content">
        <table cols="2" style="width: 100%;">
            <tr>
                <td colspan=2 class="padding-small">
                    <label class="header"><%= scope.textLabelOptions %></label>
                </td>
            </tr>
            <tr>
                <td class="padding-small" width="140">
                    <label class="input-label"><%= scope.textLabelPos %></label>
                    <div id="chart-dlg-combo-h-label-pos" class="input-group-nr"></div>
                </td>
                <td class="padding-small">
                    <label class="input-label" style="margin-left: 15px;"><%= scope.textLabelDist %></label>
                    <div id="chart-dlg-input-label-dist" style="margin-left: 15px;"></div>
                </td>
            </tr>
            <tr>
                <td width="100%" colspan="2">
                    <label class="input-label"><%= scope.textLabelInterval %></label>
                </td>
            </tr>
            <tr>
                <td width="140">
                    <div id="chart-dlg-combo-label-int" class="input-group-nr"></div>
                </td>
                <td style="vertical-align: bottom;">
                    <div id="chart-dlg-input-label-int" style="margin-left: 15px;"></div>
                </td>
            </tr>
        </table>
    </div>
</div>