refactor: partition of quote settings for increased readability

This commit is contained in:
alexsparkes 2024-02-08 18:34:44 +00:00
parent 8e1b7ab2ac
commit 16639c4b94
4 changed files with 125 additions and 135 deletions

View File

@ -19,7 +19,7 @@
"@fontsource/montserrat": "5.0.16",
"@muetab/react-color-gradient-picker": "0.1.2",
"@muetab/react-sortable-hoc": "^2.0.1",
"@mui/material": "5.15.7",
"@mui/material": "5.15.9",
"@sentry/react": "^7.100.1",
"embla-carousel-autoplay": "8.0.0-rc22",
"embla-carousel-react": "8.0.0-rc22",
@ -47,7 +47,7 @@
"stylelint": "^16.2.1",
"stylelint-config-standard-scss": "^13.0.0",
"stylelint-scss": "^6.1.0",
"vite": "5.0.12",
"vite": "5.1.0",
"vite-plugin-progress": "^0.0.7"
},
"scripts": {

View File

@ -26,8 +26,8 @@ dependencies:
specifier: ^2.0.1
version: 2.0.1(prop-types@15.8.1)(react-dom@18.2.0)(react@18.2.0)
'@mui/material':
specifier: 5.15.7
version: 5.15.7(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react-dom@18.2.0)(react@18.2.0)
specifier: 5.15.9
version: 5.15.9(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react-dom@18.2.0)(react@18.2.0)
'@sentry/react':
specifier: ^7.100.1
version: 7.100.1(react@18.2.0)
@ -74,7 +74,7 @@ devDependencies:
version: 0.0.2
'@vitejs/plugin-react-swc':
specifier: ^3.6.0
version: 3.6.0(vite@5.0.12)
version: 3.6.0(vite@5.1.0)
adm-zip:
specifier: ^0.5.10
version: 0.5.10
@ -106,11 +106,11 @@ devDependencies:
specifier: ^6.1.0
version: 6.1.0(stylelint@16.2.1)
vite:
specifier: 5.0.12
version: 5.0.12(@types/node@20.11.16)(sass@1.70.0)
specifier: 5.1.0
version: 5.1.0(@types/node@20.11.16)(sass@1.70.0)
vite-plugin-progress:
specifier: ^0.0.7
version: 0.0.7(vite@5.0.12)
version: 0.0.7(vite@5.1.0)
packages:
@ -2227,8 +2227,8 @@ packages:
react-dom: 18.2.0(react@18.2.0)
dev: false
/@mui/base@5.0.0-beta.34(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-e2mbTGTtReD/y5RFwnhkl1Tgl3XwgJhY040IlfkTVaU9f5LWrVhEnpRsYXu3B1CtLrwiWs4cu7aMHV9yRd4jpw==}
/@mui/base@5.0.0-beta.36(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-6A8fYiXgjqTO6pgj31Hc8wm1M3rFYCxDRh09dBVk0L0W4cb2lnurRJa3cAyic6hHY+we1S58OdGYRbKmOsDpGQ==}
engines: {node: '>=12.0.0'}
peerDependencies:
'@types/react': ^17.0.0 || ^18.0.0
@ -2241,7 +2241,7 @@ packages:
'@babel/runtime': 7.23.9
'@floating-ui/react-dom': 2.0.8(react-dom@18.2.0)(react@18.2.0)
'@mui/types': 7.2.13
'@mui/utils': 5.15.8(react@18.2.0)
'@mui/utils': 5.15.9(react@18.2.0)
'@popperjs/core': 2.11.8
clsx: 2.1.0
prop-types: 15.8.1
@ -2249,12 +2249,12 @@ packages:
react-dom: 18.2.0(react@18.2.0)
dev: false
/@mui/core-downloads-tracker@5.15.8:
resolution: {integrity: sha512-W6R1dZJgbYfLmQKf7Es2WUw0pkDkEVUf2jA22DYu0JOa9M3pjvOqoC9HgOPGNNJTu6SCWLSWh3euv1Jn2NmeQA==}
/@mui/core-downloads-tracker@5.15.9:
resolution: {integrity: sha512-CSDpVevGaxsvMkiYBZ8ztki1z/eT0mM2MqUT21eCRiMz3DU4zQw5rXG5ML/yTuJF9Z2Wv9SliIeaRAuSR/9Nig==}
dev: false
/@mui/material@5.15.7(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-l6+AiKZH3iOJmZCnlpel8ghYQe9Lq0BEuKP8fGj3g5xz4arO9GydqYAtLPMvuHKtArj8lJGNuT2yHYxmejincA==}
/@mui/material@5.15.9(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-kbHTZDcFmN8GHKzRpImUEl9AJfFWI/0Kl+DsYVT3kHzQWUuHiKm3uHXR1RCOqr7H8IgHFPdbxItmCSQ/mj7zgg==}
engines: {node: '>=12.0.0'}
peerDependencies:
'@emotion/react': ^11.5.0
@ -2273,11 +2273,11 @@ packages:
'@babel/runtime': 7.23.9
'@emotion/react': 11.11.3(react@18.2.0)
'@emotion/styled': 11.11.0(@emotion/react@11.11.3)(react@18.2.0)
'@mui/base': 5.0.0-beta.34(react-dom@18.2.0)(react@18.2.0)
'@mui/core-downloads-tracker': 5.15.8
'@mui/system': 5.15.8(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react@18.2.0)
'@mui/base': 5.0.0-beta.36(react-dom@18.2.0)(react@18.2.0)
'@mui/core-downloads-tracker': 5.15.9
'@mui/system': 5.15.9(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react@18.2.0)
'@mui/types': 7.2.13
'@mui/utils': 5.15.8(react@18.2.0)
'@mui/utils': 5.15.9(react@18.2.0)
'@types/react-transition-group': 4.4.10
clsx: 2.1.0
csstype: 3.1.3
@ -2288,8 +2288,8 @@ packages:
react-transition-group: 4.4.5(react-dom@18.2.0)(react@18.2.0)
dev: false
/@mui/private-theming@5.15.8(react@18.2.0):
resolution: {integrity: sha512-HMDPO416iMZPqs8nGUL3GJMDNpJtE1Uefw/Aw+zTKJHX5JnT+Bms41e2065BUT/zR5dYcKjFP4gQMwW5QX7nvA==}
/@mui/private-theming@5.15.9(react@18.2.0):
resolution: {integrity: sha512-/aMJlDOxOTAXyp4F2rIukW1O0anodAMCkv1DfBh/z9vaKHY3bd5fFf42wmP+0GRmwMinC5aWPpNfHXOED1fEtg==}
engines: {node: '>=12.0.0'}
peerDependencies:
'@types/react': ^17.0.0 || ^18.0.0
@ -2299,13 +2299,13 @@ packages:
optional: true
dependencies:
'@babel/runtime': 7.23.9
'@mui/utils': 5.15.8(react@18.2.0)
'@mui/utils': 5.15.9(react@18.2.0)
prop-types: 15.8.1
react: 18.2.0
dev: false
/@mui/styled-engine@5.15.8(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react@18.2.0):
resolution: {integrity: sha512-31ZKPGsS0OiSwuzi8RWoTiWRdUWXPRiOQkyG9bRYX/zvoYeBXEdbsLEgbryug5mVRsPpvwbH5q/i/t6MkjQ71g==}
/@mui/styled-engine@5.15.9(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react@18.2.0):
resolution: {integrity: sha512-NRKtYkL5PZDH7dEmaLEIiipd3mxNnQSO+Yo8rFNBNptY8wzQnQ+VjayTq39qH7Sast5cwHKYFusUrQyD+SS4Og==}
engines: {node: '>=12.0.0'}
peerDependencies:
'@emotion/react': ^11.4.1
@ -2326,8 +2326,8 @@ packages:
react: 18.2.0
dev: false
/@mui/system@5.15.8(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react@18.2.0):
resolution: {integrity: sha512-BUMJvlz1UqIqDPyrvc+MwjOUkWKskUPAOUuRh2KMAworiXuuUmtIivxSfdGll2ex6RHSylu4yc5dJZByOI8EcQ==}
/@mui/system@5.15.9(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react@18.2.0):
resolution: {integrity: sha512-SxkaaZ8jsnIJ77bBXttfG//LUf6nTfOcaOuIgItqfHv60ZCQy/Hu7moaob35kBb+guxVJnoSZ+7vQJrA/E7pKg==}
engines: {node: '>=12.0.0'}
peerDependencies:
'@emotion/react': ^11.5.0
@ -2345,10 +2345,10 @@ packages:
'@babel/runtime': 7.23.9
'@emotion/react': 11.11.3(react@18.2.0)
'@emotion/styled': 11.11.0(@emotion/react@11.11.3)(react@18.2.0)
'@mui/private-theming': 5.15.8(react@18.2.0)
'@mui/styled-engine': 5.15.8(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react@18.2.0)
'@mui/private-theming': 5.15.9(react@18.2.0)
'@mui/styled-engine': 5.15.9(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react@18.2.0)
'@mui/types': 7.2.13
'@mui/utils': 5.15.8(react@18.2.0)
'@mui/utils': 5.15.9(react@18.2.0)
clsx: 2.1.0
csstype: 3.1.3
prop-types: 15.8.1
@ -2364,8 +2364,8 @@ packages:
optional: true
dev: false
/@mui/utils@5.15.8(react@18.2.0):
resolution: {integrity: sha512-Q6Z/xSxi1Z6xQ5Qj9p4ZTHudwfrrwFALtU6H1O222pXudg9Qm0zHdiwJQiHT9L6jMIN78ZujEfGHserMoHUrQw==}
/@mui/utils@5.15.9(react@18.2.0):
resolution: {integrity: sha512-yDYfr61bCYUz1QtwvpqYy/3687Z8/nS4zv7lv/ih/6ZFGMl1iolEvxRmR84v2lOYxlds+kq1IVYbXxDKh8Z9sg==}
engines: {node: '>=12.0.0'}
peerDependencies:
'@types/react': ^17.0.0 || ^18.0.0
@ -2951,13 +2951,13 @@ packages:
resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
dev: true
/@vitejs/plugin-react-swc@3.6.0(vite@5.0.12):
/@vitejs/plugin-react-swc@3.6.0(vite@5.1.0):
resolution: {integrity: sha512-XFRbsGgpGxGzEV5i5+vRiro1bwcIaZDIdBRP16qwm+jP68ue/S8FJTBEgOeojtVDYrbSua3XFp71kC8VJE6v+g==}
peerDependencies:
vite: ^4 || ^5
dependencies:
'@swc/core': 1.4.0
vite: 5.0.12(@types/node@20.11.16)(sass@1.70.0)
vite: 5.1.0(@types/node@20.11.16)(sass@1.70.0)
transitivePeerDependencies:
- '@swc/helpers'
dev: true
@ -6422,7 +6422,7 @@ packages:
spdx-expression-parse: 3.0.1
dev: true
/vite-plugin-progress@0.0.7(vite@5.0.12):
/vite-plugin-progress@0.0.7(vite@5.1.0):
resolution: {integrity: sha512-zyvKdcc/X+6hnw3J1HVV1TKrlFKC4Rh8GnDnWG/2qhRXjqytTcM++xZ+SAPnoDsSyWl8O93ymK0wZRgHAoglEQ==}
engines: {node: '>=14', pnpm: '>=7.0.0'}
peerDependencies:
@ -6431,11 +6431,11 @@ packages:
picocolors: 1.0.0
progress: 2.0.3
rd: 2.0.1
vite: 5.0.12(@types/node@20.11.16)(sass@1.70.0)
vite: 5.1.0(@types/node@20.11.16)(sass@1.70.0)
dev: true
/vite@5.0.12(@types/node@20.11.16)(sass@1.70.0):
resolution: {integrity: sha512-4hsnEkG3q0N4Tzf1+t6NdN9dg/L3BM+q8SWgbSPnJvrgH2kgdyzfVJwbR1ic69/4uMJJ/3dqDZZE5/WwqW8U1w==}
/vite@5.1.0(@types/node@20.11.16)(sass@1.70.0):
resolution: {integrity: sha512-STmSFzhY4ljuhz14bg9LkMTk3d98IO6DIArnTY6MeBwiD1Za2StcQtz7fzOUnRCqrHSD5+OS2reg4HOz1eoLnw==}
engines: {node: ^18.0.0 || >=20.0.0}
hasBin: true
peerDependencies:

View File

@ -1,6 +1,7 @@
import { MdOutlineKeyboardArrowRight } from 'react-icons/md';
import React from 'react';
export default function Section({ title, subtitle, icon, onClick }) {
export default function Section({ title, subtitle, icon, onClick, children }) {
return (
<div className="moreSettings" onClick={onClick}>
<div className="left">
@ -11,7 +12,7 @@ export default function Section({ title, subtitle, icon, onClick }) {
</div>
</div>
<div className="action">
<MdOutlineKeyboardArrowRight />
{React.Children.count(children) === 0 ? <MdOutlineKeyboardArrowRight /> : children}
</div>
</div>
);

View File

@ -13,6 +13,8 @@ import Header from '../Header';
import Checkbox from '../Checkbox';
import Dropdown from '../Dropdown';
import SettingsItem from '../SettingsItem';
import Section from '../Section';
import PreferencesWrapper from '../PreferencesWrapper';
import { toast } from 'react-toastify';
import EventBus from 'modules/helpers/eventbus';
@ -94,6 +96,69 @@ export default class QuoteSettings extends PureComponent {
render() {
const QUOTE_SECTION = 'modals.main.settings.sections.quote';
const ButtonOptions = () => {
return (
<SettingsItem
title={variables.getMessage(`${QUOTE_SECTION}.buttons.title`)}
subtitle={variables.getMessage('modals.main.settings.sections.quote.buttons.subtitle')}
>
<Checkbox
name="copyButton"
text={variables.getMessage(`${QUOTE_SECTION}.buttons.copy`)}
category="quote"
/>
<Checkbox
name="quoteShareButton"
text={variables.getMessage('widgets.quote.share')}
category="quote"
/>
<Checkbox
name="favouriteQuoteEnabled"
text={variables.getMessage(`${QUOTE_SECTION}.buttons.favourite`)}
category="quote"
/>
</SettingsItem>
);
};
const SourceDropdown = () => {
return (
<Dropdown
name="quoteType"
label={variables.getMessage('modals.main.settings.sections.background.type.title')}
onChange={(value) => this.setState({ quoteType: value })}
category="quote"
>
{this.marketplaceType()}
<option value="api">
{variables.getMessage('modals.main.settings.sections.background.type.api')}
</option>
<option value="custom">{variables.getMessage(`${QUOTE_SECTION}.custom`)}</option>
</Dropdown>
);
};
const AdditionalOptions = () => {
return (
<SettingsItem
title={variables.getMessage('modals.main.settings.additional_settings')}
subtitle={variables.getMessage(`${QUOTE_SECTION}.additional`)}
final={true}
>
<Checkbox
name="authorLink"
text={variables.getMessage(`${QUOTE_SECTION}.author_link`)}
element=".other"
/>
<Checkbox
name="authorImg"
text={variables.getMessage(`${QUOTE_SECTION}.author_img`)}
element=".other"
/>
</SettingsItem>
);
};
let customSettings;
if (this.state.quoteType === 'custom' && this.state.sourceSection === true) {
customSettings = (
@ -189,104 +254,28 @@ export default class QuoteSettings extends PureComponent {
switch={true}
/>
)}
<div className="moreSettings" onClick={() => this.setState({ sourceSection: true })}>
<div className="left">
<MdSource />
<div className="content">
<span className="title">
{variables.getMessage('modals.main.settings.sections.background.source.title')}
</span>
<span className="subtitle">
{variables.getMessage(`${QUOTE_SECTION}.source_subtitle`)}
</span>
</div>
</div>
<div className="action">
<Dropdown
name="quoteType"
label={variables.getMessage('modals.main.settings.sections.background.type.title')}
onChange={(value) => this.setState({ quoteType: value })}
category="quote"
>
{this.marketplaceType()}
<option value="api">
{variables.getMessage('modals.main.settings.sections.background.type.api')}
</option>
<option value="custom">{variables.getMessage(`${QUOTE_SECTION}.custom`)}</option>
</Dropdown>
</div>
</div>
{this.state.sourceSection && (
<SettingsItem
title={variables.getMessage('modals.main.settings.sections.background.source.title')}
subtitle={variables.getMessage(`${QUOTE_SECTION}.source_subtitle`)}
final={true}
>
<SourceDropdown />
</SettingsItem>
)}
{!this.state.sourceSection && (
<>
<SettingsItem
title={variables.getMessage(`${QUOTE_SECTION}.buttons.title`)}
subtitle={variables.getMessage(
'modals.main.settings.sections.quote.buttons.subtitle',
)}
<PreferencesWrapper setting="quote" zoomSetting="zoomQuote" switch={true}>
<Section
icon={<MdSource />}
title={variables.getMessage('modals.main.settings.sections.background.source.title')}
subtitle={variables.getMessage(`${QUOTE_SECTION}.source_subtitle`)}
onClick={() => this.setState({ sourceSection: true })}
>
<Checkbox
name="copyButton"
text={variables.getMessage(`${QUOTE_SECTION}.buttons.copy`)}
category="quote"
/>
<Checkbox
name="quoteShareButton"
text={variables.getMessage('widgets.quote.share')}
category="quote"
/>
<Checkbox
name="favouriteQuoteEnabled"
text={variables.getMessage(`${QUOTE_SECTION}.buttons.favourite`)}
category="quote"
/>
</SettingsItem>
<SettingsItem
title={variables.getMessage('modals.main.settings.additional_settings')}
subtitle={variables.getMessage(`${QUOTE_SECTION}.additional`)}
final={true}
>
{/*<Dropdown
label={variables.getMessage(
'modals.main.settings.sections.background.interval.title',
)}
name="quotechange"
name2="quoteStartTime"
value2={Date.now()}
>
<option value="refresh">{variables.getMessage('tabname')}</option>
<option value={10000}>10 seconds</option>
<option value={60000}>
{variables.getMessage('modals.main.settings.sections.background.interval.minute')}
</option>
<option value={1800000}>
{variables.getMessage(
'modals.main.settings.sections.background.interval.half_hour',
)}
</option>
<option value={3600000}>
{variables.getMessage('modals.main.settings.sections.background.interval.hour')}
</option>
<option value={86400000}>
{variables.getMessage('modals.main.settings.sections.background.interval.day')}
</option>
<option value={604800000}>{variables.getMessage('widgets.date.week')}</option>
<option value={2628000000}>
{variables.getMessage('modals.main.settings.sections.background.interval.month')}
</option>
</Dropdown>*/}
<Checkbox
name="authorLink"
text={variables.getMessage(`${QUOTE_SECTION}.author_link`)}
element=".other"
/>
<Checkbox
name="authorImg"
text={variables.getMessage(`${QUOTE_SECTION}.author_img`)}
element=".other"
/>
</SettingsItem>
</>
<SourceDropdown />
</Section>
<ButtonOptions />
<AdditionalOptions />
</PreferencesWrapper>
)}
{customSettings}
</>