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

fix: style fixes and custom background video support for upload file

Browse Source
This commit is contained in:
David Ralph
2021-04-12 14:56:23 +01:00
parent cc341300b4
commit fbe6e040ea
16 changed files with 123 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -22,7 +22,7 @@ export default class BackgroundSettings extends React.PureComponent {
this.language = window.language.modals.main.settings;
}
resetCustom() {
resetCustom = () => {
localStorage.setItem('customBackground', '');
this.setState({
customBackground: ''
@@ -40,7 +40,7 @@ export default class BackgroundSettings extends React.PureComponent {
videoCustomSettings = () => {
const customBackground = this.state.customBackground;
if (customBackground.endsWith('.mp4') || customBackground.endsWith('.webm') || customBackground.endsWith('.ogg')) {
if (customBackground.startsWith('data:video/') || customBackground.endsWith('.mp4') || customBackground.endsWith('.webm') || customBackground.endsWith('.ogg')) {
return (
<>
<Checkbox name='backgroundVideoLoop' text={this.language.sections.background.source.loop_video}/>
@@ -105,15 +105,12 @@ export default class BackgroundSettings extends React.PureComponent {
const customSettings = (
<>
<ul>
<p>{background.source.custom_url} <span className='modalLink' onClick={() => this.resetCustom()}>{this.language.buttons.reset}</span></p>
<p>{background.source.custom_background} <span className='modalLink' onClick={this.resetCustom}>{this.language.buttons.reset}</span></p>
<input type='text' value={this.state.customBackground} onChange={(e) => this.setState({ customBackground: e.target.value })}></input>
<span className='modalLink' onClick={() => document.getElementById('bg-input').click()}>{background.source.upload}</span>
<FileUpload id='bg-input' accept='image/jpeg, image/png, image/webp, image/webm, image/gif, video/mp4, video/webm, video/ogg' loadFunction={(e) => this.fileUpload(e)} />
</ul>
{this.videoCustomSettings()}
<ul>
<p>{background.source.custom_background} <span className='modalLink' onClick={() => this.resetCustom()}>{this.language.buttons.reset}</span></p>
<button className='uploadbg' onClick={() => document.getElementById('bg-input').click()}>{background.source.upload}</button>
<FileUpload id='bg-input' accept='image/jpeg, image/png, image/webp, image/webm, image/gif' loadFunction={(e) => this.fileUpload(e)} />
</ul>
</>
);

12
src/components/modals/main/tabs/Addons.jsx
View File

@@ -2,15 +2,15 @@ import React from 'react';
import Added from '../marketplace/sections/Added';
import AddonsTabs from './backend/Tabs';
import Tabs from './backend/Tabs';
export default function Addons() {
const language = window.language.modals.main.addons;
const addons = window.language.modals.main.addons;
return (
<AddonsTabs>
<div label={language.added}><Added/></div>
<div label={language.sideload}></div>
</AddonsTabs>
<Tabs>
<div label={addons.added}><Added/></div>
<div label={addons.sideload}></div>
</Tabs>
);
}

6
src/components/modals/main/tabs/Marketplace.jsx
View File

@@ -5,12 +5,12 @@ import MarketplaceTab from '../marketplace/sections/Marketplace';
import Tabs from './backend/Tabs';
export default function Marketplace() {
const language = window.language.modals.main.marketplace;
const marketplace = window.language.modals.main.marketplace;
return (
<Tabs>
<div label={language.photo_packs}><MarketplaceTab type='photo_packs'/></div>
<div label={language.quote_packs}><MarketplaceTab type='quote_packs'/></div>
<div label={marketplace.photo_packs}><MarketplaceTab type='photo_packs'/></div>
<div label={marketplace.quote_packs}><MarketplaceTab type='quote_packs'/></div>
</Tabs>
);
}

31
src/components/modals/main/tabs/Settings.jsx
View File

@@ -18,24 +18,25 @@ import Weather from '../settings/sections/Weather';
import Tabs from './backend/Tabs';
export default function Settings() {
const language = window.language.modals.main.settings.sections;
const settings = window.language.modals.main.settings.sections;
return (
<>
<Tabs>
<div label={language.time.title}><Time/></div>
<div label={language.quote.title}><Quote/></div>
<div label={language.greeting.title}><Greeting/></div>
<div label={language.background.title}><Background/></div>
<div label={language.search.title}><Search/></div>
<div label={language.quicklinks.title}><QuickLinks/></div>
<div label={language.weather.title}><Weather/></div>
<div label={language.appearance.title}><Appearance/></div>
<div label={language.order.title}><Order/></div>
<div label={language.language.title}><Language/></div>
<div label={language.advanced.title}><Advanced/></div>
<div label={language.experimental.title}><Experimental/></div>
<div label={language.changelog}><Changelog/></div>
<div label={language.about.title}><About/></div>
<div label={settings.time.title}><Time/></div>
<div label={settings.quote.title}><Quote/></div>
<div label={settings.greeting.title}><Greeting/></div>
<div label={settings.background.title}><Background/></div>
<div label={settings.search.title}><Search/></div>
<div label={settings.quicklinks.title}><QuickLinks/></div>
<div label={settings.weather.title}><Weather/></div>
<div label={settings.appearance.title}><Appearance/></div>
<div label={settings.order.title}><Order/></div>
<div label={settings.language.title}><Language/></div>
<div label={settings.advanced.title}><Advanced/></div>
<div label={settings.experimental.title}><Experimental/></div>
<div label={settings.changelog}><Changelog/></div>
<div label={settings.about.title}><About/></div>
</Tabs>
<div className='reminder-info'>
<h1>IMPORTANT INFO</h1>

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

@@ -20,9 +20,9 @@ import Order from '@material-ui/icons/List';
import Weather from '@material-ui/icons/CloudOutlined';
import Advanced from '@material-ui/icons/SettingsOutlined';
import QuickLinks from '@material-ui/icons/Link';
import Sideload from '@material-ui/icons/Code';
// Store
// Addons
import Sideload from '@material-ui/icons/Code';
import Added from '@material-ui/icons/AddCircleOutline';
function Tab(props) {
@@ -38,44 +38,42 @@ function Tab(props) {
}
}
const language = window.language.modals.main.settings.sections;
const navbarlanguage = window.language.modals.main.navbar;
const marketplacelanguage = window.language.modals.main.marketplace;
const addonslanguage = window.language.modals.main.addons;
const settings = window.language.modals.main.settings.sections;
const { navbar, marketplace, addons }= window.language.modals.main;
let icon, divider;
switch (props.label) {
// Navbar
case navbarlanguage.settings: icon = <Settings/>; break;
case navbarlanguage.addons: icon = <Addons/>; break;
case navbarlanguage.marketplace: icon = <Marketplace/>; break;
case navbar.settings: icon = <Settings/>; break;
case navbar.addons: icon = <Addons/>; break;
case navbar.marketplace: icon = <Marketplace/>; break;
// Settings
case language.time.title: icon = <Time/>; break;
case language.greeting.title: icon = <Greeting/>; break;
case language.quote.title: icon = <Quote/>; break;
case language.background.title: icon = <Background/>; break;
case language.search.title: icon = <Search/>; break;
case language.weather.title: icon = <Weather/>; break;
case language.quicklinks.title: icon = <QuickLinks/>; break;
case language.appearance.title: icon = <Appearance/>; break;
case language.order.title: icon = <Order/>; break;
case language.language.title: icon = <Language/>; divider = true; break;
case language.advanced.title: icon = <Advanced/>; break;
case language.experimental.title: icon = <Experimental/>; divider = true; break;
case language.changelog: icon = <Changelog/>; break;
case language.about.title: icon = <About/>; break;
case settings.time.title: icon = <Time/>; break;
case settings.greeting.title: icon = <Greeting/>; break;
case settings.quote.title: icon = <Quote/>; break;
case settings.background.title: icon = <Background/>; break;
case settings.search.title: icon = <Search/>; break;
case settings.weather.title: icon = <Weather/>; break;
case settings.quicklinks.title: icon = <QuickLinks/>; break;
case settings.appearance.title: icon = <Appearance/>; break;
case settings.order.title: icon = <Order/>; break;
case settings.language.title: icon = <Language/>; divider = true; break;
case settings.advanced.title: icon = <Advanced/>; break;
case settings.experimental.title: icon = <Experimental/>; divider = true; break;
case settings.changelog: icon = <Changelog/>; break;
case settings.about.title: icon = <About/>; break;
// Store
case marketplacelanguage.photo_packs: icon = <Background/>; break;
case marketplacelanguage.quote_packs: icon = <Quote/>; break;
case addonslanguage.added: icon = <Added/>; break;
case addonslanguage.sideload: icon = <Sideload/>; break;
case marketplace.photo_packs: icon = <Background/>; break;
case marketplace.quote_packs: icon = <Quote/>; break;
case addons.added: icon = <Added/>; break;
case addons.sideload: icon = <Sideload/>; break;
default: break;
}
if (props.label === language.experimental.title) {
if (props.label === settings.experimental.title) {
if (localStorage.getItem('experimental') === 'false') {
return <hr/>;
}

26
src/components/modals/main/tabs/backend/Tabs.jsx
View File

@@ -33,26 +33,24 @@ export default class Tabs extends React.PureComponent {
<>
<ul className={className}>
{optionsText}
{this.props.children.map((tab) => {
return (
<Tab
currentTab={this.state.currentTab}
key={tab.props.label}
label={tab.props.label}
onClick={this.onClick}
navbar={this.props.navbar || false}
/>
);
})}
{this.props.children.map((tab, index) => (
<Tab
currentTab={this.state.currentTab}
key={tab.props.label || index}
label={tab.props.label}
onClick={this.onClick}
navbar={this.props.navbar || false}
/>
))}
</ul>
<div className={tabClass}>
<ErrorBoundary>
{this.props.children.map((child) => {
if (child.props.label !== this.state.currentTab) {
{this.props.children.map((tab) => {
if (tab.props.label !== this.state.currentTab) {
return undefined;
}
return child.props.children;
return tab.props.children;
})}
</ErrorBoundary>
</div>