diff options
| -rw-r--r-- | public/options/options.css | 3 | ||||
| -rw-r--r-- | src/components/CategorySkipOptionsComponent.tsx | 37 |
2 files changed, 12 insertions, 28 deletions
diff --git a/public/options/options.css b/public/options/options.css index 8ad87e3d..971c6893 100644 --- a/public/options/options.css +++ b/public/options/options.css @@ -350,4 +350,7 @@ svg { .categoryColorTextBox { width: 60px; + + background: none; + border: none; }
\ No newline at end of file diff --git a/src/components/CategorySkipOptionsComponent.tsx b/src/components/CategorySkipOptionsComponent.tsx index 0a44b172..cbfd42cf 100644 --- a/src/components/CategorySkipOptionsComponent.tsx +++ b/src/components/CategorySkipOptionsComponent.tsx @@ -71,7 +71,7 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr <td id={this.props.category + "ColorOption"}> <input className="categoryColorTextBox option-text-box" - type="text" + type="color" onChange={(event) => this.setColorState(event, false)} value={this.state.color} /> </td> @@ -79,20 +79,11 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr <td id={this.props.category + "PreviewColorOption"}> <input className="categoryColorTextBox option-text-box" - type="text" + type="color" onChange={(event) => this.setColorState(event, true)} value={this.state.previewColor} /> </td> - <td id={this.props.category + "SaveButton"}> - <div - className="option-button trigger-button" - onClick={() => this.save()}> - {chrome.i18n.getMessage("save")} - </div> - </td> - - </tr> <tr id={this.props.category + "DescriptionRow"} @@ -169,32 +160,22 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr return elements; } - setColorState(event: React.ChangeEvent<HTMLInputElement>, preview: boolean) { + setColorState(event: React.FormEvent<HTMLInputElement>, preview: boolean) { if (preview) { this.setState({ - previewColor: event.target.value + previewColor: event.currentTarget.value }); + + Config.config.barTypes["preview-" + this.props.category].color = event.currentTarget.value; + } else { this.setState({ - color: event.target.value + color: event.currentTarget.value }); - } - } - // Save text box data - save() { - // Validate colors - let checkVar = [this.state.color, this.state.previewColor] - for (const color of checkVar) { - if (color[0] !== "#" || (color.length !== 7 && color.length !== 4) || !utils.isHex(color.slice(1))) { - alert(chrome.i18n.getMessage("colorFormatIncorrect") + " " + color.slice(1) + " " + utils.isHex(color.slice(1)) + " " + utils.isHex("abcd123")); - return; - } + Config.config.barTypes[this.props.category].color = event.currentTarget.value; } - // Save colors - Config.config.barTypes[this.props.category].color = this.state.color; - Config.config.barTypes["preview-" + this.props.category].color = this.state.previewColor; // Make listener get called Config.config.barTypes = Config.config.barTypes; } |