1 files changed, 119 insertions, 0 deletions
diff --git a/webapp/components/admin_console/color_setting.jsx b/webapp/components/admin_console/color_setting.jsx
new file mode 100644
index 000000000..483b585ee
--- /dev/null
+++ b/webapp/components/admin_console/color_setting.jsx
@@ -0,0 +1,119 @@
+// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import Setting from './setting.jsx';
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import {ChromePicker} from 'react-color';
+
+export default class ColorSetting extends React.PureComponent {
+    static propTypes = {
+
+        /*
+         * The unique identifer for the admin console setting
+         */
+        id: PropTypes.string.isRequired,
+
+        /*
+         * The text/jsx display name for the setting
+         */
+        label: PropTypes.node.isRequired,
+
+        /*
+         * The text/jsx help text to display underneath the setting
+         */
+        helpText: PropTypes.node,
+
+        /*
+         * The hex color value
+         */
+        value: PropTypes.string.isRequired,
+
+        /*
+         * Function called when the input changes
+         */
+        onChange: PropTypes.func,
+
+        /*
+         * Set to disable the setting
+         */
+        disabled: PropTypes.bool
+    }
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            showPicker: false
+        };
+    }
+
+    componentDidMount() {
+        document.addEventListener('click', this.closePicker);
+    }
+
+    componentWillUnmount() {
+        document.removeEventListener('click', this.closePicker);
+    }
+
+    handleChange = (color) => {
+        this.props.onChange(this.props.id, color.hex);
+    }
+
+    togglePicker = () => {
+        if (this.props.disabled) {
+            this.setState({showPicker: false});
+        }
+        this.setState({showPicker: !this.state.showPicker});
+    }
+
+    closePicker = (e) => {
+        if (!e.target.closest('.picker-' + this.props.id)) {
+            this.setState({showPicker: false});
+        }
+    }
+
+    onTextInput = (e) => {
+        this.props.onChange(this.props.id, e.target.value);
+    }
+
+    render() {
+        let picker;
+        if (this.state.showPicker) {
+            picker = (
+                <div className={'color-picker__popover picker-' + this.props.id}>
+                    <ChromePicker
+                        color={this.props.value}
+                        onChange={this.handleChange}
+                    />
+                </div>
+            );
+        }
+
+        return (
+            <Setting
+                label={this.props.label}
+                helpText={this.props.helpText}
+                inputId={this.props.id}
+            >
+                <div className='input-group color-picker colorpicker-element'>
+                    <input
+                        type='text'
+                        className='form-control'
+                        value={this.props.value}
+                        onChange={this.onTextInput}
+                        disabled={this.props.disabled}
+                    />
+                    <span
+                        className={'input-group-addon picker-' + this.props.id}
+                        onClick={this.togglePicker}
+                    >
+                        <i style={{backgroundColor: this.props.value}}/>
+                    </span>
+                    {picker}
+                </div>
+            </Setting>
+        );
+    }
+}