mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-09 21:45:26 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: improve custom settings ui

Browse Source
This commit is contained in:
David Ralph
2021-11-02 22:53:17 +00:00
parent 8888cb2144
commit 2824e7c995
4 changed files with 46 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/modals/main/settings/sections/Message.jsx
View File

@@ -1,6 +1,6 @@
import variables from 'modules/variables';
import { PureComponent, Fragment } from 'react';
import { Cancel } from '@mui/icons-material';
import { PureComponent } from 'react';
import { Cancel, Add } from '@mui/icons-material';
import { toast } from 'react-toastify';
import { TextField } from '@mui/material';
@@ -63,16 +63,18 @@ export default class Message extends PureComponent {
<>
<Header title={this.getMessage('modals.main.settings.sections.message.title')} setting='message' category='message' element='.message' zoomSetting='zoomMessage'/>
<p>{this.getMessage('modals.main.settings.sections.message.text')}</p>
<div className='data-buttons-row'>
<button onClick={() => this.modifyMessage('add')}>{this.getMessage('modals.main.settings.sections.message.add')} <Add/></button>
</div>
{this.state.messages.map((_url, index) => (
<Fragment key={index}>
<div style={{ display: 'flex' }} key={index}>
<TextField value={this.state.messages[index]} onChange={(e) => this.message(e, true, index)} varient='outlined' />
{this.state.messages.length > 1 ? <button className='cleanButton' onClick={() => this.modifyMessage('remove', index)}>
<Cancel/>
</button> : null}
</Fragment>
</div>
))}
<br/>
<button className='uploadbg' onClick={() => this.modifyMessage('add')}>{this.getMessage('modals.main.settings.sections.message.add')}</button>
</>
);
}

14
src/components/modals/main/settings/sections/Quote.jsx
View File

@@ -1,6 +1,6 @@
import variables from 'modules/variables';
import { PureComponent, Fragment } from 'react';
import { Cancel } from '@mui/icons-material';
import { Cancel, Add } from '@mui/icons-material';
import { TextField } from '@mui/material';
import Header from '../Header';
@@ -87,16 +87,18 @@ export default class QuoteSettings extends PureComponent {
customSettings = (
<>
<p>{this.getMessage('modals.main.settings.sections.quote.custom')} <span className='modalLink' onClick={this.resetCustom}>{this.getMessage('modals.main.settings.buttons.reset')}</span></p>
<div className='data-buttons-row'>
<button onClick={() => this.modifyCustomQuote('add')}>{this.getMessage('modals.main.settings.sections.quote.add')} <Add/></button>
</div>
{this.state.customQuote.map((_url, index) => (
<Fragment key={index}>
<TextField value={this.state.customQuote[index].quote} placeholder='Quote' onChange={(e) => this.customQuote(e, true, index, 'quote')} varient='outlined' />
<div style={{ display: 'flex' }} key={index}>
<TextField value={this.state.customQuote[index].quote} placeholder='Quote' onChange={(e) => this.customQuote(e, true, index, 'quote')} varient='outlined' style={{ marginRight: '10px' }} />
<TextField value={this.state.customQuote[index].author} placeholder='Author' onChange={(e) => this.customQuote(e, true, index, 'author')} varient='outlined' />
{this.state.customQuote.length > 1 ? <button className='cleanButton' onClick={() => this.modifyCustomQuote('remove', index)}>
{this.state.customQuote.length > 1 ? <button className='cleanButton' onClick={() => this.modifyCustomQuote('remove', index)} style={{ marginBottom: '-14px' }}>
<Cancel/>
</button> : null}
</Fragment>
</div>
))}
<button className='uploadbg' onClick={() => this.modifyCustomQuote('add')}>{this.getMessage('modals.main.settings.sections.quote.add')}</button>
</>
);
} else {

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

@@ -141,23 +141,31 @@ export default class BackgroundSettings extends PureComponent {
{backgroundSettings}
<h3>{getMessage('modals.main.settings.sections.background.buttons.title')}</h3>
<Checkbox name='downloadbtn' text={getMessage('modals.main.settings.sections.background.buttons.download')} element='.other' />
<h3>{getMessage('modals.main.settings.sections.background.effects.title')}</h3>
<Slider title={getMessage('modals.main.settings.sections.background.effects.blur')} name='blur' min='0' max='100' default='0' display='%' marks={values('background')} category='background' element='#backgroundImage' />
<Slider title={getMessage('modals.main.settings.sections.background.effects.brightness')} name='brightness' min='0' max='100' default='90' display='%' marks={values('background')} category='background' element='#backgroundImage' />
<br/>
<Dropdown label={getMessage('modals.main.settings.sections.background.effects.filters.title')} name='backgroundFilter' onChange={(value) => this.setState({ backgroundFilter: value })} category='background' element='#backgroundImage'>
<option value='none'>None</option>
<option value='grayscale'>{getMessage('modals.main.settings.sections.background.effects.filters.grayscale')}</option>
<option value='sepia'>{getMessage('modals.main.settings.sections.background.effects.filters.sepia')}</option>
<option value='invert'>{getMessage('modals.main.settings.sections.background.effects.filters.invert')}</option>
<option value='saturate'>{getMessage('modals.main.settings.sections.background.effects.filters.saturate')}</option>
<option value='contrast'>{getMessage('modals.main.settings.sections.background.effects.filters.contrast')}</option>
</Dropdown>
{this.state.backgroundFilter !== 'none' ?
<Slider title={getMessage('modals.main.settings.sections.background.effects.filters.amount')} name='backgroundFilterAmount' min='0' max='100' default='0' display='%' marks={values('background')} category='background' element='#backgroundImage' />
{this.state.backgroundType === 'api' && APISettings ?
<>
<h3>{getMessage('modals.main.settings.sections.background.buttons.title')}</h3>
<Checkbox name='downloadbtn' text={getMessage('modals.main.settings.sections.background.buttons.download')} element='.other' />
</>
: null}
{this.state.backgroundType === 'api' || this.state.backgroundType === 'custom' || this.state.backgroundType === 'marketplace' ?
<>
<h3>{getMessage('modals.main.settings.sections.background.effects.title')}</h3>
<Slider title={getMessage('modals.main.settings.sections.background.effects.blur')} name='blur' min='0' max='100' default='0' display='%' marks={values('background')} category='background' element='#backgroundImage' />
<Slider title={getMessage('modals.main.settings.sections.background.effects.brightness')} name='brightness' min='0' max='100' default='90' display='%' marks={values('background')} category='background' element='#backgroundImage' />
<br/>
<Dropdown label={getMessage('modals.main.settings.sections.background.effects.filters.title')} name='backgroundFilter' onChange={(value) => this.setState({ backgroundFilter: value })} category='background' element='#backgroundImage'>
<option value='none'>None</option>
<option value='grayscale'>{getMessage('modals.main.settings.sections.background.effects.filters.grayscale')}</option>
<option value='sepia'>{getMessage('modals.main.settings.sections.background.effects.filters.sepia')}</option>
<option value='invert'>{getMessage('modals.main.settings.sections.background.effects.filters.invert')}</option>
<option value='saturate'>{getMessage('modals.main.settings.sections.background.effects.filters.saturate')}</option>
<option value='contrast'>{getMessage('modals.main.settings.sections.background.effects.filters.contrast')}</option>
</Dropdown>
{this.state.backgroundFilter !== 'none' ?
<Slider title={getMessage('modals.main.settings.sections.background.effects.filters.amount')} name='backgroundFilterAmount' min='0' max='100' default='0' display='%' marks={values('background')} category='background' element='#backgroundImage' />
: null}
</>
: null}
</>
);

12
src/components/modals/main/settings/sections/background/Custom.jsx
View File

@@ -22,9 +22,9 @@ export default class CustomSettings extends PureComponent {
}
resetCustom = () => {
localStorage.setItem('customBackground', '[""]');
localStorage.setItem('customBackground', '[]');
this.setState({
customBackground: ['']
customBackground: []
});
toast(this.getMessage('toasts.reset'));
EventBus.dispatch('refresh', 'background');
@@ -107,6 +107,10 @@ export default class CustomSettings extends PureComponent {
return (
<ul>
<p>{this.getMessage('modals.main.settings.sections.background.source.custom_background')} <span className='modalLink' onClick={this.resetCustom}>{this.getMessage('modals.main.settings.buttons.reset')}</span></p>
<div className='data-buttons-row'>
<button onClick={() => this.uploadCustomBackground()}>Add background <AddPhotoAlternate/> </button>
<button onClick={() => this.setState({ customURLModal: true })}>Add URL <AddLink/></button>
</div>
<div className='images-row'>
{this.state.customBackground.map((_url, index) => (
<Fragment key={index}>
@@ -119,10 +123,6 @@ export default class CustomSettings extends PureComponent {
</Fragment>
))}
</div>
<div className='data-buttons-row'>
<button onClick={() => this.uploadCustomBackground()}>Add background <AddPhotoAlternate/> </button>
<button onClick={() => this.setState({ customURLModal: true })}>Add URL <AddLink/></button>
</div>
<FileUpload id='bg-input' accept='image/jpeg, image/png, image/webp, image/webm, image/gif, video/mp4, video/webm, video/ogg' loadFunction={(e) => this.customBackground(e, false, this.state.currentBackgroundIndex)} />
{this.props.interval}
<Modal closeTimeoutMS={100} isOpen={this.state.customURLModal} className='Modal resetmodal mainModal' overlayClassName='Overlay resetoverlay' ariaHideApp={false}>