feat: add warning for things that dont support hot reload

This commit is contained in:
David Ralph
2021-04-14 21:20:43 +01:00
parent ca2ce43f2f
commit 4feb4f79a9
21 changed files with 110 additions and 61 deletions

View File

@@ -21,6 +21,13 @@ export default class Checkbox extends React.PureComponent {
checked: (this.state.checked === true) ? false : true
});
if (this.props.element) {
if (!document.querySelector(this.props.element)) {
document.querySelector('.reminder-info').style.display = 'block';
return localStorage.setItem('showReminder', true);
}
}
EventBus.dispatch('refresh', this.props.category);
}

View File

@@ -29,6 +29,13 @@ export default class Dropdown extends React.PureComponent {
this.props.onChange(value);
}
if (this.props.element) {
if (!document.querySelector(this.props.element)) {
document.querySelector('.reminder-info').style.display = 'block';
return localStorage.setItem('showReminder', true);
}
}
EventBus.dispatch('refresh', this.props.category);
}

View File

@@ -25,6 +25,13 @@ export default class Radio extends React.PureComponent {
value: value
});
if (this.props.element) {
if (!document.querySelector(this.props.element)) {
document.querySelector('.reminder-info').style.display = 'block';
return localStorage.setItem('showReminder', true);
}
}
EventBus.dispatch('refresh', this.props.category);
}

View File

@@ -21,6 +21,13 @@ export default class Switch extends React.PureComponent {
checked: (this.state.checked === true) ? false : true
});
if (this.props.element) {
if (!document.querySelector(this.props.element)) {
document.querySelector('.reminder-info').style.display = 'block';
return localStorage.setItem('showReminder', true);
}
}
EventBus.dispatch('refresh', this.props.category);
}

View File

@@ -26,6 +26,13 @@ export default class Text extends React.PureComponent {
value: value
});
if (this.props.element) {
if (!document.querySelector(this.props.element)) {
document.querySelector('.reminder-info').style.display = 'block';
return localStorage.setItem('showReminder', true);
}
}
EventBus.dispatch('refresh', this.props.category);
}

View File

@@ -44,13 +44,13 @@ export default class AdvancedSettings extends React.PureComponent {
<FileUpload id='file-input' accept='application/json' type='settings' loadFunction={(e) => this.settingsImport(e)}/>
<h3>{advanced.customisation}</h3>
<Text title={advanced.custom_js} name='customjs' textarea={true}/>
<Text title={advanced.custom_css} name='customcss' textarea={true}/>
<Text title={advanced.custom_js} name='customjs' textarea={true} element='.other'/>
<Text title={advanced.custom_css} name='customcss' textarea={true} element='.other'/>
<Text title={advanced.tab_name} name='tabName' default={window.language.tabname} category='other'/>
<h3>{this.language.sections.experimental.title}</h3>
<p>{advanced.experimental_warning}</p>
<Checkbox name='experimental' text={this.language.enabled}/>
<Checkbox name='experimental' text={this.language.enabled} element='.other'/>
<Modal onRequestClose={() => this.setState({ resetModal: false })} isOpen={this.state.resetModal} className={'Modal resetmodal'} overlayClassName={'Overlay resetoverlay'} ariaHideApp={false}>
<ResetModal modalClose={() => this.setState({ resetModal: false })} />

View File

@@ -32,14 +32,14 @@ export default function AppearanceSettings() {
<Radio name='theme' title={appearance.theme.title} options={themeOptions} category='other' />
<h3>{appearance.navbar.title}</h3>
<Checkbox name='notesEnabled' text={appearance.navbar.notes} />
<Checkbox name='refresh' text={appearance.navbar.refresh} />
<Checkbox name='notesEnabled' text={appearance.navbar.notes} element='.other' />
<Checkbox name='refresh' text={appearance.navbar.refresh} element='.other' />
<h3>{appearance.font.title}</h3>
<Text title={appearance.font.custom} name='font' upperCaseFirst={true} />
<Text title={appearance.font.custom} name='font' upperCaseFirst={true} element='.other' />
<br/>
<Checkbox name='fontGoogle' text={appearance.font.google} />
<Dropdown label={appearance.font.weight.title} name='fontweight'>
<Checkbox name='fontGoogle' text={appearance.font.google} element='.other' />
<Dropdown label={appearance.font.weight.title} name='fontweight' element='.other'>
{/* names are taken from https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */}
<option value='100'>{appearance.font.weight.thin}</option>
<option value='200'>{appearance.font.weight.extra_light}</option>
@@ -51,7 +51,7 @@ export default function AppearanceSettings() {
<option value='800'>{appearance.font.weight.extra_bold}</option>
</Dropdown>
<br/><br/>
<Dropdown label={appearance.font.style.title} name='fontstyle'>
<Dropdown label={appearance.font.style.title} name='fontstyle' element='.other'>
<option value='normal'>{appearance.font.style.normal}</option>
<option value='italic'>{appearance.font.style.italic}</option>
<option value='oblique'>{appearance.font.style.oblique}</option>

View File

@@ -11,10 +11,10 @@ export default function ExperimentalSettings() {
<>
<h2>{experimental.title}</h2>
<p>{experimental.warning}</p>
<Checkbox name='animations' text={window.language.modals.main.settings.sections.appearance.animations}/>
<Checkbox name='animations' text={window.language.modals.main.settings.sections.appearance.animations} element='.other'/>
<h3>{experimental.developer}</h3>
<Checkbox name='debug' text='Debug hotkey (Ctrl + #)'/>
<Slider title='Debug timeout' name='debugtimeout' min='0' max='5000' default='0' step='100' display=' miliseconds' />
<Checkbox name='debug' text='Debug hotkey (Ctrl + #)' element='.other'/>
<Slider title='Debug timeout' name='debugtimeout' min='0' max='5000' default='0' step='100' display=' miliseconds' element='.other' />
{/* <Checkbox name='beta' text='Beta Mode Override'/>
<Text name='api_override' title='Version Override (format example: 5.0)'/>
<Text name='api_override' title='API URL Override'/>

View File

@@ -1,7 +1,5 @@
import React from 'react';
import EventBus from '../../../../../modules/helpers/eventbus';
import Checkbox from '../Checkbox';
import Switch from '../Switch';
import Text from '../Text';
@@ -25,7 +23,8 @@ export default class GreetingSettings extends React.PureComponent {
birthday: data
});
EventBus.dispatch('refresh', 'greeting');
document.querySelector('.reminder-info').style.display = 'block';
localStorage.setItem('showReminder', true);
}
render() {
@@ -34,14 +33,14 @@ export default class GreetingSettings extends React.PureComponent {
return (
<>
<h2>{greeting.title}</h2>
<Switch name='greeting' text={this.language.enabled} category='greeting'/>
<Checkbox name='events' text={greeting.events} category='greeting'/>
<Checkbox name='defaultGreetingMessage' text={greeting.default} category='greeting'/>
<Text title={greeting.name} name='greetingName' category='greeting'/>
<Switch name='greeting' text={this.language.enabled} category='greeting' element='.greeting'/>
<Checkbox name='events' text={greeting.events} category='greeting' element='.other'/>
<Checkbox name='defaultGreetingMessage' text={greeting.default} category='greeting' element='.other'/>
<Text title={greeting.name} name='greetingName' category='greeting' element='.other'/>
<h3>{greeting.birthday}</h3>
<Switch name='birthdayenabled' text={this.language.enabled} category='greeting'/>
<Checkbox name='birthdayage' text={greeting.birthday_age} category='greeting'/>
<Switch name='birthdayenabled' text={this.language.enabled} category='greeting' element='.other'/>
<Checkbox name='birthdayage' text={greeting.birthday_age} category='greeting' element='.other'/>
<p>{greeting.birthday_date}</p>
<DayPickerInput onDayChange={this.changeDate} value={this.state.birthday}/>
</>

View File

@@ -11,7 +11,7 @@ export default function LanguageSettings() {
return (
<>
<h2>{language.title}</h2>
<Radio name='language' options={languages} />
<Radio name='language' options={languages} element='.language' />
<h3>{language.quote}</h3>
<Radio name='quotelanguage' options={quote_languages} category='quote' />
</>

View File

@@ -9,7 +9,7 @@ export default function QuickLinks() {
return (
<>
<h2>{language.title}</h2>
<Switch name='quicklinksenabled' text={window.language.modals.main.settings.enabled} category='quicklinks' />
<Switch name='quicklinksenabled' text={window.language.modals.main.settings.enabled} category='quicklinks' element='.quicklinks-container' />
<Checkbox name='quicklinksnewtab' text={language.open_new} category='quicklinks' />
<Checkbox name='quicklinkstooltip' text={language.tooltip} category='quicklinks' />
</>

View File

@@ -10,10 +10,10 @@ export default function QuoteSettings() {
return (
<>
<h2>{quote.title}</h2>
<Switch name='quote' text={window.language.modals.main.settings.enabled} category='quote' />
<Checkbox name='authorLink' text={quote.author_link} category='quote' />
<Text title={quote.custom} name='customQuote' category='quote' />
<Text title={quote.custom_author} name='customQuoteAuthor' category='quote'/>
<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'/>
<h3>{quote.buttons.title}</h3>
<Checkbox name='copyButton' text={quote.buttons.copy} category='quote'/>

View File

@@ -94,7 +94,7 @@ export default class TimeSettings extends React.PureComponent {
return (
<>
<h2>{time.title}</h2>
<Switch name='time' text={this.language.enabled} category='clock' />
<Switch name='time' text={this.language.enabled} category='clock' element='.clock' />
<Dropdown label={time.type} name='timeType' onChange={(value) => this.setState({ timeType: value })} category='clock'>
<option value='digital'>{time.digital.title}</option>
<option value='analogue'>{time.analogue.title}</option>

View File

@@ -8,6 +8,7 @@ import rgbToHex from '../../../../../../modules/helpers/background/rgbToHex';
import { toast } from 'react-toastify';
import 'react-color-gradient-picker/dist/index.css';
import '../../../scss/settings/react-color-picker-gradient-picker-custom-styles.scss';
export default class ColourSettings extends React.PureComponent {
DefaultGradientSettings = { 'angle': '180', 'gradient': [{ 'colour': '#ffb032', 'stop': 0 }], 'type': 'linear' };