diff options
| -rw-r--r-- | public/options/options.css | 8 | ||||
| -rw-r--r-- | src/components/options/CategorySkipOptionsComponent.tsx | 8 | ||||
| -rw-r--r-- | src/components/options/ToggleOptionComponent.tsx | 3 |
3 files changed, 15 insertions, 4 deletions
diff --git a/public/options/options.css b/public/options/options.css index 2bd27161..542634f5 100644 --- a/public/options/options.css +++ b/public/options/options.css @@ -317,6 +317,10 @@ input[type='number'] { color: grey; } +.disabled .slider { + cursor: default; +} + tr.disabled { opacity: 0.3; } @@ -358,6 +362,10 @@ tr.disabled { padding: 4px; } +.switch-label { + width: inherit; +} + .switch { position: relative; display: inline-block; diff --git a/src/components/options/CategorySkipOptionsComponent.tsx b/src/components/options/CategorySkipOptionsComponent.tsx index 338435a8..aa46b29d 100644 --- a/src/components/options/CategorySkipOptionsComponent.tsx +++ b/src/components/options/CategorySkipOptionsComponent.tsx @@ -78,9 +78,6 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr className={`categoryTableElement${extraClasses}`} > <td id={this.props.category + "OptionName"} className="categoryTableLabel"> - {disabled && - <LockSvg className="upsellButton" onClick={() => chrome.tabs.create({url: chrome.runtime.getURL('upsell/index.html')})}/> - } {chrome.i18n.getMessage("category_" + this.props.category)} </td> @@ -93,6 +90,10 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr onChange={this.skipOptionSelected.bind(this)}> {this.getCategorySkipOptions()} </select> + + {disabled && + <LockSvg className="upsellButton" onClick={() => chrome.tabs.create({url: chrome.runtime.getURL('upsell/index.html')})}/> + } </td> {this.props.category !== "chapter" && @@ -226,6 +227,7 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr configKey={option.configKey} label={option.label} disabled={disabled} + style={{width: "300px"}} /> </td> </tr> diff --git a/src/components/options/ToggleOptionComponent.tsx b/src/components/options/ToggleOptionComponent.tsx index c6ea698d..03b997aa 100644 --- a/src/components/options/ToggleOptionComponent.tsx +++ b/src/components/options/ToggleOptionComponent.tsx @@ -6,6 +6,7 @@ export interface ToggleOptionProps { configKey: string; label: string; disabled?: boolean; + style?: React.CSSProperties; } export interface ToggleOptionState { @@ -26,7 +27,7 @@ class ToggleOptionComponent extends React.Component<ToggleOptionProps, ToggleOpt render(): React.ReactElement { return ( <div> - <div className="switch-container"> + <div className="switch-container" style={this.props.style}> <label className="switch"> <input id={this.props.configKey} type="checkbox" |