external/SponsorBlock
1
0
Fork 0
mirror of https://github.com/ajayyy/SponsorBlock.git synced 2024-11-10 01:01:55 +01:00
Code Issues Projects Releases Packages 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
Show stats 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 {
width: 60px;
background: none;
border: none;
}

37
src/components/CategorySkipOptionsComponent.tsx
View file

@ -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;
}