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

feat: consistent header for sub sections

Browse Source 
- fixed achievements grid
- added more achievements
- altered achievements style
- made header of background subsection consistent with advanced
This commit is contained in:
alexsparkes
2022-05-26 23:46:08 +01:00
parent 5f42b1a6ee
commit cd9eed0c81
6 changed files with 68 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/modals/main/settings/Radio.jsx
View File

@@ -32,10 +32,7 @@ export default class Radio extends PureComponent {
localStorage.getItem('tabName') ===
variables.language.getMessage(variables.languagecode, 'tabname')
) {
localStorage.setItem(
'tabName',
translations[value.replace('-', '_')].tabname,
);
localStorage.setItem('tabName', translations[value.replace('-', '_')].tabname);
}
}

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

@@ -58,6 +58,16 @@ export default class Stats extends PureComponent {
);
}
const achievement = (name, description) => (
<div className="achievement">
<FaTrophy />
<div className="achievementContent">
<span>{name}</span>
<span className="subtitle">{description}</span>
</div>
</div>
);
return (
<>
<span className="mainTitle">{getMessage('modals.main.settings.sections.stats.title')}</span>
@@ -72,28 +82,15 @@ export default class Stats extends PureComponent {
/>
</SettingsItem>
<div className="statsGrid">
<div className="statSection">
<div className="statSection leftPanel">
<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>
{this.state.stats['tabs-opened'] >= 10 && achievement('10/10 IGN', 'Opened 10 tabs')}
{this.state.stats['tabs-opened'] >= 39 && achievement('Thank you', 'Opened 39 tabs')}
{this.state.stats['tabs-opened'] >= 100 && achievement('Seasoning', 'Opened 100 tabs')}
{(this.state.stats.marketplace && this.state.stats.marketplace['install']) >= 1 && achievement('Average Linux User', 'Installed an add-on')}
{(this.state.stats.marketplace && this.state.stats.marketplace['install']) >= 5 && achievement('Fully riced', 'Installed 5 add-ons')}
</div>
</div>
<div className="statSection rightPanel">
<MdShowChart />

44
src/components/modals/main/settings/sections/background/Background.jsx
View File

@@ -205,29 +205,39 @@ export default class BackgroundSettings extends PureComponent {
this.state.backgroundType !== 'random_colour' &&
this.state.backgroundType !== 'random_gradient';
const breadcrumb = (name, toSet) => (
<div className="breadcrumb">
<div onClick={() => this.setState({ [toSet]: false })} className="settingsReturn">
<Tooltip title="back" key="backArrow">
<MdArrowBack />
</Tooltip>
</div>
<span className="subtitle">{name}</span>
</div>
);
return (
<>
let header;
if (this.state.effects === true) {
header = (
<span className="mainTitle" onClick={() => this.setState({ effects: false })}>
{getMessage('modals.main.settings.sections.background.title')}{' '}
<MdOutlineKeyboardArrowRight />{' '}
{getMessage('modals.main.settings.sections.background.effects.title')}
</span>
);
} else if (this.state.backgroundSettingsSection === true) {
header = (
<span
className="mainTitle"
onClick={() => this.setState({ backgroundSettingsSection: false })}
>
{getMessage('modals.main.settings.sections.background.title')}{' '}
<MdOutlineKeyboardArrowRight />{' '}
{getMessage('modals.main.settings.sections.background.source.title')}
</span>
);
} else {
header = (
<Header
title={getMessage('modals.main.settings.sections.background.title')}
setting="background"
category="background"
element="#backgroundImage"
/>
{this.state.effects ? breadcrumb('Effects', 'effects') : null}
{this.state.backgroundSettingsSection
? breadcrumb('Source', 'backgroundSettingsSection')
: null}
);
}
return (
<>
{header}
{this.state.backgroundSettingsSection !== true && this.state.effects !== true ? (
<>
<div