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

chore: begin moving create add-ons

This commit is contained in:
David Ralph 2023-09-17 12:07:31 +01:00
parent a035b70841
commit fc6d988a52
15 changed files with 7121 additions and 8280 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,523 +1,36 @@
/* eslint-disable no-unused-vars */
// todo: refactor all of this
import variables from 'modules/variables';
import { PureComponent } from 'react';
import {
MdSettings as Settings,
MdOutlineInsertPhoto as Photos,
MdOutlineFormatQuote as Quotes,
MdUpload as ImportIcon,
MdDownload as ExportIcon,
MdArrowBack,
MdDownload,
MdOpenInNew,
} from 'react-icons/md';
import { TextField } from '@mui/material';
import { toast } from 'react-toastify';
import SettingsItem from '../../../main/settings/SettingsItem';
import { saveFile } from 'modules/helpers/settings/modals';
import InfoTooltip from '../../../../helpers/tooltip/infoTooltip';
import Tooltip from '../../../../helpers/tooltip/Tooltip';
import FileUpload from '../../settings/FileUpload';
import photos from '../examples/photos.json';
import quotes from '../examples/quotes.json';
import settings from '../examples/settings.json';
import '../../../welcome/welcome.scss';
import { MdOutlineExtensionOff } from 'react-icons/md';
export default class Create extends PureComponent {
constructor() {
super();
this.state = {
currentTab: 1,
addonMetadata: {
name: '',
description: '',
type: '',
version: '',
author: '',
icon_url: '',
screenshot_url: '',
},
addonData: '',
settingsClasses: {
current: 'toggle lightTheme',
json: 'toggle lightTheme',
},
};
}
changeTab(tab, type) {
if (type) {
return this.setState({
currentTab: tab,
addonMetadata: {
type,
},
});
} else {
this.setState({
currentTab: tab,
});
}
}
importSettings(input) {
const data = input || localStorage;
let settings = {};
const ignore = [
'statsData',
'firstRun',
'showWelcome',
'language',
'installed',
'stats',
'backup_settings',
'showReminder',
'experimental',
'debugtimeout',
'quoteLanguage',
'birthday',
'location',
'greetingName',
'backgroundStartTime',
];
Object.keys(data).forEach((key) => {
if (ignore.includes(key)) {
return;
}
settings[key] = localStorage.getItem(key);
});
this.setState({
addonData: settings,
settingsClasses: {
current: input ? 'toggle lightTheme active' : 'toggle lightTheme',
json: input ? 'toggle lightTheme active' : 'toggle lightTheme',
},
});
toast(variables.getMessage('toasts.imported'));
}
importQuotes() {
this.setState({
addonData: JSON.parse(localStorage.getItem('customQuote')) || [],
});
toast(variables.getMessage('toasts.imported'));
}
importPhotos() {
let data = [];
try {
const current = JSON.parse(localStorage.getItem('customBackground')) || [];
data = current.map((item) => {
return {
photographer: '???',
location: '???',
url: {
default: item,
},
};
});
toast(variables.getMessage('toasts.imported'));
} catch (e) {
console.log(e);
toast(variables.getMessage('toasts.error'));
}
this.setState({
addonData: data,
});
}
downloadAddon() {
saveFile(
{
name: this.state.addonMetadata.name,
description: this.state.addonMetadata.description,
type: this.state.addonMetadata.type,
version: this.state.addonMetadata.version,
author: this.state.addonMetadata.author,
icon_url: this.state.addonMetadata.icon_url,
screenshot_url: this.state.addonMetadata.screenshot_url,
[this.state.addonMetadata.type]: this.state.addonData,
},
this.state.addonMetadata.name + '.json',
);
this.state = {};
}
render() {
let tabContent;
const chooseType = (
<>
{/*<div className="smallBanner">
<div className="content">
<span className="title">Help Centre</span>
<span className="subtitle">
Home of all docs and guides on creating addons for Mue's marketplace
</span>
</div>
<button>
Open Site
<MdOpenInNew />
</button>
</div>*/}
<div className="themesToggleArea">
<div className="options">
<div className="toggle lightTheme" onClick={() => this.changeTab(2, 'photos')}>
<Photos />
<span>{variables.getMessage('modals.main.marketplace.photo_packs')}</span>
</div>
<div className="toggle lightTheme" onClick={() => this.changeTab(2, 'quotes')}>
<Quotes />
<span>{variables.getMessage('modals.main.marketplace.quote_packs')}</span>
</div>
<div className="toggle lightTheme" onClick={() => this.changeTab(2, 'settings')}>
<Settings />
<span>{variables.getMessage('modals.main.marketplace.preset_settings')}</span>
</div>
</div>
</div>
</>
);
const nextDescriptionDisabled = !(
this.state.addonMetadata.name !== undefined &&
this.state.addonMetadata.description !== undefined &&
this.state.addonMetadata.version !== undefined &&
this.state.addonMetadata.author !== undefined &&
this.state.addonMetadata.icon_url !== undefined &&
this.state.addonMetadata.screenshot_url !== undefined
);
const setMetadata = (data, type) => {
this.setState({
addonMetadata: {
name: type === 'name' ? data : this.state.addonMetadata.name,
description: type === 'description' ? data : 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:
type === 'screenshot_url' ? data : this.state.addonMetadata.screenshot_url,
type: this.state.addonMetadata.type,
},
});
};
const writeDescription = (
<>
<div className="smallBanner">
<div className="content">
<span className="title" style={{ textTransform: 'capitalize' }}>
{variables.getMessage(
'modals.main.addons.create.types.' + this.state.addonMetadata.type,
) || 'marketplace'}
</span>
<span className="subtitle">
{variables.getMessage(
'modals.main.addons.create.descriptions.' + this.state.addonMetadata.type,
) || 'marketplace'}
</span>
</div>
<button
onClick={() =>
saveFile(
this.state.addonMetadata.type,
`mue-marketplace-${this.state.addonMetadata.type}.json`,
)
}
>
{variables.getMessage('modals.main.addons.create.metadata.example')}
<MdDownload />
</button>
</div>
<SettingsItem title={variables.getMessage('modals.main.addons.create.metadata.name')}>
<TextField
varient="outlined"
InputLabelProps={{ shrink: true }}
value={this.state.addonMetadata.name}
onInput={(e) => setMetadata(e.target.value, 'name')}
/>
</SettingsItem>
<div className="settingsRow">
<div className="content">
<span className="title">
{variables.getMessage('modals.main.marketplace.product.version')}
</span>
<span className="subtitle">
<InfoTooltip
title={variables.getMessage('modals.main.addons.create.information')}
subtitle={variables.getMessage('modals.main.addons.create.information_subtitle')}
/>
</span>
</div>
<div className="action">
<TextField
varient="outlined"
InputLabelProps={{ shrink: true }}
value={this.state.addonMetadata.version}
onInput={(e) => setMetadata(e.target.value, 'version')}
/>
</div>
</div>
<SettingsItem title={variables.getMessage('modals.main.marketplace.product.author')}>
<TextField
varient="outlined"
InputLabelProps={{ shrink: true }}
value={this.state.addonMetadata.author}
onInput={(e) => setMetadata(e.target.value, 'author')}
/>
</SettingsItem>
<SettingsItem title={variables.getMessage('modals.main.addons.create.metadata.icon_url')}>
<TextField
varient="outlined"
InputLabelProps={{ shrink: true }}
value={this.state.addonMetadata.icon_url}
onInput={(e) => setMetadata(e.target.value, 'icon_url')}
/>
</SettingsItem>
<SettingsItem
title={variables.getMessage('modals.main.addons.create.metadata.screenshot_url')}
>
<TextField
varient="outlined"
InputLabelProps={{ shrink: true }}
value={this.state.addonMetadata.screenshot_url}
onInput={(e) => setMetadata(e.target.value, 'screenshot_url')}
/>
</SettingsItem>
<SettingsItem
title={variables.getMessage('modals.main.addons.create.metadata.description')}
final={true}
>
<TextField
varient="outlined"
InputLabelProps={{ shrink: true }}
multiline
spellCheck={false}
rows={4}
value={this.state.addonMetadata.description}
onInput={(e) => setMetadata(e.target.value, 'description')}
/>
</SettingsItem>
<div className="createButtons">
<button onClick={() => this.changeTab(1)}>
{variables.getMessage('modals.welcome.buttons.previous')}
</button>
<button
onClick={() => this.changeTab(this.state.addonMetadata.type)}
disabled={nextDescriptionDisabled}
>
{variables.getMessage('modals.welcome.buttons.next')}
</button>
</div>
</>
);
// settings
const nextSettingsDisabled = this.state.addonData === '';
const importSettings = (
<>
<SettingsItem
final={true}
title={variables.getMessage('modals.welcome.sections.settings.title')}
>
<div className="themesToggleArea">
<div className="options" style={{ maxWidth: '512px' }}>
<div
className={this.state.settingsClasses.current}
onClick={() => this.importSettings()}
>
<ExportIcon />
<span>{variables.getMessage('modals.main.addons.create.settings.current')}</span>
</div>
<div
className={this.state.settingsClasses.json}
onClick={() => document.getElementById('file-input').click()}
>
<ImportIcon />
<span>{variables.getMessage('modals.main.addons.create.settings.json')}</span>
</div>
</div>
</div>
</SettingsItem>
<SettingsItem final={true}>
<FileUpload
id="file-input"
type="settings"
accept="application/json"
loadFunction={(e) => this.importSettings(JSON.parse(e))}
/>
</SettingsItem>
<div className="createButtons">
<button onClick={() => this.changeTab(2)}>
{variables.getMessage('modals.welcome.buttons.previous')}
</button>
<button onClick={() => this.changeTab(3)} disabled={nextSettingsDisabled}>
{variables.getMessage('modals.welcome.buttons.next')}
</button>
</div>
</>
);
// quotes
const nextQuotesDisabled = !(
this.state.addonMetadata.type === 'quotes' && this.state.addonData.quotes !== ''
);
const addQuotes = (
<>
<SettingsItem
final={true}
title={variables.getMessage('modals.main.addons.create.quotes.title')}
/>
<SettingsItem
final={true}
title={variables.getMessage('modals.main.addons.create.settings.current')}
>
<div className="themesToggleArea">
<div className="options">
<div
onClick={() => this.importQuotes()}
className="toggle lightTheme"
style={{ width: '60%', margin: '10px 0 10px 0' }}
>
<ExportIcon />
<span>{variables.getMessage('modals.main.addons.create.settings.current')}</span>
</div>
</div>
</div>
</SettingsItem>
<div className="createButtons">
<button onClick={() => this.changeTab(2)}>
{variables.getMessage('modals.welcome.buttons.previous')}
</button>
<button onClick={() => this.changeTab(3)} disabled={nextQuotesDisabled}>
{variables.getMessage('modals.welcome.buttons.next')}
</button>
</div>
</>
);
// photos
const nextPhotosDisabled = !(this.state.addonData.photos !== '');
const addPhotos = (
<>
<SettingsItem
final={true}
title={variables.getMessage('modals.main.addons.create.photos.title')}
subtitle={variables.getMessage('modals.main.addons.create.import_custom')}
>
<div className="themesToggleArea">
<div className="options">
<div
onClick={() => this.importPhotos()}
className="toggle lightTheme"
style={{ width: '60%', margin: '10px 0 10px 0' }}
>
<ExportIcon />
<span>{variables.getMessage('modals.main.addons.create.settings.current')}</span>
</div>
</div>
</div>
</SettingsItem>
<br />
<div className="createButtons">
<button onClick={() => this.changeTab(2)}>
{variables.getMessage('modals.welcome.buttons.previous')}
</button>
<button onClick={() => this.changeTab(3)} disabled={nextPhotosDisabled}>
{variables.getMessage('modals.welcome.buttons.next')}
</button>
</div>
</>
);
const downloadAddon = (
<>
<div className="smallBanner">
<div className="content">
<span className="title" style={{ textTransform: 'capitalize' }}>
{variables.getMessage('modals.main.addons.create.publishing.title')}
</span>
<span className="subtitle">
{variables.getMessage('modals.main.addons.create.publishing.subtitle')}
</span>
</div>
<button>
{variables.getMessage('modals.main.addons.create.publishing.button')}
<MdOpenInNew />
</button>
</div>
<SettingsItem final={true}>
<div className="themesToggleArea">
<div className="options">
<div
onClick={() => this.downloadAddon()}
className="toggle lightTheme"
style={{ width: '60%', margin: '10px 0 10px 0' }}
>
<ExportIcon />
<span>{variables.getMessage('modals.main.addons.create.finish.download')}</span>
</div>
</div>
</div>
</SettingsItem>
<div className="createButtons">
<button
onClick={() => this.changeTab(this.state.addonMetadata.type)}
disabled={nextDescriptionDisabled}
>
{variables.getMessage('modals.welcome.buttons.previous')}
</button>
</div>
</>
);
switch (this.state.currentTab) {
case 2:
tabContent = writeDescription;
break;
case 'settings':
tabContent = importSettings;
break;
case 'quotes':
tabContent = addQuotes;
break;
case 'photos':
tabContent = addPhotos;
break;
case 3:
tabContent = downloadAddon;
break;
default:
tabContent = chooseType;
}
return (
<>
<div className="flexTopMarketplace">
{this.state.currentTab !== 1 && (
<Tooltip
title={variables.getMessage('modals.main.marketplace.product.buttons.back')}
key="backArrow"
>
<div className="returnButton">
<MdArrowBack className="backArrow" onClick={() => this.changeTab(1)} />
</div>
</Tooltip>
)}
<span className="mainTitle">
{variables.getMessage('modals.main.addons.create.other_title')}
{variables.getMessage('modals.main.addons.create.title')}
</span>
</div>
{tabContent}
<div className="emptyItems">
<div className="emptyNewMessage">
<MdOutlineExtensionOff />
<span className="title">
{variables.getMessage('modals.main.addons.create.moved_title')}
</span>
<span className="subtitle">
{variables.getMessage('modals.main.addons.create.moved_description')}
</span>
<div className="createButtons">
<button> {variables.getMessage('modals.main.addons.create.moved_button')}</button>
</div>
</div>
</div>
</>
);
}

1338
src/translations/de_DE.json
View File

File diff suppressed because it is too large Load Diff

54
src/translations/en_GB.json
View File

@ -567,57 +567,9 @@
},
"create": {
"title": "Create",
"example": "Example",
"other_title": "Create Add-on",
"create_type": "Create {type} Pack",
"types": {
"settings": "Preset Settings",
"photos": "Photo Pack",
"quotes": "Quote Pack"
},
"descriptions": {
"settings": "Collection of settings to customise Mue.",
"photos": "Collection of photos relating to a topic.",
"quotes": "Collection of quotes relating to a topic."
},
"information": "Information",
"information_subtitle": "For example: 1.2.3 (major update, minor update, patch update)",
"import_custom": "Import from custom settings.",
"publishing": {
"title": "Next step, Publishing...",
"subtitle": "Visit the Mue Knowledgebase on information on how to publish your newly created addon.",
"button": "Learn more"
},
"metadata": {
"name": "Name",
"icon_url": "Icon URL",
"screenshot_url": "Screenshot URL",
"description": "Description",
"example": "Download example"
},
"finish": {
"title": "Finish",
"download": "Download Add-on"
},
"settings": {
"current": "Import current",
"json": "Upload JSON"
},
"photos": {
"title": "Add Photos"
},
"quotes": {
"title": "Add Quotes",
"api": {
"title": "API",
"url": "Quote URL",
"name": "JSON quote name",
"author": "JSON quote author (or override)"
},
"local": {
"title": "Local"
}
}
"moved_title": "Create add-on has moved!",
"moved_description": "Following the 7.1 update, the creation of addons has now moved to the web UI",
"moved_button": "Get Started"
}
}
},

1338
src/translations/en_US.json
View File

File diff suppressed because it is too large Load Diff

1338
src/translations/es.json
View File

File diff suppressed because it is too large Load Diff

54
src/translations/es_419.json
View File

@ -567,57 +567,9 @@
},
"create": {
"title": "Crear",
"example": "Example",
"other_title": "Crear complemento",
"create_type": "Create {type} Pack",
"types": {
"settings": "Preset Settings Pack",
"photos": "Photo Pack",
"quotes": "Quotes Pack"
},
"descriptions": {
"settings": "Collection of settings to customise Mue.",
"photos": "Collection of photos relating to a topic.",
"quotes": "Collection of quotes relating to a topic."
},
"information": "Information",
"information_subtitle": "For example: 1.2.3 (major update, minor update, patch update)",
"import_custom": "Import from custom settings.",
"publishing": {
"title": "Next step, Publishing...",
"subtitle": "Visit the Mue Knowledgebase on information on how to publish your newly created addon.",
"button": "Learn more"
},
"metadata": {
"name": "Nombre",
"icon_url": "URL del icono",
"screenshot_url": "URL de la captura de pantalla",
"description": "Descripción",
"example": "Download example"
},
"finish": {
"title": "Terminar",
"download": "Descargar complemento"
},
"settings": {
"current": "Importar la configuración actual",
"json": "Subir JSON"
},
"photos": {
"title": "Añadir fotos"
},
"quotes": {
"title": "Añadir citación",
"api": {
"title": "API",
"url": "Quote URL",
"name": "JSON quote name",
"author": "JSON quote author (or override)"
},
"local": {
"title": "Local"
}
}
"moved_title": "Create add-on has moved!",
"moved_description": "Following the 7.1 update, the creation of addons has now moved to the web UI",
"moved_button": "Get Started"
}
}
},

1338
src/translations/fr.json
View File

File diff suppressed because it is too large Load Diff

54
src/translations/id_ID.json
View File

@ -567,57 +567,9 @@
},
"create": {
"title": "Buat",
"example": "Example",
"other_title": "Buat Add-on",
"create_type": "Create {type} Pack",
"types": {
"settings": "Preset Settings Pack",
"photos": "Photo Pack",
"quotes": "Quotes Pack"
},
"descriptions": {
"settings": "Collection of settings to customise Mue.",
"photos": "Collection of photos relating to a topic.",
"quotes": "Collection of quotes relating to a topic."
},
"information": "Information",
"information_subtitle": "For example: 1.2.3 (major update, minor update, patch update)",
"import_custom": "Import from custom settings.",
"publishing": {
"title": "Next step, Publishing...",
"subtitle": "Visit the Mue Knowledgebase on information on how to publish your newly created addon.",
"button": "Learn more"
},
"metadata": {
"name": "Nama",
"icon_url": "URL Ikon",
"screenshot_url": "URL Screenshot",
"description": "Deskripsi",
"example": "Download example"
},
"finish": {
"title": "Selesai",
"download": "Unduh Add-on"
},
"settings": {
"current": "Impor",
"json": "Unggah JSON"
},
"photos": {
"title": "Tambahkan foto"
},
"quotes": {
"title": "Tambahkan Kutipan",
"api": {
"title": "API",
"url": "URL Kutipan",
"name": "Nama Kutipan",
"author": "Penulis kutipan"
},
"local": {
"title": "Lokal"
}
}
"moved_title": "Create add-on has moved!",
"moved_description": "Following the 7.1 update, the creation of addons has now moved to the web UI",
"moved_button": "Get Started"
}
}
},

1338
src/translations/nl.json
View File

File diff suppressed because it is too large Load Diff

1338
src/translations/no.json
View File

File diff suppressed because it is too large Load Diff

1338
src/translations/pt.json
View File

File diff suppressed because it is too large Load Diff

1338
src/translations/pt_BR.json
View File

File diff suppressed because it is too large Load Diff

1338
src/translations/ru.json
View File

File diff suppressed because it is too large Load Diff

1338
src/translations/tr_TR.json
View File

File diff suppressed because it is too large Load Diff

1338
src/translations/zh_CN.json
View File

File diff suppressed because it is too large Load Diff