mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-23 08:47:19 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: weather sizing, achievements

Browse Source
This commit is contained in:
alexsparkes
2022-05-24 22:19:47 +01:00
parent 2c89894372
commit 5f42b1a6ee
5 changed files with 219 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -120,30 +120,14 @@ h4 {
.statsGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
column-gap: 100px;
row-gap: 100px;
padding: 25px;
div {
padding: 25px;
@include themed() {
padding: 45px;
border-radius: t($borderRadius);
background: t($modal-sidebar);
box-shadow: 0 0 0 4px t($modal-sidebarActive);
svg {
font-size: 50px;
color: t($subColor);
}
}
}
div:nth-child(1) {
grid-area: 1 / 1 / 3 / 3;
}
div:nth-child(2) {
grid-area: 3 / 1 / 4 / 3;
}
div:nth-child(3) {
.rightPanel {
grid-area: 1 / 3 / 4 / 4;
display: flex;
flex-flow: column;
@@ -192,3 +176,47 @@ h4 {
}
}
}
.achievements {
margin-top: 25px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
grid-gap: 10px;
}
.achievement {
padding: 20px 10px 20px 10px;
display: flex;
flex-flow: row !important;
align-items: center;
@include themed() {
background: t($modal-sidebarActive);
border-radius: t($borderRadius);
gap: 20px;
}
svg {
font-size: 25px !important;
}
}
.statSection {
padding: 25px;
@include themed() {
padding: 45px;
border-radius: t($borderRadius);
background: t($modal-sidebar);
box-shadow: 0 0 0 4px t($modal-sidebarActive);
svg {
font-size: 50px;
color: t($subColor);
}
}
}
.achievementContent {
display: flex;
flex-flow: column;
span {
font-size: 15px;
}
}

34
src/components/modals/main/settings/sections/Stats.jsx
View File

@@ -4,6 +4,7 @@ import { MdShowChart } from 'react-icons/md';
import Switch from '../Switch';
import SettingsItem from '../SettingsItem';
import { FaTrophy } from 'react-icons/fa';
import EventBus from 'modules/helpers/eventbus';
@@ -71,19 +72,30 @@ export default class Stats extends PureComponent {
/>
</SettingsItem>
<div className="statsGrid">
<div>
<span>
{getMessage('modals.main.settings.sections.stats.sections.tabs_opened')}:{' '}
{this.state.stats['tabs-opened'] || 0}
</span>
<div className="statSection">
<span className="title">Achievements</span>
<div className="achievements">
{this.state.stats['tabs-opened'] > 10 && (
<div className="achievement">
<FaTrophy />
<div className="achievementContent">
<span>10/10 IGN</span>
<span className="subtitle">Opened 10 tabs</span>
</div>
</div>
)}
{this.state.stats['tabs-opened'] > 100 && (
<div className="achievement">
<FaTrophy />
<div className="achievementContent">
<span>Seasoning</span>
<span className="subtitle">Opened 100 tabs</span>
</div>
</div>
)}
</div>
<div>
<span>
{getMessage('modals.main.settings.sections.stats.sections.tabs_opened')}:{' '}
{this.state.stats['tabs-opened'] || 0}
</span>
</div>
<div>
<div className="statSection rightPanel">
<MdShowChart />
<span className="subtitle">
{getMessage('modals.main.settings.sections.stats.sections.tabs_opened')}{' '}

123
src/components/modals/main/settings/sections/Weather.jsx
View File

@@ -76,6 +76,7 @@ export default class TimeSettings extends PureComponent {
<option value="1">Basic</option>
<option value="2">Standard</option>
<option value="3">Expanded</option>
<option value="4">Custom</option>
</Dropdown>
</SettingsItem>
<SettingsItem title={getMessage('modals.main.settings.sections.weather.location')}>
@@ -158,64 +159,70 @@ export default class TimeSettings extends PureComponent {
</Dropdown>
</SettingsItem>
)}
<Checkbox
name="showlocation"
text={getMessage('modals.main.settings.sections.weather.extra_info.show_location')}
category="weather"
/>
<Checkbox
name="weatherdescription"
text={getMessage('modals.main.settings.sections.weather.extra_info.show_description')}
category="weather"
/>
<Checkbox
name="cloudiness"
text={getMessage('modals.main.settings.sections.weather.extra_info.cloudiness')}
category="weather"
/>
<Checkbox
name="humidity"
text={getMessage('modals.main.settings.sections.weather.extra_info.humidity')}
category="weather"
/>
<Checkbox
name="visibility"
text={getMessage('modals.main.settings.sections.weather.extra_info.visibility')}
category="weather"
/>
<Checkbox
name="windspeed"
text={getMessage('modals.main.settings.sections.weather.extra_info.wind_speed')}
category="weather"
onChange={() =>
this.setState({
windSpeed: localStorage.getItem('windspeed') !== 'true',
})
}
/>
<Checkbox
name="windDirection"
text={getMessage('modals.main.settings.sections.weather.extra_info.wind_direction')}
category="weather"
disabled={this.state.windSpeed}
/>
<Checkbox
name="mintemp"
text={getMessage('modals.main.settings.sections.weather.extra_info.min_temp')}
category="weather"
/>
<Checkbox
name="maxtemp"
text={getMessage('modals.main.settings.sections.weather.extra_info.max_temp')}
category="weather"
/>
<Checkbox name="feelsliketemp" text={'Feels like temperature'} category="weather" />
<Checkbox
name="atmosphericpressure"
text={getMessage('modals.main.settings.sections.weather.extra_info.atmospheric_pressure')}
category="weather"
/>
<Checkbox name="upcomingForecast" text="Upcoming Forecast" category="weather" />
{localStorage.getItem('weatherType') == 4 && (
<SettingsItem title="Custom Settings">
<Checkbox
name="showlocation"
text={getMessage('modals.main.settings.sections.weather.extra_info.show_location')}
category="weather"
/>
<Checkbox
name="weatherdescription"
text={getMessage('modals.main.settings.sections.weather.extra_info.show_description')}
category="weather"
/>
<Checkbox
name="cloudiness"
text={getMessage('modals.main.settings.sections.weather.extra_info.cloudiness')}
category="weather"
/>
<Checkbox
name="humidity"
text={getMessage('modals.main.settings.sections.weather.extra_info.humidity')}
category="weather"
/>
<Checkbox
name="visibility"
text={getMessage('modals.main.settings.sections.weather.extra_info.visibility')}
category="weather"
/>
<Checkbox
name="windspeed"
text={getMessage('modals.main.settings.sections.weather.extra_info.wind_speed')}
category="weather"
onChange={() =>
this.setState({
windSpeed: localStorage.getItem('windspeed') !== 'true',
})
}
/>
<Checkbox
name="windDirection"
text={getMessage('modals.main.settings.sections.weather.extra_info.wind_direction')}
category="weather"
disabled={this.state.windSpeed}
/>
<Checkbox
name="mintemp"
text={getMessage('modals.main.settings.sections.weather.extra_info.min_temp')}
category="weather"
/>
<Checkbox
name="maxtemp"
text={getMessage('modals.main.settings.sections.weather.extra_info.max_temp')}
category="weather"
/>
<Checkbox name="feelsliketemp" text={'Feels like temperature'} category="weather" />
<Checkbox
name="atmosphericpressure"
text={getMessage(
'modals.main.settings.sections.weather.extra_info.atmospheric_pressure',
)}
category="weather"
/>
<Checkbox name="upcomingForecast" text="Upcoming Forecast" category="weather" />
</SettingsItem>
)}
</>
);
}