From 4498f5b934559f69496dc487909bdc75d7bf7519 Mon Sep 17 00:00:00 2001 From: alexsparkes Date: Sun, 10 Apr 2022 23:01:22 +0100 Subject: [PATCH] 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 --- .DS_Store | Bin 0 -> 6148 bytes prettierrc | 7 + .../main/marketplace/sections/Create.jsx | 473 ++++++++++-------- .../modals/main/scss/settings/_buttons.scss | 112 ----- .../modals/main/settings/Slider.jsx | 1 + .../modals/main/settings/sections/About.jsx | 6 +- .../main/settings/sections/Greeting.jsx | 10 +- src/components/widgets/navbar/Navbar.jsx | 6 +- src/scss/_variables.scss | 2 +- 9 files changed, 292 insertions(+), 325 deletions(-) create mode 100644 .DS_Store create mode 100644 prettierrc diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..de931c6c004a24794d5162b55e27fe665e96227a GIT binary patch literal 6148 zcmeHK%}(1u7@Q>$gn(Ldiz)p$Mrnn+Wd-a`HLE?>g4^Cme zZ&%1(lX9z2^?lavtk*O9Gg*7H0NlZ1^aa=f&|wm6cbUBs@?26Q)o`w zJew9-gKZV&fI0Bq9FTW+9aos~`iA=ZD<6e@rv6exhyD>6*%`T0^pT^$4X!c4n0Mc6 zZ@;J?BJ~E2aEPxM;soayR=yQvyS<3r!B6&e!`83a-wgAJe;4t$$t^G<_kv0(EjUUl zBi&P^>){vs$?=2vnEcOF6?(68k~!8}SQ|$zY)37u(5ajE6*s%o-Ll6yuL<#%S045C z$i7a!X1Qc}otg!IfhiRcSN*QGzlk$?y^jHoiG8{ema=x5rEicwFb+w@rx!2mm&1j_hYLNsa6)m~JKIl`4wrhg+#E0m>JGI0?T+mK!`0{iy2$R#0dwHLa=^6* z=Ys=IDeSF{$;n=uFkLc92(R?05@umL)`D!syG$B { if ( - key === 'statsData' || - key === 'firstRun' || - key === 'showWelcome' || - key === 'language' || - key === 'installed' || - key === 'stats' || - key === 'backup_settings' || - key === 'showReminder' || - key === 'experimental' || - key === 'debugtimeout' || - key === 'quotelanguage' + key === "statsData" || + key === "firstRun" || + key === "showWelcome" || + key === "language" || + key === "installed" || + key === "stats" || + key === "backup_settings" || + key === "showReminder" || + key === "experimental" || + key === "debugtimeout" || + key === "quotelanguage" ) { return; } @@ -84,12 +84,14 @@ export default class Create extends PureComponent { this.setState({ addonData: settings, settingsClasses: { - current: input ? 'toggle lightTheme active' : 'toggle lightTheme', - json: input ? 'toggle lightTheme active' : 'toggle lightTheme', + current: 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) { @@ -102,7 +104,7 @@ export default class Create extends PureComponent { icon_url: this.state.addonMetadata.icon_url, screenshot_url: this.state.addonMetadata.screenshot_url, }; - if (type === 'quotePack') { + if (type === "quotePack") { this.setState({ addonMetadata: { addonMetadata, @@ -115,9 +117,9 @@ export default class Create extends PureComponent { addonMetadata, }, addonData: { - url: '', - name: '', - author: '', + url: "", + name: "", + author: "", }, }); } @@ -126,38 +128,45 @@ export default class Create extends PureComponent { updateQuotePackAPI(type, data) { this.setState({ addonData: { - url: type === 'url' ? data : this.state.addonData.url || '', - name: type === 'name' ? data : this.state.addonData.name || '', - author: type === 'author' ? data : this.state.addonData.author || '', + url: type === "url" ? data : this.state.addonData.url || "", + name: type === "name" ? data : this.state.addonData.name || "", + author: type === "author" ? data : this.state.addonData.author || "", }, }); } importQuotes() { 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() { let data = []; try { - const current = JSON.parse(localStorage.getItem('customBackground')) || []; + const current = + JSON.parse(localStorage.getItem("customBackground")) || []; data = current.map((item) => { return { - photographer: '???', - location: '???', + photographer: "???", + location: "???", url: { default: item, }, }; }); - toast(variables.language.getMessage(variables.languagecode, 'toasts.imported')); + toast( + variables.language.getMessage(variables.languagecode, "toasts.imported") + ); } catch (e) { console.log(e); - toast(variables.language.getMessage(variables.languagecode, 'toasts.error')); + toast( + variables.language.getMessage(variables.languagecode, "toasts.error") + ); } this.setState({ @@ -171,20 +180,23 @@ export default class Create extends PureComponent { name: this.state.addonMetadata.name, description: this.state.addonMetadata.description, 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, 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.addonMetadata.name + ".json" ); } render() { let tabContent; - const getMessage = (text) => variables.language.getMessage(variables.languagecode, text); + const getMessage = (text) => + variables.language.getMessage(variables.languagecode, text); const chooseType = ( <> @@ -192,7 +204,8 @@ export default class Create extends PureComponent {
Help Centre - 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
- + setMetadata(e.target.value, 'name')} + onInput={(e) => setMetadata(e.target.value, "name")} /> - + setMetadata(e.target.value, 'version')} + onInput={(e) => setMetadata(e.target.value, "version")} /> - + setMetadata(e.target.value, 'author')} + onInput={(e) => setMetadata(e.target.value, "author")} /> - + setMetadata(e.target.value, 'icon_url')} + onInput={(e) => setMetadata(e.target.value, "icon_url")} /> - + setMetadata(e.target.value, 'screenshot_url')} + onInput={(e) => setMetadata(e.target.value, "screenshot_url")} /> - + setMetadata(e.target.value, 'description')} + onInput={(e) => setMetadata(e.target.value, "description")} />
-
); // settings - const nextSettingsDisabled = this.state.addonData === ''; + const nextSettingsDisabled = this.state.addonData === ""; const importSettings = ( <> -

{getMessage('modals.welcome.sections.settings.title')}

-
-
-
this.importSettings()} - > - - {getMessage('modals.main.addons.create.settings.current')} -
-
document.getElementById('file-input').click()} - > - - {getMessage('modals.main.addons.create.settings.json')} + +
+
+
this.importSettings()} + > + + + {getMessage("modals.main.addons.create.settings.current")} + +
+
document.getElementById("file-input").click()} + > + + + {getMessage("modals.main.addons.create.settings.json")} + +
+ + + + this.importSettings(JSON.parse(e.target.result)) + } + /> + +
+ +
- this.importSettings(JSON.parse(e.target.result))} - /> -
-
- - ); // quotes const nextQuotesDisabled = !( - (this.state.addonMetadata.type === 'quote_api' && - this.state.addonData.url !== '' && - this.state.addonData.name !== '' && - this.state.addonData.author !== '') || - (this.state.addonMetadata.type === 'quotes' && this.state.addonData.quotes !== '') + (this.state.addonMetadata.type === "quote_api" && + this.state.addonData.url !== "" && + this.state.addonData.name !== "" && + this.state.addonData.author !== "") || + (this.state.addonMetadata.type === "quotes" && + this.state.addonData.quotes !== "") ); const addQuotes = ( <> -

{getMessage('modals.main.addons.create.quotes.title')}

- this.updateQuotePackType(e)} - > - - - - {this.state.addonMetadata.type === 'quote_api' ? ( + + this.updateQuotePackType(e)} + > + + + + + {this.state.addonMetadata.type === "quote_api" ? ( <> this.updateQuotePack(e.target.value, 'url')} + onInput={(e) => this.updateQuotePack(e.target.value, "url")} /> this.updateQuotePack(e.target.value, 'name')} + onInput={(e) => this.updateQuotePack(e.target.value, "name")} /> this.updateQuotePack(e.target.value, 'author')} + onInput={(e) => this.updateQuotePack(e.target.value, "author")} />

) : ( - <> +
this.importQuotes()} className="toggle lightTheme" - style={{ width: '60%', margin: '10px 0 10px 0' }} + style={{ width: "60%", margin: "10px 0 10px 0" }} > - {getMessage('modals.main.addons.create.settings.current')} + + {getMessage("modals.main.addons.create.settings.current")} +
-
- + )} - - +
+ + +
); // photos const nextPhotosDisabled = !( - this.state.addonData.photos !== '' && this.state.addonData.photos !== [] + this.state.addonData.photos !== "" && this.state.addonData.photos !== [] ); const addPhotos = ( <> -

{getMessage('modals.main.addons.create.photos.title')}

-
-
-
this.importPhotos()} - className="toggle lightTheme" - style={{ width: '60%', margin: '10px 0 10px 0' }} - > - - {getMessage('modals.main.addons.create.settings.current')} + +
+
+
this.importPhotos()} + className="toggle lightTheme" + style={{ width: "60%", margin: "10px 0 10px 0" }} + > + + + {getMessage("modals.main.addons.create.settings.current")} + +
-
+
- - +
+ + +
); @@ -493,11 +558,12 @@ export default class Create extends PureComponent { <>
- + Next step, Publishing... - 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.
@@ -523,15 +591,14 @@ export default class Create extends PureComponent {
{/**/} @@ -554,13 +619,13 @@ export default class Create extends PureComponent { case 2: tabContent = writeDescription; break; - case 'settings': + case "settings": tabContent = importSettings; break; - case 'quotes': + case "quotes": tabContent = addQuotes; break; - case 'photos': + case "photos": tabContent = addPhotos; break; case 3: @@ -583,7 +648,9 @@ export default class Create extends PureComponent {
)} - {getMessage('modals.main.addons.create.other_title')} + + {getMessage("modals.main.addons.create.other_title")} +
{tabContent} diff --git a/src/components/modals/main/scss/settings/_buttons.scss b/src/components/modals/main/scss/settings/_buttons.scss index a82e932f..b6488d14 100644 --- a/src/components/modals/main/scss/settings/_buttons.scss +++ b/src/components/modals/main/scss/settings/_buttons.scss @@ -1,113 +1 @@ @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; -} -*/ diff --git a/src/components/modals/main/settings/Slider.jsx b/src/components/modals/main/settings/Slider.jsx index 7a476ccc..1404386d 100644 --- a/src/components/modals/main/settings/Slider.jsx +++ b/src/components/modals/main/settings/Slider.jsx @@ -63,6 +63,7 @@ export default class SliderComponent extends PureComponent { <> {this.props.title} + {Number(this.state.value / 100)}x {variables.language.getMessage( diff --git a/src/components/modals/main/settings/sections/About.jsx b/src/components/modals/main/settings/sections/About.jsx index 7563eeef..a79dd21d 100644 --- a/src/components/modals/main/settings/sections/About.jsx +++ b/src/components/modals/main/settings/sections/About.jsx @@ -1,6 +1,6 @@ import variables from 'modules/variables'; 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 { SiGithubsponsors, SiLiberapay, SiKofi, SiPatreon } from 'react-icons/si'; 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')}
+ + + Form +
+ + + + +

{getMessage('modals.main.settings.sections.greeting.birthday_date')}

 - - - - - {/*

{getMessage('modals.main.settings.sections.greeting.birthday')}


diff --git a/src/components/widgets/navbar/Navbar.jsx b/src/components/widgets/navbar/Navbar.jsx index 23d1fb2b..1a9336a6 100644 --- a/src/components/widgets/navbar/Navbar.jsx +++ b/src/components/widgets/navbar/Navbar.jsx @@ -63,8 +63,8 @@ export default class Navbar extends PureComponent { const backgroundEnabled = localStorage.getItem('background') === 'true'; const navbar = ( -
-
+
+
{localStorage.getItem('view') === 'true' && backgroundEnabled ? : null} {localStorage.getItem('notesEnabled') === 'true' ? : null} {localStorage.getItem('todo') === 'true' ? : null} @@ -94,7 +94,7 @@ export default class Navbar extends PureComponent { variables.languagecode, 'modals.main.navbar.settings', )} - >
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 270f7f3e..893b8951 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -82,7 +82,7 @@ $themes: ( 'modal-background': #2f3542, 'modal-sidebar': #353b48, 'modal-sidebarActive': rgba(65, 71, 84, 0.9), - 'link': rgba(83, 82, 237, 1), + 'link': rgb(108, 108, 238), ), );