mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-17 22:14:13 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: add warning for things that dont support hot reload

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/modals/Modals.jsx
View File

@@ -27,6 +27,9 @@ export default class Modals extends React.PureComponent {
welcomeModal: true
});
}
// hide refresh reminder once the user has refreshed the page
localStorage.setItem('showReminder', false);
}
closeWelcome() {

16
src/components/modals/main/Main.jsx
View File

@@ -8,10 +8,18 @@ const Settings = React.lazy(() => import('./tabs/Settings'));
const Addons = React.lazy(() => import('./tabs/Addons'));
const Marketplace = React.lazy(() => import('./tabs/Marketplace'));
const renderLoader = () => (<Tabs>
<div label=''>{window.language.modals.main.loading}</div>
<div label=''>{window.language.modals.main.loading}</div>
</Tabs>);
const renderLoader = () => (
<Tabs>
<div label={window.language.modals.main.loading}>
<div className='emptyitems'>
<div className='emptyMessage'>
<h1>{window.language.modals.main.loading}</h1>
</div>
</div>
</div>
<div label='' style={{ 'display': 'none' }}></div>
</Tabs>
);
export default function MainModal(props) {
const language = window.language.modals.main.navbar;

2
src/components/modals/main/scss/index.scss
View File

@@ -6,8 +6,6 @@
@import 'settings/dropdown';
@import 'settings/daypicker';
@import 'settings/react-color-picker-gradient-picker-custom-styles.scss';
@import 'marketplace/main';
.Modal {

2
src/components/modals/main/scss/marketplace/_main.scss
View File

@@ -184,4 +184,4 @@ p.description {
h1 {
margin-top: -20px;
}
}
}

7
src/components/modals/main/scss/settings/_main.scss
View File

@@ -129,12 +129,11 @@ input[type=color]::-moz-color-swatch {
position: absolute;
bottom: 20px;
right: 20px;
padding: 20px;
color: #000;
background: #f0f0f0;
padding: 15px;
color: var(--modal-text);
background: var(--sidebar);
max-width: 300px;
border-radius: 0.7em;
display: none;
h1 {
font-size: 1em;

7
src/components/modals/main/settings/Checkbox.jsx
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);
}

7
src/components/modals/main/settings/Dropdown.jsx
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);
}

7
src/components/modals/main/settings/Radio.jsx
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);
}

7
src/components/modals/main/settings/Switch.jsx
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);
}

7
src/components/modals/main/settings/Text.jsx
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);
}

6
src/components/modals/main/settings/sections/Advanced.jsx
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 })} />

12
src/components/modals/main/settings/sections/Appearance.jsx
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>

6
src/components/modals/main/settings/sections/Experimental.jsx
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'/>

17
src/components/modals/main/settings/sections/Greeting.jsx
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}/>
</>

2
src/components/modals/main/settings/sections/Language.jsx
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' />
</>

2
src/components/modals/main/settings/sections/QuickLinks.jsx
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' />
</>

8
src/components/modals/main/settings/sections/Quote.jsx
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'/>

2
src/components/modals/main/settings/sections/Time.jsx
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>

1
src/components/modals/main/settings/sections/background/Colour.jsx
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' };

42
src/components/modals/main/tabs/Settings.jsx
View File

@@ -18,29 +18,35 @@ import Weather from '../settings/sections/Weather';
import Tabs from './backend/Tabs';
export default function Settings() {
const settings = window.language.modals.main.settings.sections;
const { reminder, sections } = window.language.modals.main.settings;
let display = 'none';
if (localStorage.getItem('showReminder') === 'true') {
display = 'block';
}
return (
<>
<Tabs>
<div label={settings.time.title}><Time/></div>
<div label={settings.quote.title}><Quote/></div>
<div label={settings.greeting.title}><Greeting/></div>
<div label={settings.background.title}><Background/></div>
<div label={settings.search.title}><Search/></div>
<div label={settings.quicklinks.title}><QuickLinks/></div>
<div label={settings.weather.title}><Weather/></div>
<div label={settings.appearance.title}><Appearance/></div>
<div label={settings.order.title}><Order/></div>
<div label={settings.language.title}><Language/></div>
<div label={settings.advanced.title}><Advanced/></div>
<div label={settings.experimental.title}><Experimental/></div>
<div label={settings.changelog}><Changelog/></div>
<div label={settings.about.title}><About/></div>
<div label={sections.time.title}><Time/></div>
<div label={sections.quote.title}><Quote/></div>
<div label={sections.greeting.title}><Greeting/></div>
<div label={sections.background.title}><Background/></div>
<div label={sections.search.title}><Search/></div>
<div label={sections.quicklinks.title}><QuickLinks/></div>
<div label={sections.weather.title}><Weather/></div>
<div label={sections.appearance.title}><Appearance/></div>
<div label={sections.order.title}><Order/></div>
<div label={sections.language.title}><Language/></div>
<div label={sections.advanced.title}><Advanced/></div>
<div label={sections.experimental.title}><Experimental/></div>
<div label={sections.changelog}><Changelog/></div>
<div label={sections.about.title}><About/></div>
</Tabs>
<div className='reminder-info'>
<h1>IMPORTANT INFO</h1>
<p>In order for changes to take place, the page must be refreshed.</p>
<div className='reminder-info' style={{ 'display': display }}>
<h1>{reminder.title}</h1>
<p>{reminder.message}</p>
<button className='pinNote' onClick={() => window.location.reload()}>{window.language.modals.main.error_boundary.refresh}</button>
</div>
</>
);

8
src/translations/en_GB.json
View File

@@ -55,6 +55,10 @@
},
"settings": {
"enabled": "Enabled",
"reminder": {
"title": "NOTICE",
"message": "In order for all of the changes to take place, the page must be refreshed."
},
"sections": {
"time": {
"title": "Time",
@@ -298,10 +302,6 @@
"last_updated": "Last Updated",
"version": "Version",
"author": "Authour",
"notice": {
"title": "Notice",
"description": "In order for the change to take place, the page must be refreshed."
},
"buttons": {
"addtomue": "Add To Mue",
"remove": "Remove"