mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-15 04:53:48 +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

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>
</>