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

WIP modal improvements as well as some fixes etc

Browse Source
This commit is contained in:
David Ralph
2020-10-27 15:10:40 +00:00
parent 0f279b8087
commit 8b8353297d
4 changed files with 19 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.jsx
View File

@@ -73,7 +73,7 @@ export default class App extends React.PureComponent {
<Modal id={'modal'} onRequestClose={() => this.setState({ mainModal: false })} isOpen={this.state.mainModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}>
<MainModal
language={language}
modalClose={() => this.setState({ mainsModal: false })} />
modalClose={() => this.setState({ mainModal: false })} />
</Modal>
<Modal onRequestClose={() => this.setState({ updateModal: false })} isOpen={this.state.updateModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}>
<Update

10
src/components/modals/MainModal.jsx
View File

@@ -4,6 +4,10 @@ import Settings from './tabs/Settings';
import Addons from './tabs/Addons';
import Marketplace from './tabs/Marketplace';
import SettingsIcon from '@material-ui/icons/Settings';
import AddonsIcon from '@material-ui/icons/Widgets';
import MarketplaceIcon from '@material-ui/icons/ShoppingBasket';
export default class MainModal extends React.PureComponent {
constructor(...args) {
super(...args);
@@ -62,9 +66,9 @@ export default class MainModal extends React.PureComponent {
<span className='closeModal' onClick={this.props.modalClose}>&times;</span>
<h1>{this.props.language.modals.title}</h1>
<div className='tab'>
<button className='tablinks' id={this.state.marketplaceActive} onClick={() => this.changeEnabled('marketplace')}>{this.props.language.modals.marketplace}</button>
<button className='tablinks' id={this.state.addonsActive} onClick={() => this.changeEnabled('addons')}>{this.props.language.modals.addons}</button>
<button className='tablinks' id={this.state.settingsActive} onClick={() => this.changeEnabled('settings')}>{this.props.language.modals.settings}</button>
<button className='tablinks' id={this.state.marketplaceActive} onClick={() => this.changeEnabled('marketplace')}><MarketplaceIcon/> {this.props.language.modals.marketplace}</button>
<button className='tablinks' id={this.state.addonsActive} onClick={() => this.changeEnabled('addons')}><AddonsIcon/> {this.props.language.modals.addons}</button>
<button className='tablinks' id={this.state.settingsActive} onClick={() => this.changeEnabled('settings')}><SettingsIcon/> {this.props.language.modals.settings}</button>
</div>
<br/>
{this.state.tab}

3
src/scss/modules/_buttons.scss
View File

@@ -10,6 +10,7 @@
font-size: 20px;
border-radius: 24px;
background: none;
box-shadow: 0 5px 15px rgba(46, 213, 115, .4);
&:hover {
outline: none;
@@ -35,9 +36,9 @@
.reset {
@extend %settingsButton;
margin-left: 5px;
background-color: map-get($button-colours, 'reset');
border: 2px solid map-get($button-colours, 'reset');
margin-left: 5px;
&:hover {
border: 2px solid map-get($button-colours, 'reset');

11
src/scss/modules/_modal.scss
View File

@@ -30,8 +30,10 @@
}
.closeModal {
float: right;
font-size: 2em;
position: absolute;
top: 1rem;
right: 2rem;
font-size: 4em;
cursor: pointer;
&:hover {
@@ -173,4 +175,9 @@
background: #34495e;
border-top-right-radius: map-get($modal, "border-radius");
border-bottom-right-radius: map-get($modal, "border-radius");
}
.tablinks svg {
top: 0.125em;
position: relative;
}