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

refactor(settings): Move to new style settings row 

Comprised of:
- Row element
- Content (title and description)
- Action
This commit is contained in:
alexsparkes 2024-02-09 22:22:11 +00:00
parent 48b919ebea
commit 84c1bc8df1
21 changed files with 1254 additions and 1071 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -47,7 +47,7 @@
"stylelint": "^16.2.1", "stylelint": "^16.2.1",
"stylelint-config-standard-scss": "^13.0.0", "stylelint-config-standard-scss": "^13.0.0",
"stylelint-scss": "^6.1.0", "stylelint-scss": "^6.1.0",
"vite": "5.1.0", "vite": "5.1.1",
"vite-plugin-progress": "^0.0.7" "vite-plugin-progress": "^0.0.7"
}, },
"scripts": { "scripts": {

42
pnpm-lock.yaml
View File

@ -1,5 +1,9 @@
lockfileVersion: '6.0' lockfileVersion: '6.0'
settings:
autoInstallPeers: true
excludeLinksFromLockfile: false
dependencies: dependencies:
'@eartharoid/i18n': '@eartharoid/i18n':
specifier: 1.2.1 specifier: 1.2.1
@ -74,7 +78,7 @@ devDependencies:
version: 0.0.2 version: 0.0.2
'@vitejs/plugin-react-swc': '@vitejs/plugin-react-swc':
specifier: ^3.6.0 specifier: ^3.6.0
version: 3.6.0(vite@5.1.0) version: 3.6.0(vite@5.1.1)
adm-zip: adm-zip:
specifier: ^0.5.10 specifier: ^0.5.10
version: 0.5.10 version: 0.5.10
@ -106,11 +110,11 @@ devDependencies:
specifier: ^6.1.0 specifier: ^6.1.0
version: 6.1.0(stylelint@16.2.1) version: 6.1.0(stylelint@16.2.1)
vite: vite:
specifier: 5.1.0 specifier: 5.1.1
version: 5.1.0(@types/node@20.11.17)(sass@1.70.0) version: 5.1.1(@types/node@20.11.17)(sass@1.70.0)
vite-plugin-progress: vite-plugin-progress:
specifier: ^0.0.7 specifier: ^0.0.7
version: 0.0.7(vite@5.1.0) version: 0.0.7(vite@5.1.1)
packages: packages:
@ -2951,13 +2955,13 @@ packages:
resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==} resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
dev: true dev: true
/@vitejs/plugin-react-swc@3.6.0(vite@5.1.0): /@vitejs/plugin-react-swc@3.6.0(vite@5.1.1):
resolution: {integrity: sha512-XFRbsGgpGxGzEV5i5+vRiro1bwcIaZDIdBRP16qwm+jP68ue/S8FJTBEgOeojtVDYrbSua3XFp71kC8VJE6v+g==} resolution: {integrity: sha512-XFRbsGgpGxGzEV5i5+vRiro1bwcIaZDIdBRP16qwm+jP68ue/S8FJTBEgOeojtVDYrbSua3XFp71kC8VJE6v+g==}
peerDependencies: peerDependencies:
vite: ^4 || ^5 vite: ^4 || ^5
dependencies: dependencies:
'@swc/core': 1.4.0 '@swc/core': 1.4.0
vite: 5.1.0(@types/node@20.11.17)(sass@1.70.0) vite: 5.1.1(@types/node@20.11.17)(sass@1.70.0)
transitivePeerDependencies: transitivePeerDependencies:
- '@swc/helpers' - '@swc/helpers'
dev: true dev: true
@ -3298,7 +3302,7 @@ packages:
hasBin: true hasBin: true
dependencies: dependencies:
caniuse-lite: 1.0.30001585 caniuse-lite: 1.0.30001585
electron-to-chromium: 1.4.662 electron-to-chromium: 1.4.664
node-releases: 2.0.14 node-releases: 2.0.14
update-browserslist-db: 1.0.13(browserslist@4.22.3) update-browserslist-db: 1.0.13(browserslist@4.22.3)
dev: true dev: true
@ -3657,8 +3661,8 @@ packages:
resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==} resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
dev: true dev: true
/electron-to-chromium@1.4.662: /electron-to-chromium@1.4.664:
resolution: {integrity: sha512-gfl1XVWTQmPHhqEG0kN77SpUxaqPpMb9r83PT4gvKhg7P3irSxru3lW85RxvK1uI1j2CAcTWPjG/HbE0IP/Rtg==} resolution: {integrity: sha512-k9VKKSkOSNPvSckZgDDl/IQx45E1quMjX8QfLzUsAs/zve8AyFDK+ByRynSP/OfEfryiKHpQeMf00z0leLCc3A==}
dev: true dev: true
/embla-carousel-autoplay@8.0.0-rc22(embla-carousel@8.0.0-rc22): /embla-carousel-autoplay@8.0.0-rc22(embla-carousel@8.0.0-rc22):
@ -5939,7 +5943,7 @@ packages:
resolution: {integrity: sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==} resolution: {integrity: sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==}
dependencies: dependencies:
spdx-expression-parse: 3.0.1 spdx-expression-parse: 3.0.1
spdx-license-ids: 3.0.16 spdx-license-ids: 3.0.17
dev: true dev: true
/spdx-exceptions@2.4.0: /spdx-exceptions@2.4.0:
@ -5950,11 +5954,11 @@ packages:
resolution: {integrity: sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==} resolution: {integrity: sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==}
dependencies: dependencies:
spdx-exceptions: 2.4.0 spdx-exceptions: 2.4.0
spdx-license-ids: 3.0.16 spdx-license-ids: 3.0.17
dev: true dev: true
/spdx-license-ids@3.0.16: /spdx-license-ids@3.0.17:
resolution: {integrity: sha512-eWN+LnM3GR6gPu35WxNgbGl8rmY1AEmoMDvL/QD6zYmPWgywxWqJWNdLGT+ke8dKNWrcYgYjPpG5gbTfghP8rw==} resolution: {integrity: sha512-sh8PWc/ftMqAAdFiBu6Fy6JUOYjqDJBJvIhpfDMyHrr0Rbp5liZqd4TjtQ/RgfLjKFZb+LMx5hpml5qOWy0qvg==}
dev: true dev: true
/split2@3.2.2: /split2@3.2.2:
@ -6422,7 +6426,7 @@ packages:
spdx-expression-parse: 3.0.1 spdx-expression-parse: 3.0.1
dev: true dev: true
/vite-plugin-progress@0.0.7(vite@5.1.0): /vite-plugin-progress@0.0.7(vite@5.1.1):
resolution: {integrity: sha512-zyvKdcc/X+6hnw3J1HVV1TKrlFKC4Rh8GnDnWG/2qhRXjqytTcM++xZ+SAPnoDsSyWl8O93ymK0wZRgHAoglEQ==} resolution: {integrity: sha512-zyvKdcc/X+6hnw3J1HVV1TKrlFKC4Rh8GnDnWG/2qhRXjqytTcM++xZ+SAPnoDsSyWl8O93ymK0wZRgHAoglEQ==}
engines: {node: '>=14', pnpm: '>=7.0.0'} engines: {node: '>=14', pnpm: '>=7.0.0'}
peerDependencies: peerDependencies:
@ -6431,11 +6435,11 @@ packages:
picocolors: 1.0.0 picocolors: 1.0.0
progress: 2.0.3 progress: 2.0.3
rd: 2.0.1 rd: 2.0.1
vite: 5.1.0(@types/node@20.11.17)(sass@1.70.0) vite: 5.1.1(@types/node@20.11.17)(sass@1.70.0)
dev: true dev: true
/vite@5.1.0(@types/node@20.11.17)(sass@1.70.0): /vite@5.1.1(@types/node@20.11.17)(sass@1.70.0):
resolution: {integrity: sha512-STmSFzhY4ljuhz14bg9LkMTk3d98IO6DIArnTY6MeBwiD1Za2StcQtz7fzOUnRCqrHSD5+OS2reg4HOz1eoLnw==} resolution: {integrity: sha512-wclpAgY3F1tR7t9LL5CcHC41YPkQIpKUGeIuT8MdNwNZr6OqOTLs7JX5vIHAtzqLWXts0T+GDrh9pN2arneKqg==}
engines: {node: ^18.0.0 || >=20.0.0} engines: {node: ^18.0.0 || >=20.0.0}
hasBin: true hasBin: true
peerDependencies: peerDependencies:
@ -6614,7 +6618,3 @@ packages:
resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==} resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
engines: {node: '>=10'} engines: {node: '>=10'}
dev: true dev: true
settings:
autoInstallPeers: true
excludeLinksFromLockfile: false

8
src/components/modals/main/scss/index.scss
View File

@ -256,6 +256,14 @@ h5 {
flex-flow: row; flex-flow: row;
align-items: center; align-items: center;
gap: 25px; gap: 25px;
svg {
@include themed() {
background-color: t($modal-sidebar);
box-shadow: t($boxShadow);
}
padding: 15px;
border-radius: 100%;
}
} }
.content { .content {

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

@ -9,7 +9,6 @@ import {
} from 'react-icons/md'; } from 'react-icons/md';
import Slider from './Slider'; import Slider from './Slider';
import SettingsItem from './SettingsItem';
import EventBus from 'modules/helpers/eventbus'; import EventBus from 'modules/helpers/eventbus';
import { values } from 'modules/helpers/settings/modals'; import { values } from 'modules/helpers/settings/modals';

35
src/components/modals/main/settings/PreferencesWrapper.jsx
View File

@ -1,5 +1,5 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import SettingsItem from './SettingsItem'; import { Row, Content, Action } from './SettingsItem';
import variables from 'modules/variables'; import variables from 'modules/variables';
import Slider from './Slider'; import Slider from './Slider';
@ -18,22 +18,25 @@ const PreferencesWrapper = ({ children, ...props }) => {
return ( return (
<div className={shown ? 'preferences' : 'preferencesInactive'}> <div className={shown ? 'preferences' : 'preferencesInactive'}>
{props.zoomSetting && ( {props.zoomSetting && (
<SettingsItem <Row>
title={variables.getMessage( <Content
'modals.main.settings.sections.appearance.accessibility.widget_zoom', title={variables.getMessage(
)} 'modals.main.settings.sections.appearance.accessibility.widget_zoom',
subtitle={variables.getMessage('modals.main.settings.sections.header.size')} )}
> subtitle={variables.getMessage('modals.main.settings.sections.header.size')}
<Slider
name={props.zoomSetting}
min="10"
max="400"
default="100"
display="%"
marks={values('zoom')}
category={props.zoomCategory || props.category}
/> />
</SettingsItem> <Action>
<Slider
name={props.zoomSetting}
min="10"
max="400"
default="100"
display="%"
marks={values('zoom')}
category={props.zoomCategory || props.category}
/>
</Action>
</Row>
)} )}
{children} {children}
</div> </div>

27
src/components/modals/main/settings/SettingsItem.jsx
View File

@ -1,15 +1,22 @@
import { memo } from 'react'; function Row(props) {
function SettingsItem({ final, title, subtitle, children }) {
return ( return (
<div className={final ? 'settingsRow settingsNoBorder' : 'settingsRow'}> <div className={props.final ? 'settingsRow settingsNoBorder' : 'settingsRow'}>
<div className="content"> {props.children}
<span className="title">{title}</span>
<span className="subtitle">{subtitle}</span>
</div>
<div className="action">{children}</div>
</div> </div>
); );
} }
export default memo(SettingsItem); function Content(props) {
return (
<div className="content">
<span className="title">{props.title}</span>
<span className="subtitle">{props.subtitle}</span>
</div>
);
}
function Action(props) {
return <div className="action">{props.children}</div>;
}
export { Row, Content, Action };

15
src/components/modals/main/settings/SettingsRow.jsx Normal file
View File

@ -0,0 +1,15 @@
import { memo } from 'react';
function SettingsRow({ final, title, subtitle, children }) {
return (
<div className={final ? 'settingsRow settingsNoBorder' : 'settingsRow'}>
<div className="content">
<span className="title">{title}</span>
<span className="subtitle">{subtitle}</span>
</div>
<div className="action">{children}</div>
</div>
);
}
export default memo(SettingsRow);

123
src/components/modals/main/settings/sections/Advanced.jsx
View File

@ -17,7 +17,8 @@ import Text from '../Text';
import Switch from '../Switch'; import Switch from '../Switch';
import ResetModal from '../ResetModal'; import ResetModal from '../ResetModal';
import Dropdown from '../Dropdown'; import Dropdown from '../Dropdown';
import SettingsItem from '../SettingsItem';
import { Row, Content, Action } from '../SettingsItem';
import Section from '../Section'; import Section from '../Section';
import time_zones from 'components/widgets/time/timezones.json'; import time_zones from 'components/widgets/time/timezones.json';
@ -92,67 +93,83 @@ export default function AdvancedSettings() {
onClick={() => setData(true)} onClick={() => setData(true)}
icon={<MdDataUsage />} icon={<MdDataUsage />}
/> />
<SettingsItem <Row>
title={variables.getMessage('modals.main.settings.sections.advanced.offline_mode')} <Content
subtitle={variables.getMessage( title={variables.getMessage('modals.main.settings.sections.advanced.offline_mode')}
'modals.main.settings.sections.advanced.offline_subtitle', subtitle={variables.getMessage(
)} 'modals.main.settings.sections.advanced.offline_subtitle',
> )}
<Switch name="offlineMode" element=".other" /> />
</SettingsItem> <Action>
<Switch name="offlineMode" element=".other" />
</Action>
</Row>
<SettingsItem <Row>
title={variables.getMessage('modals.main.settings.sections.advanced.timezone.title')} <Content
subtitle={variables.getMessage( title={variables.getMessage('modals.main.settings.sections.advanced.timezone.title')}
'modals.main.settings.sections.advanced.timezone.subtitle', subtitle={variables.getMessage(
)} 'modals.main.settings.sections.advanced.timezone.subtitle',
> )}
<Dropdown name="timezone" category="timezone" manual={true}> />
<MenuItem value="auto"> <Action>
{variables.getMessage('modals.main.settings.sections.advanced.timezone.automatic')} <Dropdown name="timezone" category="timezone" manual={true}>
</MenuItem> <MenuItem value="auto">
{time_zones.map((timezone) => ( {variables.getMessage(
<MenuItem value={timezone} key={timezone}> 'modals.main.settings.sections.advanced.timezone.automatic',
{timezone} )}
</MenuItem> </MenuItem>
))} {time_zones.map((timezone) => (
</Dropdown> <MenuItem value={timezone} key={timezone}>
</SettingsItem> {timezone}
<SettingsItem </MenuItem>
title={variables.getMessage('modals.main.settings.sections.advanced.tab_name')} ))}
subtitle={variables.getMessage( </Dropdown>
'modals.main.settings.sections.advanced.tab_name_subtitle', </Action>
)} </Row>
> <Row>
<Text name="tabName" default={variables.getMessage('tabname')} category="other" /> <Content
</SettingsItem> title={variables.getMessage('modals.main.settings.sections.advanced.tab_name')}
subtitle={variables.getMessage(
'modals.main.settings.sections.advanced.tab_name_subtitle',
)}
/>
<Action>
<Text name="tabName" default={variables.getMessage('tabname')} category="other" />
</Action>
</Row>
<FileUpload <FileUpload
id="file-input" id="file-input"
accept="application/json" accept="application/json"
type="settings" type="settings"
loadFunction={(e) => importSettings(e)} loadFunction={(e) => importSettings(e)}
/> />
<SettingsItem <Row>
title={variables.getMessage('modals.main.settings.sections.advanced.custom_css')} <Content
subtitle={variables.getMessage( title={variables.getMessage('modals.main.settings.sections.advanced.custom_css')}
'modals.main.settings.sections.advanced.custom_css_subtitle', subtitle={variables.getMessage(
)} 'modals.main.settings.sections.advanced.custom_css_subtitle',
> )}
<Text name="customcss" textarea={true} category="other" customcss={true} />
</SettingsItem>
<SettingsItem
title={variables.getMessage('modals.main.settings.sections.experimental.title')}
subtitle={variables.getMessage(
'modals.main.settings.sections.advanced.experimental_warning',
)}
final={true}
>
<Switch
name="experimental"
text={variables.getMessage('modals.main.settings.enabled')}
element=".other"
/> />
</SettingsItem> <Action>
<Text name="customcss" textarea={true} category="other" customcss={true} />
</Action>
</Row>
<Row final={true}>
<Content
title={variables.getMessage('modals.main.settings.sections.experimental.title')}
subtitle={variables.getMessage(
'modals.main.settings.sections.advanced.experimental_warning',
)}
/>
<Action>
<Switch
name="experimental"
text={variables.getMessage('modals.main.settings.enabled')}
element=".other"
/>
</Action>
</Row>
<Modal <Modal
closeTimeoutMS={100} closeTimeoutMS={100}
onRequestClose={() => setResetModal(false)} onRequestClose={() => setResetModal(false)}

349
src/components/modals/main/settings/sections/Appearance.jsx
View File

@ -7,7 +7,9 @@ import Dropdown from '../Dropdown';
import Radio from '../Radio'; import Radio from '../Radio';
import Slider from '../Slider'; import Slider from '../Slider';
import Text from '../Text'; import Text from '../Text';
import SettingsItem from '../SettingsItem';
import { Row, Content, Action } from '../SettingsItem';
import Section from '../Section'; import Section from '../Section';
import { MdSource, MdOutlineKeyboardArrowRight, MdAccessibility } from 'react-icons/md'; import { MdSource, MdOutlineKeyboardArrowRight, MdAccessibility } from 'react-icons/md';
@ -20,191 +22,212 @@ function AppearanceSettings() {
const ThemeSelection = () => { const ThemeSelection = () => {
return ( return (
<SettingsItem <Row>
title={variables.getMessage('modals.main.settings.sections.appearance.theme.title')} <Content
subtitle={variables.getMessage( title={variables.getMessage('modals.main.settings.sections.appearance.theme.title')}
'modals.main.settings.sections.appearance.theme.description', subtitle={variables.getMessage(
)} 'modals.main.settings.sections.appearance.theme.description',
> )}
<Radio
name="theme"
options={[
{
name: variables.getMessage('modals.main.settings.sections.appearance.theme.auto'),
value: 'auto',
},
{
name: variables.getMessage('modals.main.settings.sections.appearance.theme.light'),
value: 'light',
},
{
name: variables.getMessage('modals.main.settings.sections.appearance.theme.dark'),
value: 'dark',
},
]}
category="other"
/> />
</SettingsItem> <Action>
<Radio
name="theme"
options={[
{
name: variables.getMessage('modals.main.settings.sections.appearance.theme.auto'),
value: 'auto',
},
{
name: variables.getMessage('modals.main.settings.sections.appearance.theme.light'),
value: 'light',
},
{
name: variables.getMessage('modals.main.settings.sections.appearance.theme.dark'),
value: 'dark',
},
]}
category="other"
/>
</Action>
</Row>
); );
}; };
const FontOptions = () => { const FontOptions = () => {
return ( return (
<SettingsItem <Row>
title={variables.getMessage('modals.main.settings.sections.appearance.font.title')} <Content
subtitle={variables.getMessage('modals.main.settings.sections.appearance.font.description')} title={variables.getMessage('modals.main.settings.sections.appearance.font.title')}
> subtitle={variables.getMessage(
<Checkbox 'modals.main.settings.sections.appearance.font.description',
name="fontGoogle" )}
text={variables.getMessage('modals.main.settings.sections.appearance.font.google')}
category="other"
/> />
<Text <Action>
title={variables.getMessage('modals.main.settings.sections.appearance.font.custom')} <Checkbox
name="font" name="fontGoogle"
upperCaseFirst={true} text={variables.getMessage('modals.main.settings.sections.appearance.font.google')}
category="other" category="other"
/> />
<Dropdown <Text
label={variables.getMessage('modals.main.settings.sections.appearance.font.weight.title')} title={variables.getMessage('modals.main.settings.sections.appearance.font.custom')}
name="fontweight" name="font"
category="other" upperCaseFirst={true}
> category="other"
{/* names are taken from https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */} />
<option value="100"> <Dropdown
{variables.getMessage('modals.main.settings.sections.appearance.font.weight.thin')} label={variables.getMessage(
</option> 'modals.main.settings.sections.appearance.font.weight.title',
<option value="200">
{variables.getMessage(
'modals.main.settings.sections.appearance.font.weight.extra_light',
)} )}
</option> name="fontweight"
<option value="300"> category="other"
{variables.getMessage('modals.main.settings.sections.appearance.font.weight.light')} >
</option> {/* names are taken from https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */}
<option value="400"> <option value="100">
{variables.getMessage('modals.main.settings.sections.appearance.font.weight.normal')} {variables.getMessage('modals.main.settings.sections.appearance.font.weight.thin')}
</option> </option>
<option value="500"> <option value="200">
{variables.getMessage('modals.main.settings.sections.appearance.font.weight.medium')} {variables.getMessage(
</option> 'modals.main.settings.sections.appearance.font.weight.extra_light',
<option value="600"> )}
{variables.getMessage('modals.main.settings.sections.appearance.font.weight.semi_bold')} </option>
</option> <option value="300">
<option value="700"> {variables.getMessage('modals.main.settings.sections.appearance.font.weight.light')}
{variables.getMessage('modals.main.settings.sections.appearance.font.weight.bold')} </option>
</option> <option value="400">
<option value="800"> {variables.getMessage('modals.main.settings.sections.appearance.font.weight.normal')}
{variables.getMessage( </option>
'modals.main.settings.sections.appearance.font.weight.extra_bold', <option value="500">
{variables.getMessage('modals.main.settings.sections.appearance.font.weight.medium')}
</option>
<option value="600">
{variables.getMessage(
'modals.main.settings.sections.appearance.font.weight.semi_bold',
)}
</option>
<option value="700">
{variables.getMessage('modals.main.settings.sections.appearance.font.weight.bold')}
</option>
<option value="800">
{variables.getMessage(
'modals.main.settings.sections.appearance.font.weight.extra_bold',
)}
</option>
</Dropdown>
<Dropdown
label={variables.getMessage(
'modals.main.settings.sections.appearance.font.style.title',
)} )}
</option> name="fontstyle"
</Dropdown> category="other"
<Dropdown >
label={variables.getMessage('modals.main.settings.sections.appearance.font.style.title')} <option value="normal">
name="fontstyle" {variables.getMessage('modals.main.settings.sections.appearance.font.style.normal')}
category="other" </option>
> <option value="italic">
<option value="normal"> {variables.getMessage('modals.main.settings.sections.appearance.font.style.italic')}
{variables.getMessage('modals.main.settings.sections.appearance.font.style.normal')} </option>
</option> <option value="oblique">
<option value="italic"> {variables.getMessage('modals.main.settings.sections.appearance.font.style.oblique')}
{variables.getMessage('modals.main.settings.sections.appearance.font.style.italic')} </option>
</option> </Dropdown>
<option value="oblique"> </Action>
{variables.getMessage('modals.main.settings.sections.appearance.font.style.oblique')} </Row>
</option>
</Dropdown>
</SettingsItem>
); );
}; };
const WidgetStyle = () => { const WidgetStyle = () => {
return ( return (
<SettingsItem <Row>
title={variables.getMessage('modals.main.settings.sections.appearance.style.title')} <Content
subtitle={variables.getMessage( title={variables.getMessage('modals.main.settings.sections.appearance.style.title')}
'modals.main.settings.sections.appearance.style.description', subtitle={variables.getMessage(
)} 'modals.main.settings.sections.appearance.style.description',
> )}
<Radio
name="widgetStyle"
element=".other"
options={[
{
name: variables.getMessage('modals.main.settings.sections.appearance.style.legacy'),
value: 'legacy',
},
{
name: variables.getMessage('modals.main.settings.sections.appearance.style.new'),
value: 'new',
},
]}
category="widgets"
/> />
</SettingsItem> <Action>
<Radio
name="widgetStyle"
element=".other"
options={[
{
name: variables.getMessage('modals.main.settings.sections.appearance.style.legacy'),
value: 'legacy',
},
{
name: variables.getMessage('modals.main.settings.sections.appearance.style.new'),
value: 'new',
},
]}
category="widgets"
/>
</Action>
</Row>
); );
}; };
const AccessibilityOptions = () => { const AccessibilityOptions = () => {
return ( return (
<SettingsItem <Row final={true}>
title={variables.getMessage('modals.main.settings.sections.appearance.accessibility.title')} <Content
subtitle={variables.getMessage(
'modals.main.settings.sections.appearance.accessibility.description',
)}
final={true}
>
<Dropdown
label={variables.getMessage(
'modals.main.settings.sections.appearance.accessibility.text_shadow.title',
)}
name="textBorder"
category="other"
>
<option value="new">
{variables.getMessage(
'modals.main.settings.sections.appearance.accessibility.text_shadow.new',
)}
</option>{' '}
{/* default */}
<option value="true">
{variables.getMessage(
'modals.main.settings.sections.appearance.accessibility.text_shadow.old',
)}
</option>{' '}
{/* old checkbox setting */}
<option value="none">
{variables.getMessage(
'modals.main.settings.sections.appearance.accessibility.text_shadow.none',
)}
</option>
</Dropdown>
<Checkbox
text={variables.getMessage(
'modals.main.settings.sections.appearance.accessibility.animations',
)}
name="animations"
category="other"
/>
<Slider
title={variables.getMessage( title={variables.getMessage(
'modals.main.settings.sections.appearance.accessibility.toast_duration', 'modals.main.settings.sections.appearance.accessibility.title',
)}
subtitle={variables.getMessage(
'modals.main.settings.sections.appearance.accessibility.description',
)} )}
name="toastDisplayTime"
default="2500"
step="100"
min="500"
max="5000"
marks={values('toast')}
display={
' ' +
variables.getMessage(
'modals.main.settings.sections.appearance.accessibility.milliseconds',
)
}
/> />
</SettingsItem> <Action>
<Dropdown
label={variables.getMessage(
'modals.main.settings.sections.appearance.accessibility.text_shadow.title',
)}
name="textBorder"
category="other"
>
<option value="new">
{variables.getMessage(
'modals.main.settings.sections.appearance.accessibility.text_shadow.new',
)}
</option>{' '}
{/* default */}
<option value="true">
{variables.getMessage(
'modals.main.settings.sections.appearance.accessibility.text_shadow.old',
)}
</option>{' '}
{/* old checkbox setting */}
<option value="none">
{variables.getMessage(
'modals.main.settings.sections.appearance.accessibility.text_shadow.none',
)}
</option>
</Dropdown>
<Checkbox
text={variables.getMessage(
'modals.main.settings.sections.appearance.accessibility.animations',
)}
name="animations"
category="other"
/>
<Slider
title={variables.getMessage(
'modals.main.settings.sections.appearance.accessibility.toast_duration',
)}
name="toastDisplayTime"
default="2500"
step="100"
min="500"
max="5000"
marks={values('toast')}
display={
' ' +
variables.getMessage(
'modals.main.settings.sections.appearance.accessibility.milliseconds',
)
}
/>
</Action>
</Row>
); );
}; };

86
src/components/modals/main/settings/sections/Date.jsx
View File

@ -4,7 +4,8 @@ import { useState } from 'react';
import Header from '../Header'; import Header from '../Header';
import Checkbox from '../Checkbox'; import Checkbox from '../Checkbox';
import Dropdown from '../Dropdown'; import Dropdown from '../Dropdown';
import SettingsItem from '../SettingsItem';
import { Row, Content, Action } from '../SettingsItem';
import PreferencesWrapper from '../PreferencesWrapper'; import PreferencesWrapper from '../PreferencesWrapper';
export default function Date() { export default function Date() {
@ -77,47 +78,52 @@ export default function Date() {
switch={true} switch={true}
/> />
<PreferencesWrapper setting="date" switch={true} zoomSetting="zoomDate"> <PreferencesWrapper setting="date" switch={true} zoomSetting="zoomDate">
<SettingsItem <Row>
title={variables.getMessage('modals.main.settings.sections.time.type')} <Content
subtitle={variables.getMessage('modals.main.settings.sections.date.type.subtitle')} title={variables.getMessage('modals.main.settings.sections.time.type')}
> subtitle={variables.getMessage('modals.main.settings.sections.date.type.subtitle')}
<Dropdown
name="dateType"
onChange={(value) => {
setDateType(value);
localStorage.setItem('dateType', value);
}}
category="date"
>
<option value="long">
{variables.getMessage('modals.main.settings.sections.date.type.long')}
</option>
<option value="short">
{variables.getMessage('modals.main.settings.sections.date.type.short')}
</option>
</Dropdown>
</SettingsItem>
<SettingsItem
title={
dateType === 'long'
? variables.getMessage('modals.main.settings.sections.date.type.long')
: variables.getMessage('modals.main.settings.sections.date.type.short')
}
subtitle={variables.getMessage('modals.main.settings.sections.date.type_settings')}
final={true}
>
{dateType === 'long' ? longSettings : shortSettings}
<Checkbox
name="weeknumber"
text={variables.getMessage('modals.main.settings.sections.date.week_number')}
category="date"
/> />
<Checkbox <Action>
name="datezero" <Dropdown
text={variables.getMessage('modals.main.settings.sections.time.digital.zero')} name="dateType"
category="date" onChange={(value) => {
setDateType(value);
localStorage.setItem('dateType', value);
}}
category="date"
>
<option value="long">
{variables.getMessage('modals.main.settings.sections.date.type.long')}
</option>
<option value="short">
{variables.getMessage('modals.main.settings.sections.date.type.short')}
</option>
</Dropdown>
</Action>
</Row>
<Row final={true}>
<Content
title={
dateType === 'long'
? variables.getMessage('modals.main.settings.sections.date.type.long')
: variables.getMessage('modals.main.settings.sections.date.type.short')
}
subtitle={variables.getMessage('modals.main.settings.sections.date.type_settings')}
/> />
</SettingsItem> <Action>
{dateType === 'long' ? longSettings : shortSettings}
<Checkbox
name="weeknumber"
text={variables.getMessage('modals.main.settings.sections.date.week_number')}
category="date"
/>
<Checkbox
name="datezero"
text={variables.getMessage('modals.main.settings.sections.time.digital.zero')}
category="date"
/>
</Action>
</Row>
</PreferencesWrapper> </PreferencesWrapper>
</> </>
); );

95
src/components/modals/main/settings/sections/Experimental.jsx
View File

@ -6,7 +6,8 @@ import { TextField } from '@mui/material';
import EventBus from 'modules/helpers/eventbus'; import EventBus from 'modules/helpers/eventbus';
import { values } from 'modules/helpers/settings/modals'; import { values } from 'modules/helpers/settings/modals';
import SettingsItem from '../SettingsItem';
import { Row, Content, Action } from '../SettingsItem';
function ExperimentalSettings() { function ExperimentalSettings() {
const [eventType, setEventType] = useState(); const [eventType, setEventType] = useState();
@ -20,50 +21,56 @@ function ExperimentalSettings() {
<span className="subtitle"> <span className="subtitle">
{variables.getMessage('modals.main.settings.sections.experimental.warning')} {variables.getMessage('modals.main.settings.sections.experimental.warning')}
</span> </span>
<SettingsItem <Row>
title={variables.getMessage('modals.main.settings.sections.experimental.developer')} <Content
> title={variables.getMessage('modals.main.settings.sections.experimental.developer')}
<Checkbox name="debug" text="Debug hotkey (Ctrl + #)" element=".other" />
<Slider
title="Debug timeout"
name="debugtimeout"
min="0"
max="5000"
default="0"
step="100"
marks={values('experimental')}
element=".other"
/> />
<p style={{ textAlign: 'left' }}>Send Event</p> <Action>
<TextField <Checkbox name="debug" text="Debug hotkey (Ctrl + #)" element=".other" />
label={'Type'} <Slider
value={eventType} title="Debug timeout"
onChange={(e) => setEventType(e.target.value)} name="debugtimeout"
spellCheck={false} min="0"
varient="outlined" max="5000"
InputLabelProps={{ shrink: true }} default="0"
/> step="100"
<TextField marks={values('experimental')}
label={'Name'} element=".other"
value={eventName} />
onChange={(e) => setEventName(e.target.value)} <p style={{ textAlign: 'left' }}>Send Event</p>
spellCheck={false} <TextField
varient="outlined" label={'Type'}
InputLabelProps={{ shrink: true }} value={eventType}
/> onChange={(e) => setEventType(e.target.value)}
<button className="uploadbg" onClick={() => EventBus.emit(eventType, eventName)}> spellCheck={false}
Send varient="outlined"
</button> InputLabelProps={{ shrink: true }}
</SettingsItem> />
<SettingsItem title="Data" final={true}> <TextField
<button label={'Name'}
className="reset" value={eventName}
style={{ marginLeft: '0px' }} onChange={(e) => setEventName(e.target.value)}
onClick={() => localStorage.clear()} spellCheck={false}
> varient="outlined"
Clear LocalStorage InputLabelProps={{ shrink: true }}
</button> />
</SettingsItem> <button className="uploadbg" onClick={() => EventBus.emit(eventType, eventName)}>
Send
</button>
</Action>
</Row>
<Row final={true}>
<Content title="Data" />
<Action>
<button
className="reset"
style={{ marginLeft: '0px' }}
onClick={() => localStorage.clear()}
>
Clear LocalStorage
</button>
</Action>
</Row>
</> </>
); );
} }

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

@ -5,7 +5,8 @@ import Header from '../Header';
import Checkbox from '../Checkbox'; import Checkbox from '../Checkbox';
import Switch from '../Switch'; import Switch from '../Switch';
import Text from '../Text'; import Text from '../Text';
import SettingsItem from '../SettingsItem';
import { Row, Content, Action } from '../SettingsItem';
import PreferencesWrapper from '../PreferencesWrapper'; import PreferencesWrapper from '../PreferencesWrapper';
const GreetingSettings = () => { const GreetingSettings = () => {
@ -23,56 +24,63 @@ const GreetingSettings = () => {
const AdditionalOptions = () => { const AdditionalOptions = () => {
return ( return (
<SettingsItem <Row>
title={variables.getMessage('modals.main.settings.additional_settings')} <Content
subtitle={variables.getMessage(`${GREETING_SECTION}.additional`)} title={variables.getMessage('modals.main.settings.additional_settings')}
> subtitle={variables.getMessage(`${GREETING_SECTION}.additional`)}
<Checkbox
name="events"
text={variables.getMessage(`${GREETING_SECTION}.events`)}
category="greeting"
/> />
<Checkbox <Action>
name="defaultGreetingMessage" <Checkbox
text={variables.getMessage(`${GREETING_SECTION}.default`)} name="events"
category="greeting" text={variables.getMessage(`${GREETING_SECTION}.events`)}
/> category="greeting"
<Text />
title={variables.getMessage(`${GREETING_SECTION}.name`)} <Checkbox
name="greetingName" name="defaultGreetingMessage"
category="greeting" text={variables.getMessage(`${GREETING_SECTION}.default`)}
/> category="greeting"
</SettingsItem> />
<Text
title={variables.getMessage(`${GREETING_SECTION}.name`)}
name="greetingName"
category="greeting"
/>
</Action>
</Row>
); );
}; };
const BirthdayOptions = () => { const BirthdayOptions = () => {
return ( return (
<SettingsItem <Row final={true}>
title={variables.getMessage(`${GREETING_SECTION}.birthday`)} <Content
subtitle={variables.getMessage('modals.main.settings.sections.greeting.birthday_subtitle')} title={variables.getMessage(`${GREETING_SECTION}.birthday`)}
final={true} subtitle={variables.getMessage(
> 'modals.main.settings.sections.greeting.birthday_subtitle',
<Switch )}
name="birthdayenabled"
text={variables.getMessage('modals.main.settings.enabled')}
category="greeting"
/> />
<Checkbox <Action>
name="birthdayage" <Switch
text={variables.getMessage(`${GREETING_SECTION}.birthday_age`)} name="birthdayenabled"
category="greeting" text={variables.getMessage('modals.main.settings.enabled')}
/> category="greeting"
<p style={{ marginRight: 'auto' }}> />
{variables.getMessage(`${GREETING_SECTION}.birthday_date`)} <Checkbox
</p> name="birthdayage"
<input text={variables.getMessage(`${GREETING_SECTION}.birthday_age`)}
type="date" category="greeting"
onChange={changeDate} />
value={birthday.toISOString().substring(0, 10)} <p style={{ marginRight: 'auto' }}>
required {variables.getMessage(`${GREETING_SECTION}.birthday_date`)}
/> </p>
</SettingsItem> <input
type="date"
onChange={changeDate}
value={birthday.toISOString().substring(0, 10)}
required
/>
</Action>
</Row>
); );
}; };

15
src/components/modals/main/settings/sections/Message.jsx
View File

@ -4,7 +4,7 @@ import { MdCancel, MdAdd, MdOutlineTextsms } from 'react-icons/md';
import { toast } from 'react-toastify'; import { toast } from 'react-toastify';
import { TextareaAutosize } from '@mui/material'; import { TextareaAutosize } from '@mui/material';
import SettingsItem from '../SettingsItem'; import { Row, Content, Action } from '../SettingsItem';
import Header from '../Header'; import Header from '../Header';
import EventBus from 'modules/helpers/eventbus'; import EventBus from 'modules/helpers/eventbus';
@ -72,11 +72,14 @@ export default class Message extends PureComponent {
switch={true} switch={true}
/> />
<PreferencesWrapper setting="message" switch={true} zoomSetting="zoomMessage"> <PreferencesWrapper setting="message" switch={true} zoomSetting="zoomMessage">
<SettingsItem title={variables.getMessage(`${MESSAGE_SECTION}.messages`)} final={true}> <Row final={true}>
<button onClick={() => this.modifyMessage('add')}> <Content title={variables.getMessage(`${MESSAGE_SECTION}.messages`)} />
{variables.getMessage(`${MESSAGE_SECTION}.add`)} <MdAdd /> <Action>
</button> <button onClick={() => this.modifyMessage('add')}>
</SettingsItem> {variables.getMessage(`${MESSAGE_SECTION}.add`)} <MdAdd />
</button>
</Action>
</Row>
<div className="messagesContainer"> <div className="messagesContainer">
{this.state.messages.map((_url, index) => ( {this.state.messages.map((_url, index) => (
<div className="messageMap" key={index}> <div className="messageMap" key={index}>

160
src/components/modals/main/settings/sections/Navbar.jsx
View File

@ -10,7 +10,7 @@ import AddModal from './quicklinks/AddModal';
import Checkbox from '../Checkbox'; import Checkbox from '../Checkbox';
import Dropdown from '../Dropdown'; import Dropdown from '../Dropdown';
import SettingsItem from '../SettingsItem'; import { Row, Content, Action } from '../SettingsItem';
import Header from '../Header'; import Header from '../Header';
import { getTitleFromUrl, isValidUrl } from 'modules/helpers/settings/modals'; import { getTitleFromUrl, isValidUrl } from 'modules/helpers/settings/modals';
import QuickLink from './quicklinks/QuickLink'; import QuickLink from './quicklinks/QuickLink';
@ -121,86 +121,92 @@ function Navbar() {
zoomSetting="zoomNavbar" zoomSetting="zoomNavbar"
zoomCategory="navbar" zoomCategory="navbar"
/> />
<SettingsItem <Row final={false}>
title={variables.getMessage('modals.main.settings.additional_settings')} <Content
subtitle={variables.getMessage( title={variables.getMessage('modals.main.settings.additional_settings')}
'modals.main.settings.sections.appearance.navbar.additional',
)}
final={false}
>
<Checkbox
name="navbarHover"
text={variables.getMessage(`${NAVBAR_SECTION}.hover`)}
category="navbar"
/>
<Checkbox
name="notesEnabled"
text={variables.getMessage(`${NAVBAR_SECTION}.notes`)}
category="navbar"
/>
<Checkbox
name="view"
text={variables.getMessage('modals.main.settings.sections.background.buttons.view')}
category="navbar"
/>
<Checkbox
name="refresh"
text={variables.getMessage(`${NAVBAR_SECTION}.refresh`)}
category="navbar"
onChange={setShowRefreshOptions}
/>
<Checkbox
name="todoEnabled"
text={variables.getMessage('widgets.navbar.todo.title')}
category="navbar"
/>
<Checkbox
name="appsEnabled"
text={variables.getMessage('widgets.navbar.apps.title')}
category="navbar"
/>
</SettingsItem>
{showRefreshOptions && (
<SettingsItem
title={variables.getMessage(`${NAVBAR_SECTION}.refresh`)}
subtitle={variables.getMessage( subtitle={variables.getMessage(
'modals.main.settings.sections.appearance.navbar.refresh_subtitle', 'modals.main.settings.sections.appearance.navbar.additional',
)} )}
final={false} />
> <Action>
<Dropdown name="refreshOption" category="navbar"> <Checkbox
<option value="page"> name="navbarHover"
{variables.getMessage( text={variables.getMessage(`${NAVBAR_SECTION}.hover`)}
'modals.main.settings.sections.appearance.navbar.refresh_options.page', category="navbar"
)} />
</option> <Checkbox
<option value="background"> name="notesEnabled"
{variables.getMessage('modals.main.settings.sections.background.title')} text={variables.getMessage(`${NAVBAR_SECTION}.notes`)}
</option> category="navbar"
<option value="quote"> />
{variables.getMessage('modals.main.settings.sections.quote.title')} <Checkbox
</option> name="view"
<option value="quotebackground"> text={variables.getMessage('modals.main.settings.sections.background.buttons.view')}
{variables.getMessage('modals.main.settings.sections.quote.title')} +{' '} category="navbar"
{variables.getMessage('modals.main.settings.sections.background.title')} />
</option> <Checkbox
</Dropdown> name="refresh"
</SettingsItem> text={variables.getMessage(`${NAVBAR_SECTION}.refresh`)}
category="navbar"
onChange={setShowRefreshOptions}
/>
<Checkbox
name="todoEnabled"
text={variables.getMessage('widgets.navbar.todo.title')}
category="navbar"
/>
<Checkbox
name="appsEnabled"
text={variables.getMessage('widgets.navbar.apps.title')}
category="navbar"
/>
</Action>
</Row>
{showRefreshOptions && (
<Row final={false}>
<Content
title={variables.getMessage(`${NAVBAR_SECTION}.refresh`)}
subtitle={variables.getMessage(
'modals.main.settings.sections.appearance.navbar.refresh_subtitle',
)}
/>
<Action>
<Dropdown name="refreshOption" category="navbar">
<option value="page">
{variables.getMessage(
'modals.main.settings.sections.appearance.navbar.refresh_options.page',
)}
</option>
<option value="background">
{variables.getMessage('modals.main.settings.sections.background.title')}
</option>
<option value="quote">
{variables.getMessage('modals.main.settings.sections.quote.title')}
</option>
<option value="quotebackground">
{variables.getMessage('modals.main.settings.sections.quote.title')} +{' '}
{variables.getMessage('modals.main.settings.sections.background.title')}
</option>
</Dropdown>
</Action>
</Row>
)} )}
<SettingsItem <Row final={true}>
title={variables.getMessage('widgets.navbar.apps.title')} <Content
subtitle={variables.getMessage( title={variables.getMessage('widgets.navbar.apps.title')}
'modals.main.settings.sections.appearance.navbar.apps_subtitle', subtitle={variables.getMessage(
)} 'modals.main.settings.sections.appearance.navbar.apps_subtitle',
final={true} )}
> />
<button onClick={() => setAppsModalInfo((oldState) => ({ ...oldState, newLink: true }))}> <Action>
{variables.getMessage('modals.main.settings.sections.quicklinks.add_link')} <button onClick={() => setAppsModalInfo((oldState) => ({ ...oldState, newLink: true }))}>
<MdAddLink /> {variables.getMessage('modals.main.settings.sections.quicklinks.add_link')}
</button> <MdAddLink />
</SettingsItem> </button>
</Action>
</Row>
<div className="messagesContainer"> <div className="messagesContainer">
{appsModalInfo.items.map((item, i) => ( {appsModalInfo.items.map((item, i) => (

91
src/components/modals/main/settings/sections/QuickLinks.jsx
View File

@ -6,7 +6,7 @@ import Checkbox from '../Checkbox';
import Dropdown from '../Dropdown'; import Dropdown from '../Dropdown';
import Modal from 'react-modal'; import Modal from 'react-modal';
import SettingsItem from '../SettingsItem'; import { Row, Content, Action } from '../SettingsItem';
import AddModal from './quicklinks/AddModal'; import AddModal from './quicklinks/AddModal';
import EventBus from 'modules/helpers/eventbus'; import EventBus from 'modules/helpers/eventbus';
@ -138,49 +138,58 @@ export default class QuickLinks extends PureComponent {
switch={true} switch={true}
/> />
<PreferencesWrapper setting="quicklinksenabled" switch={true} zoomSetting="zoomQuicklinks"> <PreferencesWrapper setting="quicklinksenabled" switch={true} zoomSetting="zoomQuicklinks">
<SettingsItem <Row>
title={variables.getMessage('modals.main.settings.additional_settings')} <Content
subtitle={variables.getMessage(`${QUICKLINKS_SECTION}.additional`)} title={variables.getMessage('modals.main.settings.additional_settings')}
> subtitle={variables.getMessage(`${QUICKLINKS_SECTION}.additional`)}
<Checkbox
name="quicklinksnewtab"
text={variables.getMessage(`${QUICKLINKS_SECTION}.open_new`)}
category="quicklinks"
/> />
<Checkbox <Action>
name="quicklinkstooltip" <Checkbox
text={variables.getMessage(`${QUICKLINKS_SECTION}.tooltip`)} name="quicklinksnewtab"
category="quicklinks" text={variables.getMessage(`${QUICKLINKS_SECTION}.open_new`)}
category="quicklinks"
/>
<Checkbox
name="quicklinkstooltip"
text={variables.getMessage(`${QUICKLINKS_SECTION}.tooltip`)}
category="quicklinks"
/>
</Action>
</Row>
<Row>
<Content
title={variables.getMessage(`${QUICKLINKS_SECTION}.styling`)}
subtitle={variables.getMessage(
'modals.main.settings.sections.quicklinks.styling_description',
)}
/> />
</SettingsItem> <Action>
<SettingsItem <Dropdown
title={variables.getMessage(`${QUICKLINKS_SECTION}.styling`)} label={variables.getMessage(`${QUICKLINKS_SECTION}.style`)}
subtitle={variables.getMessage( name="quickLinksStyle"
'modals.main.settings.sections.quicklinks.styling_description', category="quicklinks"
)} >
> <option value="icon">
<Dropdown {variables.getMessage(`${QUICKLINKS_SECTION}.options.icon`)}
label={variables.getMessage(`${QUICKLINKS_SECTION}.style`)} </option>
name="quickLinksStyle" <option value="text">
category="quicklinks" {variables.getMessage(`${QUICKLINKS_SECTION}.options.text_only`)}
> </option>
<option value="icon"> <option value="metro">
{variables.getMessage(`${QUICKLINKS_SECTION}.options.icon`)} {variables.getMessage(`${QUICKLINKS_SECTION}.options.metro`)}
</option> </option>
<option value="text"> </Dropdown>
{variables.getMessage(`${QUICKLINKS_SECTION}.options.text_only`)} </Action>
</option> </Row>
<option value="metro">
{variables.getMessage(`${QUICKLINKS_SECTION}.options.metro`)}
</option>
</Dropdown>
</SettingsItem>
<SettingsItem title={variables.getMessage(`${QUICKLINKS_SECTION}.title`)} final={true}> <Row final={true}>
<button onClick={() => this.setState({ showAddModal: true })}> <Content title={variables.getMessage(`${QUICKLINKS_SECTION}.title`)} />
{variables.getMessage(`${QUICKLINKS_SECTION}.add_link`)} <MdAddLink /> <Action>
</button> <button onClick={() => this.setState({ showAddModal: true })}>
</SettingsItem> {variables.getMessage(`${QUICKLINKS_SECTION}.add_link`)} <MdAddLink />
</button>
</Action>
</Row>
{this.state.items.length === 0 && ( {this.state.items.length === 0 && (
<div className="photosEmpty"> <div className="photosEmpty">

112
src/components/modals/main/settings/sections/Quote.jsx
View File

@ -12,7 +12,8 @@ import TextareaAutosize from '@mui/material/TextareaAutosize';
import Header from '../Header'; import Header from '../Header';
import Checkbox from '../Checkbox'; import Checkbox from '../Checkbox';
import Dropdown from '../Dropdown'; import Dropdown from '../Dropdown';
import SettingsItem from '../SettingsItem';
import { Row, Content, Action } from '../SettingsItem';
import Section from '../Section'; import Section from '../Section';
import PreferencesWrapper from '../PreferencesWrapper'; import PreferencesWrapper from '../PreferencesWrapper';
@ -98,26 +99,29 @@ export default class QuoteSettings extends PureComponent {
const ButtonOptions = () => { const ButtonOptions = () => {
return ( return (
<SettingsItem <Row>
title={variables.getMessage(`${QUOTE_SECTION}.buttons.title`)} <Content
subtitle={variables.getMessage('modals.main.settings.sections.quote.buttons.subtitle')} 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 <Action>
name="quoteShareButton" <Checkbox
text={variables.getMessage('widgets.quote.share')} name="copyButton"
category="quote" text={variables.getMessage(`${QUOTE_SECTION}.buttons.copy`)}
/> category="quote"
<Checkbox />
name="favouriteQuoteEnabled" <Checkbox
text={variables.getMessage(`${QUOTE_SECTION}.buttons.favourite`)} name="quoteShareButton"
category="quote" text={variables.getMessage('widgets.quote.share')}
/> category="quote"
</SettingsItem> />
<Checkbox
name="favouriteQuoteEnabled"
text={variables.getMessage(`${QUOTE_SECTION}.buttons.favourite`)}
category="quote"
/>
</Action>
</Row>
); );
}; };
@ -140,22 +144,24 @@ export default class QuoteSettings extends PureComponent {
const AdditionalOptions = () => { const AdditionalOptions = () => {
return ( return (
<SettingsItem <Row final={true}>
title={variables.getMessage('modals.main.settings.additional_settings')} <Content
subtitle={variables.getMessage(`${QUOTE_SECTION}.additional`)} title={variables.getMessage('modals.main.settings.additional_settings')}
final={true} subtitle={variables.getMessage(`${QUOTE_SECTION}.additional`)}
>
<Checkbox
name="authorLink"
text={variables.getMessage(`${QUOTE_SECTION}.author_link`)}
element=".other"
/> />
<Checkbox <Action>
name="authorImg" <Checkbox
text={variables.getMessage(`${QUOTE_SECTION}.author_img`)} name="authorLink"
element=".other" text={variables.getMessage(`${QUOTE_SECTION}.author_link`)}
/> element=".other"
</SettingsItem> />
<Checkbox
name="authorImg"
text={variables.getMessage(`${QUOTE_SECTION}.author_img`)}
element=".other"
/>
</Action>
</Row>
); );
}; };
@ -163,15 +169,17 @@ export default class QuoteSettings extends PureComponent {
if (this.state.quoteType === 'custom' && this.state.sourceSection === true) { if (this.state.quoteType === 'custom' && this.state.sourceSection === true) {
customSettings = ( customSettings = (
<> <>
<SettingsItem <Row final={true}>
title={variables.getMessage(`${QUOTE_SECTION}.custom`)} <Content
subtitle={variables.getMessage(`${QUOTE_SECTION}.custom_subtitle`)} title={variables.getMessage(`${QUOTE_SECTION}.custom`)}
final={true} subtitle={variables.getMessage(`${QUOTE_SECTION}.custom_subtitle`)}
> />
<button onClick={() => this.modifyCustomQuote('add')}> <Action>
{variables.getMessage(`${QUOTE_SECTION}.add`)} <MdAdd /> <button onClick={() => this.modifyCustomQuote('add')}>
</button> {variables.getMessage(`${QUOTE_SECTION}.add`)} <MdAdd />
</SettingsItem> </button>
</Action>
</Row>
{this.state.customQuote.length !== 0 ? ( {this.state.customQuote.length !== 0 ? (
<div className="messagesContainer"> <div className="messagesContainer">
@ -255,13 +263,15 @@ export default class QuoteSettings extends PureComponent {
/> />
)} )}
{this.state.sourceSection && ( {this.state.sourceSection && (
<SettingsItem <Row final={true}>
title={variables.getMessage('modals.main.settings.sections.background.source.title')} <Content
subtitle={variables.getMessage(`${QUOTE_SECTION}.source_subtitle`)} title={variables.getMessage('modals.main.settings.sections.background.source.title')}
final={true} subtitle={variables.getMessage(`${QUOTE_SECTION}.source_subtitle`)}
> />
<SourceDropdown /> <Action>
</SettingsItem> <SourceDropdown />
</Action>
</Row>
)} )}
{!this.state.sourceSection && ( {!this.state.sourceSection && (
<PreferencesWrapper setting="quote" zoomSetting="zoomQuote" switch={true}> <PreferencesWrapper setting="quote" zoomSetting="zoomQuote" switch={true}>

135
src/components/modals/main/settings/sections/Search.jsx
View File

@ -6,7 +6,8 @@ import { MenuItem, TextField } from '@mui/material';
import Header from '../Header'; import Header from '../Header';
import Dropdown from '../Dropdown'; import Dropdown from '../Dropdown';
import Checkbox from '../Checkbox'; import Checkbox from '../Checkbox';
import SettingsItem from '../SettingsItem';
import { Row, Content, Action } from '../SettingsItem';
import EventBus from 'modules/helpers/eventbus'; import EventBus from 'modules/helpers/eventbus';
@ -69,63 +70,68 @@ export default class SearchSettings extends PureComponent {
const AdditionalOptions = () => { const AdditionalOptions = () => {
return ( return (
<SettingsItem <Row>
title={variables.getMessage('modals.main.settings.additional_settings')} <Content
subtitle={variables.getMessage(`${SEARCH_SECTION}.additional`)} title={variables.getMessage('modals.main.settings.additional_settings')}
> subtitle={variables.getMessage(`${SEARCH_SECTION}.additional`)}
{/* not supported on firefox */} />
{navigator.userAgent.includes('Chrome') && typeof InstallTrigger === 'undefined' ? ( <Action>
{/* not supported on firefox */}
{navigator.userAgent.includes('Chrome') && typeof InstallTrigger === 'undefined' ? (
<Checkbox
name="voiceSearch"
text={variables.getMessage(`${SEARCH_SECTION}.voice_search`)}
category="search"
/>
) : null}
<Checkbox <Checkbox
name="voiceSearch" name="searchDropdown"
text={variables.getMessage(`${SEARCH_SECTION}.voice_search`)} text={variables.getMessage(`${SEARCH_SECTION}.dropdown`)}
category="search"
element=".other"
/>
<Checkbox
name="searchFocus"
text={variables.getMessage(`${SEARCH_SECTION}.focus`)}
category="search"
element=".other"
/>
<Checkbox
name="autocomplete"
text={variables.getMessage(`${SEARCH_SECTION}.autocomplete`)}
category="search" category="search"
/> />
) : null} </Action>
<Checkbox </Row>
name="searchDropdown"
text={variables.getMessage(`${SEARCH_SECTION}.dropdown`)}
category="search"
element=".other"
/>
<Checkbox
name="searchFocus"
text={variables.getMessage(`${SEARCH_SECTION}.focus`)}
category="search"
element=".other"
/>
<Checkbox
name="autocomplete"
text={variables.getMessage(`${SEARCH_SECTION}.autocomplete`)}
category="search"
/>
</SettingsItem>
); );
}; };
const SearchEngineSelection = () => { const SearchEngineSelection = () => {
return ( return (
<SettingsItem <Row final={!this.state.customEnabled}>
title={variables.getMessage(`${SEARCH_SECTION}.search_engine`)} <Content
subtitle={variables.getMessage( title={variables.getMessage(`${SEARCH_SECTION}.search_engine`)}
'modals.main.settings.sections.search.search_engine_subtitle', subtitle={variables.getMessage(
)} 'modals.main.settings.sections.search.search_engine_subtitle',
final={!this.state.customEnabled} )}
> />
<Dropdown <Action>
name="searchEngine" <Dropdown
onChange={(value) => this.setSearchEngine(value)} name="searchEngine"
manual={true} onChange={(value) => this.setSearchEngine(value)}
> manual={true}
{searchEngines.map((engine) => ( >
<MenuItem key={engine.name} value={engine.settingsName}> {searchEngines.map((engine) => (
{engine.name} <MenuItem key={engine.name} value={engine.settingsName}>
{engine.name}
</MenuItem>
))}
<MenuItem value="custom">
{variables.getMessage(`${SEARCH_SECTION}.custom`).split(' ')[0]}
</MenuItem> </MenuItem>
))} </Dropdown>
<MenuItem value="custom"> </Action>
{variables.getMessage(`${SEARCH_SECTION}.custom`).split(' ')[0]} </Row>
</MenuItem>
</Dropdown>
</SettingsItem>
); );
}; };
@ -141,20 +147,23 @@ export default class SearchSettings extends PureComponent {
<AdditionalOptions /> <AdditionalOptions />
<SearchEngineSelection /> <SearchEngineSelection />
{this.state.customEnabled && ( {this.state.customEnabled && (
<SettingsItem title={variables.getMessage(`${SEARCH_SECTION}.custom`)} final={true}> <Row final={true}>
<TextField <Content title={variables.getMessage(`${SEARCH_SECTION}.custom`)} />
label={variables.getMessage(`${SEARCH_SECTION}.custom`)} <Action>
value={this.state.customValue} <TextField
onInput={(e) => this.setState({ customValue: e.target.value })} label={variables.getMessage(`${SEARCH_SECTION}.custom`)}
varient="outlined" value={this.state.customValue}
InputLabelProps={{ shrink: true }} onInput={(e) => this.setState({ customValue: e.target.value })}
/> varient="outlined"
<p style={{ marginTop: '0px' }}> InputLabelProps={{ shrink: true }}
<span className="link" onClick={() => this.resetSearch()}> />
{variables.getMessage('modals.main.settings.buttons.reset')} <p style={{ marginTop: '0px' }}>
</span> <span className="link" onClick={() => this.resetSearch()}>
</p> {variables.getMessage('modals.main.settings.buttons.reset')}
</SettingsItem> </span>
</p>
</Action>
</Row>
)} )}
</PreferencesWrapper> </PreferencesWrapper>
</> </>

267
src/components/modals/main/settings/sections/Time.jsx
View File

@ -5,8 +5,9 @@ import Header from '../Header';
import Checkbox from '../Checkbox'; import Checkbox from '../Checkbox';
import Dropdown from '../Dropdown'; import Dropdown from '../Dropdown';
import Radio from '../Radio'; import Radio from '../Radio';
import SettingsItem from '../SettingsItem';
import PreferencesWrapper from '../PreferencesWrapper'; import PreferencesWrapper from '../PreferencesWrapper';
import { Row, Content, Action } from '../SettingsItem';
import { MdRefresh } from 'react-icons/md'; import { MdRefresh } from 'react-icons/md';
@ -33,144 +34,158 @@ const TimeSettings = () => {
const WidgetType = () => { const WidgetType = () => {
return ( return (
<SettingsItem <Row final={timeType === 'percentageComplete'}>
title={variables.getMessage(`${TIME_SECTION}.type`)} <Content
subtitle={variables.getMessage(`${TIME_SECTION}.type_subtitle`)} title={variables.getMessage(`${TIME_SECTION}.type`)}
final={timeType === 'percentageComplete'} subtitle={variables.getMessage(`${TIME_SECTION}.type_subtitle`)}
> />
<Dropdown name="timeType" onChange={(value) => setTimeType(value)} category="clock"> <Action>
<option value="digital">{variables.getMessage(`${TIME_SECTION}.digital.title`)}</option> <Dropdown name="timeType" onChange={(value) => setTimeType(value)} category="clock">
<option value="analogue">{variables.getMessage(`${TIME_SECTION}.analogue.title`)}</option> <option value="digital">{variables.getMessage(`${TIME_SECTION}.digital.title`)}</option>
<option value="percentageComplete"> <option value="analogue">
{variables.getMessage(`${TIME_SECTION}.percentage_complete`)} {variables.getMessage(`${TIME_SECTION}.analogue.title`)}
</option> </option>
<option value="verticalClock"> <option value="percentageComplete">
{variables.getMessage(`${TIME_SECTION}.vertical_clock.title`)} {variables.getMessage(`${TIME_SECTION}.percentage_complete`)}
</option> </option>
</Dropdown> <option value="verticalClock">
</SettingsItem> {variables.getMessage(`${TIME_SECTION}.vertical_clock.title`)}
</option>
</Dropdown>
</Action>
</Row>
); );
}; };
const digitalSettings = ( const digitalSettings = (
<SettingsItem <Row final={true}>
title={variables.getMessage(`${TIME_SECTION}.digital.title`)} <Content
subtitle={variables.getMessage(`${TIME_SECTION}.digital.subtitle`)} title={variables.getMessage(`${TIME_SECTION}.digital.title`)}
final={true} subtitle={variables.getMessage(`${TIME_SECTION}.digital.subtitle`)}
>
<Radio
name="timeformat"
options={[
{
name: variables.getMessage(`${TIME_SECTION}.digital.twentyfourhour`),
value: 'twentyfourhour',
},
{
name: variables.getMessage(`${TIME_SECTION}.digital.twelvehour`),
value: 'twelvehour',
},
]}
smallTitle={true}
category="clock"
/> />
<Checkbox <Action>
name="seconds" <Radio
text={variables.getMessage(`${TIME_SECTION}.digital.seconds`)} name="timeformat"
category="clock" options={[
/> {
<Checkbox name: variables.getMessage(`${TIME_SECTION}.digital.twentyfourhour`),
name="zero" value: 'twentyfourhour',
text={variables.getMessage(`${TIME_SECTION}.digital.zero`)} },
category="clock" {
/> name: variables.getMessage(`${TIME_SECTION}.digital.twelvehour`),
</SettingsItem> value: 'twelvehour',
},
]}
smallTitle={true}
category="clock"
/>
<Checkbox
name="seconds"
text={variables.getMessage(`${TIME_SECTION}.digital.seconds`)}
category="clock"
/>
<Checkbox
name="zero"
text={variables.getMessage(`${TIME_SECTION}.digital.zero`)}
category="clock"
/>
</Action>
</Row>
); );
const analogSettings = ( const analogSettings = (
<SettingsItem <Row final={true}>
title={variables.getMessage(`${TIME_SECTION}.analogue.title`)} <Content
subtitle={variables.getMessage(`${TIME_SECTION}.analogue.subtitle`)} title={variables.getMessage(`${TIME_SECTION}.analogue.title`)}
final={true} subtitle={variables.getMessage(`${TIME_SECTION}.analogue.subtitle`)}
>
<Checkbox
name="secondHand"
text={variables.getMessage(`${TIME_SECTION}.analogue.second_hand`)}
category="clock"
/> />
<Checkbox <Action>
name="minuteHand" <Checkbox
text={variables.getMessage(`${TIME_SECTION}.analogue.minute_hand`)} name="secondHand"
category="clock" text={variables.getMessage(`${TIME_SECTION}.analogue.second_hand`)}
/> category="clock"
<Checkbox />
name="hourHand" <Checkbox
text={variables.getMessage(`${TIME_SECTION}.analogue.hour_hand`)} name="minuteHand"
category="clock" text={variables.getMessage(`${TIME_SECTION}.analogue.minute_hand`)}
/> category="clock"
<Checkbox />
name="hourMarks" <Checkbox
text={variables.getMessage(`${TIME_SECTION}.analogue.hour_marks`)} name="hourHand"
category="clock" text={variables.getMessage(`${TIME_SECTION}.analogue.hour_hand`)}
/> category="clock"
<Checkbox />
name="minuteMarks" <Checkbox
text={variables.getMessage(`${TIME_SECTION}.analogue.minute_marks`)} name="hourMarks"
category="clock" text={variables.getMessage(`${TIME_SECTION}.analogue.hour_marks`)}
/> category="clock"
<Checkbox />
name="roundClock" <Checkbox
text={variables.getMessage(`${TIME_SECTION}.analogue.round_clock`)} name="minuteMarks"
category="clock" text={variables.getMessage(`${TIME_SECTION}.analogue.minute_marks`)}
/> category="clock"
</SettingsItem> />
<Checkbox
name="roundClock"
text={variables.getMessage(`${TIME_SECTION}.analogue.round_clock`)}
category="clock"
/>
</Action>
</Row>
); );
const verticalClock = ( const verticalClock = (
<> <>
<SettingsItem <Row>
title={variables.getMessage( <Content
'modals.main.settings.sections.time.vertical_clock.change_hour_colour', title={variables.getMessage(
)} 'modals.main.settings.sections.time.vertical_clock.change_hour_colour',
> )}
<div className="colourInput"> />
<input <Action>
type="color" <div className="colourInput">
name="hourColour" <input
className="minuteColour" type="color"
onChange={(event) => updateColour('hourColour', event)} name="hourColour"
value={hourColour} className="minuteColour"
></input> onChange={(event) => updateColour('hourColour', event)}
<label htmlFor={'hourColour'} className="customBackgroundHex"> value={hourColour}
{hourColour} ></input>
</label> <label htmlFor={'hourColour'} className="customBackgroundHex">
</div> {hourColour}
<span className="link" onClick={() => localStorage.setItem('hourColour', '#ffffff')}> </label>
<MdRefresh /> </div>
{variables.getMessage('modals.main.settings.buttons.reset')} <span className="link" onClick={() => localStorage.setItem('hourColour', '#ffffff')}>
</span> <MdRefresh />
</SettingsItem> {variables.getMessage('modals.main.settings.buttons.reset')}
<SettingsItem </span>
title={variables.getMessage( </Action>
'modals.main.settings.sections.time.vertical_clock.change_minute_colour', </Row>
)} <Row>
> <Content
<div className="colourInput"> title={variables.getMessage(
<input 'modals.main.settings.sections.time.vertical_clock.change_minute_colour',
type="color" )}
name="minuteColour" />
className="minuteColour" <Action>
onChange={(event) => updateColour('minuteColour', event)} <div className="colourInput">
value={minuteColour} <input
></input> type="color"
<label htmlFor={'minuteColour'} className="customBackgroundHex"> name="minuteColour"
{minuteColour} className="minuteColour"
</label> onChange={(event) => updateColour('minuteColour', event)}
</div> value={minuteColour}
<span className="link" onClick={() => localStorage.setItem('minuteColour', '#ffffff')}> ></input>
<MdRefresh /> <label htmlFor={'minuteColour'} className="customBackgroundHex">
{variables.getMessage('modals.main.settings.buttons.reset')} {minuteColour}
</span> </label>
</SettingsItem> </div>
<span className="link" onClick={() => localStorage.setItem('minuteColour', '#ffffff')}>
<MdRefresh />
{variables.getMessage('modals.main.settings.buttons.reset')}
</span>
</Action>
</Row>
{digitalSettings} {digitalSettings}
</> </>
); );

144
src/components/modals/main/settings/sections/Weather.jsx
View File

@ -8,9 +8,11 @@ import Radio from '../Radio';
import Dropdown from '../Dropdown'; import Dropdown from '../Dropdown';
import Checkbox from '../Checkbox'; import Checkbox from '../Checkbox';
import { TextField } from '@mui/material'; import { TextField } from '@mui/material';
import SettingsItem from '../SettingsItem';
import PreferencesWrapper from '../PreferencesWrapper'; import PreferencesWrapper from '../PreferencesWrapper';
import { Row, Content, Action } from '../SettingsItem';
export default class WeatherSettings extends PureComponent { export default class WeatherSettings extends PureComponent {
constructor() { constructor() {
super(); super();
@ -44,19 +46,26 @@ export default class WeatherSettings extends PureComponent {
const WidgetType = () => { const WidgetType = () => {
return ( return (
<SettingsItem title={variables.getMessage(`${WEATHER_SECTION}.widget_type`)}> <Row>
<Dropdown <Content title={variables.getMessage(`${WEATHER_SECTION}.widget_type`)} />
label={variables.getMessage('modals.main.settings.sections.time.type')} <Action>
name="weatherType" <Dropdown
category="weather" label={variables.getMessage('modals.main.settings.sections.time.type')}
onChange={() => this.forceUpdate()} name="weatherType"
> category="weather"
<option value="1">{variables.getMessage(`${WEATHER_SECTION}.options.basic`)}</option> onChange={() => this.forceUpdate()}
<option value="2">{variables.getMessage(`${WEATHER_SECTION}.options.standard`)}</option> >
<option value="3">{variables.getMessage(`${WEATHER_SECTION}.options.expanded`)}</option> <option value="1">{variables.getMessage(`${WEATHER_SECTION}.options.basic`)}</option>
<option value="4">{variables.getMessage(`${WEATHER_SECTION}.options.custom`)}</option> <option value="2">
</Dropdown> {variables.getMessage(`${WEATHER_SECTION}.options.standard`)}
</SettingsItem> </option>
<option value="3">
{variables.getMessage(`${WEATHER_SECTION}.options.expanded`)}
</option>
<option value="4">{variables.getMessage(`${WEATHER_SECTION}.options.custom`)}</option>
</Dropdown>
</Action>
</Row>
); );
}; };
@ -89,48 +98,51 @@ export default class WeatherSettings extends PureComponent {
); );
}; };
return ( return (
<SettingsItem title={variables.getMessage(`${WEATHER_SECTION}.location`)}> <Row>
<TextField <Content title={variables.getMessage(`${WEATHER_SECTION}.location`)} />
label={variables.getMessage(`${WEATHER_SECTION}.location`)} <Action>
value={this.state.location} <TextField
onChange={(e) => this.changeLocation(e)} label={variables.getMessage(`${WEATHER_SECTION}.location`)}
placeholder="London" value={this.state.location}
varient="outlined" onChange={(e) => this.changeLocation(e)}
InputLabelProps={{ shrink: true }} placeholder="London"
/> varient="outlined"
<span className="link" onClick={getAuto}> InputLabelProps={{ shrink: true }}
<MdAutoAwesome /> />
{variables.getMessage(`${WEATHER_SECTION}.auto`)} <span className="link" onClick={getAuto}>
</span> <MdAutoAwesome />
</SettingsItem> {variables.getMessage(`${WEATHER_SECTION}.auto`)}
</span>
</Action>
</Row>
); );
}; };
const TemperatureFormat = () => { const TemperatureFormat = () => {
return ( return (
<SettingsItem <Row final={weatherType !== '4'}>
title={variables.getMessage(`${WEATHER_SECTION}.temp_format.title`)} <Content title={variables.getMessage(`${WEATHER_SECTION}.temp_format.title`)} />
final={weatherType !== '4'} <Action>
> <Radio
<Radio name="tempformat"
name="tempformat" options={[
options={[ {
{ name: variables.getMessage(`${WEATHER_SECTION}.temp_format.celsius`) + ' (°C)',
name: variables.getMessage(`${WEATHER_SECTION}.temp_format.celsius`) + ' (°C)', value: 'celsius',
value: 'celsius', },
}, {
{ name: variables.getMessage(`${WEATHER_SECTION}.temp_format.fahrenheit`) + ' (°F)',
name: variables.getMessage(`${WEATHER_SECTION}.temp_format.fahrenheit`) + ' (°F)', value: 'fahrenheit',
value: 'fahrenheit', },
}, {
{ name: variables.getMessage(`${WEATHER_SECTION}.temp_format.kelvin`) + ' (K)',
name: variables.getMessage(`${WEATHER_SECTION}.temp_format.kelvin`) + ' (K)', value: 'kelvin',
value: 'kelvin', },
}, ]}
]} category="weather"
category="weather" />
/> </Action>
</SettingsItem> </Row>
); );
}; };
@ -167,21 +179,21 @@ export default class WeatherSettings extends PureComponent {
]; ];
return ( return (
<SettingsItem <Row final={true}>
title={variables.getMessage(`${WEATHER_SECTION}.custom_settings`)} <Content title={variables.getMessage(`${WEATHER_SECTION}.custom_settings`)} />
final={true} <Action>
> {weatherOptions.map((item) => (
{weatherOptions.map((item) => ( <Checkbox
<Checkbox key={item.name}
key={item.name} name={item.name}
name={item.name} text={variables.getMessage(item.textKey)}
text={variables.getMessage(item.textKey)} category="weather"
category="weather" onChange={item.onChange}
onChange={item.onChange} disabled={item.disabled}
disabled={item.disabled} />
/> ))}
))} </Action>
</SettingsItem> </Row>
); );
}; };

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

@ -9,7 +9,7 @@ import ChipSelect from '../../ChipSelect';
import Dropdown from '../../Dropdown'; import Dropdown from '../../Dropdown';
import Slider from '../../Slider'; import Slider from '../../Slider';
import Radio from '../../Radio'; import Radio from '../../Radio';
import SettingsItem from '../../SettingsItem'; import { Row, Content, Action } from '../../SettingsItem';
import Text from '../../Text'; import Text from '../../Text';
import ColourSettings from './Colour'; import ColourSettings from './Colour';
@ -92,11 +92,7 @@ export default class BackgroundSettings extends PureComponent {
render() { render() {
/* const interval = ( /* const interval = (
<SettingsItem <Row
title={variables.getMessage('modals.main.settings.sections.background.interval.title')}
subtitle={variables.getMessage(
'modals.main.settings.sections.background.interval.subtitle',
)}
final={ final={
localStorage.getItem('photo_packs') && localStorage.getItem('photo_packs') &&
this.state.backgroundType !== 'custom' && this.state.backgroundType !== 'custom' &&
@ -104,6 +100,11 @@ export default class BackgroundSettings extends PureComponent {
this.state.backgroundType !== 'api' this.state.backgroundType !== 'api'
} }
> >
<Content title={variables.getMessage('modals.main.settings.sections.background.interval.title')}
subtitle={variables.getMessage(
'modals.main.settings.sections.background.interval.subtitle',
)} />
<Action>
<Dropdown <Dropdown
label={variables.getMessage('modals.main.settings.sections.background.interval.title')} label={variables.getMessage('modals.main.settings.sections.background.interval.title')}
name="backgroundchange" name="backgroundchange"
@ -128,98 +129,107 @@ export default class BackgroundSettings extends PureComponent {
{variables.getMessage('modals.main.settings.sections.background.interval.month')} {variables.getMessage('modals.main.settings.sections.background.interval.month')}
</option> </option>
</Dropdown> </Dropdown>
</SettingsItem> </Action>
</Row>
);*/ );*/
const APISettings = ( const APISettings = (
<> <>
<SettingsItem <Row final={this.state.backgroundAPI === 'mue'}>
title={variables.getMessage('modals.main.settings.sections.background.api')} <Content
subtitle={variables.getMessage('modals.main.settings.sections.background.api_subtitle')} title={variables.getMessage('modals.main.settings.sections.background.api')}
final={this.state.backgroundAPI === 'mue'} subtitle={variables.getMessage('modals.main.settings.sections.background.api_subtitle')}
>
{this.state.backgroundCategories[0] === variables.getMessage('modals.main.loading') ? (
<>
<Dropdown
label={variables.getMessage('modals.main.settings.sections.background.category')}
name="apiCategories"
>
<MenuItem value="loading" key="loading">
{variables.getMessage('modals.main.loading')}
</MenuItem>
<MenuItem value="loading" key="loading">
{variables.getMessage('modals.main.loading')}
</MenuItem>
</Dropdown>
</>
) : (
<ChipSelect
label={variables.getMessage('modals.main.settings.sections.background.categories')}
options={this.state.backgroundCategories}
name="apiCategories"
/>
)}
<Dropdown
label={variables.getMessage(
'modals.main.settings.sections.background.source.quality.title',
)}
name="apiQuality"
element=".other"
>
<option value="original">
{variables.getMessage(
'modals.main.settings.sections.background.source.quality.original',
)}
</option>
<option value="high">
{variables.getMessage('modals.main.settings.sections.background.source.quality.high')}
</option>
<option value="normal">
{variables.getMessage(
'modals.main.settings.sections.background.source.quality.normal',
)}
</option>
<option value="datasaver">
{variables.getMessage(
'modals.main.settings.sections.background.source.quality.datasaver',
)}
</option>
</Dropdown>
<Radio
title="API"
options={[
{
name: 'Mue',
value: 'mue',
},
{
name: 'Unsplash',
value: 'unsplash',
},
]}
name="backgroundAPI"
category="background"
element="#backgroundImage"
onChange={(e) => this.updateAPI(e)}
/> />
</SettingsItem> <Action>
{this.state.backgroundAPI === 'unsplash' && ( {this.state.backgroundCategories[0] === variables.getMessage('modals.main.loading') ? (
<SettingsItem <>
title={variables.getMessage('modals.main.settings.sections.background.unsplash.title')} <Dropdown
subtitle={variables.getMessage('modals.main.settings.sections.background.subtitle')} label={variables.getMessage('modals.main.settings.sections.background.category')}
final={true} name="apiCategories"
> >
<Text <MenuItem value="loading" key="loading">
title={variables.getMessage('modals.main.settings.sections.background.id')} {variables.getMessage('modals.main.loading')}
subtitle={variables.getMessage( </MenuItem>
'modals.main.settings.sections.background.id_subtitle', <MenuItem value="loading" key="loading">
{variables.getMessage('modals.main.loading')}
</MenuItem>
</Dropdown>
</>
) : (
<ChipSelect
label={variables.getMessage('modals.main.settings.sections.background.categories')}
options={this.state.backgroundCategories}
name="apiCategories"
/>
)}
<Dropdown
label={variables.getMessage(
'modals.main.settings.sections.background.source.quality.title',
)} )}
placeholder="e.g. 123456, 654321" name="apiQuality"
name="unsplashCollections" element=".other"
>
<option value="original">
{variables.getMessage(
'modals.main.settings.sections.background.source.quality.original',
)}
</option>
<option value="high">
{variables.getMessage(
'modals.main.settings.sections.background.source.quality.high',
)}
</option>
<option value="normal">
{variables.getMessage(
'modals.main.settings.sections.background.source.quality.normal',
)}
</option>
<option value="datasaver">
{variables.getMessage(
'modals.main.settings.sections.background.source.quality.datasaver',
)}
</option>
</Dropdown>
<Radio
title="API"
options={[
{
name: 'Mue',
value: 'mue',
},
{
name: 'Unsplash',
value: 'unsplash',
},
]}
name="backgroundAPI"
category="background" category="background"
element="#backgroundImage" element="#backgroundImage"
onChange={(e) => this.updateAPI(e)}
/> />
</SettingsItem> </Action>
</Row>
{this.state.backgroundAPI === 'unsplash' && (
<Row final={true}>
<Action
title={variables.getMessage(
'modals.main.settings.sections.background.unsplash.title',
)}
subtitle={variables.getMessage('modals.main.settings.sections.background.subtitle')}
/>
<Action>
<Text
title={variables.getMessage('modals.main.settings.sections.background.id')}
subtitle={variables.getMessage(
'modals.main.settings.sections.background.id_subtitle',
)}
placeholder="e.g. 123456, 654321"
name="unsplashCollections"
category="background"
element="#backgroundImage"
/>
</Action>
</Row>
)} )}
</> </>
); );
@ -385,90 +395,100 @@ export default class BackgroundSettings extends PureComponent {
(this.state.backgroundType === 'api' || (this.state.backgroundType === 'api' ||
this.state.backgroundType === 'custom' || this.state.backgroundType === 'custom' ||
this.state.marketplaceEnabled) ? ( this.state.marketplaceEnabled) ? (
<SettingsItem <Row final={true}>
title={variables.getMessage('modals.main.settings.sections.background.display')} <Content
subtitle={variables.getMessage( title={variables.getMessage('modals.main.settings.sections.background.display')}
'modals.main.settings.sections.background.display_subtitle', subtitle={variables.getMessage(
)} 'modals.main.settings.sections.background.display_subtitle',
final={true}
>
<Checkbox
name="ddgProxy"
text={variables.getMessage(
'modals.main.settings.sections.background.ddg_image_proxy',
)} )}
element=".other"
disabled={!usingImage}
/> />
<Checkbox <Action>
name="bgtransition" <Checkbox
text={variables.getMessage('modals.main.settings.sections.background.transition')} name="ddgProxy"
element=".other" text={variables.getMessage(
disabled={!usingImage} 'modals.main.settings.sections.background.ddg_image_proxy',
/> )}
<Checkbox element=".other"
name="photoInformation" disabled={!usingImage}
text={variables.getMessage( />
'modals.main.settings.sections.background.photo_information', <Checkbox
)} name="bgtransition"
element=".other" text={variables.getMessage('modals.main.settings.sections.background.transition')}
/> element=".other"
<Checkbox disabled={!usingImage}
name="photoMap" />
text={variables.getMessage('modals.main.settings.sections.background.show_map')} <Checkbox
element=".other" name="photoInformation"
disabled={!usingImage} text={variables.getMessage(
/> 'modals.main.settings.sections.background.photo_information',
</SettingsItem> )}
element=".other"
/>
<Checkbox
name="photoMap"
text={variables.getMessage('modals.main.settings.sections.background.show_map')}
element=".other"
disabled={!usingImage}
/>
</Action>
</Row>
) : null} ) : null}
{this.state.backgroundSettingsSection && ( {this.state.backgroundSettingsSection && (
<> <>
<SettingsItem <Row
title={variables.getMessage('modals.main.settings.sections.background.source.title')}
subtitle={variables.getMessage(
'modals.main.settings.sections.background.source.subtitle',
)}
final={ final={
this.state.backgroundType === 'random_colour' || this.state.backgroundType === 'random_colour' ||
this.state.backgroundType === 'random_gradient' this.state.backgroundType === 'random_gradient'
} }
> >
<Dropdown <Content
label={variables.getMessage('modals.main.settings.sections.background.type.title')} title={variables.getMessage(
name="backgroundType" 'modals.main.settings.sections.background.source.title',
onChange={(value) => this.setState({ backgroundType: value })}
category="background"
>
{this.state.marketplaceEnabled && (
<option value="photo_pack">
{variables.getMessage('modals.main.navbar.marketplace')}
</option>
)} )}
<option value="api"> subtitle={variables.getMessage(
{variables.getMessage('modals.main.settings.sections.background.type.api')} 'modals.main.settings.sections.background.source.subtitle',
</option> )}
<option value="custom"> />
{variables.getMessage( <Action>
'modals.main.settings.sections.background.type.custom_image', <Dropdown
label={variables.getMessage(
'modals.main.settings.sections.background.type.title',
)} )}
</option> name="backgroundType"
<option value="colour"> onChange={(value) => this.setState({ backgroundType: value })}
{variables.getMessage( category="background"
'modals.main.settings.sections.background.type.custom_colour', >
{this.state.marketplaceEnabled && (
<option value="photo_pack">
{variables.getMessage('modals.main.navbar.marketplace')}
</option>
)} )}
</option> <option value="api">
<option value="random_colour"> {variables.getMessage('modals.main.settings.sections.background.type.api')}
{variables.getMessage( </option>
'modals.main.settings.sections.background.type.random_colour', <option value="custom">
)} {variables.getMessage(
</option> 'modals.main.settings.sections.background.type.custom_image',
<option value="random_gradient"> )}
{variables.getMessage( </option>
'modals.main.settings.sections.background.type.random_gradient', <option value="colour">
)} {variables.getMessage(
</option> 'modals.main.settings.sections.background.type.custom_colour',
</Dropdown> )}
</SettingsItem> </option>
<option value="random_colour">
{variables.getMessage(
'modals.main.settings.sections.background.type.random_colour',
)}
</option>
<option value="random_gradient">
{variables.getMessage(
'modals.main.settings.sections.background.type.random_gradient',
)}
</option>
</Dropdown>
</Action>
</Row>
{/* // todo: ideally refactor all of this file, but we need interval to appear on marketplace too */} {/* // todo: ideally refactor all of this file, but we need interval to appear on marketplace too */}
{/*{this.state.backgroundType === 'api' || {/*{this.state.backgroundType === 'api' ||
this.state.backgroundType === 'custom' || this.state.backgroundType === 'custom' ||
@ -482,83 +502,19 @@ export default class BackgroundSettings extends PureComponent {
this.state.backgroundType === 'custom' || this.state.backgroundType === 'custom' ||
this.state.marketplaceEnabled) && this.state.marketplaceEnabled) &&
this.state.effects ? ( this.state.effects ? (
<SettingsItem <Row final={true}>
title={variables.getMessage('modals.main.settings.sections.background.effects.title')} <Content
subtitle={variables.getMessage( title={variables.getMessage('modals.main.settings.sections.background.effects.title')}
'modals.main.settings.sections.background.effects.subtitle', subtitle={variables.getMessage(
)} 'modals.main.settings.sections.background.effects.subtitle',
final={true}
>
<Slider
title={variables.getMessage('modals.main.settings.sections.background.effects.blur')}
name="blur"
min="0"
max="100"
default="0"
display="%"
marks={values('background')}
category="background"
element="#backgroundImage"
/>
<Slider
title={variables.getMessage(
'modals.main.settings.sections.background.effects.brightness',
)} )}
name="brightness"
min="0"
max="100"
default="90"
display="%"
marks={values('background')}
category="background"
element="#backgroundImage"
/> />
<Dropdown <Action>
label={variables.getMessage(
'modals.main.settings.sections.background.effects.filters.title',
)}
name="backgroundFilter"
onChange={(value) => this.setState({ backgroundFilter: value })}
category="background"
element="#backgroundImage"
>
<option value="none">
{variables.getMessage(
'modals.main.settings.sections.appearance.navbar.refresh_options.none',
)}
</option>
<option value="grayscale">
{variables.getMessage(
'modals.main.settings.sections.background.effects.filters.grayscale',
)}
</option>
<option value="sepia">
{variables.getMessage(
'modals.main.settings.sections.background.effects.filters.sepia',
)}
</option>
<option value="invert">
{variables.getMessage(
'modals.main.settings.sections.background.effects.filters.invert',
)}
</option>
<option value="saturate">
{variables.getMessage(
'modals.main.settings.sections.background.effects.filters.saturate',
)}
</option>
<option value="contrast">
{variables.getMessage(
'modals.main.settings.sections.background.effects.filters.contrast',
)}
</option>
</Dropdown>
{this.state.backgroundFilter !== 'none' && (
<Slider <Slider
title={variables.getMessage( title={variables.getMessage(
'modals.main.settings.sections.background.effects.filters.amount', 'modals.main.settings.sections.background.effects.blur',
)} )}
name="backgroundFilterAmount" name="blur"
min="0" min="0"
max="100" max="100"
default="0" default="0"
@ -567,8 +523,76 @@ export default class BackgroundSettings extends PureComponent {
category="background" category="background"
element="#backgroundImage" element="#backgroundImage"
/> />
)} <Slider
</SettingsItem> title={variables.getMessage(
'modals.main.settings.sections.background.effects.brightness',
)}
name="brightness"
min="0"
max="100"
default="90"
display="%"
marks={values('background')}
category="background"
element="#backgroundImage"
/>
<Dropdown
label={variables.getMessage(
'modals.main.settings.sections.background.effects.filters.title',
)}
name="backgroundFilter"
onChange={(value) => this.setState({ backgroundFilter: value })}
category="background"
element="#backgroundImage"
>
<option value="none">
{variables.getMessage(
'modals.main.settings.sections.appearance.navbar.refresh_options.none',
)}
</option>
<option value="grayscale">
{variables.getMessage(
'modals.main.settings.sections.background.effects.filters.grayscale',
)}
</option>
<option value="sepia">
{variables.getMessage(
'modals.main.settings.sections.background.effects.filters.sepia',
)}
</option>
<option value="invert">
{variables.getMessage(
'modals.main.settings.sections.background.effects.filters.invert',
)}
</option>
<option value="saturate">
{variables.getMessage(
'modals.main.settings.sections.background.effects.filters.saturate',
)}
</option>
<option value="contrast">
{variables.getMessage(
'modals.main.settings.sections.background.effects.filters.contrast',
)}
</option>
</Dropdown>
{this.state.backgroundFilter !== 'none' && (
<Slider
title={variables.getMessage(
'modals.main.settings.sections.background.effects.filters.amount',
)}
name="backgroundFilterAmount"
min="0"
max="100"
default="0"
display="%"
marks={values('background')}
category="background"
element="#backgroundImage"
/>
)}
</Action>
</Row>
) : null} ) : null}
</> </>
); );

30
src/components/modals/main/settings/sections/background/Colour.jsx
View File

@ -2,7 +2,7 @@ import variables from 'modules/variables';
import { PureComponent, Fragment } from 'react'; import { PureComponent, Fragment } from 'react';
import { ColorPicker } from '@muetab/react-color-gradient-picker'; import { ColorPicker } from '@muetab/react-color-gradient-picker';
import { toast } from 'react-toastify'; import { toast } from 'react-toastify';
import SettingsItem from '../../SettingsItem'; import { Row, Content, Action } from '../../SettingsItem';
import hexToRgb from 'modules/helpers/background/hexToRgb'; import hexToRgb from 'modules/helpers/background/hexToRgb';
import rgbToHex from 'modules/helpers/background/rgbToHex'; import rgbToHex from 'modules/helpers/background/rgbToHex';
@ -220,19 +220,21 @@ export default class ColourSettings extends PureComponent {
return ( return (
<> <>
<SettingsItem <Row final={true}>
title={variables.getMessage( <Content
'modals.main.settings.sections.background.source.custom_colour', title={variables.getMessage(
)} 'modals.main.settings.sections.background.source.custom_colour',
final={true} )}
> />
{colourSettings} <Action>
<div className="colourReset"> {colourSettings}
<span className="link" onClick={() => this.resetColour()}> <div className="colourReset">
{variables.getMessage('modals.main.settings.buttons.reset')} <span className="link" onClick={() => this.resetColour()}>
</span> {variables.getMessage('modals.main.settings.buttons.reset')}
</div> </span>
</SettingsItem> </div>
</Action>
</Row>
</> </>
); );
} }