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

feat: update slider + create 

- got rid of commented out css
- update about tab UI
- add reset icon to reset text
- change link colour
- add number to show value on slider
- reorder greeting settings to make a bit more sense
This commit is contained in:
alexsparkes 2022-04-10 23:01:22 +01:00
parent d2e6d6d319
commit 4498f5b934
9 changed files with 292 additions and 325 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored Normal file
View File

Binary file not shown.

7
prettierrc Normal file
View File

@ -0,0 +1,7 @@
{
"printWidth": 100,
"trailingComma": "all",
"tabWidth": 2,
"semi": true,
"singleQuote": true
}

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

@ -1,5 +1,5 @@
import variables from 'modules/variables'; import variables from "modules/variables";
import { PureComponent } from 'react'; import { PureComponent } from "react";
import { import {
MdSettings as Settings, MdSettings as Settings,
MdOutlineInsertPhoto as Photos, MdOutlineInsertPhoto as Photos,
@ -9,18 +9,18 @@ import {
MdArrowBack, MdArrowBack,
MdDownload, MdDownload,
MdOpenInNew, MdOpenInNew,
} from 'react-icons/md'; } from "react-icons/md";
import { TextField } from '@mui/material'; import { TextField } from "@mui/material";
import { toast } from 'react-toastify'; import { toast } from "react-toastify";
import SettingsItem from '../../../main/settings/SettingsItem'; import SettingsItem from "../../../main/settings/SettingsItem";
import { saveFile } from 'modules/helpers/settings/modals'; import { saveFile } from "modules/helpers/settings/modals";
import Tooltip from '../../../../helpers/tooltip/Tooltip'; import Tooltip from "../../../../helpers/tooltip/Tooltip";
import FileUpload from '../../settings/FileUpload'; import FileUpload from "../../settings/FileUpload";
import Dropdown from '../../settings/Dropdown'; import Dropdown from "../../settings/Dropdown";
import '../../../welcome/welcome.scss'; import "../../../welcome/welcome.scss";
export default class Create extends PureComponent { export default class Create extends PureComponent {
constructor() { constructor() {
@ -28,18 +28,18 @@ export default class Create extends PureComponent {
this.state = { this.state = {
currentTab: 1, currentTab: 1,
addonMetadata: { addonMetadata: {
name: '', name: "",
description: '', description: "",
type: '', type: "",
version: '', version: "",
author: '', author: "",
icon_url: '', icon_url: "",
screenshot_url: '', screenshot_url: "",
}, },
addonData: '', addonData: "",
settingsClasses: { settingsClasses: {
current: 'toggle lightTheme', current: "toggle lightTheme",
json: 'toggle lightTheme', json: "toggle lightTheme",
}, },
}; };
} }
@ -64,17 +64,17 @@ export default class Create extends PureComponent {
let settings = {}; let settings = {};
Object.keys(data).forEach((key) => { Object.keys(data).forEach((key) => {
if ( if (
key === 'statsData' || key === "statsData" ||
key === 'firstRun' || key === "firstRun" ||
key === 'showWelcome' || key === "showWelcome" ||
key === 'language' || key === "language" ||
key === 'installed' || key === "installed" ||
key === 'stats' || key === "stats" ||
key === 'backup_settings' || key === "backup_settings" ||
key === 'showReminder' || key === "showReminder" ||
key === 'experimental' || key === "experimental" ||
key === 'debugtimeout' || key === "debugtimeout" ||
key === 'quotelanguage' key === "quotelanguage"
) { ) {
return; return;
} }
@ -84,12 +84,14 @@ export default class Create extends PureComponent {
this.setState({ this.setState({
addonData: settings, addonData: settings,
settingsClasses: { settingsClasses: {
current: input ? 'toggle lightTheme active' : 'toggle lightTheme', current: input ? "toggle lightTheme active" : "toggle lightTheme",
json: input ? 'toggle lightTheme active' : 'toggle lightTheme', json: input ? "toggle lightTheme active" : "toggle lightTheme",
}, },
}); });
toast(variables.language.getMessage(variables.languagecode, 'toasts.imported')); toast(
variables.language.getMessage(variables.languagecode, "toasts.imported")
);
} }
updateQuotePackType(type) { updateQuotePackType(type) {
@ -102,7 +104,7 @@ export default class Create extends PureComponent {
icon_url: this.state.addonMetadata.icon_url, icon_url: this.state.addonMetadata.icon_url,
screenshot_url: this.state.addonMetadata.screenshot_url, screenshot_url: this.state.addonMetadata.screenshot_url,
}; };
if (type === 'quotePack') { if (type === "quotePack") {
this.setState({ this.setState({
addonMetadata: { addonMetadata: {
addonMetadata, addonMetadata,
@ -115,9 +117,9 @@ export default class Create extends PureComponent {
addonMetadata, addonMetadata,
}, },
addonData: { addonData: {
url: '', url: "",
name: '', name: "",
author: '', author: "",
}, },
}); });
} }
@ -126,38 +128,45 @@ export default class Create extends PureComponent {
updateQuotePackAPI(type, data) { updateQuotePackAPI(type, data) {
this.setState({ this.setState({
addonData: { addonData: {
url: type === 'url' ? data : this.state.addonData.url || '', url: type === "url" ? data : this.state.addonData.url || "",
name: type === 'name' ? data : this.state.addonData.name || '', name: type === "name" ? data : this.state.addonData.name || "",
author: type === 'author' ? data : this.state.addonData.author || '', author: type === "author" ? data : this.state.addonData.author || "",
}, },
}); });
} }
importQuotes() { importQuotes() {
this.setState({ this.setState({
addonData: JSON.parse(localStorage.getItem('customQuote')) || [], addonData: JSON.parse(localStorage.getItem("customQuote")) || [],
}); });
toast(variables.language.getMessage(variables.languagecode, 'toasts.imported')); toast(
variables.language.getMessage(variables.languagecode, "toasts.imported")
);
} }
importPhotos() { importPhotos() {
let data = []; let data = [];
try { try {
const current = JSON.parse(localStorage.getItem('customBackground')) || []; const current =
JSON.parse(localStorage.getItem("customBackground")) || [];
data = current.map((item) => { data = current.map((item) => {
return { return {
photographer: '???', photographer: "???",
location: '???', location: "???",
url: { url: {
default: item, default: item,
}, },
}; };
}); });
toast(variables.language.getMessage(variables.languagecode, 'toasts.imported')); toast(
variables.language.getMessage(variables.languagecode, "toasts.imported")
);
} catch (e) { } catch (e) {
console.log(e); console.log(e);
toast(variables.language.getMessage(variables.languagecode, 'toasts.error')); toast(
variables.language.getMessage(variables.languagecode, "toasts.error")
);
} }
this.setState({ this.setState({
@ -171,20 +180,23 @@ export default class Create extends PureComponent {
name: this.state.addonMetadata.name, name: this.state.addonMetadata.name,
description: this.state.addonMetadata.description, description: this.state.addonMetadata.description,
type: type:
this.state.addonMetadata.type === 'quote_api' ? 'quotes' : this.state.addonMetadata.type, this.state.addonMetadata.type === "quote_api"
? "quotes"
: this.state.addonMetadata.type,
version: this.state.addonMetadata.version, version: this.state.addonMetadata.version,
author: this.state.addonMetadata.author, author: this.state.addonMetadata.author,
icon_url: this.state.addonMetadata.icon_url, icon_url: this.state.addonMetadata.icon_url,
screenshot_url: this.state.addonMetadata.screenshot_url, screenshot_url: this.state.addonMetadata.screenshot_url,
[this.state.addonMetadata.type]: this.state.addonData, [this.state.addonMetadata.type]: this.state.addonData,
}, },
this.state.addonMetadata.name + '.json', this.state.addonMetadata.name + ".json"
); );
} }
render() { render() {
let tabContent; let tabContent;
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text); const getMessage = (text) =>
variables.language.getMessage(variables.languagecode, text);
const chooseType = ( const chooseType = (
<> <>
@ -192,7 +204,8 @@ export default class Create extends PureComponent {
<div className="content"> <div className="content">
<span className="title">Help Centre</span> <span className="title">Help Centre</span>
<span className="subtitle"> <span className="subtitle">
Home of all docs and guides on creating addons for Mue's marketplace Home of all docs and guides on creating addons for Mue's
marketplace
</span> </span>
</div> </div>
<button> <button>
@ -202,17 +215,28 @@ export default class Create extends PureComponent {
</div> </div>
<div className="themesToggleArea"> <div className="themesToggleArea">
<div className="options"> <div className="options">
<div className="toggle lightTheme" onClick={() => this.changeTab(2, 'photos')}> <div
className="toggle lightTheme"
onClick={() => this.changeTab(2, "photos")}
>
<Photos /> <Photos />
<span>{getMessage('modals.main.marketplace.photo_packs')}</span> <span>{getMessage("modals.main.marketplace.photo_packs")}</span>
</div> </div>
<div className="toggle lightTheme" onClick={() => this.changeTab(2, 'quotes')}> <div
className="toggle lightTheme"
onClick={() => this.changeTab(2, "quotes")}
>
<Quotes /> <Quotes />
<span>{getMessage('modals.main.marketplace.quote_packs')}</span> <span>{getMessage("modals.main.marketplace.quote_packs")}</span>
</div> </div>
<div className="toggle lightTheme" onClick={() => this.changeTab(2, 'settings')}> <div
className="toggle lightTheme"
onClick={() => this.changeTab(2, "settings")}
>
<Settings /> <Settings />
<span>{getMessage('modals.main.marketplace.preset_settings')}</span> <span>
{getMessage("modals.main.marketplace.preset_settings")}
</span>
</div> </div>
</div> </div>
</div> </div>
@ -232,13 +256,19 @@ export default class Create extends PureComponent {
const setMetadata = (data, type) => { const setMetadata = (data, type) => {
this.setState({ this.setState({
addonMetadata: { addonMetadata: {
name: type === 'name' ? data : this.state.addonMetadata.name, name: type === "name" ? data : this.state.addonMetadata.name,
description: type === 'description' ? data : this.state.addonMetadata.description, description:
version: type === 'version' ? data : this.state.addonMetadata.version, type === "description"
author: type === 'author' ? data : this.state.addonMetadata.author, ? data
icon_url: type === 'icon_url' ? data : this.state.addonMetadata.icon_url, : this.state.addonMetadata.description,
version: type === "version" ? data : this.state.addonMetadata.version,
author: type === "author" ? data : this.state.addonMetadata.author,
icon_url:
type === "icon_url" ? data : this.state.addonMetadata.icon_url,
screenshot_url: screenshot_url:
type === 'screenshot_url' ? data : this.state.addonMetadata.screenshot_url, type === "screenshot_url"
? data
: this.state.addonMetadata.screenshot_url,
type: this.state.addonMetadata.type, type: this.state.addonMetadata.type,
}, },
}); });
@ -248,7 +278,7 @@ export default class Create extends PureComponent {
<> <>
<div className="smallBanner"> <div className="smallBanner">
<div className="content"> <div className="content">
<span className="title" style={{ textTransform: 'capitalize' }}> <span className="title" style={{ textTransform: "capitalize" }}>
Create {this.state.addonMetadata.type} Pack Create {this.state.addonMetadata.type} Pack
</span> </span>
<span className="subtitle">Description of what is being made</span> <span className="subtitle">Description of what is being made</span>
@ -258,234 +288,269 @@ export default class Create extends PureComponent {
<MdDownload /> <MdDownload />
</button> </button>
</div> </div>
<SettingsItem title={getMessage('modals.main.addons.create.metadata.name')}> <SettingsItem
title={getMessage("modals.main.addons.create.metadata.name")}
>
<TextField <TextField
label={getMessage('modals.main.addons.create.metadata.name')} label={getMessage("modals.main.addons.create.metadata.name")}
varient="outlined" varient="outlined"
InputLabelProps={{ shrink: true }} InputLabelProps={{ shrink: true }}
value={this.state.addonMetadata.name} value={this.state.addonMetadata.name}
onInput={(e) => setMetadata(e.target.value, 'name')} onInput={(e) => setMetadata(e.target.value, "name")}
/> />
</SettingsItem> </SettingsItem>
<SettingsItem title={getMessage('modals.main.marketplace.product.version')}> <SettingsItem
title={getMessage("modals.main.marketplace.product.version")}
>
<TextField <TextField
label={getMessage('modals.main.marketplace.product.version')} label={getMessage("modals.main.marketplace.product.version")}
varient="outlined" varient="outlined"
InputLabelProps={{ shrink: true }} InputLabelProps={{ shrink: true }}
value={this.state.addonMetadata.version} value={this.state.addonMetadata.version}
onInput={(e) => setMetadata(e.target.value, 'version')} onInput={(e) => setMetadata(e.target.value, "version")}
/> />
</SettingsItem> </SettingsItem>
<SettingsItem title={getMessage('modals.main.marketplace.product.author')}> <SettingsItem
title={getMessage("modals.main.marketplace.product.author")}
>
<TextField <TextField
label={getMessage('modals.main.marketplace.product.author')} label={getMessage("modals.main.marketplace.product.author")}
varient="outlined" varient="outlined"
InputLabelProps={{ shrink: true }} InputLabelProps={{ shrink: true }}
value={this.state.addonMetadata.author} value={this.state.addonMetadata.author}
onInput={(e) => setMetadata(e.target.value, 'author')} onInput={(e) => setMetadata(e.target.value, "author")}
/> />
</SettingsItem> </SettingsItem>
<SettingsItem title={getMessage('modals.main.addons.create.metadata.icon_url')}> <SettingsItem
title={getMessage("modals.main.addons.create.metadata.icon_url")}
>
<TextField <TextField
label={getMessage('modals.main.addons.create.metadata.icon_url')} label={getMessage("modals.main.addons.create.metadata.icon_url")}
varient="outlined" varient="outlined"
InputLabelProps={{ shrink: true }} InputLabelProps={{ shrink: true }}
value={this.state.addonMetadata.icon_url} value={this.state.addonMetadata.icon_url}
onInput={(e) => setMetadata(e.target.value, 'icon_url')} onInput={(e) => setMetadata(e.target.value, "icon_url")}
/> />
</SettingsItem> </SettingsItem>
<SettingsItem title={getMessage('modals.main.addons.create.metadata.screenshot_url')}> <SettingsItem
title={getMessage(
"modals.main.addons.create.metadata.screenshot_url"
)}
>
<TextField <TextField
label={getMessage('modals.main.addons.create.metadata.screenshot_url')} label={getMessage(
"modals.main.addons.create.metadata.screenshot_url"
)}
varient="outlined" varient="outlined"
InputLabelProps={{ shrink: true }} InputLabelProps={{ shrink: true }}
value={this.state.addonMetadata.screenshot_url} value={this.state.addonMetadata.screenshot_url}
onInput={(e) => setMetadata(e.target.value, 'screenshot_url')} onInput={(e) => setMetadata(e.target.value, "screenshot_url")}
/> />
</SettingsItem> </SettingsItem>
<SettingsItem title={getMessage('modals.main.addons.create.metadata.description')}> <SettingsItem
title={getMessage("modals.main.addons.create.metadata.description")}
>
<TextField <TextField
label={getMessage('modals.main.addons.create.metadata.description')} label={getMessage("modals.main.addons.create.metadata.description")}
varient="outlined" varient="outlined"
InputLabelProps={{ shrink: true }} InputLabelProps={{ shrink: true }}
multiline multiline
spellCheck={false} spellCheck={false}
rows={4} rows={4}
value={this.state.addonMetadata.description} value={this.state.addonMetadata.description}
onInput={(e) => setMetadata(e.target.value, 'description')} onInput={(e) => setMetadata(e.target.value, "description")}
/> />
</SettingsItem> </SettingsItem>
<div className="createButtons"> <div className="createButtons">
<button onClick={() => this.changeTab(1)} className="uploadbg"> <button onClick={() => this.changeTab(1)}>
{getMessage('modals.welcome.buttons.previous')} {getMessage("modals.welcome.buttons.previous")}
</button> </button>
<button <button
onClick={() => this.changeTab(this.state.addonMetadata.type)} onClick={() => this.changeTab(this.state.addonMetadata.type)}
className="uploadbg"
disabled={nextDescriptionDisabled} disabled={nextDescriptionDisabled}
> >
{getMessage('modals.welcome.buttons.next')} {getMessage("modals.welcome.buttons.next")}
</button> </button>
</div> </div>
</> </>
); );
// settings // settings
const nextSettingsDisabled = this.state.addonData === ''; const nextSettingsDisabled = this.state.addonData === "";
const importSettings = ( const importSettings = (
<> <>
<h3>{getMessage('modals.welcome.sections.settings.title')}</h3> <SettingsItem
<div className="themesToggleArea"> final={true}
<div className="options" style={{ maxWidth: '512px' }}> title={getMessage("modals.welcome.sections.settings.title")}
<div >
className={this.state.settingsClasses.current} <div className="themesToggleArea">
onClick={() => this.importSettings()} <div className="options" style={{ maxWidth: "512px" }}>
> <div
<ExportIcon /> className={this.state.settingsClasses.current}
<span>{getMessage('modals.main.addons.create.settings.current')}</span> onClick={() => this.importSettings()}
</div> >
<div <ExportIcon />
className={this.state.settingsClasses.json} <span>
onClick={() => document.getElementById('file-input').click()} {getMessage("modals.main.addons.create.settings.current")}
> </span>
<ImportIcon /> </div>
<span>{getMessage('modals.main.addons.create.settings.json')}</span> <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>
</div> </div>
</SettingsItem>
<SettingsItem final={true}>
<FileUpload
id="file-input"
type="settings"
accept="application/json"
loadFunction={(e) =>
this.importSettings(JSON.parse(e.target.result))
}
/>
</SettingsItem>
<div className="createButtons">
<button onClick={() => this.changeTab(2)}>
{getMessage("modals.welcome.buttons.previous")}
</button>
<button
onClick={() => this.changeTab(3)}
disabled={nextSettingsDisabled}
>
{getMessage("modals.welcome.buttons.next")}
</button>
</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={{ 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>
</> </>
); );
// quotes // quotes
const nextQuotesDisabled = !( const nextQuotesDisabled = !(
(this.state.addonMetadata.type === 'quote_api' && (this.state.addonMetadata.type === "quote_api" &&
this.state.addonData.url !== '' && this.state.addonData.url !== "" &&
this.state.addonData.name !== '' && this.state.addonData.name !== "" &&
this.state.addonData.author !== '') || this.state.addonData.author !== "") ||
(this.state.addonMetadata.type === 'quotes' && this.state.addonData.quotes !== '') (this.state.addonMetadata.type === "quotes" &&
this.state.addonData.quotes !== "")
); );
const addQuotes = ( const addQuotes = (
<> <>
<h3>{getMessage('modals.main.addons.create.quotes.title')}</h3> <SettingsItem final={true} title={getMessage("modals.main.addons.create.quotes.title")}>
<Dropdown <Dropdown
label={getMessage('modals.main.settings.sections.time.type')} label={getMessage("modals.main.settings.sections.time.type")}
noSetting noSetting
onChange={(e) => this.updateQuotePackType(e)} onChange={(e) => this.updateQuotePackType(e)}
> >
<option value="quotes"> <option value="quotes">
{getMessage('modals.main.addons.create.quotes.local.title')} {getMessage("modals.main.addons.create.quotes.local.title")}
</option> </option>
<option value="quote_api"> <option value="quote_api">
{getMessage('modals.main.addons.create.quotes.api.title')} {getMessage("modals.main.addons.create.quotes.api.title")}
</option> </option>
</Dropdown> </Dropdown>
{this.state.addonMetadata.type === 'quote_api' ? ( </SettingsItem>
{this.state.addonMetadata.type === "quote_api" ? (
<> <>
<TextField <TextField
label={getMessage('modals.main.addons.create.quotes.api.url')} label={getMessage("modals.main.addons.create.quotes.api.url")}
varient="outlined" varient="outlined"
InputLabelProps={{ shrink: true }} InputLabelProps={{ shrink: true }}
value={this.state.addonData.url} value={this.state.addonData.url}
onInput={(e) => this.updateQuotePack(e.target.value, 'url')} onInput={(e) => this.updateQuotePack(e.target.value, "url")}
/> />
<TextField <TextField
label={getMessage('modals.main.addons.create.quotes.api.name')} label={getMessage("modals.main.addons.create.quotes.api.name")}
varient="outlined" varient="outlined"
InputLabelProps={{ shrink: true }} InputLabelProps={{ shrink: true }}
value={this.state.addonData.name} value={this.state.addonData.name}
onInput={(e) => this.updateQuotePack(e.target.value, 'name')} onInput={(e) => this.updateQuotePack(e.target.value, "name")}
/> />
<TextField <TextField
label={getMessage('modals.main.addons.create.quotes.api.author')} label={getMessage("modals.main.addons.create.quotes.api.author")}
varient="outlined" varient="outlined"
InputLabelProps={{ shrink: true }} InputLabelProps={{ shrink: true }}
value={this.state.addonData.author} value={this.state.addonData.author}
onInput={(e) => this.updateQuotePack(e.target.value, 'author')} onInput={(e) => this.updateQuotePack(e.target.value, "author")}
/> />
<br /> <br />
<br /> <br />
</> </>
) : ( ) : (
<> <SettingsItem final={true} title={getMessage("modals.main.addons.create.settings.current")} >
<div className="themesToggleArea"> <div className="themesToggleArea">
<div className="options"> <div className="options">
<div <div
onClick={() => this.importQuotes()} onClick={() => this.importQuotes()}
className="toggle lightTheme" className="toggle lightTheme"
style={{ width: '60%', margin: '10px 0 10px 0' }} style={{ width: "60%", margin: "10px 0 10px 0" }}
> >
<ExportIcon /> <ExportIcon />
<span>{getMessage('modals.main.addons.create.settings.current')}</span> <span>
{getMessage("modals.main.addons.create.settings.current")}
</span>
</div> </div>
</div> </div>
</div> </div>
<br /> </SettingsItem>
</>
)} )}
<button onClick={() => this.changeTab(2)} className="uploadbg"> <div className="createButtons">
{getMessage('modals.welcome.buttons.previous')} <button onClick={() => this.changeTab(2)}>
</button> {getMessage("modals.welcome.buttons.previous")}
<button </button>
onClick={() => this.changeTab(3)} <button
className="uploadbg" onClick={() => this.changeTab(3)}
style={{ margin: '10px' }} disabled={nextQuotesDisabled}
disabled={nextQuotesDisabled} >
> {getMessage("modals.welcome.buttons.next")}
{getMessage('modals.welcome.buttons.next')} </button>
</button> </div>
</> </>
); );
// photos // photos
const nextPhotosDisabled = !( const nextPhotosDisabled = !(
this.state.addonData.photos !== '' && this.state.addonData.photos !== [] this.state.addonData.photos !== "" && this.state.addonData.photos !== []
); );
const addPhotos = ( const addPhotos = (
<> <>
<h3>{getMessage('modals.main.addons.create.photos.title')}</h3> <SettingsItem
<div className="themesToggleArea"> final={true}
<div className="options"> title={getMessage("modals.main.addons.create.photos.title")}
<div subtitle={"Import from custom settings."}
onClick={() => this.importPhotos()} >
className="toggle lightTheme" <div className="themesToggleArea">
style={{ width: '60%', margin: '10px 0 10px 0' }} <div className="options">
> <div
<ExportIcon /> onClick={() => this.importPhotos()}
<span>{getMessage('modals.main.addons.create.settings.current')}</span> className="toggle lightTheme"
style={{ width: "60%", margin: "10px 0 10px 0" }}
>
<ExportIcon />
<span>
{getMessage("modals.main.addons.create.settings.current")}
</span>
</div>
</div> </div>
</div> </div>
</div> </SettingsItem>
<br /> <br />
<button onClick={() => this.changeTab(2)} className="uploadbg"> <div className="createButtons">
{getMessage('modals.welcome.buttons.previous')} <button onClick={() => this.changeTab(2)}>
</button> {getMessage("modals.welcome.buttons.previous")}
<button </button>
onClick={() => this.changeTab(3)} <button
className="uploadbg" onClick={() => this.changeTab(3)}
style={{ margin: '10px' }} disabled={nextPhotosDisabled}
disabled={nextPhotosDisabled} >
> {getMessage("modals.welcome.buttons.next")}
{getMessage('modals.welcome.buttons.next')} </button>
</button> </div>
</> </>
); );
@ -493,11 +558,12 @@ export default class Create extends PureComponent {
<> <>
<div className="smallBanner"> <div className="smallBanner">
<div className="content"> <div className="content">
<span className="title" style={{ textTransform: 'capitalize' }}> <span className="title" style={{ textTransform: "capitalize" }}>
Next step, Publishing... Next step, Publishing...
</span> </span>
<span className="subtitle"> <span className="subtitle">
Visit the Mue Knowledgebase on information on how to publish your newly created addon. Visit the Mue Knowledgebase on information on how to publish your
newly created addon.
</span> </span>
</div> </div>
<button> <button>
@ -511,10 +577,12 @@ export default class Create extends PureComponent {
<div <div
onClick={() => this.downloadAddon()} onClick={() => this.downloadAddon()}
className="toggle lightTheme" className="toggle lightTheme"
style={{ width: '60%', margin: '10px 0 10px 0' }} style={{ width: "60%", margin: "10px 0 10px 0" }}
> >
<ExportIcon /> <ExportIcon />
<span>{getMessage('modals.main.addons.create.finish.download')}</span> <span>
{getMessage("modals.main.addons.create.finish.download")}
</span>
</div> </div>
</div> </div>
</div> </div>
@ -523,15 +591,14 @@ export default class Create extends PureComponent {
<button <button
onClick={() => onClick={() =>
this.changeTab( this.changeTab(
this.state.addonMetadata.type === 'quote_api' this.state.addonMetadata.type === "quote_api"
? 'quotes' ? "quotes"
: this.state.addonMetadata.type, : this.state.addonMetadata.type
) )
} }
className="uploadbg"
disabled={nextDescriptionDisabled} disabled={nextDescriptionDisabled}
> >
{getMessage('modals.welcome.buttons.previous')} {getMessage("modals.welcome.buttons.previous")}
</button> </button>
</div> </div>
{/*<button {/*<button
@ -542,8 +609,6 @@ export default class Create extends PureComponent {
: this.state.addonMetadata.type, : this.state.addonMetadata.type,
) )
} }
className="uploadbg"
style={{ marginRight: '10px' }}
> >
{getMessage('modals.welcome.buttons.previous')} {getMessage('modals.welcome.buttons.previous')}
</button>*/} </button>*/}
@ -554,13 +619,13 @@ export default class Create extends PureComponent {
case 2: case 2:
tabContent = writeDescription; tabContent = writeDescription;
break; break;
case 'settings': case "settings":
tabContent = importSettings; tabContent = importSettings;
break; break;
case 'quotes': case "quotes":
tabContent = addQuotes; tabContent = addQuotes;
break; break;
case 'photos': case "photos":
tabContent = addPhotos; tabContent = addPhotos;
break; break;
case 3: case 3:
@ -583,7 +648,9 @@ export default class Create extends PureComponent {
</Tooltip> </Tooltip>
</div> </div>
)} )}
<span className="mainTitle">{getMessage('modals.main.addons.create.other_title')}</span> <span className="mainTitle">
{getMessage("modals.main.addons.create.other_title")}
</span>
</div> </div>
{tabContent} {tabContent}
</> </>

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

@ -1,113 +1 @@
@import 'scss/modules/buttons'; @import 'scss/modules/buttons';
/*
.refresh {
@extend %settingsButton;
background-color: map-get($button-colours, 'confirm');
border: 2px solid map-get($button-colours, 'confirm');
&:hover {
border: 2px solid map-get($button-colours, 'confirm');
color: map-get($button-colours, 'confirm');
}
}
.reset {
@extend %settingsButton;
background-color: map-get($button-colours, 'reset');
border: 2px solid map-get($button-colours, 'reset');
&:hover {
border: 2px solid map-get($button-colours, 'reset');
color: map-get($button-colours, 'reset');
}
}
.add,
.close {
@extend %settingsButton;
background-color: map-get($button-colours, 'other');
border: 2px solid map-get($button-colours, 'other');
&:hover {
color: map-get($button-colours, 'other');
border: 2px solid map-get($button-colours, 'other');
}
}
.close {
padding: 10px 50px 10px 50px;
}
.export,
.uploadbg,
.import {
width: 440px;
height: 60px;
background-color: var(--sidebar);
border: none;
outline: none;
color: var(--modal-text);
border-radius: 12px;
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);
}
&:disabled {
cursor: not-allowed;
background: none;
border: 1px solid var(--tab-active);
&:hover {
background: none;
border: 1px solid var(--tab-active);
}
}
}
.export,
.import {
margin-left: 20px;
}
.round-small {
height: 10px !important;
width: 10px !important;
}
/* button {
background: var(--sidebar);
text-align: center;
border-radius: 20px;
padding: 20px;
border: 3px solid var(--tab-active);
height: 40px;
font-size: 1rem;
margin: 0 10px 10px 0;
display: flex;
flex-direction: column-reverse;
align-items: center;
color: var(--modal-text);
transition: 0.5s;
&:hover {
background: var(--tab-active);
cursor: pointer;
}
.customvideoicon {
position: absolute;
margin-bottom: 45px;
font-size: 3em !important;
}
*/

1
src/components/modals/main/settings/Slider.jsx
View File

@ -63,6 +63,7 @@ export default class SliderComponent extends PureComponent {
<> <>
<span className={'sliderTitle'}> <span className={'sliderTitle'}>
{this.props.title} {this.props.title}
{Number(this.state.value / 100)}x
<span className="link" onClick={this.resetItem}> <span className="link" onClick={this.resetItem}>
<MdRefresh /> <MdRefresh />
{variables.language.getMessage( {variables.language.getMessage(

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

@ -1,6 +1,6 @@
import variables from 'modules/variables'; import variables from 'modules/variables';
import { PureComponent } from 'react'; import { PureComponent } from 'react';
import { MdEmail } from 'react-icons/md'; import { MdEmail, MdContactPage } from 'react-icons/md';
import { FaDiscord, FaTwitter, FaPatreon, FaGithub } from 'react-icons/fa'; import { FaDiscord, FaTwitter, FaPatreon, FaGithub } from 'react-icons/fa';
import { SiGithubsponsors, SiLiberapay, SiKofi, SiPatreon } from 'react-icons/si'; import { SiGithubsponsors, SiLiberapay, SiKofi, SiPatreon } from 'react-icons/si';
import { BiDonateHeart } from 'react-icons/bi'; import { BiDonateHeart } from 'react-icons/bi';
@ -179,6 +179,10 @@ export default class About extends PureComponent {
{this.getMessage('modals.main.settings.sections.about.contact_us')} {this.getMessage('modals.main.settings.sections.about.contact_us')}
</span> </span>
<div className="aboutContact"> <div className="aboutContact">
<a class='donateButton' href='https://muetab.com/contact'>
<MdContactPage />
Form
</a>
<Tooltip title={'Email'}> <Tooltip title={'Email'}>
<a <a
href={'mailto:' + variables.constants.EMAIL} href={'mailto:' + variables.constants.EMAIL}

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

@ -29,17 +29,17 @@ export default class GreetingSettings extends PureComponent {
return ( return (
<> <>
<Header title={getMessage('modals.main.settings.sections.greeting.title')} setting='greeting' category='greeting' element='.greeting' zoomSetting='zoomGreeting' switch={true}/> <Header title={getMessage('modals.main.settings.sections.greeting.title')} setting='greeting' category='greeting' element='.greeting' zoomSetting='zoomGreeting' switch={true}/>
<SettingsItem title="Additional Settings" subtitle={getMessage('modals.main.settings.enabled')}>
<Checkbox name='events' text={getMessage('modals.main.settings.sections.greeting.events')} category='greeting'/>
<Checkbox name='defaultGreetingMessage' text={getMessage('modals.main.settings.sections.greeting.default')} category='greeting'/>
<Text title={getMessage('modals.main.settings.sections.greeting.name')} name='greetingName' category='greeting'/>
</SettingsItem>
<SettingsItem title={getMessage('modals.main.settings.sections.greeting.birthday')} subtitle={getMessage('modals.main.settings.enabled')}> <SettingsItem title={getMessage('modals.main.settings.sections.greeting.birthday')} subtitle={getMessage('modals.main.settings.enabled')}>
<Switch name='birthdayenabled' text={getMessage('modals.main.settings.enabled')} category='greeting'/> <Switch name='birthdayenabled' text={getMessage('modals.main.settings.enabled')} category='greeting'/>
<Checkbox name='birthdayage' text={getMessage('modals.main.settings.sections.greeting.birthday_age')} category='greeting'/> <Checkbox name='birthdayage' text={getMessage('modals.main.settings.sections.greeting.birthday_age')} category='greeting'/>
<p>{getMessage('modals.main.settings.sections.greeting.birthday_date')}</p> <p>{getMessage('modals.main.settings.sections.greeting.birthday_date')}</p>
<input type='date' onChange={this.changeDate} value={this.state.birthday.toISOString().substr(0, 10)} required/> <input type='date' onChange={this.changeDate} value={this.state.birthday.toISOString().substr(0, 10)} required/>
</SettingsItem> </SettingsItem>
<SettingsItem title="Additional Settings" subtitle={getMessage('modals.main.settings.enabled')}>
<Checkbox name='events' text={getMessage('modals.main.settings.sections.greeting.events')} category='greeting'/>
<Checkbox name='defaultGreetingMessage' text={getMessage('modals.main.settings.sections.greeting.default')} category='greeting'/>
<Text title={getMessage('modals.main.settings.sections.greeting.name')} name='greetingName' category='greeting'/>
</SettingsItem>
{/*<h3>{getMessage('modals.main.settings.sections.greeting.birthday')}</h3> {/*<h3>{getMessage('modals.main.settings.sections.greeting.birthday')}</h3>
<Switch name='birthdayenabled' text={getMessage('modals.main.settings.enabled')} category='greeting'/> <Switch name='birthdayenabled' text={getMessage('modals.main.settings.enabled')} category='greeting'/>
<br/> <br/>

6
src/components/widgets/navbar/Navbar.jsx
View File

@ -63,8 +63,8 @@ export default class Navbar extends PureComponent {
const backgroundEnabled = localStorage.getItem('background') === 'true'; const backgroundEnabled = localStorage.getItem('background') === 'true';
const navbar = ( const navbar = (
<div className="navbar-container"> <div className="navbar-container" ref={this.navbarContainer}>
<div className={this.state.classList} ref={this.navbarContainer}> <div className={this.state.classList}>
{localStorage.getItem('view') === 'true' && backgroundEnabled ? <Maximise /> : null} {localStorage.getItem('view') === 'true' && backgroundEnabled ? <Maximise /> : null}
{localStorage.getItem('notesEnabled') === 'true' ? <Notes /> : null} {localStorage.getItem('notesEnabled') === 'true' ? <Notes /> : null}
{localStorage.getItem('todo') === 'true' ? <Todo /> : null} {localStorage.getItem('todo') === 'true' ? <Todo /> : null}
@ -94,7 +94,7 @@ export default class Navbar extends PureComponent {
variables.languagecode, variables.languagecode,
'modals.main.navbar.settings', 'modals.main.navbar.settings',
)} )}
> <button onClick={() => this.props.openModal('mainModal')}> ><button onClick={() => this.props.openModal('mainModal')}>
<MdSettings className="settings-icon topicons" /> <MdSettings className="settings-icon topicons" />
</button></Tooltip> </button></Tooltip>
</div> </div>

2
src/scss/_variables.scss
View File

@ -82,7 +82,7 @@ $themes: (
'modal-background': #2f3542, 'modal-background': #2f3542,
'modal-sidebar': #353b48, 'modal-sidebar': #353b48,
'modal-sidebarActive': rgba(65, 71, 84, 0.9), 'modal-sidebarActive': rgba(65, 71, 84, 0.9),
'link': rgba(83, 82, 237, 1), 'link': rgb(108, 108, 238),
), ),
); );