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

<table cols="2">
    <tr>
        <td>
            <label class="header"><%= scope.textFill %></label>
        </td>
    </tr>
    <tr>
        <td class="padding-small">
            <div id="cell-combo-fill-src" style="width: 100%;"></div>
        </td>
    </tr>
    <tr>
        <td>
            <div id="cell-panel-color-fill" class="padding-small" style="width: 100%;">
                <div id="cell-back-color-btn" style=""></div>
            </div>
            <div id="cell-panel-pattern-fill" class="settings-hidden padding-small" style="width: 100%;">
                <label class="input-label" style="margin-top: 3px;"><%= scope.textPattern %></label>
                <div id="cell-combo-pattern" style="width: 100%; height: 42px; margin-bottom: 8px;"></div>
                <div style="width: 100%; height: 25px; margin-bottom: 8px;">
                    <label class="input-label" style="margin-top: 3px;"><%= scope.textForeground %></label>
                    <div id="cell-foreground-color-btn" style="display: inline-block; float:right;"></div>
                </div>
                <div style="width: 100%; height: 25px;">
                    <label class="input-label" style="margin-top: 3px;"><%= scope.textBackground %></label>
                    <div id="cell-background-color-btn" style="display: inline-block; float:right;"></div>
                </div>
            </div>
            <div id="cell-panel-gradient-fill" class="settings-hidden padding-small" style="width: 100%;">
                <div style="height:80px;">
                    <div style="display: inline-block;">
                        <label class="input-label" style=""><%= scope.textStyle %></label>
                        <div id="cell-combo-grad-type" style="width: 90px;"></div>
                    </div>
                    <div style="display: inline-block;float: right;">
                        <label class="input-label" style=""><%= scope.textDirection %></label>
                        <div id="cell-button-direction" style=""></div>
                    </div>
                </div>
                <div style="height: 28px;">
                    <div style="display: inline-block;">
                        <label class="input-label" style="width: 90px; padding-top: 3px;"><%= scope.textBorderColor + " 1" %></label>
                    </div>
                    <div style="display: inline-block;float: right;">
                        <div id="cell-grad-btn-color-1" style=""></div>
                    </div>
                </div>
                <div style="height: 28px;">
                    <div style="display: inline-block;">
                        <label class="input-label" style="width: 90px; padding-top: 3px;"><%= scope.textBorderColor + " 2" %></label>
                    </div>
                    <div style="display: inline-block;float: right;">
                        <div id="cell-grad-btn-color-2" style=""></div>
                    </div>
                </div>
            </div>
        </td>
    </tr>
    <tr>
        <td class="padding-small" colspan=2>
            <div class="separator horizontal"></div>
        </td>
    </tr>
    <tr>
        <td colspan=2 class="padding-small">
            <label class="header"><%= scope.textBorders %></label>
        </td>
    </tr>
    <tr>
        <td class="padding-small" colspan=2>
            <div id="cell-combo-border-type" style="display: inline-block; vertical-align: middle; width: 93px;"></div>
            <div style="display: inline-block; float:right;vertical-align: middle;">
                <label class="input-label" style="margin-right: 5px;"><%= scope.textBorderColor %></label>
                <div id="cell-border-color-btn" style="display: inline-block;"></div>
            </div>
        </td>
    </tr>
    <tr>
        <td class="padding-small" colspan=2>
            <label class="input-label"><%= scope.textSelectBorders %></label>
        </td>
    </tr>
    <tr>
        <td colspan=2 class="padding-small">
            <div id="cell-button-border-all" style="display: inline-block;"></div>
            <div id="cell-button-border-none" style="display: inline-block;"></div>
            <div id="cell-button-border-inner" style="display: inline-block;"></div>
            <div id="cell-button-border-outer" style="display: inline-block;"></div>
            <div id="cell-button-border-diagu" style="display: inline-block;"></div>
            <div id="cell-button-border-diagd" style="display: inline-block;"></div>
        </td>
    </tr>
    <tr>
        <td colspan=2 class="padding-small">
            <div id="cell-button-border-left" style="display: inline-block;"></div>
            <div id="cell-button-border-inner-vert" style="display: inline-block;"></div>
            <div id="cell-button-border-right" style="display: inline-block;"></div>
            <div id="cell-button-border-top" style="display: inline-block;"></div>
            <div id="cell-button-border-inner-hor" style="display: inline-block;"></div>
            <div id="cell-button-border-bottom" style="display: inline-block;"></div>
        </td>
    </tr>
    <tr>
        <td class="padding-small" colspan=2>
            <div class="separator horizontal"></div>
        </td>
    </tr>
    <tr>
        <td colspan=2 class="padding-small">
            <label class="header"><%= scope.textOrientation %></label>
        </td>
    </tr>
    <tr>
        <td class="padding-small" colspan=2>
            <label class="input-label"><%= scope.textAngle %></label>
            <div id="cell-spin-angle" style="display: inline-block;margin-left:5px;"></div>
        </td>
    </tr>
    <tr class="finish-cell"></tr>
</table>