diff --git a/src/components/modals/main/marketplace/Item.jsx b/src/components/modals/main/marketplace/Item.jsx index da515c6d..5e33fe09 100644 --- a/src/components/modals/main/marketplace/Item.jsx +++ b/src/components/modals/main/marketplace/Item.jsx @@ -31,17 +31,19 @@ export default function Item(props) { return (

- + + +

{props.data.name}

{props.button} -

+
product
+

{language.overview}

+

-

{language.information}

    -
  • {language.last_updated}
  • {props.data.updated}

  • @@ -52,17 +54,16 @@ export default function Item(props) {
  • {props.data.author}
-
+ + {/*}
  • {language.notice.title}
  • {language.notice.description}
-
- {warningHTML} +
*/} + {warningHTML}

-

{language.overview}

-

); } diff --git a/src/components/modals/main/marketplace/sections/Added.jsx b/src/components/modals/main/marketplace/sections/Added.jsx index e3afa364..6eb7e7ba 100644 --- a/src/components/modals/main/marketplace/sections/Added.jsx +++ b/src/components/modals/main/marketplace/sections/Added.jsx @@ -79,7 +79,7 @@ export default class Added extends React.PureComponent { break; } - toast(window.language.modals.main.toasts[type + 'ed']); + toast(window.language.toasts[type + 'ed']); let button = ''; if (type === 'install') { @@ -93,7 +93,13 @@ export default class Added extends React.PureComponent { } render() { - let content = this.toggle('item', 'addon', input)} />; + let content = ( + this.toggle('item', 'addon', input)} + reloadItemsList={() => this.setState({ installed: JSON.parse(localStorage.getItem('installed')) })} + /> + ); if (this.state.installed.length === 0) { content = ( @@ -112,7 +118,7 @@ export default class Added extends React.PureComponent { <>
this.manage('install', JSON.parse(e.target.result))} /> - + {/**/} {content}
this.toggle()} /> diff --git a/src/components/modals/main/marketplace/sections/Marketplace.jsx b/src/components/modals/main/marketplace/sections/Marketplace.jsx index 0b877e16..9627445e 100644 --- a/src/components/modals/main/marketplace/sections/Marketplace.jsx +++ b/src/components/modals/main/marketplace/sections/Marketplace.jsx @@ -1,6 +1,8 @@ import React from 'react'; import WifiOffIcon from '@material-ui/icons/WifiOff'; +import LocalMallIcon from '@material-ui/icons/LocalMall'; + import Item from '../Item'; import Items from '../Items'; @@ -31,9 +33,10 @@ export default class Marketplace extends React.PureComponent { } }; this.buttons = { - uninstall: , - install: + uninstall: , + install: } + this.language = window.language.modals.main.marketplace; } async toggle(type, data) { @@ -103,17 +106,13 @@ export default class Marketplace extends React.PureComponent { break; } - toast(this.props.toastLanguage[type + 'ed']); + toast(window.language.toasts[type + 'ed']); this.setState({ button: (type === 'install') ? this.buttons.uninstall : this.buttons.install }); } componentDidMount() { - if (localStorage.getItem('animations') === 'true') { - document.getElementById('marketplace').classList.add('marketplaceanimation'); - } - if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') { return; } @@ -156,6 +155,14 @@ export default class Marketplace extends React.PureComponent { return errorMessage(

Loading

); } + if (this.state.items.length === 0) { + return errorMessage(<> + +

Empty

+

No items in this category

+ ) + } + return ( <>
@@ -165,7 +172,7 @@ export default class Marketplace extends React.PureComponent {
this.toggle('item', input)} /> this.toggle()} /> diff --git a/src/components/modals/main/scss/index.scss b/src/components/modals/main/scss/index.scss index d99f57c7..5a8f16e6 100644 --- a/src/components/modals/main/scss/index.scss +++ b/src/components/modals/main/scss/index.scss @@ -200,6 +200,14 @@ li { } } +@media only screen and (min-width: 2300px) { + .tab-content { + position: absolute !important; + left: 25% !important; + top: 7%; + } +} + @media only screen and (max-width: 1920px) { .tab-content { position: absolute; diff --git a/src/components/modals/main/scss/settings/_buttons.scss b/src/components/modals/main/scss/settings/_buttons.scss index 9addbf2a..e4ac4d35 100644 --- a/src/components/modals/main/scss/settings/_buttons.scss +++ b/src/components/modals/main/scss/settings/_buttons.scss @@ -85,7 +85,7 @@ %storebutton { cursor: pointer; font-size: 18px; - float: right; + display: block; padding: 5px 30px; background: none; border-radius: 24px; diff --git a/src/components/modals/main/settings/sections/Advanced.jsx b/src/components/modals/main/settings/sections/Advanced.jsx index 90142274..732255f2 100644 --- a/src/components/modals/main/settings/sections/Advanced.jsx +++ b/src/components/modals/main/settings/sections/Advanced.jsx @@ -46,7 +46,7 @@ export default class AdvancedSettings extends React.PureComponent {

{advanced.customisation}

- +

{this.language.sections.experimental.title}

{advanced.experimental_warning}

diff --git a/src/components/modals/main/settings/sections/Weather.jsx b/src/components/modals/main/settings/sections/Weather.jsx index 7be719ca..954c9af9 100644 --- a/src/components/modals/main/settings/sections/Weather.jsx +++ b/src/components/modals/main/settings/sections/Weather.jsx @@ -2,6 +2,7 @@ import React from 'react'; import Switch from '../Switch'; import Radio from '../Radio'; +import Checkbox from '../Checkbox'; export default class TimeSettings extends React.PureComponent { constructor() { @@ -44,11 +45,18 @@ export default class TimeSettings extends React.PureComponent { <>

{language.title}

+

    Location this.getLocation()}>Auto

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

Extra Information

+ + + + + ); } diff --git a/src/components/modals/main/settings/sections/background/Background.jsx b/src/components/modals/main/settings/sections/background/Background.jsx index 429bf759..2a07d89b 100644 --- a/src/components/modals/main/settings/sections/background/Background.jsx +++ b/src/components/modals/main/settings/sections/background/Background.jsx @@ -51,6 +51,12 @@ export default class BackgroundSettings extends React.PureComponent { } } + marketplaceType = () => { + if (localStorage.getItem('photo_packs')) { + return + } + } + componentDidUpdate() { localStorage.setItem('customBackground', this.state.customBackground); } @@ -107,7 +113,7 @@ export default class BackgroundSettings extends React.PureComponent { // API default: backgroundSettings = APISettings; break; } - + return ( <>

{background.title}

@@ -125,6 +131,7 @@ export default class BackgroundSettings extends React.PureComponent {

this.setState({ backgroundType: value })}> + {this.marketplaceType()} diff --git a/src/components/modals/main/tabs/backend/Tab.jsx b/src/components/modals/main/tabs/backend/Tab.jsx index d6713063..ee253ea1 100644 --- a/src/components/modals/main/tabs/backend/Tab.jsx +++ b/src/components/modals/main/tabs/backend/Tab.jsx @@ -20,9 +20,10 @@ import Order from '@material-ui/icons/List'; import Weather from '@material-ui/icons/CloudOutlined'; import Advanced from '@material-ui/icons/SettingsOutlined'; import QuickLinks from '@material-ui/icons/Link'; +import Sideload from '@material-ui/icons/Code'; // Store -import Added from '@material-ui/icons/AddCircle'; +import Added from '@material-ui/icons/AddCircleOutline'; export default function Tab(props) { let className = 'tab-list-item'; @@ -67,6 +68,7 @@ export default function Tab(props) { case 'Photo Packs': icon = ; break; case 'Quote Packs': icon = ; break; case 'Added': icon = ; break; + case 'Sideload': icon = ; break; default: break; } diff --git a/src/components/widgets/time/Date.jsx b/src/components/widgets/time/Date.jsx index 35ce4e54..899bf772 100644 --- a/src/components/widgets/time/Date.jsx +++ b/src/components/widgets/time/Date.jsx @@ -12,7 +12,7 @@ export default class DateWidget extends React.PureComponent { getDate() { const date = new Date(); - const type = localStorage.getItem('type'); + const type = localStorage.getItem('dateType'); if (type === 'short') { const dateDay = date.getDate(); @@ -33,8 +33,7 @@ export default class DateWidget extends React.PureComponent { year = dateDay; break; // DMY - default: - break; + default: break; } let format; @@ -50,6 +49,8 @@ export default class DateWidget extends React.PureComponent { break; case 'slashes': format = `${day}/${month}/${year}`; + break; + default: break; } this.setState({ diff --git a/src/components/widgets/weather/Weather.jsx b/src/components/widgets/weather/Weather.jsx index 5ed570b1..9720bbdb 100644 --- a/src/components/widgets/weather/Weather.jsx +++ b/src/components/widgets/weather/Weather.jsx @@ -1,33 +1,64 @@ import React from 'react'; import WeatherIcon from './WeatherIcon'; +import { WiHumidity, WiWindy } from 'weather-icons-react'; + import './weather.scss'; export default class Weather extends React.PureComponent { constructor() { super(); this.state = { + location: localStorage.getItem('location') || 'London', icon: '', + temp_text: '', weather: { title: '', temp: '', temp_min: '', temp_max: '', - humidity: '' + humidity: '', + windspeed: '', + pressure: '' } }; } async getWeather() { - const data = await (await fetch (window.constants.WEATHER_URL + '?city=London')).json(); + const data = await (await fetch (window.constants.WEATHER_URL + `?city=${this.state.location}`)).json(); + + let temp = data.main.temp; + let temp_min = data.main.temp_max + let temp_max = data.main.temp_max; + let temp_text = 'K'; + + switch (localStorage.getItem('tempformat')) { + case 'celsius': + temp = temp - 273.15; + temp_min = temp_min - 273.15; + temp_max = temp_max - 273.15; + temp_text = '°C'; + break; + case 'fahrenheit': + temp = ((temp - 273.15) * 1.8) + 32; + temp_min = ((temp_min - 273.15) * 1.8) + 32; + temp_max = ((temp_max - 273.15) * 1.8) + 32; + temp_text = '°F'; + break; + default: break; + } + this.setState({ icon: data.weather[0].icon, + temp_text: temp_text, weather: { title: data.weather[0].main, - temp: Math.round(data.main.temp - 273.15), - temp_min: Math.round(data.main.temp_min - 273.15), - temp_max: Math.round(data.main.temp_max - 273.15), - humidity: data.main.humidity + temp: Math.round(temp), + temp_min: Math.round(temp_min), + temp_max: Math.round(temp_max), + humidity: data.main.humidity, + windspeed: data.wind.speed, + pressure: data.main.pressure } }); } @@ -40,11 +71,17 @@ export default class Weather extends React.PureComponent { return (
- {this.state.weather.temp}°C -
- {this.state.weather.temp_min}°C, {this.state.weather.temp_max}°C -
- London + {this.state.weather.temp + this.state.temp_text} +
+ {this.state.weather.temp_min + this.state.temp_text} {this.state.weather.temp_max + this.state.temp_text} +
+ {this.state.weather.humidity}% +
+ {this.state.weather.windspeed} m/s +
+ {this.state.weather.pressure} hPa +
+ {this.state.location} {/*{this.state.weather.title}*/}
); diff --git a/src/components/widgets/weather/weather.scss b/src/components/widgets/weather/weather.scss index 59c3693a..66c623c2 100644 --- a/src/components/widgets/weather/weather.scss +++ b/src/components/widgets/weather/weather.scss @@ -9,9 +9,7 @@ svg { filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3)); - font-size: 0.8em; - } .loc { diff --git a/src/modules/default_settings.json b/src/modules/default_settings.json index 3c4dda76..cd1b488f 100644 --- a/src/modules/default_settings.json +++ b/src/modules/default_settings.json @@ -158,5 +158,9 @@ { "name": "weatherEnabled", "value": false + }, + { + "name": "temperatureformat", + "value": "celsius" } ] diff --git a/src/modules/helpers/marketplace.js b/src/modules/helpers/marketplace.js index d4e9c182..7d172ef5 100644 --- a/src/modules/helpers/marketplace.js +++ b/src/modules/helpers/marketplace.js @@ -18,6 +18,11 @@ export default class MarketplaceFunctions { localStorage.removeItem('quote_packs'); localStorage.removeItem('quoteAPI'); break; + case 'photo_packs': + localStorage.removeItem('photo_packs'); + localStorage.setItem('backgroundType', localStorage.getItem('oldBackgroundType')); + localStorage.removeItem('oldBackgroundType'); + break; default: try { localStorage.removeItem(type); @@ -56,6 +61,8 @@ export default class MarketplaceFunctions { case 'photo_packs': localStorage.setItem('photo_packs', JSON.stringify(input.photos)); + localStorage.setItem('oldBackgroundType', localStorage.getItem('backgroundType')); + localStorage.setItem('backgroundType', 'photo_pack'); break; case 'quote_packs': diff --git a/src/modules/languages.json b/src/modules/languages.json index f4821ef8..fb403694 100644 --- a/src/modules/languages.json +++ b/src/modules/languages.json @@ -1,4 +1,8 @@ [ + { + "name": "Chinese (Simplified)", + "value": "zh_CN" + }, { "name": "Deutsch", "value": "de_DE" @@ -30,9 +34,5 @@ { "name": "Pусский", "value": "ru" - }, - { - "name": "Chinese (Simplified)", - "value": "zh_CN" } ] diff --git a/src/scss/modules/_marketplace.scss b/src/scss/modules/_marketplace.scss index ee5e0113..0cafd589 100644 --- a/src/scss/modules/_marketplace.scss +++ b/src/scss/modules/_marketplace.scss @@ -8,18 +8,21 @@ } .items { - display: flex; + display: inline-grid; + grid-template-columns: repeat(3, 1fr); margin-top: 15px; .item { position: relative; border-radius: 12px; height: 80px; - width: 270px; + width: 260px; background: map-get($marketplace, 'item-background'); transition: 0.5s; cursor: pointer; margin-right: 20px; + margin-top: 20px; + box-shadow: 0 0 6px rgb(0 0 0 / 30%); img { height: 100%; @@ -74,17 +77,18 @@ p.author { h1 { font-size: 40px; + line-height: 20px; } } #item>h1, #item>.MuiSvgIcon-root { display: inline; - font-size: 35px !important; } p.description { margin-top: 0px; + max-width: 400px; } .emptyMessage { @@ -107,15 +111,13 @@ p.description { } .informationContainer { - float: right; - margin-right: 15px; + margin-top: 20px; } .productInformation { - margin-bottom: 20px; - padding: 20px; + padding: 10px; background: map-get($marketplace, 'product-information-backgroud'); - width: 200px; + width: 350px; border-radius: 12px; h4 { @@ -163,14 +165,16 @@ p.description { } .featured { - margin-top: 20px; - border-radius: 24px; + margin-top: 40px; + border-radius: 15px; padding: 50px; - color: map-get($theme-colours, 'main'); + color: #fff; + box-shadow: 0 0 10px rgb(0 0 0 / 30%); + width: 85%; button { float: left; - margin-top: -20px; + margin-top: -7px; border: 2px solid map-get($theme-colours, 'main'); color: map-get($theme-colours, 'main');