extras
/
mue
mirror of https://github.com/mue/mue.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor(header): Increased clarity, when using unique actions

This commit is contained in:
alexsparkes 2024-02-10 21:03:56 +00:00
parent dbd0359ccc
commit bad8daac6b
3 changed files with 29 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/modals/main/marketplace/sections/Added.jsx
View File

@ -9,7 +9,7 @@ import FileUpload from '../../settings/FileUpload';
import Item from '../Item'; import Item from '../Item';
import Items from '../Items'; import Items from '../Items';
import Dropdown from '../../settings/Dropdown'; import Dropdown from '../../settings/Dropdown';
import Header from '../../settings/Header'; import Header, { CustomActions } from '../../settings/Header';
import Button from '../../settings/Button'; import Button from '../../settings/Button';
import { install, uninstall, urlParser } from 'modules/helpers/marketplace'; import { install, uninstall, urlParser } from 'modules/helpers/marketplace';
@ -208,7 +208,7 @@ export default class Added extends PureComponent {
return ( return (
<> <>
<Header title={variables.getMessage('modals.main.navbar.addons')} report={false}> <Header title={variables.getMessage('modals.main.navbar.addons')} report={false}>
{this.getSideloadButton()} <CustomActions>{this.getSideloadButton()}</CustomActions>
</Header> </Header>
<div className="emptyItems"> <div className="emptyItems">
<div className="emptyNewMessage"> <div className="emptyNewMessage">

11
src/components/modals/main/settings/Header.jsx
View File

@ -9,7 +9,11 @@ import {
import EventBus from 'modules/helpers/eventbus'; import EventBus from 'modules/helpers/eventbus';
import Button from './Button'; import Button from './Button';
const Header = (props) => { export const CustomActions = ({ children }) => {
return children;
};
export default function Header(props) {
const [setting, setSetting] = useState(localStorage.getItem(props.setting) === 'true'); const [setting, setSetting] = useState(localStorage.getItem(props.setting) === 'true');
useEffect(() => { useEffect(() => {
@ -82,6 +86,7 @@ const Header = (props) => {
</div> </div>
</> </>
); );
}; }
export default Header; // Remove the export statement for customActions
// export { customActions };

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

@ -5,6 +5,9 @@ import { MdShowChart, MdRestartAlt, MdDownload } from 'react-icons/md';
import { FaTrophy } from 'react-icons/fa'; import { FaTrophy } from 'react-icons/fa';
import { toast } from 'react-toastify'; import { toast } from 'react-toastify';
import Button from '../../settings/Button';
import Header, { CustomActions } from '../../settings/Header';
import { saveFile } from 'modules/helpers/settings/modals'; import { saveFile } from 'modules/helpers/settings/modals';
import achievementsData from 'modules/helpers/settings/achievements.json'; import achievementsData from 'modules/helpers/settings/achievements.json';
@ -111,17 +114,22 @@ export default class Stats extends PureComponent {
return ( return (
<> <>
<div className="statsTopBar"> <Header title={variables.getMessage(`${STATS_SECTION}.title`)} report={false}>
<span className="mainTitle">{variables.getMessage(`${STATS_SECTION}.title`)}</span> <CustomActions>
<div className="headerActions"> <Button
<button onClick={() => this.downloadStats()}> type="settings"
<MdDownload /> {variables.getMessage('widgets.background.download')} onClick={() => this.downloadStats()}
</button> icon={<MdDownload />}
<button onClick={() => this.resetStats()}> label={variables.getMessage('widgets.background.download')}
<MdRestartAlt /> {variables.getMessage('modals.main.settings.buttons.reset')} />
</button> <Button
</div>{' '} type="settings"
</div> onClick={() => this.resetStats()}
icon={<MdRestartAlt />}
label={variables.getMessage('modals.main.settings.buttons.reset')}
/>
</CustomActions>
</Header>
<div className="stats"> <div className="stats">
<div className="statSection rightPanel"> <div className="statSection rightPanel">
<div className="statIcon"> <div className="statIcon">