Mirror/SponsorBlock
1
0
Fork 0
mirror of https://github.com/ajayyy/SponsorBlock.git synced 2025-12-08 12:37:05 +03:00
Code Issues Packages Projects Releases Wiki Activity

Switch color options to use input type=color and removed save button

Browse Source
This commit is contained in:
Ajay Ramachandran
2020-09-03 20:51:46 -04:00
parent abe6c280a0
commit 0f8739abc0
2 changed files with 12 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
public/options/options.css
View File

@@ -350,4 +350,7 @@ svg {
.categoryColorTextBox { .categoryColorTextBox {
width: 60px; width: 60px;
background: none;
border: none;
} }

39
src/components/CategorySkipOptionsComponent.tsx
View File

@@ -71,7 +71,7 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
<td id={this.props.category + "ColorOption"}> <td id={this.props.category + "ColorOption"}>
<input <input
className="categoryColorTextBox option-text-box" className="categoryColorTextBox option-text-box"
type="text" type="color"
onChange={(event) => this.setColorState(event, false)} onChange={(event) => this.setColorState(event, false)}
value={this.state.color} /> value={this.state.color} />
</td> </td>
@@ -79,20 +79,11 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
<td id={this.props.category + "PreviewColorOption"}> <td id={this.props.category + "PreviewColorOption"}>
<input <input
className="categoryColorTextBox option-text-box" className="categoryColorTextBox option-text-box"
type="text" type="color"
onChange={(event) => this.setColorState(event, true)} onChange={(event) => this.setColorState(event, true)}
value={this.state.previewColor} /> value={this.state.previewColor} />
</td> </td>
<td id={this.props.category + "SaveButton"}>
<div
className="option-button trigger-button"
onClick={() => this.save()}>
{chrome.i18n.getMessage("save")}
</div>
</td>
</tr> </tr>
<tr id={this.props.category + "DescriptionRow"} <tr id={this.props.category + "DescriptionRow"}
@@ -169,32 +160,22 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
return elements; return elements;
} }
setColorState(event: React.ChangeEvent<HTMLInputElement>, preview: boolean) { setColorState(event: React.FormEvent<HTMLInputElement>, preview: boolean) {
if (preview) { if (preview) {
this.setState({ this.setState({
previewColor: event.target.value previewColor: event.currentTarget.value
}); });
Config.config.barTypes["preview-" + this.props.category].color = event.currentTarget.value;
} else { } else {
this.setState({ this.setState({
color: event.target.value color: event.currentTarget.value
}); });
}
Config.config.barTypes[this.props.category].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;
}
}
// 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 // Make listener get called
Config.config.barTypes = Config.config.barTypes; Config.config.barTypes = Config.config.barTypes;
} }