feat: finish quote pack support, change quote settings ui and improve hot reload

This commit is contained in:
David Ralph
2021-05-02 22:45:29 +01:00
parent f49cf1f65b
commit 7470ca9e3a
4 changed files with 140 additions and 78 deletions

View File

@@ -4,23 +4,56 @@ import Checkbox from '../Checkbox';
import Text from '../Text';
import Switch from '../Switch';
import Slider from '../Slider';
import Dropdown from '../Dropdown';
export default function QuoteSettings() {
const { quote } = window.language.modals.main.settings.sections;
export default class QuoteSettings extends React.PureComponent {
constructor() {
super();
this.state = {
quoteType: localStorage.getItem('quoteType') || 'api',
};
}
return (
<>
<h2>{quote.title}</h2>
<Switch name='quote' text={window.language.modals.main.settings.enabled} category='quote' element='.quotediv' />
<Checkbox name='authorLink' text={quote.author_link} element='.other' />
<Text title={quote.custom} name='customQuote' element='.other' />
<Text title={quote.custom_author} name='customQuoteAuthor' element='.other'/>
<Slider title={window.language.modals.main.settings.sections.appearance.accessibility.widget_zoom} name='zoomQuote' min='10' max='400' default='100' display='%' category='quote' element='.quotediv' />
marketplaceType = () => {
if (localStorage.getItem('quote_packs')) {
return <option value='quote_pack'>{window.language.modals.main.navbar.marketplace}</option>;
}
}
<h3>{quote.buttons.title}</h3>
<Checkbox name='copyButton' text={quote.buttons.copy} category='quote'/>
<Checkbox name='tweetButton' text={quote.buttons.tweet} category='quote'/>
<Checkbox name='favouriteQuoteEnabled' text={quote.buttons.favourite} category='quote'/>
</>
);
render() {
const { quote } = window.language.modals.main.settings.sections;
let quoteSettings;
const customSettings = (
<>
<Text title={quote.custom} name='customQuote' category='quote' element='.quotediv' />
<Text title={quote.custom_author} name='customQuoteAuthor' category='quote' element='.quotediv'/>
</>
);
switch (this.state.quoteType) {
case 'custom': quoteSettings = customSettings; break;
}
return (
<>
<h2>{quote.title}</h2>
<Switch name='quote' text={window.language.modals.main.settings.enabled} category='quote' element='.quotediv' />
<Checkbox name='authorLink' text={quote.author_link} element='.other' />
<Dropdown label={window.language.modals.main.settings.sections.background.type.title} name='quoteType' onChange={(value) => this.setState({ quoteType: value })} category='quote'>
{this.marketplaceType()}
<option value='api'>{window.language.modals.main.settings.sections.background.type.api}</option>
<option value='custom'>{quote.custom}</option>
</Dropdown>
{quoteSettings}
<Slider title={window.language.modals.main.settings.sections.appearance.accessibility.widget_zoom} name='zoomQuote' min='10' max='400' default='100' display='%' category='quote' element='.quotediv' />
<h3>{quote.buttons.title}</h3>
<Checkbox name='copyButton' text={quote.buttons.copy} category='quote'/>
<Checkbox name='tweetButton' text={quote.buttons.tweet} category='quote'/>
<Checkbox name='favouriteQuoteEnabled' text={quote.buttons.favourite} category='quote'/>
</>
);
}
}

View File

@@ -39,7 +39,7 @@ function Tab(props) {
}
const settings = window.language.modals.main.settings.sections;
const { navbar, marketplace, addons }= window.language.modals.main;
const { navbar, marketplace, addons } = window.language.modals.main;
let icon, divider;
switch (props.label) {