summaryrefslogtreecommitdiffstats
path: root/web/react/components/user_settings/premade_theme_chooser.jsx
blob: 8116bffcc128569bc5bff39192d05dbc8706a8bc (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
// See License.txt for license information.

var Utils = require('../../utils/utils.jsx');
var Constants = require('../../utils/constants.jsx');

export default class PremadeThemeChooser extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
    }
    render() {
        const theme = this.props.theme;

        const premadeThemes = [];
        for (const k in Constants.THEMES) {
            if (Constants.THEMES.hasOwnProperty(k)) {
                const premadeTheme = $.extend(true, {}, Constants.THEMES[k]);

                let activeClass = '';
                if (premadeTheme.type === theme.type) {
                    activeClass = 'active';
                }

                premadeThemes.push(
                    <div
                        className='col-xs-6 col-sm-3 premade-themes'
                        key={'premade-theme-key' + k}
                    >
                        <div
                            className={activeClass}
                            onClick={() => this.props.updateTheme(premadeTheme)}
                        >
                            <label>
                                <img
                                    className='img-responsive'
                                    src={'/static/images/themes/' + premadeTheme.type.toLowerCase() + '.png'}
                                />
                                <div className='theme-label'>{Utils.toTitleCase(premadeTheme.type)}</div>
                            </label>
                        </div>
                    </div>
                );
            }
        }

        return (
            <div className='row'>
                {premadeThemes}
            </div>
        );
    }
}

PremadeThemeChooser.propTypes = {
    theme: React.PropTypes.object.isRequired,
    updateTheme: React.PropTypes.func.isRequired
};