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

fix: various ui fixes, fix create tab 

Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>
This commit is contained in:
David Ralph 2021-11-23 18:11:36 +00:00
parent f8ee23eb40
commit af2edeb737
8 changed files with 47 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/components/modals/main/marketplace/sections/Create.jsx
View File

@ -3,7 +3,9 @@ import { PureComponent } from 'react';
import {
SettingsRounded as Settings,
PhotoOutlined as Photos,
FormatQuoteOutlined as Quotes
FormatQuoteOutlined as Quotes,
Upload as ImportIcon,
Download as ExportIcon,
} from '@mui/icons-material';
import { TextField } from '@mui/material';
import { toast } from 'react-toastify';
@ -119,9 +121,7 @@ export default class Create extends PureComponent {
importQuotes() {
this.setState({
addonData: {
quotes: JSON.parse(localStorage.getItem('customQuote')) || []
}
addonData: JSON.parse(localStorage.getItem('customQuote')) || []
});
toast(variables.language.getMessage(variables.languagecode, 'toasts.imported'));
@ -130,7 +130,16 @@ export default class Create extends PureComponent {
importPhotos() {
let data = [];
try {
data = JSON.parse(localStorage.getItem('customBackground'));
const current = JSON.parse(localStorage.getItem('customBackground')) || [];
data = current.map((item) => {
return {
photographer: '???',
location: '???',
url: {
default: item
}
}
});
toast(variables.language.getMessage(variables.languagecode, 'toasts.imported'));
} catch (e) {
console.log(e);
@ -138,9 +147,7 @@ export default class Create extends PureComponent {
}
this.setState({
addonData: {
photos: data
}
addonData: data
});
}
@ -228,17 +235,19 @@ export default class Create extends PureComponent {
<div className='themesToggleArea'>
<div className='options'>
<div className={this.state.settingsClasses.current} onClick={() => this.importSettings()}>
<ExportIcon/>
<span>{getMessage('modals.main.addons.create.settings.current')}</span>
</div>
<div className={this.state.settingsClasses.json} onClick={() => document.getElementById('file-input').click()}>
<ImportIcon/>
<span>{getMessage('modals.main.addons.create.settings.json')}</span>
</div>
</div>
</div>
<FileUpload id='file-input' type='settings' accept='application/json' loadFunction={(e) => this.importSettings(JSON.parse(e.target.result))} />
<br/><br/>
<button onClick={() => this.changeTab(2)} className='uploadbg' style={{ marginRight: '10px' }}>{getMessage('modals.welcome.buttons.previous')}</button>
<button onClick={() => this.changeTab(3)} className='uploadbg' disabled={nextSettingsDisabled}>{getMessage('modals.welcome.buttons.next')}</button>
<button onClick={() => this.changeTab(2)} className='uploadbg' style={{ margin: '10px' }}>{getMessage('modals.welcome.buttons.previous')}</button>
<button onClick={() => this.changeTab(3)} className='uploadbg' style={{ margin: '10px' }} disabled={nextSettingsDisabled}>{getMessage('modals.welcome.buttons.next')}</button>
</>
);
@ -253,18 +262,16 @@ export default class Create extends PureComponent {
<option value='quote_api'>{getMessage('modals.main.addons.create.quotes.api.title')}</option>
</Dropdown>
{this.state.addonMetadata.type === 'quote_api' ? <>
<h3>{getMessage('modals.main.addons.create.quotes.api.title')}</h3>
<TextField label={getMessage('modals.main.addons.create.quotes.api.url')} varient='outlined' InputLabelProps={{ shrink: true }} value={this.state.addonData.url} onInput={(e) => this.updateQuotePack(e.target.value, 'url')}/>
<TextField label={getMessage('modals.main.addons.create.quotes.api.name')} varient='outlined' InputLabelProps={{ shrink: true }} value={this.state.addonData.name} onInput={(e) => this.updateQuotePack(e.target.value, 'name')}/>
<TextField label={getMessage('modals.main.addons.create.quotes.api.author')} varient='outlined' InputLabelProps={{ shrink: true }} value={this.state.addonData.author} onInput={(e) => this.updateQuotePack(e.target.value, 'author')}/>
<br/><br/>
</> : <>
<h3>{getMessage('modals.main.addons.create.quotes.local.title')}</h3>
<button onClick={() => this.importQuotes()} className='uploadbg' style={{ marginRight: '10px' }}>{getMessage('modals.main.addons.create.settings.current')}</button>
<button onClick={() => this.importQuotes()} className='uploadbg' style={{ margin: '10px' }}>{getMessage('modals.main.addons.create.settings.current')}</button>
<br/><br/>
</>}
<button onClick={() => this.changeTab(2)} className='uploadbg' style={{ marginRight: '10px' }}>{getMessage('modals.welcome.buttons.previous')}</button>
<button onClick={() => this.changeTab(3)} className='uploadbg' disabled={nextQuotesDisabled}>{getMessage('modals.welcome.buttons.next')}</button>
<button onClick={() => this.changeTab(2)} className='uploadbg' style={{ margin: '10px' }}>{getMessage('modals.welcome.buttons.previous')}</button>
<button onClick={() => this.changeTab(3)} className='uploadbg' style={{ margin: '10px' }}disabled={nextQuotesDisabled}>{getMessage('modals.welcome.buttons.next')}</button>
</>
);
@ -273,11 +280,10 @@ export default class Create extends PureComponent {
const addPhotos = (
<>
<h3>{getMessage('modals.main.addons.create.photos.title')}</h3>
<h3>{getMessage('modals.main.addons.create.quotes.local.title')}</h3>
<button onClick={() => this.importPhotos()} className='uploadbg' style={{ marginRight: '10px' }}>{getMessage('modals.main.addons.create.settings.current')}</button>
<br/><br/>
<button onClick={() => this.changeTab(2)} className='uploadbg' style={{ marginRight: '10px' }}>{getMessage('modals.welcome.buttons.previous')}</button>
<button onClick={() => this.changeTab(3)} className='uploadbg' disabled={nextPhotosDisabled}>{getMessage('modals.welcome.buttons.next')}</button>
<button onClick={() => this.changeTab(2)} className='uploadbg' style={{ margin: '10px' }}>{getMessage('modals.welcome.buttons.previous')}</button>
<button onClick={() => this.changeTab(3)} className='uploadbg' style={{ margin: '10px' }} disabled={nextPhotosDisabled}>{getMessage('modals.welcome.buttons.next')}</button>
</>
);

2
src/components/modals/main/marketplace/sections/Sideload.jsx
View File

@ -31,7 +31,7 @@ export default class Sideload extends PureComponent {
failedReason = this.getMessage('modals.main.addons.sideload.errors.no_type');
} else if (!input.version) {
failedReason = this.getMessage('modals.main.addons.sideload.errors.no_version');
} else if (input.type === 'photos' && (!input.photos || !input.photos.length || !input.photos[0].url.default || !input.photos[0].photographer || !input.photos[0].location)) {
} else if (input.type === 'photos' && (!input.photos || !input.photos.length || !input.photos[0].url || !input.photos[0].url.default || !input.photos[0].photographer || !input.photos[0].location)) {
failedReason = this.getMessage('modals.main.addons.sideload.errors.invalid_photos');
} else if (input.type === 'quotes' && (!input.quotes || !input.quotes.length || !input.quotes[0].quote || !input.quotes[0].author)) {
failedReason = this.getMessage('modals.main.addons.sideload.errors.invalid_quotes');

2
src/components/modals/main/scss/marketplace/modules/_item.scss
View File

@ -53,6 +53,7 @@ p.description {
background: var(--sidebar);
width: 350px;
border-radius: 12px;
min-height: 180px;
h4 {
cursor: initial !important;
@ -74,4 +75,5 @@ p.description {
.overview {
font-size: 30px !important;
margin-top: 33px;
}

3
src/components/modals/main/scss/settings/_buttons.scss
View File

@ -54,6 +54,9 @@
margin-right: 25px;
width: 220px;
cursor: pointer;
border-radius: 24px;
border: 3px solid var(--tab-active);
font-size: 1rem;
&:hover {
background-color: var(--tab-active);

5
src/components/modals/main/scss/settings/modules/tabs/_about.scss
View File

@ -25,3 +25,8 @@
border-radius: 50%;
padding-right: 5px;
}
.contacth3 {
font-size: 1.5rem;
margin-bottom: 0.8em !important;
}

2
src/components/modals/main/settings/sections/About.jsx
View File

@ -93,7 +93,7 @@ export default class About extends PureComponent {
<p>{this.getMessage('modals.main.settings.sections.about.version.title')} {variables.constants.VERSION} ({this.state.update})</p>
<a href={variables.constants.PRIVACY_URL} className='aboutLink' target='_blank' rel='noopener noreferrer' style={{ fontSize: '1rem' }}>{this.getMessage('modals.welcome.sections.privacy.links.privacy_policy')}</a>
<h3>{this.getMessage('modals.main.settings.sections.about.contact_us')}</h3>
<h3 className='contacth3'>{this.getMessage('modals.main.settings.sections.about.contact_us')}</h3>
<a href={'mailto:' + variables.constants.EMAIL} className='aboutIcon' target='_blank' rel='noopener noreferrer'><Email/></a>
<a href={'https://twitter.com/' + variables.constants.TWITTER_HANDLE} className='aboutIcon' target='_blank' rel='noopener noreferrer'><Twitter/></a>
<a href={'https://instagram.com/' + variables.constants.INSTAGRAM_HANDLE} className='aboutIcon' target='_blank' rel='noopener noreferrer'><Instagram/></a>

10
src/components/modals/welcome/welcome.scss
View File

@ -90,6 +90,12 @@
margin: 10px;
border: 3px solid var(--tab-active);
display: flex;
flex-direction: column;
align-items: center;
align-content: center;
justify-content: center;
&:hover {
background: var(--tab-active);
cursor: pointer;
@ -98,6 +104,10 @@
span {
font-size: 1rem;
}
svg {
font-size: 2.5em;
}
}
.auto {

1
src/components/widgets/navbar/scss/_notes.scss
View File

@ -24,6 +24,7 @@
top: 80%;
margin-left: -150px;
max-height: 80vh !important;
font-size: 1rem !important;
textarea {
max-height: 65vh !important;