mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-16 05:23:49 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: multiline messages, add react-icons etc

Browse Source
This commit is contained in:
David Ralph
2022-04-07 10:25:01 +01:00
parent faacd68e44
commit 81b10d9795
33 changed files with 154 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/modals/main/marketplace/Item.jsx
View File

@@ -1,7 +1,7 @@
import variables from 'modules/variables';
import { PureComponent, Fragment } from 'react';
import { toast } from 'react-toastify';
import { ArrowBack } from '@mui/icons-material';
import { MdArrowBack } from 'react-icons/md';
import Modal from 'react-modal';
import { install, uninstall } from 'modules/helpers/marketplace';
@@ -66,7 +66,7 @@ export default class Item extends PureComponent {
return (
<div id='item'>
<br/>
<ArrowBack className='backArrow' onClick={this.props.toggleFunction}/>
<MdArrowBack className='backArrow' onClick={this.props.toggleFunction}/>
<br/>
<h1>{this.props.data.display_name}</h1>
{this.props.button}

4
src/components/modals/main/marketplace/SideloadFailedModal.jsx
View File

@@ -1,5 +1,5 @@
import variables from 'modules/variables';
import { Close } from '@mui/icons-material';
import { MdClose } from 'react-icons/md';
export default function SideloadFailedModal({ modalClose, reason }) {
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
@@ -12,7 +12,7 @@ export default function SideloadFailedModal({ modalClose, reason }) {
<span>{reason}</span>
<div className='resetfooter'>
<button className='round import' style={{ marginLeft: '-30px' }} onClick={modalClose}>
<Close/>
<MdClose/>
</button>
</div>
</>

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

@@ -1,6 +1,6 @@
import variables from 'modules/variables';
import { PureComponent } from 'react';
import { LocalMall } from '@mui/icons-material';
import { MdLocalMall } from 'react-icons/md';
import { toast } from 'react-toastify';
import Item from '../Item';
@@ -119,7 +119,7 @@ export default class Added extends PureComponent {
return (
<div className='emptyitems'>
<div className='emptyMessage'>
<LocalMall/>
<MdLocalMall/>
<h1>{this.getMessage('modals.main.addons.empty.title')}</h1>
<p className='description'>{this.getMessage('modals.main.addons.empty.description')}</p>
</div>

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

@@ -1,12 +1,12 @@
import variables from 'modules/variables';
import { PureComponent } from 'react';
import {
SettingsRounded as Settings,
PhotoOutlined as Photos,
FormatQuoteOutlined as Quotes,
Upload as ImportIcon,
Download as ExportIcon,
} from '@mui/icons-material';
import {
MdSettings as Settings,
MdOutlineInsertPhoto as Photos,
MdOutlineFormatQuote as Quotes,
MdUpload as ImportIcon,
MdDownload as ExportIcon
} from 'react-icons/md';
import { TextField } from '@mui/material';
import { toast } from 'react-toastify';
@@ -221,7 +221,7 @@ export default class Create extends PureComponent {
<TextField label={getMessage('modals.main.marketplace.product.author')} varient='outlined' InputLabelProps={{ shrink: true }} value={this.state.addonMetadata.author} onInput={(e) => setMetadata(e.target.value, 'author')}/>
<TextField label={getMessage('modals.main.addons.create.metadata.icon_url')} varient='outlined' InputLabelProps={{ shrink: true }} value={this.state.addonMetadata.icon_url} onInput={(e) => setMetadata(e.target.value, 'icon_url')}/>
<TextField label={getMessage('modals.main.addons.create.metadata.screenshot_url')} varient='outlined' InputLabelProps={{ shrink: true }} value={this.state.addonMetadata.screenshot_url} onInput={(e) => setMetadata(e.target.value, 'screenshot_url')}/>
<TextField label={getMessage('modals.main.addons.create.metadata.description')} varient='outlined' InputLabelProps={{ shrink: true }} multiline spellCheck={false} rows={4} InputLabelProps={{ shrink: true }} value={this.state.addonMetadata.description} onInput={(e) => setMetadata(e.target.value, 'description')}/>
<TextField label={getMessage('modals.main.addons.create.metadata.description')} varient='outlined' InputLabelProps={{ shrink: true }} multiline spellCheck={false} rows={4} value={this.state.addonMetadata.description} onInput={(e) => setMetadata(e.target.value, 'description')}/>
<br/>
<button onClick={() => this.changeTab(1)} className='uploadbg' style={{ marginRight: '10px' }}>{getMessage('modals.welcome.buttons.previous')}</button>
<button onClick={() => this.changeTab(this.state.addonMetadata.type)} className='uploadbg' disabled={nextDescriptionDisabled}>{getMessage('modals.welcome.buttons.next')}</button>

6
src/components/modals/main/marketplace/sections/Marketplace.jsx
View File

@@ -1,7 +1,7 @@
import variables from 'modules/variables';
import { PureComponent } from 'react';
import { toast } from 'react-toastify';
import { WifiOff, LocalMall } from '@mui/icons-material';
import { MdWifiOff, MdLocalMall } from 'react-icons/md';
import Item from '../Item';
import Items from '../Items';
@@ -174,7 +174,7 @@ export default class Marketplace extends PureComponent {
if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') {
return errorMessage(<>
<WifiOff/>
<MdWifiOff/>
<h1>{this.getMessage('modals.main.marketplace.offline.title')}</h1>
<p className='description'>{this.getMessage('modals.main.marketplace.offline.description')}</p>
</>);
@@ -204,7 +204,7 @@ export default class Marketplace extends PureComponent {
<>
{featured()}
{errorMessage(<>
<LocalMall/>
<MdLocalMall/>
<h1>{this.getMessage('modals.main.addons.empty.title')}</h1>
<p className='description'>{this.getMessage('modals.main.marketplace.no_items')}</p>
</>)}

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

@@ -1,6 +1,6 @@
import variables from 'modules/variables';
import { PureComponent } from 'react';
import { LocalMall } from '@mui/icons-material';
import { MdIntegrationInstructions } from 'react-icons/md';
import { toast } from 'react-toastify';
import Modal from 'react-modal';
@@ -54,7 +54,7 @@ export default class Sideload extends PureComponent {
<div className='emptyitems'>
<div className='emptyMessage'>
<FileUpload id='file-input' type='settings' accept='application/json' loadFunction={(e) => this.installAddon(JSON.parse(e.target.result))} />
<LocalMall/>
<MdIntegrationInstructions />
<h1>{this.getMessage('modals.main.addons.sideload.title')}</h1>
<button className='addToMue sideload' onClick={() => document.getElementById('file-input').click()}>{this.getMessage('modals.main.settings.sections.background.source.upload')}</button>
</div>

6
src/components/modals/main/settings/KeybindInput.jsx
View File

@@ -1,5 +1,5 @@
import variables from 'modules/variables';
import { Cancel } from '@mui/icons-material';
import { MdCancel } from 'react-icons/md';
import { TextField } from '@mui/material';
export default function KeybindInput(props) {
@@ -9,9 +9,9 @@ export default function KeybindInput(props) {
if (!value) {
return <button className='cleanButton' style={{ visibility: 'hidden' }} onClick={() => props.action('reset', props.setting)}><Cancel/></button>;;
} else if (value === variables.language.getMessage(variables.languagecode, 'modals.main.settings.sections.keybinds.recording')) {
return <button className='cleanButton' onClick={() => props.action('cancel', props.setting)}><Cancel/></button>;
return <button className='cleanButton' onClick={() => props.action('cancel', props.setting)}><MdCancel/></button>;
} else {
return <button className='cleanButton' onClick={() => props.action('reset', props.setting)}><Cancel/></button>;
return <button className='cleanButton' onClick={() => props.action('reset', props.setting)}><MdCancel/></button>;
}
}

6
src/components/modals/main/settings/ResetModal.jsx
View File

@@ -1,5 +1,5 @@
import variables from 'modules/variables';
import { Close, Delete } from '@mui/icons-material';
import { MdClose, MdRestartAlt } from 'react-icons/md';
import { setDefaultSettings } from 'modules/helpers/settings';
export default function ResetModal({ modalClose }) {
@@ -17,10 +17,10 @@ export default function ResetModal({ modalClose }) {
<span>{variables.language.getMessage(variables.languagecode, 'modals.main.settings.sections.advanced.reset_modal.information')}</span>
<div className='resetfooter'>
<button className='round reset' style={{ marginLeft: 0 }} onClick={() => reset()}>
<Delete/>
<MdRestartAlt/>
</button>
<button className='round add' style={{ marginLeft: '5px' }} onClick={modalClose}>
<Close/>
<MdClose/>
</button>
</div>
</>

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

@@ -1,6 +1,7 @@
import variables from 'modules/variables';
import { PureComponent } from 'react';
import { Email, Twitter, Chat, Instagram, Facebook } from '@mui/icons-material';
import { MdEmail } from 'react-icons/md';
import { FaDiscord, FaTwitter } from 'react-icons/fa';
import Tooltip from 'components/helpers/tooltip/Tooltip';
@@ -94,11 +95,9 @@ export default class About extends PureComponent {
<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 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>
<a href={'https://facebook.com/' + variables.constants.FACEBOOK_HANDLE} className='aboutIcon' target='_blank' rel='noopener noreferrer'><Facebook/></a>
<a href={'https://discord.gg/' + variables.constants.DISCORD_SERVER} className='aboutIcon' target='_blank' rel='noopener noreferrer'><Chat/></a>
<a href={'mailto:' + variables.constants.EMAIL} className='aboutIcon' target='_blank' rel='noopener noreferrer'><MdEmail/></a>
<a href={'https://twitter.com/' + variables.constants.TWITTER_HANDLE} className='aboutIcon' target='_blank' rel='noopener noreferrer'><FaTwitter/></a>
<a href={'https://discord.gg/' + variables.constants.DISCORD_SERVER} className='aboutIcon' target='_blank' rel='noopener noreferrer'><FaDiscord/></a>
<h3>{this.getMessage('modals.main.settings.sections.about.support_mue')}</h3>
<p>

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

@@ -2,7 +2,7 @@ import variables from 'modules/variables';
import { PureComponent } from 'react';
import Modal from 'react-modal';
import { MenuItem } from '@mui/material';
import { Upload as ImportIcon, Download as ExportIcon, RestartAlt as ResetIcon } from '@mui/icons-material';
import { MdUpload as ImportIcon, MdDownload as ExportIcon, MdRestartAlt as ResetIcon } from 'react-icons/md';
import { exportSettings, importSettings } from 'modules/helpers/settings/modals';

4
src/components/modals/main/settings/sections/Changelog.jsx
View File

@@ -1,6 +1,6 @@
import variables from 'modules/variables';
import { PureComponent, createRef } from 'react';
import { WifiOff } from '@mui/icons-material';
import { MdOutlineWifiOff } from 'react-icons/md';
import Modal from 'react-modal';
import Lightbox from '../../marketplace/Lightbox';
@@ -91,7 +91,7 @@ export default class Changelog extends PureComponent {
if (navigator.onLine === false || this.offlineMode) {
return errorMessage(<>
<WifiOff/>
<MdOutlineWifiOff/>
<h1>{getMessage('modals.main.marketplace.offline.title')}</h1>
<p className='description'>{getMessage('modals.main.marketplace.offline.description')}</p>
</>);

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

@@ -1,6 +1,6 @@
import variables from 'modules/variables';
import { PureComponent } from 'react';
import { Cancel, Add } from '@mui/icons-material';
import { MdCancel, MdAdd } from 'react-icons/md';
import { toast } from 'react-toastify';
import { TextField } from '@mui/material';
@@ -64,13 +64,13 @@ 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>
<button onClick={() => this.modifyMessage('add')}>{this.getMessage('modals.main.settings.sections.message.add')} <MdAdd/></button>
</div>
{this.state.messages.map((_url, 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/>
<MdCancel/>
</button> : null}
</div>
))}

4
src/components/modals/main/settings/sections/Order.jsx
View File

@@ -1,6 +1,6 @@
import variables from 'modules/variables';
import { PureComponent } from 'react';
import { DragIndicator } from '@mui/icons-material';
import { MdOutlineDragIndicator } from 'react-icons/md';
import { sortableContainer, sortableElement } from 'react-sortable-hoc';
import { toast } from 'react-toastify';
@@ -18,7 +18,7 @@ const widget_name = {
const SortableItem = sortableElement(({ value }) => (
<li className='sortableitem'>
<DragIndicator style={{ verticalAlign: 'middle' }} />
<MdOutlineDragIndicator style={{ verticalAlign: 'middle' }} />
{widget_name[value]}
</li>
));

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

@@ -1,6 +1,6 @@
import variables from 'modules/variables';
import { PureComponent } from 'react';
import { Cancel, Add } from '@mui/icons-material';
import { MdCancel, MdAdd } from 'react-icons/md';
import { TextField } from '@mui/material';
import Header from '../Header';
@@ -91,14 +91,14 @@ export default class QuoteSettings extends PureComponent {
<>
<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>
<button onClick={() => this.modifyCustomQuote('add')}>{this.getMessage('modals.main.settings.sections.quote.add')} <MdAdd/></button>
</div>
{this.state.customQuote.map((_url, index) => (
<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)} style={{ marginBottom: '-14px' }}>
<Cancel/>
<MdCancel/>
</button> : null}
</div>
))}

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

@@ -1,7 +1,7 @@
import variables from 'modules/variables';
import { PureComponent } from 'react';
import { toast } from 'react-toastify';
import { Cancel, AddLink, AddPhotoAlternate, PersonalVideo } from '@mui/icons-material';
import { MdCancel, MdAddLink, MdAddPhotoAlternate, MdPersonalVideo } from 'react-icons/md';
import EventBus from 'modules/helpers/eventbus';
import Checkbox from '../../Checkbox';
@@ -116,15 +116,15 @@ export default class CustomSettings extends PureComponent {
<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()}>{this.getMessage('modals.main.settings.sections.background.source.add_background')} <AddPhotoAlternate/></button>
<button onClick={() => this.setState({ customURLModal: true })}>{this.getMessage('modals.main.settings.sections.background.source.add_url')} <AddLink/></button>
<button onClick={() => this.uploadCustomBackground()}>{this.getMessage('modals.main.settings.sections.background.source.add_background')} <MdAddPhotoAlternate/></button>
<button onClick={() => this.setState({ customURLModal: true })}>{this.getMessage('modals.main.settings.sections.background.source.add_url')} <MdAddLink/></button>
</div>
<div className='images-row'>
{this.state.customBackground.map((url, index) => (
<div style={{ backgroundImage: `url(${!this.videoCheck(url) ? this.state.customBackground[index] : ''})` }} key={index}>
{this.videoCheck(url) ? <PersonalVideo className='customvideoicon'/> : null}
{this.videoCheck(url) ? <MdPersonalVideo className='customvideoicon'/> : null}
{this.state.customBackground.length > 0 ? <button className='cleanButton' onClick={() => this.modifyCustomBackground('remove', index)}>
<Cancel/>
<MdCancel/>
</button> : null}
</div>
))}

4
src/components/modals/main/settings/sections/background/CustomURLModal.jsx
View File

@@ -1,6 +1,6 @@
import variables from 'modules/variables';
import { useState } from 'react';
import { Add } from '@mui/icons-material';
import { MdAdd } from 'react-icons/md';
import { TextField } from '@mui/material';
export default function CustomURLModal({ modalClose, modalCloseOnly }) {
@@ -13,7 +13,7 @@ export default function CustomURLModal({ modalClose, modalCloseOnly }) {
<TextField value={url} onChange={(e) => setURL(e.target.value)} varient='outlined'/>
<div className='resetfooter'>
<button className='round import' style={{ marginLeft: '5px' }} onClick={() => modalClose(url)}>
<Add/>
<MdAdd/>
</button>
</div>
</>

54
src/components/modals/main/tabs/backend/Tab.jsx
View File

@@ -1,34 +1,34 @@
import variables from 'modules/variables';
import { memo } from 'react';
import {
SettingsRounded as Settings,
Widgets as Addons,
ShoppingBasket as Marketplace,
MenuOutlined as Navbar,
EmojiPeopleOutlined as Greeting,
AccessAlarm as Time,
FormatQuoteOutlined as Quote,
Link as QuickLinks,
DateRangeOutlined as Date,
SmsOutlined as Message,
PhotoOutlined as Background,
Search,
CloudOutlined as Weather,
List as Order,
FormatPaintOutlined as Appearance,
Translate as Language,
SettingsOutlined as Advanced,
BugReportOutlined as Experimental,
MdSettings as Settings,
MdWidgets as Addons,
MdShoppingBasket as Marketplace,
MdMenu as Navbar,
MdEmojiPeople as Greeting,
MdAccessAlarm as Time,
MdOutlineFormatQuote as Quote,
MdLink as QuickLinks,
MdDateRange as Date,
MdOutlineTextsms as Message,
MdOutlinePhoto as Background,
MdSearch,
MdCloudQueue as Weather,
MdList as Order,
MdFormatPaint as Appearance,
MdTranslate as Language,
MdOutlineSettings as Advanced,
MdBugReport as Experimental,
//KeyboardAltOutlined as Keybinds,
AssessmentOutlined as Stats,
NewReleasesOutlined as Changelog,
InfoOutlined as About,
MdOutlineAssessment as Stats,
MdOutlineNewReleases as Changelog,
MdInfoOutline as About,
MdEvent as Reminder,
MdCode as Sideload,
MdAddCircleOutline as Added,
MdAddCircleOutline as Create
} from 'react-icons/md';
Code as Sideload,
AddCircleOutline as Added,
CreateNewFolderOutlined as Create
} from '@mui/icons-material';
function Tab({ label, currentTab, onClick, navbarTab }) {
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
@@ -59,7 +59,7 @@ function Tab({ label, currentTab, onClick, navbarTab }) {
case getMessage('modals.main.settings.sections.date.title'): icon = <Date/>; break;
case getMessage('modals.main.settings.sections.message.title'): icon = <Message/>; break;
case getMessage('modals.main.settings.sections.background.title'): icon = <Background/>; break;
case getMessage('modals.main.settings.sections.search.title'): icon = <Search/>; break;
case getMessage('modals.main.settings.sections.search.title'): icon = <MdSearch/>; break;
case getMessage('modals.main.settings.sections.weather.title'): icon = <Weather/>; divider = true; break;
case getMessage('modals.main.settings.sections.order.title'): icon = <Order/>; break;