mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-22 16:27:32 +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/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}>