mirror of
https://github.com/ajayyy/SponsorBlock.git
synced 2024-09-19 20:51:28 +02:00
Added basic category chooser UI
This commit is contained in:
parent
b6c243236b
commit
6ea87d7cd0
7 changed files with 171 additions and 0 deletions
|
@ -498,5 +498,14 @@
|
|||
},
|
||||
"category_merchandise": {
|
||||
"message": "Merchandise and self-promotion"
|
||||
},
|
||||
"disable": {
|
||||
"message": "Disable"
|
||||
},
|
||||
"manualSkip": {
|
||||
"message": "Manual Skip"
|
||||
},
|
||||
"autoSkip": {
|
||||
"message": "Auto Skip"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -323,4 +323,27 @@ svg {
|
|||
|
||||
font-size: 14px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* React styles */
|
||||
|
||||
.categoryTableElement {
|
||||
font-size: 16px;
|
||||
|
||||
color: white;
|
||||
}
|
||||
|
||||
.categoryTableElement > * {
|
||||
padding-right: 15px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.categoryOptionsSelector {
|
||||
background-color: #c00000;
|
||||
color: white;
|
||||
|
||||
border: none;
|
||||
font-size: 14px;
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
|
@ -24,6 +24,13 @@
|
|||
|
||||
<div id="options" class="hidden">
|
||||
|
||||
<div id="category-type" option-type="react-CategoryChooserComponent">
|
||||
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<div id="support-invidious" option-type="toggle" sync-option="supportInvidious">
|
||||
<label class="switch-container" label-name="__MSG_supportInvidious__">
|
||||
<label class="switch">
|
||||
|
|
50
src/components/CategoryChooserComponent.tsx
Normal file
50
src/components/CategoryChooserComponent.tsx
Normal file
|
@ -0,0 +1,50 @@
|
|||
import * as React from "react";
|
||||
|
||||
import Config from "../config"
|
||||
import * as CompileConfig from "../../config.json";
|
||||
import CategorySkipOptionsComponent from "./CategorySkipOptionsComponent";
|
||||
|
||||
export interface CategoryChooserProps {
|
||||
|
||||
}
|
||||
|
||||
export interface CategoryChooserState {
|
||||
|
||||
}
|
||||
|
||||
class CategoryChooserComponent extends React.Component<CategoryChooserProps, CategoryChooserState> {
|
||||
|
||||
constructor(props: CategoryChooserProps) {
|
||||
super(props);
|
||||
|
||||
// Setup state
|
||||
this.state = {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<table id="categoryChooserTable"
|
||||
className="categoryChooserTable"> <tbody>
|
||||
{this.getCategorySkipOptions()}
|
||||
</tbody> </table>
|
||||
);
|
||||
}
|
||||
|
||||
getCategorySkipOptions(): JSX.Element[] {
|
||||
let elements: JSX.Element[] = [];
|
||||
|
||||
for (const category of CompileConfig.categoryList) {
|
||||
elements.push(
|
||||
<CategorySkipOptionsComponent category={category}
|
||||
defaultColor={"00d400"}>
|
||||
</CategorySkipOptionsComponent>
|
||||
);
|
||||
}
|
||||
|
||||
return elements;
|
||||
}
|
||||
}
|
||||
|
||||
export default CategoryChooserComponent;
|
63
src/components/CategorySkipOptionsComponent.tsx
Normal file
63
src/components/CategorySkipOptionsComponent.tsx
Normal file
|
@ -0,0 +1,63 @@
|
|||
import * as React from "react";
|
||||
import Config from "../config"
|
||||
|
||||
export interface CategorySkipOptionsProps {
|
||||
category: string;
|
||||
defaultColor: string;
|
||||
}
|
||||
|
||||
export interface CategorySkipOptionsState {
|
||||
color: string;
|
||||
}
|
||||
|
||||
class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsProps, CategorySkipOptionsState> {
|
||||
|
||||
constructor(props: CategorySkipOptionsProps) {
|
||||
super(props);
|
||||
|
||||
// Setup state
|
||||
this.state = {
|
||||
color: props.defaultColor
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<tr id={this.props.category + "OptionsRow"}
|
||||
className="categoryTableElement">
|
||||
<td id={this.props.category + "OptionName"}
|
||||
className="categoryTableLabel">
|
||||
{chrome.i18n.getMessage("category_" + this.props.category)}
|
||||
</td>
|
||||
|
||||
<td id={this.props.category + "SkipOption"}>
|
||||
<select
|
||||
className="categoryOptionsSelector">
|
||||
{this.getOptions(["disable", "manualSkip", "autoSkip"])}
|
||||
</select>
|
||||
</td>
|
||||
|
||||
{/* TODO: Add colour chooser */}
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param optionNames List of option names as codes that will be sent to i18n
|
||||
*/
|
||||
getOptions(optionNames: string[]): JSX.Element[] {
|
||||
let elements: JSX.Element[] = [];
|
||||
|
||||
for (const optionName of optionNames) {
|
||||
elements.push(
|
||||
<option value={optionName}>
|
||||
{chrome.i18n.getMessage(optionName)}
|
||||
</option>
|
||||
);
|
||||
}
|
||||
|
||||
return elements;
|
||||
}
|
||||
}
|
||||
|
||||
export default CategorySkipOptionsComponent;
|
|
@ -5,6 +5,7 @@ import * as CompileConfig from "../config.json";
|
|||
(<any> window).SB = Config;
|
||||
|
||||
import Utils from "./utils";
|
||||
import CategoryChooser from "./render/CategoryChooser";
|
||||
var utils = new Utils();
|
||||
|
||||
window.addEventListener('DOMContentLoaded', init);
|
||||
|
@ -164,6 +165,9 @@ async function init() {
|
|||
});
|
||||
|
||||
break;
|
||||
case "react-CategoryChooserComponent":
|
||||
new CategoryChooser(optionsElements[i]);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
15
src/render/CategoryChooser.tsx
Normal file
15
src/render/CategoryChooser.tsx
Normal file
|
@ -0,0 +1,15 @@
|
|||
import * as React from "react";
|
||||
import * as ReactDOM from "react-dom";
|
||||
import CategoryChooserComponent from "../components/CategoryChooserComponent";
|
||||
|
||||
class CategoryChooser {
|
||||
|
||||
constructor(element: Element) {
|
||||
ReactDOM.render(
|
||||
<CategoryChooserComponent/>,
|
||||
element
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default CategoryChooser;
|
Loading…
Reference in a new issue