diff --git a/src/App.jsx b/src/App.jsx index cf87f702..517c2a09 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -8,7 +8,6 @@ import Navbar from './components/widgets/navbar/Navbar'; import SettingsFunctions from './modules/helpers/settings'; import { ToastContainer } from 'react-toastify'; import Modal from 'react-modal'; -import merge from './modules/helpers/merge'; // Modals are lazy loaded as the user won't use them every time they open a tab const Main = React.lazy(() => import('./components/modals/Main')); @@ -80,30 +79,25 @@ export default class App extends React.PureComponent { } const overlayClassList = (localStorage.getItem('animations') === 'true') ? 'Overlay modal-animation' : 'Overlay'; - - /// language - const languagecode = localStorage.getItem('language') || 'en-GB'; - const language = merge(require('./translations/en-GB.json'), require(`./translations/${languagecode}.json`)); - const toastDisplayTime = localStorage.getItem('toastDisplayTime') || 2500; return ( - +
- this.setState({ [modal]: true })} language={language} /> - - + this.setState({ [modal]: true })}/> + + this.setState({ mainModal: false })} isOpen={this.state.mainModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}> -
this.setState({ mainModal: false })} /> +
this.setState({ mainModal: false })} /> this.setState({ updateModal: false })} isOpen={this.state.updateModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}> - this.setState({ updateModal: false })} /> + this.setState({ updateModal: false })} /> this.closeWelcome()} isOpen={this.state.welcomeModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}> - this.closeWelcome()} language={language.modals.welcome} /> + this.closeWelcome()} /> {/* this.setState({ feedbackModal: false })} isOpen={this.state.feedbackModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}> this.setState({ feedbackModal: false })} /> diff --git a/src/components/modals/Main.jsx b/src/components/modals/Main.jsx index 56a4edda..693258e2 100644 --- a/src/components/modals/Main.jsx +++ b/src/components/modals/Main.jsx @@ -7,18 +7,20 @@ import Marketplace from './tabs/Marketplace'; import Navigation from './tabs/backend/Tabs'; export default function MainModal(props) { + const language = window.language; + return (
×
-
- +
+
-
+
-
+
diff --git a/src/components/modals/Welcome.jsx b/src/components/modals/Welcome.jsx index 72d5b6fa..49623a96 100644 --- a/src/components/modals/Welcome.jsx +++ b/src/components/modals/Welcome.jsx @@ -5,21 +5,23 @@ import TwitterIcon from '@material-ui/icons/Twitter'; import ForumIcon from '@material-ui/icons/Forum'; export default function WelcomeModal(props) { + const language = window.language.modals.welcome; + return (
×
-

{props.language.title}

+

{language.title}

Mue Tab

celebration -

{props.language.information}

-

{props.language.thankyoumessage1},
{props.language.thankyoumessage2}

-

{props.language.support}

+

{language.information}

+

{language.thankyoumessage1},
{language.thankyoumessage2}

+

{language.support}


- +
); diff --git a/src/components/modals/settings/sections/About.jsx b/src/components/modals/settings/sections/About.jsx index 861ef6d9..642aa095 100644 --- a/src/components/modals/settings/sections/About.jsx +++ b/src/components/modals/settings/sections/About.jsx @@ -14,8 +14,9 @@ export default class About extends React.PureComponent { contributors: [], sponsors: [], other_contributors: [], - update: this.props.language.version.checking_update + update: window.language.modals.main.settings.sections.about.version.checking_update } + this.language = window.language.modals.main.settings.sections.about; } async getGitHubData() { @@ -25,9 +26,9 @@ export default class About extends React.PureComponent { const versionData = await (await fetch('https://api.github.com/repos/mue/mue/releases')).json(); const newVersion = versionData[0].tag_name; - let updateMsg = this.props.language.version.no_update; + let updateMsg = this.language.version.no_update; if (version < newVersion) { - updateMsg = `${this.props.language.version.update_available}: ${newVersion}`; + updateMsg = `${this.language.version.update_available}: ${newVersion}`; } this.setState({ @@ -41,7 +42,7 @@ export default class About extends React.PureComponent { componentDidMount() { if (localStorage.getItem('offlineMode') === 'true') { this.setState({ - update: this.props.language.version.offline_mode + update: this.language.version.offline_mode }); return; } @@ -52,15 +53,15 @@ export default class About extends React.PureComponent { render() { return (
-

{this.props.language.title}

+

{this.language.title}

Mue logo -

{this.props.language.copyright} 2018-{new Date().getFullYear()} Mue Tab (BSD-3 License)

-

{this.props.language.version.title} {version} ({this.state.update})

-

{this.props.language.resources_used.title}

-

Pexels ({this.props.language.resources_used.bg_images})

-

Google ({this.props.language.resources_used.pin_icon})

-

Undraw ({this.props.language.resources_used.welcome_img})

-

{this.props.language.contributors}

+

{this.language.copyright} 2018-{new Date().getFullYear()} Mue Tab (BSD-3 License)

+

{this.language.version.title} {version} ({this.state.update})

+

{this.language.resources_used.title}

+

Pexels ({this.language.resources_used.bg_images})

+

Google ({this.language.resources_used.pin_icon})

+

Undraw ({this.language.resources_used.welcome_img})

+

{this.language.contributors}

{this.state.contributors.map((item) => {item.login} @@ -72,7 +73,7 @@ export default class About extends React.PureComponent { {item.login} )} -

{this.props.language.supporters}

+

{this.language.supporters}

{this.state.sponsors.map((item) => {item.handle} diff --git a/src/components/modals/settings/sections/Advanced.jsx b/src/components/modals/settings/sections/Advanced.jsx index 3ec9b033..1ea24194 100644 --- a/src/components/modals/settings/sections/Advanced.jsx +++ b/src/components/modals/settings/sections/Advanced.jsx @@ -15,11 +15,12 @@ export default class AdvancedSettings extends React.PureComponent { this.state = { resetModal: false }; + this.language = window.language.modals.main.settings; } resetItem(type) { document.getElementById(type).value = ''; - toast(this.props.language.toasts.reset); + toast(this.language.toasts.reset); } settingsImport(e) { @@ -29,7 +30,7 @@ export default class AdvancedSettings extends React.PureComponent { localStorage.setItem(key, content[key]); } - toast(this.props.language.toasts.imported); + toast(this.language.toasts.imported); } componentDidMount() { @@ -43,7 +44,7 @@ export default class AdvancedSettings extends React.PureComponent { } render() { - const { advanced } = this.props.language.sections; + const { advanced } = this.language.sections; return (
@@ -51,24 +52,24 @@ export default class AdvancedSettings extends React.PureComponent {

{advanced.data}

- - - + + + this.settingsImport(e)} />

{advanced.customisation}

    -

    {advanced.custom_css} this.resetItem('customcss')}>{this.props.language.buttons.reset}

    +

    {advanced.custom_css} this.resetItem('customcss')}>{this.language.buttons.reset}

    -

    {advanced.custom_js} this.resetItem('customjs')}>{this.props.language.buttons.reset}

    +

    {advanced.custom_js} this.resetItem('customjs')}>{this.language.buttons.reset}

-

{this.props.language.sections.experimental.title}

+

{this.language.sections.experimental.title}

{advanced.experimental_warning}

- + this.setState({ resetModal: false })} isOpen={this.state.resetModal} className={'modal'} overlayClassName={'Overlay'} ariaHideApp={false}> this.setState({ resetModal: false })} /> diff --git a/src/components/modals/settings/sections/Appearance.jsx b/src/components/modals/settings/sections/Appearance.jsx index 5e2155ec..bd7a5760 100644 --- a/src/components/modals/settings/sections/Appearance.jsx +++ b/src/components/modals/settings/sections/Appearance.jsx @@ -13,6 +13,7 @@ export default class AppearanceSettings extends React.PureComponent { toast_duration: localStorage.getItem('toastDisplayTime'), font: localStorage.getItem('font') || '' }; + this.language = window.language.modals.main.settings; } resetItem(key) { @@ -42,7 +43,7 @@ export default class AppearanceSettings extends React.PureComponent { toast('resetItem requires a key!'); } - toast(this.props.language.toasts.reset); + toast(this.language.toasts.reset); } componentDidUpdate() { @@ -52,7 +53,7 @@ export default class AppearanceSettings extends React.PureComponent { } render() { - const { appearance } = this.props.language.sections; + const { appearance } = this.language.sections; return (
@@ -66,9 +67,10 @@ export default class AppearanceSettings extends React.PureComponent {

{appearance.font.title}

    -

    {appearance.font.custom} this.resetItem('font')}>{this.props.language.buttons.reset}

    +

    {appearance.font.custom} this.resetItem('font')}>{this.language.buttons.reset}

    this.setState({ font: e.target.value })}>
+
Bold +

Italic +

{appearance.accessibility.title}

    -

    {appearance.accessibility.zoom} ({this.state.zoom}%) this.resetItem('zoom')}>{this.props.language.buttons.reset}

    +

    {appearance.accessibility.zoom} ({this.state.zoom}%) this.resetItem('zoom')}>{this.language.buttons.reset}

    this.setState({ zoom: event.target.value })} />
    -

    {appearance.accessibility.toast_duration} ({this.state.toast_duration} {appearance.accessibility.milliseconds}) this.resetItem('toast_duration')}>{this.props.language.buttons.reset}

    +

    {appearance.accessibility.toast_duration} ({this.state.toast_duration} {appearance.accessibility.milliseconds}) this.resetItem('toast_duration')}>{this.language.buttons.reset}

    this.setState({ toast_duration: event.target.value })} />
diff --git a/src/components/modals/settings/sections/Background.jsx b/src/components/modals/settings/sections/Background.jsx index 01cfa736..d1b4785b 100644 --- a/src/components/modals/settings/sections/Background.jsx +++ b/src/components/modals/settings/sections/Background.jsx @@ -14,7 +14,7 @@ import 'react-color-gradient-picker/dist/index.css'; import '../../../../scss/react-color-picker-gradient-picker-custom-styles.scss'; export default class BackgroundSettings extends React.PureComponent { - DefaultGradientSettings = { 'angle': '180', 'gradient': [{ 'colour': this.props.language.sections.background.source.disabled, 'stop': 0 }], 'type': 'linear' }; + DefaultGradientSettings = { 'angle': '180', 'gradient': [{ 'colour': window.language.modals.main.settings.sections.background.source.disabled, 'stop': 0 }], 'type': 'linear' }; GradientPickerInitalState = undefined; constructor(...args) { @@ -25,6 +25,7 @@ export default class BackgroundSettings extends React.PureComponent { customBackground: localStorage.getItem('customBackground') || '', gradientSettings: this.DefaultGradientSettings }; + this.language = window.language.modals.main.settings; } resetItem(key) { @@ -61,7 +62,7 @@ export default class BackgroundSettings extends React.PureComponent { toast('resetItem requires a key!'); } - toast(this.props.language.toasts.reset); + toast(this.language.toasts.reset); } InitializeColorPickerState(gradientSettings) { @@ -130,14 +131,14 @@ export default class BackgroundSettings extends React.PureComponent { } currentGradientSettings = () => { - if (typeof this.state.gradientSettings === 'object' && this.state.gradientSettings.gradient.every(g => g.colour !== this.props.language.sections.background.source.disabled)) { + if (typeof this.state.gradientSettings === 'object' && this.state.gradientSettings.gradient.every(g => g.colour !== this.language.sections.background.source.disabled)) { const clampNumber = (num, a, b) => Math.max(Math.min(num, Math.max(a, b)), Math.min(a, b)); return JSON.stringify({ ...this.state.gradientSettings, gradient: [...this.state.gradientSettings.gradient.map(g => { return { ...g, stop: clampNumber(+g.stop, 0, 100) } })].sort((a, b) => (a.stop > b.stop) ? 1 : -1) }); } - return this.props.language.sections.background.source.disabled; + return this.language.sections.background.source.disabled; } onColorPickerChange = (attrs, name) => { @@ -170,13 +171,13 @@ export default class BackgroundSettings extends React.PureComponent { localStorage.setItem('brightness', this.state.brightness); localStorage.setItem('customBackground', this.state.customBackground); - if (document.getElementById('customBackgroundHex').value !== this.props.language.sections.background.source.disabled) { + if (document.getElementById('customBackgroundHex').value !== this.language.sections.background.source.disabled) { localStorage.setItem('customBackgroundColour', document.getElementById('customBackgroundHex').value); } } render() { - const { background } = this.props.language.sections; + const { background } = this.language.sections; let colourSettings = null; if (typeof this.state.gradientSettings === 'object') { @@ -229,11 +230,11 @@ export default class BackgroundSettings extends React.PureComponent {

{background.effects.title}

    -

    {background.effects.blur} ({this.state.blur}%) this.resetItem('blur')}>{this.props.language.buttons.reset}

    +

    {background.effects.blur} ({this.state.blur}%) this.resetItem('blur')}>{this.language.buttons.reset}

    this.setState({ blur: event.target.value })} />
    -

    {background.effects.brightness} ({this.state.brightness}%) this.resetItem('brightness')}>{this.props.language.buttons.reset}

    +

    {background.effects.brightness} ({this.state.brightness}%) this.resetItem('brightness')}>{this.language.buttons.reset}

    this.setState({ brightness: event.target.value })} />
@@ -245,16 +246,16 @@ export default class BackgroundSettings extends React.PureComponent {
    -

    {background.source.custom_url} this.resetItem('customBackground')}>{this.props.language.buttons.reset}

    +

    {background.source.custom_url} this.resetItem('customBackground')}>{this.language.buttons.reset}

    this.setState({ customBackground: e.target.value })}>
    -

    {background.source.custom_background} this.resetItem('customBackground')}>{this.props.language.buttons.reset}

    +

    {background.source.custom_background} this.resetItem('customBackground')}>{this.language.buttons.reset}

    this.fileUpload(e)} />
    -

    {background.source.custom_colour} this.resetItem('customBackgroundColour')}>{this.props.language.buttons.reset}

    +

    {background.source.custom_colour} this.resetItem('customBackgroundColour')}>{this.language.buttons.reset}

    {colourSettings}
diff --git a/src/components/modals/settings/sections/Greeting.jsx b/src/components/modals/settings/sections/Greeting.jsx index 99935a2d..b62a759b 100644 --- a/src/components/modals/settings/sections/Greeting.jsx +++ b/src/components/modals/settings/sections/Greeting.jsx @@ -12,6 +12,7 @@ export default class GreetingSettings extends React.PureComponent { birthday: new Date(localStorage.getItem('birthday')) || new Date(), greetingName: localStorage.getItem('greetingName') || '' }; + this.language = window.language.modals.main.settings; } resetItem() { @@ -19,7 +20,7 @@ export default class GreetingSettings extends React.PureComponent { greetingName: '' }); - toast(this.props.language.toasts.reset); + toast(this.language.toasts.reset); } changeDate(data) { @@ -40,21 +41,21 @@ export default class GreetingSettings extends React.PureComponent { } render() { - const { greeting } = this.props.language.sections; + const { greeting } = this.language.sections; return (

{greeting.title}

- +
    -

    {greeting.name} this.resetItem()}>{this.props.language.buttons.reset}

    +

    {greeting.name} this.resetItem()}>{this.language.buttons.reset}

    this.setState({ greetingName: e.target.value })}>

{greeting.birthday}

- +

    {greeting.birthday_date}

    this.changeDate(data)} value={this.state.birthday}/> diff --git a/src/components/modals/settings/sections/Language.jsx b/src/components/modals/settings/sections/Language.jsx index bb9a310b..0e605bff 100644 --- a/src/components/modals/settings/sections/Language.jsx +++ b/src/components/modals/settings/sections/Language.jsx @@ -4,17 +4,19 @@ import Dropdown from '../Dropdown'; const languages = require('../../../../modules/languages.json'); -export default function LanguageSettings (props) { +export default function LanguageSettings () { + const language = window.language.modals.main.settings.sections.language; + return (
    -

    {props.language.title}

    - localStorage.setItem('language', document.getElementById('language').value)}> +

    {language.title}

    + localStorage.setItem('language', document.getElementById('language').value)}> {languages.map(language => )}
    - localStorage.setItem('quotelanguage', document.getElementById('quotelanguage').value)}> + localStorage.setItem('quotelanguage', document.getElementById('quotelanguage').value)}> diff --git a/src/components/modals/settings/sections/Quote.jsx b/src/components/modals/settings/sections/Quote.jsx index e68565af..b8f20040 100644 --- a/src/components/modals/settings/sections/Quote.jsx +++ b/src/components/modals/settings/sections/Quote.jsx @@ -11,6 +11,7 @@ export default class QuoteSettings extends React.PureComponent { customQuote: localStorage.getItem('customQuote') || '', customQuoteAuthor: localStorage.getItem('customQuoteAuthor') || 'Unknown' }; + this.language = window.language.modals.main.settings; } @@ -34,7 +35,7 @@ export default class QuoteSettings extends React.PureComponent { toast('resetItem requires a key!'); } - toast(this.props.language.toasts.reset); + toast(this.language.toasts.reset); } componentDidUpdate() { @@ -43,19 +44,19 @@ export default class QuoteSettings extends React.PureComponent { } render() { - const { quote } = this.props.language.sections; + const { quote } = this.language.sections; return (

    {quote.title}

    - +
      -

      {quote.custom} this.resetItem('customQuote')}>{this.props.language.buttons.reset}

      +

      {quote.custom} this.resetItem('customQuote')}>{this.language.buttons.reset}

      this.setState({ customQuote: e.target.value })}>
      -

      {quote.custom_author} this.resetItem('customQuoteAuthor')}>{this.props.language.buttons.reset}

      +

      {quote.custom_author} this.resetItem('customQuoteAuthor')}>{this.language.buttons.reset}

      this.setState({ customQuoteAuthor: e.target.value })}>

    {quote.buttons.title}

    diff --git a/src/components/modals/settings/sections/Search.jsx b/src/components/modals/settings/sections/Search.jsx index 0995f96f..4a241b56 100644 --- a/src/components/modals/settings/sections/Search.jsx +++ b/src/components/modals/settings/sections/Search.jsx @@ -55,12 +55,13 @@ export default class SearchSettings extends React.PureComponent { } render() { - const { search } = this.props.language.sections; + const language = window.language.modals.main.settings; + const { search } = language.sections; return (

    {search.title}

    - +
      -

      {search.custom} this.resetSearch()}>{this.props.language.reset}

      +

      {search.custom} this.resetSearch()}>{language.reset}

    diff --git a/src/components/modals/settings/sections/Time.jsx b/src/components/modals/settings/sections/Time.jsx index fd06aec9..5874f0e4 100644 --- a/src/components/modals/settings/sections/Time.jsx +++ b/src/components/modals/settings/sections/Time.jsx @@ -9,6 +9,7 @@ export default class TimeSettings extends React.PureComponent { this.state = { timeType: localStorage.getItem('timeType') || 'digital' }; + this.language = window.language.modals.main.settings; } changeType() { @@ -20,7 +21,7 @@ export default class TimeSettings extends React.PureComponent { } render() { - const { time } = this.props.language.sections; + const { time } = this.language.sections; let timeSettings; @@ -54,7 +55,7 @@ export default class TimeSettings extends React.PureComponent { return (

    {time.title}

    - + this.changeType()}> @@ -64,7 +65,7 @@ export default class TimeSettings extends React.PureComponent { {timeSettings}

    {time.date.title}

    - + diff --git a/src/components/modals/tabs/Settings.jsx b/src/components/modals/tabs/Settings.jsx index 25e0cc7e..bb107378 100644 --- a/src/components/modals/tabs/Settings.jsx +++ b/src/components/modals/tabs/Settings.jsx @@ -13,47 +13,27 @@ import Changelog from '../settings/sections/Changelog'; import SettingsTabs from './backend/Tabs'; -export default function Settings (props) { +export default function Settings () { + const language = window.language.modals.main.settings.sections; + return ( -
    -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    -

    IMPORTANT INFO

    -

    In order for changes to take place, the page must be refreshed.

    +

    IMPORTANT INFO

    +

    In order for changes to take place, the page must be refreshed.

     ); diff --git a/src/components/modals/tabs/backend/Tab.jsx b/src/components/modals/tabs/backend/Tab.jsx index 93a8dacb..2c696e5c 100644 --- a/src/components/modals/tabs/backend/Tab.jsx +++ b/src/components/modals/tabs/backend/Tab.jsx @@ -49,15 +49,9 @@ export default function Tab(props) { case 'Background': icon = ; break; case 'Search': icon = ; break; case 'Appearance': icon = ; break; - case 'Language': - icon = ; - divider =
    ; - break; + case 'Language': icon = ; divider = true; break; case 'Advanced': icon = ; break; - case 'Experimental': - icon = ; - divider =
    ; - break; + case 'Experimental': icon = ; divider = true; break; case 'Change Log': icon = ; break; case 'About': icon = ; break; @@ -65,10 +59,7 @@ export default function Tab(props) { case 'Themes': icon = ; break; case 'Photo Packs': icon = ; break; case 'Quote Packs': icon = ; break; - case 'Plugins': - icon = ; - divider =
    ; - break; + case 'Plugins': icon = ; divider = true; break; case 'Added': icon = ; break; default: break; @@ -79,7 +70,7 @@ export default function Tab(props) {
  • props.onClick(props.label)}> {icon} {props.label}
    • - {divider} + {(divider === true) ?
    : null} ) } diff --git a/src/components/widgets/Widgets.jsx b/src/components/widgets/Widgets.jsx index 28f00192..a54e6901 100644 --- a/src/components/widgets/Widgets.jsx +++ b/src/components/widgets/Widgets.jsx @@ -27,16 +27,15 @@ export default class Widgets extends React.PureComponent { } render() { - const { language, languagecode } = this.props; const enabled = this.enabled; return ( - {enabled('searchBar') ? : null} - {enabled('greeting') ? : null} + {enabled('searchBar') ? : null} + {enabled('greeting') ? : null} {enabled('time') ? : null} {enabled('date') ? : null} - {enabled('quote') ? : null} + {enabled('quote') ? : null} {enabled('view') ? : null} {enabled('favouriteEnabled') ? : null} diff --git a/src/components/widgets/background/PhotoInformation.jsx b/src/components/widgets/background/PhotoInformation.jsx index 0d98bfb6..5601fd1d 100644 --- a/src/components/widgets/background/PhotoInformation.jsx +++ b/src/components/widgets/background/PhotoInformation.jsx @@ -6,13 +6,15 @@ import Resolution from '@material-ui/icons/Crop'; import Photographer from '@material-ui/icons/Person'; export default function PhotoInformation(props) { + const language = window.language.widgets.background; + return (
    -

    {props.language.credit}

    +

    {language.credit}

    -

    {props.language.information}

    +

    {language.information}

    diff --git a/src/components/widgets/greeting/Greeting.jsx b/src/components/widgets/greeting/Greeting.jsx index 3cfaa081..c829ea95 100644 --- a/src/components/widgets/greeting/Greeting.jsx +++ b/src/components/widgets/greeting/Greeting.jsx @@ -8,6 +8,7 @@ export default class Greeting extends React.PureComponent { this.state = { greeting: '' }; + this.language = window.language.widgets.greeting; } doEvents(time, message) { @@ -21,13 +22,13 @@ export default class Greeting extends React.PureComponent { // If it's December 25th, set the greeting string to "Merry Christmas" if (month === 11 && date === 25) { - message = this.props.language.christmas; + message = this.language.christmas; // If the date is January 1st, set the greeting string to "Happy new year" } else if (month === 0 && date === 1) { - message = this.props.language.newyear; + message = this.language.newyear; // If it's October 31st, set the greeting string to "Happy Halloween" } else if (month === 9 && date === 31) { - message = this.props.language.halloween; + message = this.language.halloween; } return message; @@ -38,13 +39,13 @@ export default class Greeting extends React.PureComponent { const hour = now.getHours(); // Set the default greeting string to "Good evening" - let message = this.props.language.evening; + let message = this.language.evening; // If it's before 12am, set the greeting string to "Good morning" if (hour < 12) { - message = this.props.language.morning; + message = this.language.morning; // If it's before 6pm, set the greeting string to "Good afternoon" } else if (hour < 18) { - message = this.props.language.afternoon; + message = this.language.afternoon; } // Events @@ -72,7 +73,7 @@ export default class Greeting extends React.PureComponent { // Birthday const birth = new Date(localStorage.getItem('birthday')); if (localStorage.getItem('birthdayenabled') === 'true' && birth.getDate() === now.getDate() && birth.getMonth() === now.getMonth()) { - message = this.props.language.birthday; + message = this.language.birthday; } // Set the state to the greeting string diff --git a/src/components/widgets/navbar/Navbar.jsx b/src/components/widgets/navbar/Navbar.jsx index dc070404..4c9d9b7b 100644 --- a/src/components/widgets/navbar/Navbar.jsx +++ b/src/components/widgets/navbar/Navbar.jsx @@ -15,13 +15,15 @@ const Notes = React.lazy(() => import('./Notes')); const renderLoader = () =>
    ; export default function Navbar(props) { + const language = window.language; + return (
    {(localStorage.getItem('notesEnabled') === 'true') ?
    - +
    :null} @@ -33,12 +35,12 @@ export default function Navbar(props) { :null} {(localStorage.getItem('refresh') === 'true') ? - + window.location.reload()}/> :null} - + props.openModal('mainModal')}/>
    diff --git a/src/components/widgets/navbar/Notes.jsx b/src/components/widgets/navbar/Notes.jsx index a4b78091..4c00f841 100644 --- a/src/components/widgets/navbar/Notes.jsx +++ b/src/components/widgets/navbar/Notes.jsx @@ -12,6 +12,7 @@ export default class Notes extends React.PureComponent { this.state = { notes: localStorage.getItem('notes') || '' }; + this.language = window.language.widgets.navbar.notes } setNotes = (e) => { @@ -47,9 +48,9 @@ export default class Notes extends React.PureComponent {
    -

    {this.props.language.title}

    +

    {this.language.title}

    - +     diff --git a/src/components/widgets/quote/Quote.jsx b/src/components/widgets/quote/Quote.jsx index 261beb4f..84ff4a32 100644 --- a/src/components/widgets/quote/Quote.jsx +++ b/src/components/widgets/quote/Quote.jsx @@ -22,6 +22,9 @@ export default class Quote extends React.PureComponent { tweet: this.tweetQuote()} />, copy: this.copyQuote()} /> }; + + this.language = window.language.widgets.quote; + this.languagecode = window.languagecode; } doOffline() { @@ -98,7 +101,7 @@ export default class Quote extends React.PureComponent { return this.doOffline(); } - let authorlink = `https://${this.props.languagecode.split('-')[0]}.wikipedia.org/wiki/${data.author.split(' ').join('_')}`; + let authorlink = `https://${this.languagecode.split('-')[0]}.wikipedia.org/wiki/${data.author.split(' ').join('_')}`; if (localStorage.getItem('authorLink') === 'false') { authorLink = null; } @@ -116,7 +119,7 @@ export default class Quote extends React.PureComponent { copyQuote() { navigator.clipboard.writeText(`${this.state.quote} - ${this.state.author}`); - toast(this.props.language.quote); + toast(this.language.quote); } tweetQuote() { diff --git a/src/components/widgets/search/Search.jsx b/src/components/widgets/search/Search.jsx index bfec9001..0d7eaad8 100644 --- a/src/components/widgets/search/Search.jsx +++ b/src/components/widgets/search/Search.jsx @@ -15,6 +15,7 @@ export default class Search extends React.PureComponent { query: '', microphone: null }; + this.language = window.language.widgets.search; } startSpeechRecognition() { @@ -73,7 +74,7 @@ export default class Search extends React.PureComponent {
    {this.state.microphone} this.searchButton()} id='searchButton'/> - +
    ); diff --git a/src/index.js b/src/index.js index 87695488..49d99421 100644 --- a/src/index.js +++ b/src/index.js @@ -10,6 +10,13 @@ import 'react-toastify/dist/ReactToastify.css'; import '@fontsource/lexend-deca/latin-400.css'; import '@fontsource/roboto/cyrillic-400.css'; +// language +import merge from './modules/helpers/merge'; +const languagecode = localStorage.getItem('language') || 'en-GB'; +// we set things to window. so they're global and we avoid passing the translation strings as props to each component +window.languagecode = languagecode; +window.language = merge(require('./translations/en-GB.json'), require(`./translations/${languagecode}.json`)); + ReactDOM.render( , document.getElementById('root') diff --git a/src/scss/modules/modals/_main.scss b/src/scss/modules/modals/_main.scss index 6ad81378..5a0db731 100644 --- a/src/scss/modules/modals/_main.scss +++ b/src/scss/modules/modals/_main.scss @@ -209,7 +209,6 @@ li { .tab-content { position: absolute; left: 25%; - top: 7%; h3 { text-transform: uppercase; @@ -220,6 +219,15 @@ li { .tab-content { position: absolute; left: 30%; + top: 15%; + } +} + +@media only screen and (min-width: 1920px) { + .tab-content { + position: absolute; + left: 30%; + top: 7%; } }