<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Wijmo Theme Designer</title>
   
    <!-- ensure IE uses the latest version of IE (yes, yes...) -->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">

    <!-- Angular/Bootstrap -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">

    <!-- Wijmo -->
    <link href="styles/vendor/wijmo.min.css" rel="stylesheet" />
    <script src="scripts/vendor/wijmo.min.js"></script>
    <script src="scripts/vendor/wijmo.input.min.js"></script>
    <script src="scripts/vendor/wijmo.grid.min.js"></script>

    <!-- Wijmo-Angular interop -->
    <script src="scripts/vendor/wijmo.angular.min.js"></script>

    <!-- app scripts and styles -->
    <script src="scripts/app.js"></script>
    <script src="scripts/controllers/appCtrl.js"></script>
    <script src="scripts/directives/appDctv.js"></script>
    <link href="styles/app.css" rel="stylesheet">
    <script src="https://cdn.grapecity.com/wijmo/wijmo.sample.toolbar.js" type="text/javascript"></script>
</head>
<body ng-app="app" ng-controller="appCtrl">
    <style>
        .wj-control .wj-content {
            border-radius: {{borderRadius}}px;
            background-color: {{contentBgColor}};
            color: {{contentColor}};
        }
        .wj-control .wj-header, .wj-flexgrid .wj-cell.wj-header {
            background-color: {{headerBgColor}};
            color: {{headerColor}};
        }
        .wj-control .wj-state-selected {
            background-color: {{selectedBgColor}};
            color: {{selectedColor}};
        }
        .wj-control .wj-state-multi-selected {
            background-color: {{multiSelectedBgColor}};
            color: {{selectedColor}};
        }                    
        .wj-flexgrid .wj-cell:not(.wj-header):not(.wj-group):not(.wj-alt):not(.wj-state-selected):not(.wj-state-multi-selected) {
            background-color: {{contentBgColor}};
            color: {{contentColor}};
        }
        .wj-flexgrid .wj-cell.wj-alt:not(.wj-header):not(.wj-group):not(.wj-state-selected):not(.wj-state-multi-selected) {
            background-color: {{altCellBgColor}};
            color: {{contentColor}};
        }
        .wj-flexgrid .wj-cell {
            border-color: {{cellBorderColor}};
        }
        .wj-tooltip {
            background-color: {{tooltipBgColor}};
            color: {{tooltipColor}};
        }
    </style>
    <div class="header">
        <div class="container">
            <h1>
                Theme Designer
            </h1>
        </div>
    </div>
    <div class="container">

        <p>
            This sample helps you create custom Wijmo themes.
        </p>
        <p>
            Use the color pickers to build a theme. Then copy the CSS into your project as a new custom theme!
        </p>
        <p>
            Make sure to include wijmo.css and add this CSS after it to ensure it overrides the default theme. We recommend placing this CSS in a separate file.
        </p>

        <div class="row">
            <div class="col-md-6">
                <form class="form-horizontal" role="form">
                    <h3>Headers</h3>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">Background Color</label>
                        <div class="col-sm-8">
                            <wj-input-color value="headerBgColor"></wj-input-color>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">Text Color</label>
                        <div class="col-sm-8">
                            <wj-input-color value="headerColor"></wj-input-color>
                        </div>
                    </div>

                    <h3>Content</h3>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">Background Color</label>
                        <div class="col-sm-8">
                            <wj-input-color value="contentBgColor"></wj-input-color>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">Text Color</label>
                        <div class="col-sm-8">
                            <wj-input-color value="contentColor"></wj-input-color>
                        </div>
                    </div>

                    <h3>Selection</h3>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">Background Color</label>
                        <div class="col-sm-8">
                            <wj-input-color value="selectedBgColor"></wj-input-color>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">Text Color</label>
                        <div class="col-sm-8">
                            <wj-input-color value="selectedColor"></wj-input-color>
                        </div>
                    </div>

                    <h3>Tooltip</h3>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">Background Color</label>
                        <div class="col-sm-8">
                            <wj-input-color value="tooltipBgColor"></wj-input-color>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">Text Color</label>
                        <div class="col-sm-8">
                            <wj-input-color value="tooltipColor"></wj-input-color>
                        </div>
                    </div>

                    <h3>Border</h3>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">Corner Radius</label>
                        <div class="col-sm-8">
                            <wj-input-number value="borderRadius" min="0" max="20" show-spinner="true" step="1"></wj-input-number>
                        </div>
                    </div>
                </form>
            </div>
            <div class="col-md-6">
                <h2>Preview</h2>
                <h3>FlexGrid</h3>
                    <wj-flex-grid items-source="data" selection-mode="Row">
                        <wj-flex-grid-column header="Country" binding="country"></wj-flex-grid-column>
                        <wj-flex-grid-column header="Sales" binding="sales"></wj-flex-grid-column>
                        <wj-flex-grid-column header="Expenses" binding="expenses"></wj-flex-grid-column>
                        <wj-flex-grid-column header="Downloads" binding="downloads"></wj-flex-grid-column>
                    </wj-flex-grid>

                <h3>Calendar</h3>
                <wj-calendar></wj-calendar>
                <p>
                    <div class="alert alert-info" wj-tooltip="#ttSample">Hover over me to see a Tooltip!</div>
                </p>

                <div style="display:none">
                    <div id="ttSample">
                        <b>Tooltip</b>:
                        this is how a tooltip looks using your custom theme.<br />
                        We suggest using a subtle background color.
                    </div>
                </div>

                </div>
        </div>
        <div class="row">
            <div class="col-md-12">

                <h2>CSS</h2>
                <pre>                                            
        .wj-content {
            border-radius: {{borderRadius}}px;
            background-color: {{contentBgColor}};
            color: {{contentColor}};
        }
        .wj-header {
            background-color: {{headerBgColor}};
            color: {{headerColor}};
        }
        .wj-state-selected {
            background-color: {{selectedBgColor}};
            color: {{selectedColor}};
        }
        .wj-state-multi-selected {
            background-color: {{multiSelectedBgColor}};
            color: {{selectedColor}};
        }                    
        .wj-tooltip {
            background-color: {{tooltipBgColor}};
            color: {{tooltipColor}};
        }
        .wj-cell:not(.wj-header):not(.wj-group):not(.wj-alt):not(.wj-state-selected):not(.wj-state-multi-selected) {
            background-color: {{contentBgColor}};
            color: {{contentColor}};
        }
        .wj-alt:not(.wj-header):not(.wj-group):not(.wj-state-selected):not(.wj-state-multi-selected) {
            background-color: {{altCellBgColor}};
            color: {{contentColor}};
        }
    </pre>
            </div>
        </div>
    </div>
</body>
</html>