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

chore: simplify and standardise added UI

This commit is contained in:
alexsparkes 2023-09-22 17:07:52 +01:00
parent 901833da91
commit 79261a6ab4
2 changed files with 34 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -193,10 +193,8 @@ export default class Added extends PureComponent {
if (this.state.installed.length === 0) { if (this.state.installed.length === 0) {
return ( return (
<> <>
<div className="flexTopMarketplace"> <div className="flexTopMarketplace topAddons">
<span className="mainTitle">{variables.getMessage('modals.main.navbar.addons')}</span> <span className="mainTitle">{variables.getMessage('modals.main.navbar.addons')}</span>
</div>
<div className="filter">
{sideLoadBackendElements()} {sideLoadBackendElements()}
<button <button
className="sideload" className="sideload"
@ -234,33 +232,35 @@ export default class Added extends PureComponent {
return ( return (
<> <>
<span className="mainTitle">{variables.getMessage('modals.main.addons.added')}</span> <div className="flexTopMarketplace topAddons">
<div className="filter"> <span className="mainTitle">{variables.getMessage('modals.main.addons.added')}</span>
{sideLoadBackendElements()} <div className="filter">
<div className="buttonSection"> {sideLoadBackendElements()}
<button <div className="buttonSection">
className="sideload" <button className="addToMue sideload updateCheck" onClick={() => this.updateCheck()}>
onClick={() => document.getElementById('file-input').click()} <MdUpdate />
> {variables.getMessage('modals.main.addons.check_updates')}
{variables.getMessage('modals.main.addons.sideload.title')} </button>
<MdCode /> <button
</button> className="sideload"
<button className="addToMue sideload updateCheck" onClick={() => this.updateCheck()}> onClick={() => document.getElementById('file-input').click()}
<MdUpdate /> >
{variables.getMessage('modals.main.addons.check_updates')} {variables.getMessage('modals.main.addons.sideload.title')}
</button> <MdCode />
</button>
</div>
</div> </div>
<Dropdown
label={variables.getMessage('modals.main.addons.sort.title')}
name="sortAddons"
onChange={(value) => this.sortAddons(value)}
>
<option value="newest">{variables.getMessage('modals.main.addons.sort.newest')}</option>
<option value="oldest">{variables.getMessage('modals.main.addons.sort.oldest')}</option>
<option value="a-z">{variables.getMessage('modals.main.addons.sort.a_z')}</option>
<option value="z-a">{variables.getMessage('modals.main.addons.sort.z_a')}</option>
</Dropdown>
</div> </div>
<Dropdown
label={variables.getMessage('modals.main.addons.sort.title')}
name="sortAddons"
onChange={(value) => this.sortAddons(value)}
>
<option value="newest">{variables.getMessage('modals.main.addons.sort.newest')}</option>
<option value="oldest">{variables.getMessage('modals.main.addons.sort.oldest')}</option>
<option value="a-z">{variables.getMessage('modals.main.addons.sort.a_z')}</option>
<option value="z-a">{variables.getMessage('modals.main.addons.sort.z_a')}</option>
</Dropdown>
<Items <Items
items={this.state.installed} items={this.state.installed}
filter="" filter=""

14
src/components/modals/main/scss/marketplace/_main.scss
View File

@ -378,17 +378,9 @@ p.author {
.filter { .filter {
display: flex; display: flex;
flex-flow: row; flex-flow: row;
padding: 15px;
gap: 15px; gap: 15px;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-top: 15px;
@include themed {
background: t($modal-sidebar);
border-radius: t($borderRadius);
box-shadow: 0 0 0 4px t($modal-sidebarActive);
}
.MuiFormControl-root { .MuiFormControl-root {
margin-bottom: 10px; margin-bottom: 10px;
@ -614,3 +606,9 @@ a.collectionButton {
font-size: 30px; font-size: 30px;
} }
} }
.topAddons {
display: flex;
align-items: center;
justify-content: space-between;
}