mirror of https://github.com/mue/mue.git
refactor(settings): Move to new style settings row
Comprised of: - Row element - Content (title and description) - Action
This commit is contained in:
parent
48b919ebea
commit
84c1bc8df1
|
@ -47,7 +47,7 @@
|
|||
"stylelint": "^16.2.1",
|
||||
"stylelint-config-standard-scss": "^13.0.0",
|
||||
"stylelint-scss": "^6.1.0",
|
||||
"vite": "5.1.0",
|
||||
"vite": "5.1.1",
|
||||
"vite-plugin-progress": "^0.0.7"
|
||||
},
|
||||
"scripts": {
|
||||
|
|
|
@ -1,5 +1,9 @@
|
|||
lockfileVersion: '6.0'
|
||||
|
||||
settings:
|
||||
autoInstallPeers: true
|
||||
excludeLinksFromLockfile: false
|
||||
|
||||
dependencies:
|
||||
'@eartharoid/i18n':
|
||||
specifier: 1.2.1
|
||||
|
@ -74,7 +78,7 @@ devDependencies:
|
|||
version: 0.0.2
|
||||
'@vitejs/plugin-react-swc':
|
||||
specifier: ^3.6.0
|
||||
version: 3.6.0(vite@5.1.0)
|
||||
version: 3.6.0(vite@5.1.1)
|
||||
adm-zip:
|
||||
specifier: ^0.5.10
|
||||
version: 0.5.10
|
||||
|
@ -106,11 +110,11 @@ devDependencies:
|
|||
specifier: ^6.1.0
|
||||
version: 6.1.0(stylelint@16.2.1)
|
||||
vite:
|
||||
specifier: 5.1.0
|
||||
version: 5.1.0(@types/node@20.11.17)(sass@1.70.0)
|
||||
specifier: 5.1.1
|
||||
version: 5.1.1(@types/node@20.11.17)(sass@1.70.0)
|
||||
vite-plugin-progress:
|
||||
specifier: ^0.0.7
|
||||
version: 0.0.7(vite@5.1.0)
|
||||
version: 0.0.7(vite@5.1.1)
|
||||
|
||||
packages:
|
||||
|
||||
|
@ -2951,13 +2955,13 @@ packages:
|
|||
resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
|
||||
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==}
|
||||
peerDependencies:
|
||||
vite: ^4 || ^5
|
||||
dependencies:
|
||||
'@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:
|
||||
- '@swc/helpers'
|
||||
dev: true
|
||||
|
@ -3298,7 +3302,7 @@ packages:
|
|||
hasBin: true
|
||||
dependencies:
|
||||
caniuse-lite: 1.0.30001585
|
||||
electron-to-chromium: 1.4.662
|
||||
electron-to-chromium: 1.4.664
|
||||
node-releases: 2.0.14
|
||||
update-browserslist-db: 1.0.13(browserslist@4.22.3)
|
||||
dev: true
|
||||
|
@ -3657,8 +3661,8 @@ packages:
|
|||
resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
|
||||
dev: true
|
||||
|
||||
/electron-to-chromium@1.4.662:
|
||||
resolution: {integrity: sha512-gfl1XVWTQmPHhqEG0kN77SpUxaqPpMb9r83PT4gvKhg7P3irSxru3lW85RxvK1uI1j2CAcTWPjG/HbE0IP/Rtg==}
|
||||
/electron-to-chromium@1.4.664:
|
||||
resolution: {integrity: sha512-k9VKKSkOSNPvSckZgDDl/IQx45E1quMjX8QfLzUsAs/zve8AyFDK+ByRynSP/OfEfryiKHpQeMf00z0leLCc3A==}
|
||||
dev: true
|
||||
|
||||
/embla-carousel-autoplay@8.0.0-rc22(embla-carousel@8.0.0-rc22):
|
||||
|
@ -5939,7 +5943,7 @@ packages:
|
|||
resolution: {integrity: sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==}
|
||||
dependencies:
|
||||
spdx-expression-parse: 3.0.1
|
||||
spdx-license-ids: 3.0.16
|
||||
spdx-license-ids: 3.0.17
|
||||
dev: true
|
||||
|
||||
/spdx-exceptions@2.4.0:
|
||||
|
@ -5950,11 +5954,11 @@ packages:
|
|||
resolution: {integrity: sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==}
|
||||
dependencies:
|
||||
spdx-exceptions: 2.4.0
|
||||
spdx-license-ids: 3.0.16
|
||||
spdx-license-ids: 3.0.17
|
||||
dev: true
|
||||
|
||||
/spdx-license-ids@3.0.16:
|
||||
resolution: {integrity: sha512-eWN+LnM3GR6gPu35WxNgbGl8rmY1AEmoMDvL/QD6zYmPWgywxWqJWNdLGT+ke8dKNWrcYgYjPpG5gbTfghP8rw==}
|
||||
/spdx-license-ids@3.0.17:
|
||||
resolution: {integrity: sha512-sh8PWc/ftMqAAdFiBu6Fy6JUOYjqDJBJvIhpfDMyHrr0Rbp5liZqd4TjtQ/RgfLjKFZb+LMx5hpml5qOWy0qvg==}
|
||||
dev: true
|
||||
|
||||
/split2@3.2.2:
|
||||
|
@ -6422,7 +6426,7 @@ packages:
|
|||
spdx-expression-parse: 3.0.1
|
||||
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==}
|
||||
engines: {node: '>=14', pnpm: '>=7.0.0'}
|
||||
peerDependencies:
|
||||
|
@ -6431,11 +6435,11 @@ packages:
|
|||
picocolors: 1.0.0
|
||||
progress: 2.0.3
|
||||
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
|
||||
|
||||
/vite@5.1.0(@types/node@20.11.17)(sass@1.70.0):
|
||||
resolution: {integrity: sha512-STmSFzhY4ljuhz14bg9LkMTk3d98IO6DIArnTY6MeBwiD1Za2StcQtz7fzOUnRCqrHSD5+OS2reg4HOz1eoLnw==}
|
||||
/vite@5.1.1(@types/node@20.11.17)(sass@1.70.0):
|
||||
resolution: {integrity: sha512-wclpAgY3F1tR7t9LL5CcHC41YPkQIpKUGeIuT8MdNwNZr6OqOTLs7JX5vIHAtzqLWXts0T+GDrh9pN2arneKqg==}
|
||||
engines: {node: ^18.0.0 || >=20.0.0}
|
||||
hasBin: true
|
||||
peerDependencies:
|
||||
|
@ -6614,7 +6618,3 @@ packages:
|
|||
resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
|
||||
engines: {node: '>=10'}
|
||||
dev: true
|
||||
|
||||
settings:
|
||||
autoInstallPeers: true
|
||||
excludeLinksFromLockfile: false
|
||||
|
|
|
@ -256,6 +256,14 @@ h5 {
|
|||
flex-flow: row;
|
||||
align-items: center;
|
||||
gap: 25px;
|
||||
svg {
|
||||
@include themed() {
|
||||
background-color: t($modal-sidebar);
|
||||
box-shadow: t($boxShadow);
|
||||
}
|
||||
padding: 15px;
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
|
|
|
@ -9,7 +9,6 @@ import {
|
|||
} from 'react-icons/md';
|
||||
|
||||
import Slider from './Slider';
|
||||
import SettingsItem from './SettingsItem';
|
||||
import EventBus from 'modules/helpers/eventbus';
|
||||
|
||||
import { values } from 'modules/helpers/settings/modals';
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import React, { useState } from 'react';
|
||||
import SettingsItem from './SettingsItem';
|
||||
import { Row, Content, Action } from './SettingsItem';
|
||||
import variables from 'modules/variables';
|
||||
import Slider from './Slider';
|
||||
|
||||
|
@ -18,12 +18,14 @@ const PreferencesWrapper = ({ children, ...props }) => {
|
|||
return (
|
||||
<div className={shown ? 'preferences' : 'preferencesInactive'}>
|
||||
{props.zoomSetting && (
|
||||
<SettingsItem
|
||||
<Row>
|
||||
<Content
|
||||
title={variables.getMessage(
|
||||
'modals.main.settings.sections.appearance.accessibility.widget_zoom',
|
||||
)}
|
||||
subtitle={variables.getMessage('modals.main.settings.sections.header.size')}
|
||||
>
|
||||
/>
|
||||
<Action>
|
||||
<Slider
|
||||
name={props.zoomSetting}
|
||||
min="10"
|
||||
|
@ -33,7 +35,8 @@ const PreferencesWrapper = ({ children, ...props }) => {
|
|||
marks={values('zoom')}
|
||||
category={props.zoomCategory || props.category}
|
||||
/>
|
||||
</SettingsItem>
|
||||
</Action>
|
||||
</Row>
|
||||
)}
|
||||
{children}
|
||||
</div>
|
||||
|
|
|
@ -1,15 +1,22 @@
|
|||
import { memo } from 'react';
|
||||
|
||||
function SettingsItem({ final, title, subtitle, children }) {
|
||||
function Row(props) {
|
||||
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 className={props.final ? 'settingsRow settingsNoBorder' : 'settingsRow'}>
|
||||
{props.children}
|
||||
</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 };
|
||||
|
|
|
@ -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);
|
|
@ -17,7 +17,8 @@ import Text from '../Text';
|
|||
import Switch from '../Switch';
|
||||
import ResetModal from '../ResetModal';
|
||||
import Dropdown from '../Dropdown';
|
||||
import SettingsItem from '../SettingsItem';
|
||||
|
||||
import { Row, Content, Action } from '../SettingsItem';
|
||||
import Section from '../Section';
|
||||
|
||||
import time_zones from 'components/widgets/time/timezones.json';
|
||||
|
@ -92,24 +93,31 @@ export default function AdvancedSettings() {
|
|||
onClick={() => setData(true)}
|
||||
icon={<MdDataUsage />}
|
||||
/>
|
||||
<SettingsItem
|
||||
<Row>
|
||||
<Content
|
||||
title={variables.getMessage('modals.main.settings.sections.advanced.offline_mode')}
|
||||
subtitle={variables.getMessage(
|
||||
'modals.main.settings.sections.advanced.offline_subtitle',
|
||||
)}
|
||||
>
|
||||
/>
|
||||
<Action>
|
||||
<Switch name="offlineMode" element=".other" />
|
||||
</SettingsItem>
|
||||
</Action>
|
||||
</Row>
|
||||
|
||||
<SettingsItem
|
||||
<Row>
|
||||
<Content
|
||||
title={variables.getMessage('modals.main.settings.sections.advanced.timezone.title')}
|
||||
subtitle={variables.getMessage(
|
||||
'modals.main.settings.sections.advanced.timezone.subtitle',
|
||||
)}
|
||||
>
|
||||
/>
|
||||
<Action>
|
||||
<Dropdown name="timezone" category="timezone" manual={true}>
|
||||
<MenuItem value="auto">
|
||||
{variables.getMessage('modals.main.settings.sections.advanced.timezone.automatic')}
|
||||
{variables.getMessage(
|
||||
'modals.main.settings.sections.advanced.timezone.automatic',
|
||||
)}
|
||||
</MenuItem>
|
||||
{time_zones.map((timezone) => (
|
||||
<MenuItem value={timezone} key={timezone}>
|
||||
|
@ -117,42 +125,51 @@ export default function AdvancedSettings() {
|
|||
</MenuItem>
|
||||
))}
|
||||
</Dropdown>
|
||||
</SettingsItem>
|
||||
<SettingsItem
|
||||
</Action>
|
||||
</Row>
|
||||
<Row>
|
||||
<Content
|
||||
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" />
|
||||
</SettingsItem>
|
||||
</Action>
|
||||
</Row>
|
||||
<FileUpload
|
||||
id="file-input"
|
||||
accept="application/json"
|
||||
type="settings"
|
||||
loadFunction={(e) => importSettings(e)}
|
||||
/>
|
||||
<SettingsItem
|
||||
<Row>
|
||||
<Content
|
||||
title={variables.getMessage('modals.main.settings.sections.advanced.custom_css')}
|
||||
subtitle={variables.getMessage(
|
||||
'modals.main.settings.sections.advanced.custom_css_subtitle',
|
||||
)}
|
||||
>
|
||||
/>
|
||||
<Action>
|
||||
<Text name="customcss" textarea={true} category="other" customcss={true} />
|
||||
</SettingsItem>
|
||||
<SettingsItem
|
||||
</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',
|
||||
)}
|
||||
final={true}
|
||||
>
|
||||
/>
|
||||
<Action>
|
||||
<Switch
|
||||
name="experimental"
|
||||
text={variables.getMessage('modals.main.settings.enabled')}
|
||||
element=".other"
|
||||
/>
|
||||
</SettingsItem>
|
||||
</Action>
|
||||
</Row>
|
||||
<Modal
|
||||
closeTimeoutMS={100}
|
||||
onRequestClose={() => setResetModal(false)}
|
||||
|
|
|
@ -7,7 +7,9 @@ import Dropdown from '../Dropdown';
|
|||
import Radio from '../Radio';
|
||||
import Slider from '../Slider';
|
||||
import Text from '../Text';
|
||||
import SettingsItem from '../SettingsItem';
|
||||
|
||||
import { Row, Content, Action } from '../SettingsItem';
|
||||
|
||||
import Section from '../Section';
|
||||
|
||||
import { MdSource, MdOutlineKeyboardArrowRight, MdAccessibility } from 'react-icons/md';
|
||||
|
@ -20,12 +22,14 @@ function AppearanceSettings() {
|
|||
|
||||
const ThemeSelection = () => {
|
||||
return (
|
||||
<SettingsItem
|
||||
<Row>
|
||||
<Content
|
||||
title={variables.getMessage('modals.main.settings.sections.appearance.theme.title')}
|
||||
subtitle={variables.getMessage(
|
||||
'modals.main.settings.sections.appearance.theme.description',
|
||||
)}
|
||||
>
|
||||
/>
|
||||
<Action>
|
||||
<Radio
|
||||
name="theme"
|
||||
options={[
|
||||
|
@ -44,16 +48,21 @@ function AppearanceSettings() {
|
|||
]}
|
||||
category="other"
|
||||
/>
|
||||
</SettingsItem>
|
||||
</Action>
|
||||
</Row>
|
||||
);
|
||||
};
|
||||
|
||||
const FontOptions = () => {
|
||||
return (
|
||||
<SettingsItem
|
||||
<Row>
|
||||
<Content
|
||||
title={variables.getMessage('modals.main.settings.sections.appearance.font.title')}
|
||||
subtitle={variables.getMessage('modals.main.settings.sections.appearance.font.description')}
|
||||
>
|
||||
subtitle={variables.getMessage(
|
||||
'modals.main.settings.sections.appearance.font.description',
|
||||
)}
|
||||
/>
|
||||
<Action>
|
||||
<Checkbox
|
||||
name="fontGoogle"
|
||||
text={variables.getMessage('modals.main.settings.sections.appearance.font.google')}
|
||||
|
@ -66,7 +75,9 @@ function AppearanceSettings() {
|
|||
category="other"
|
||||
/>
|
||||
<Dropdown
|
||||
label={variables.getMessage('modals.main.settings.sections.appearance.font.weight.title')}
|
||||
label={variables.getMessage(
|
||||
'modals.main.settings.sections.appearance.font.weight.title',
|
||||
)}
|
||||
name="fontweight"
|
||||
category="other"
|
||||
>
|
||||
|
@ -89,7 +100,9 @@ function AppearanceSettings() {
|
|||
{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')}
|
||||
{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')}
|
||||
|
@ -101,7 +114,9 @@ function AppearanceSettings() {
|
|||
</option>
|
||||
</Dropdown>
|
||||
<Dropdown
|
||||
label={variables.getMessage('modals.main.settings.sections.appearance.font.style.title')}
|
||||
label={variables.getMessage(
|
||||
'modals.main.settings.sections.appearance.font.style.title',
|
||||
)}
|
||||
name="fontstyle"
|
||||
category="other"
|
||||
>
|
||||
|
@ -115,18 +130,21 @@ function AppearanceSettings() {
|
|||
{variables.getMessage('modals.main.settings.sections.appearance.font.style.oblique')}
|
||||
</option>
|
||||
</Dropdown>
|
||||
</SettingsItem>
|
||||
</Action>
|
||||
</Row>
|
||||
);
|
||||
};
|
||||
|
||||
const WidgetStyle = () => {
|
||||
return (
|
||||
<SettingsItem
|
||||
<Row>
|
||||
<Content
|
||||
title={variables.getMessage('modals.main.settings.sections.appearance.style.title')}
|
||||
subtitle={variables.getMessage(
|
||||
'modals.main.settings.sections.appearance.style.description',
|
||||
)}
|
||||
>
|
||||
/>
|
||||
<Action>
|
||||
<Radio
|
||||
name="widgetStyle"
|
||||
element=".other"
|
||||
|
@ -142,19 +160,23 @@ function AppearanceSettings() {
|
|||
]}
|
||||
category="widgets"
|
||||
/>
|
||||
</SettingsItem>
|
||||
</Action>
|
||||
</Row>
|
||||
);
|
||||
};
|
||||
|
||||
const AccessibilityOptions = () => {
|
||||
return (
|
||||
<SettingsItem
|
||||
title={variables.getMessage('modals.main.settings.sections.appearance.accessibility.title')}
|
||||
<Row final={true}>
|
||||
<Content
|
||||
title={variables.getMessage(
|
||||
'modals.main.settings.sections.appearance.accessibility.title',
|
||||
)}
|
||||
subtitle={variables.getMessage(
|
||||
'modals.main.settings.sections.appearance.accessibility.description',
|
||||
)}
|
||||
final={true}
|
||||
>
|
||||
/>
|
||||
<Action>
|
||||
<Dropdown
|
||||
label={variables.getMessage(
|
||||
'modals.main.settings.sections.appearance.accessibility.text_shadow.title',
|
||||
|
@ -204,7 +226,8 @@ function AppearanceSettings() {
|
|||
)
|
||||
}
|
||||
/>
|
||||
</SettingsItem>
|
||||
</Action>
|
||||
</Row>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
@ -4,7 +4,8 @@ import { useState } from 'react';
|
|||
import Header from '../Header';
|
||||
import Checkbox from '../Checkbox';
|
||||
import Dropdown from '../Dropdown';
|
||||
import SettingsItem from '../SettingsItem';
|
||||
|
||||
import { Row, Content, Action } from '../SettingsItem';
|
||||
import PreferencesWrapper from '../PreferencesWrapper';
|
||||
|
||||
export default function Date() {
|
||||
|
@ -77,10 +78,12 @@ export default function Date() {
|
|||
switch={true}
|
||||
/>
|
||||
<PreferencesWrapper setting="date" switch={true} zoomSetting="zoomDate">
|
||||
<SettingsItem
|
||||
<Row>
|
||||
<Content
|
||||
title={variables.getMessage('modals.main.settings.sections.time.type')}
|
||||
subtitle={variables.getMessage('modals.main.settings.sections.date.type.subtitle')}
|
||||
>
|
||||
/>
|
||||
<Action>
|
||||
<Dropdown
|
||||
name="dateType"
|
||||
onChange={(value) => {
|
||||
|
@ -96,16 +99,18 @@ export default function Date() {
|
|||
{variables.getMessage('modals.main.settings.sections.date.type.short')}
|
||||
</option>
|
||||
</Dropdown>
|
||||
</SettingsItem>
|
||||
<SettingsItem
|
||||
</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')}
|
||||
final={true}
|
||||
>
|
||||
/>
|
||||
<Action>
|
||||
{dateType === 'long' ? longSettings : shortSettings}
|
||||
<Checkbox
|
||||
name="weeknumber"
|
||||
|
@ -117,7 +122,8 @@ export default function Date() {
|
|||
text={variables.getMessage('modals.main.settings.sections.time.digital.zero')}
|
||||
category="date"
|
||||
/>
|
||||
</SettingsItem>
|
||||
</Action>
|
||||
</Row>
|
||||
</PreferencesWrapper>
|
||||
</>
|
||||
);
|
||||
|
|
|
@ -6,7 +6,8 @@ import { TextField } from '@mui/material';
|
|||
|
||||
import EventBus from 'modules/helpers/eventbus';
|
||||
import { values } from 'modules/helpers/settings/modals';
|
||||
import SettingsItem from '../SettingsItem';
|
||||
|
||||
import { Row, Content, Action } from '../SettingsItem';
|
||||
|
||||
function ExperimentalSettings() {
|
||||
const [eventType, setEventType] = useState();
|
||||
|
@ -20,9 +21,11 @@ function ExperimentalSettings() {
|
|||
<span className="subtitle">
|
||||
{variables.getMessage('modals.main.settings.sections.experimental.warning')}
|
||||
</span>
|
||||
<SettingsItem
|
||||
<Row>
|
||||
<Content
|
||||
title={variables.getMessage('modals.main.settings.sections.experimental.developer')}
|
||||
>
|
||||
/>
|
||||
<Action>
|
||||
<Checkbox name="debug" text="Debug hotkey (Ctrl + #)" element=".other" />
|
||||
<Slider
|
||||
title="Debug timeout"
|
||||
|
@ -54,8 +57,11 @@ function ExperimentalSettings() {
|
|||
<button className="uploadbg" onClick={() => EventBus.emit(eventType, eventName)}>
|
||||
Send
|
||||
</button>
|
||||
</SettingsItem>
|
||||
<SettingsItem title="Data" final={true}>
|
||||
</Action>
|
||||
</Row>
|
||||
<Row final={true}>
|
||||
<Content title="Data" />
|
||||
<Action>
|
||||
<button
|
||||
className="reset"
|
||||
style={{ marginLeft: '0px' }}
|
||||
|
@ -63,7 +69,8 @@ function ExperimentalSettings() {
|
|||
>
|
||||
Clear LocalStorage
|
||||
</button>
|
||||
</SettingsItem>
|
||||
</Action>
|
||||
</Row>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -5,7 +5,8 @@ import Header from '../Header';
|
|||
import Checkbox from '../Checkbox';
|
||||
import Switch from '../Switch';
|
||||
import Text from '../Text';
|
||||
import SettingsItem from '../SettingsItem';
|
||||
|
||||
import { Row, Content, Action } from '../SettingsItem';
|
||||
import PreferencesWrapper from '../PreferencesWrapper';
|
||||
|
||||
const GreetingSettings = () => {
|
||||
|
@ -23,10 +24,12 @@ const GreetingSettings = () => {
|
|||
|
||||
const AdditionalOptions = () => {
|
||||
return (
|
||||
<SettingsItem
|
||||
<Row>
|
||||
<Content
|
||||
title={variables.getMessage('modals.main.settings.additional_settings')}
|
||||
subtitle={variables.getMessage(`${GREETING_SECTION}.additional`)}
|
||||
>
|
||||
/>
|
||||
<Action>
|
||||
<Checkbox
|
||||
name="events"
|
||||
text={variables.getMessage(`${GREETING_SECTION}.events`)}
|
||||
|
@ -42,17 +45,21 @@ const GreetingSettings = () => {
|
|||
name="greetingName"
|
||||
category="greeting"
|
||||
/>
|
||||
</SettingsItem>
|
||||
</Action>
|
||||
</Row>
|
||||
);
|
||||
};
|
||||
|
||||
const BirthdayOptions = () => {
|
||||
return (
|
||||
<SettingsItem
|
||||
<Row final={true}>
|
||||
<Content
|
||||
title={variables.getMessage(`${GREETING_SECTION}.birthday`)}
|
||||
subtitle={variables.getMessage('modals.main.settings.sections.greeting.birthday_subtitle')}
|
||||
final={true}
|
||||
>
|
||||
subtitle={variables.getMessage(
|
||||
'modals.main.settings.sections.greeting.birthday_subtitle',
|
||||
)}
|
||||
/>
|
||||
<Action>
|
||||
<Switch
|
||||
name="birthdayenabled"
|
||||
text={variables.getMessage('modals.main.settings.enabled')}
|
||||
|
@ -72,7 +79,8 @@ const GreetingSettings = () => {
|
|||
value={birthday.toISOString().substring(0, 10)}
|
||||
required
|
||||
/>
|
||||
</SettingsItem>
|
||||
</Action>
|
||||
</Row>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
@ -4,7 +4,7 @@ import { MdCancel, MdAdd, MdOutlineTextsms } from 'react-icons/md';
|
|||
import { toast } from 'react-toastify';
|
||||
import { TextareaAutosize } from '@mui/material';
|
||||
|
||||
import SettingsItem from '../SettingsItem';
|
||||
import { Row, Content, Action } from '../SettingsItem';
|
||||
import Header from '../Header';
|
||||
|
||||
import EventBus from 'modules/helpers/eventbus';
|
||||
|
@ -72,11 +72,14 @@ export default class Message extends PureComponent {
|
|||
switch={true}
|
||||
/>
|
||||
<PreferencesWrapper setting="message" switch={true} zoomSetting="zoomMessage">
|
||||
<SettingsItem title={variables.getMessage(`${MESSAGE_SECTION}.messages`)} final={true}>
|
||||
<Row final={true}>
|
||||
<Content title={variables.getMessage(`${MESSAGE_SECTION}.messages`)} />
|
||||
<Action>
|
||||
<button onClick={() => this.modifyMessage('add')}>
|
||||
{variables.getMessage(`${MESSAGE_SECTION}.add`)} <MdAdd />
|
||||
</button>
|
||||
</SettingsItem>
|
||||
</Action>
|
||||
</Row>
|
||||
<div className="messagesContainer">
|
||||
{this.state.messages.map((_url, index) => (
|
||||
<div className="messageMap" key={index}>
|
||||
|
|
|
@ -10,7 +10,7 @@ import AddModal from './quicklinks/AddModal';
|
|||
import Checkbox from '../Checkbox';
|
||||
import Dropdown from '../Dropdown';
|
||||
|
||||
import SettingsItem from '../SettingsItem';
|
||||
import { Row, Content, Action } from '../SettingsItem';
|
||||
import Header from '../Header';
|
||||
import { getTitleFromUrl, isValidUrl } from 'modules/helpers/settings/modals';
|
||||
import QuickLink from './quicklinks/QuickLink';
|
||||
|
@ -121,13 +121,14 @@ function Navbar() {
|
|||
zoomSetting="zoomNavbar"
|
||||
zoomCategory="navbar"
|
||||
/>
|
||||
<SettingsItem
|
||||
<Row final={false}>
|
||||
<Content
|
||||
title={variables.getMessage('modals.main.settings.additional_settings')}
|
||||
subtitle={variables.getMessage(
|
||||
'modals.main.settings.sections.appearance.navbar.additional',
|
||||
)}
|
||||
final={false}
|
||||
>
|
||||
/>
|
||||
<Action>
|
||||
<Checkbox
|
||||
name="navbarHover"
|
||||
text={variables.getMessage(`${NAVBAR_SECTION}.hover`)}
|
||||
|
@ -160,15 +161,17 @@ function Navbar() {
|
|||
text={variables.getMessage('widgets.navbar.apps.title')}
|
||||
category="navbar"
|
||||
/>
|
||||
</SettingsItem>
|
||||
</Action>
|
||||
</Row>
|
||||
{showRefreshOptions && (
|
||||
<SettingsItem
|
||||
<Row final={false}>
|
||||
<Content
|
||||
title={variables.getMessage(`${NAVBAR_SECTION}.refresh`)}
|
||||
subtitle={variables.getMessage(
|
||||
'modals.main.settings.sections.appearance.navbar.refresh_subtitle',
|
||||
)}
|
||||
final={false}
|
||||
>
|
||||
/>
|
||||
<Action>
|
||||
<Dropdown name="refreshOption" category="navbar">
|
||||
<option value="page">
|
||||
{variables.getMessage(
|
||||
|
@ -186,21 +189,24 @@ function Navbar() {
|
|||
{variables.getMessage('modals.main.settings.sections.background.title')}
|
||||
</option>
|
||||
</Dropdown>
|
||||
</SettingsItem>
|
||||
</Action>
|
||||
</Row>
|
||||
)}
|
||||
|
||||
<SettingsItem
|
||||
<Row final={true}>
|
||||
<Content
|
||||
title={variables.getMessage('widgets.navbar.apps.title')}
|
||||
subtitle={variables.getMessage(
|
||||
'modals.main.settings.sections.appearance.navbar.apps_subtitle',
|
||||
)}
|
||||
final={true}
|
||||
>
|
||||
/>
|
||||
<Action>
|
||||
<button onClick={() => setAppsModalInfo((oldState) => ({ ...oldState, newLink: true }))}>
|
||||
{variables.getMessage('modals.main.settings.sections.quicklinks.add_link')}
|
||||
<MdAddLink />
|
||||
</button>
|
||||
</SettingsItem>
|
||||
</Action>
|
||||
</Row>
|
||||
|
||||
<div className="messagesContainer">
|
||||
{appsModalInfo.items.map((item, i) => (
|
||||
|
|
|
@ -6,7 +6,7 @@ import Checkbox from '../Checkbox';
|
|||
import Dropdown from '../Dropdown';
|
||||
import Modal from 'react-modal';
|
||||
|
||||
import SettingsItem from '../SettingsItem';
|
||||
import { Row, Content, Action } from '../SettingsItem';
|
||||
import AddModal from './quicklinks/AddModal';
|
||||
|
||||
import EventBus from 'modules/helpers/eventbus';
|
||||
|
@ -138,10 +138,12 @@ export default class QuickLinks extends PureComponent {
|
|||
switch={true}
|
||||
/>
|
||||
<PreferencesWrapper setting="quicklinksenabled" switch={true} zoomSetting="zoomQuicklinks">
|
||||
<SettingsItem
|
||||
<Row>
|
||||
<Content
|
||||
title={variables.getMessage('modals.main.settings.additional_settings')}
|
||||
subtitle={variables.getMessage(`${QUICKLINKS_SECTION}.additional`)}
|
||||
>
|
||||
/>
|
||||
<Action>
|
||||
<Checkbox
|
||||
name="quicklinksnewtab"
|
||||
text={variables.getMessage(`${QUICKLINKS_SECTION}.open_new`)}
|
||||
|
@ -152,13 +154,16 @@ export default class QuickLinks extends PureComponent {
|
|||
text={variables.getMessage(`${QUICKLINKS_SECTION}.tooltip`)}
|
||||
category="quicklinks"
|
||||
/>
|
||||
</SettingsItem>
|
||||
<SettingsItem
|
||||
</Action>
|
||||
</Row>
|
||||
<Row>
|
||||
<Content
|
||||
title={variables.getMessage(`${QUICKLINKS_SECTION}.styling`)}
|
||||
subtitle={variables.getMessage(
|
||||
'modals.main.settings.sections.quicklinks.styling_description',
|
||||
)}
|
||||
>
|
||||
/>
|
||||
<Action>
|
||||
<Dropdown
|
||||
label={variables.getMessage(`${QUICKLINKS_SECTION}.style`)}
|
||||
name="quickLinksStyle"
|
||||
|
@ -174,13 +179,17 @@ export default class QuickLinks extends PureComponent {
|
|||
{variables.getMessage(`${QUICKLINKS_SECTION}.options.metro`)}
|
||||
</option>
|
||||
</Dropdown>
|
||||
</SettingsItem>
|
||||
</Action>
|
||||
</Row>
|
||||
|
||||
<SettingsItem title={variables.getMessage(`${QUICKLINKS_SECTION}.title`)} final={true}>
|
||||
<Row final={true}>
|
||||
<Content title={variables.getMessage(`${QUICKLINKS_SECTION}.title`)} />
|
||||
<Action>
|
||||
<button onClick={() => this.setState({ showAddModal: true })}>
|
||||
{variables.getMessage(`${QUICKLINKS_SECTION}.add_link`)} <MdAddLink />
|
||||
</button>
|
||||
</SettingsItem>
|
||||
</Action>
|
||||
</Row>
|
||||
|
||||
{this.state.items.length === 0 && (
|
||||
<div className="photosEmpty">
|
||||
|
|
|
@ -12,7 +12,8 @@ import TextareaAutosize from '@mui/material/TextareaAutosize';
|
|||
import Header from '../Header';
|
||||
import Checkbox from '../Checkbox';
|
||||
import Dropdown from '../Dropdown';
|
||||
import SettingsItem from '../SettingsItem';
|
||||
|
||||
import { Row, Content, Action } from '../SettingsItem';
|
||||
import Section from '../Section';
|
||||
import PreferencesWrapper from '../PreferencesWrapper';
|
||||
|
||||
|
@ -98,10 +99,12 @@ export default class QuoteSettings extends PureComponent {
|
|||
|
||||
const ButtonOptions = () => {
|
||||
return (
|
||||
<SettingsItem
|
||||
<Row>
|
||||
<Content
|
||||
title={variables.getMessage(`${QUOTE_SECTION}.buttons.title`)}
|
||||
subtitle={variables.getMessage('modals.main.settings.sections.quote.buttons.subtitle')}
|
||||
>
|
||||
/>
|
||||
<Action>
|
||||
<Checkbox
|
||||
name="copyButton"
|
||||
text={variables.getMessage(`${QUOTE_SECTION}.buttons.copy`)}
|
||||
|
@ -117,7 +120,8 @@ export default class QuoteSettings extends PureComponent {
|
|||
text={variables.getMessage(`${QUOTE_SECTION}.buttons.favourite`)}
|
||||
category="quote"
|
||||
/>
|
||||
</SettingsItem>
|
||||
</Action>
|
||||
</Row>
|
||||
);
|
||||
};
|
||||
|
||||
|
@ -140,11 +144,12 @@ export default class QuoteSettings extends PureComponent {
|
|||
|
||||
const AdditionalOptions = () => {
|
||||
return (
|
||||
<SettingsItem
|
||||
<Row final={true}>
|
||||
<Content
|
||||
title={variables.getMessage('modals.main.settings.additional_settings')}
|
||||
subtitle={variables.getMessage(`${QUOTE_SECTION}.additional`)}
|
||||
final={true}
|
||||
>
|
||||
/>
|
||||
<Action>
|
||||
<Checkbox
|
||||
name="authorLink"
|
||||
text={variables.getMessage(`${QUOTE_SECTION}.author_link`)}
|
||||
|
@ -155,7 +160,8 @@ export default class QuoteSettings extends PureComponent {
|
|||
text={variables.getMessage(`${QUOTE_SECTION}.author_img`)}
|
||||
element=".other"
|
||||
/>
|
||||
</SettingsItem>
|
||||
</Action>
|
||||
</Row>
|
||||
);
|
||||
};
|
||||
|
||||
|
@ -163,15 +169,17 @@ export default class QuoteSettings extends PureComponent {
|
|||
if (this.state.quoteType === 'custom' && this.state.sourceSection === true) {
|
||||
customSettings = (
|
||||
<>
|
||||
<SettingsItem
|
||||
<Row final={true}>
|
||||
<Content
|
||||
title={variables.getMessage(`${QUOTE_SECTION}.custom`)}
|
||||
subtitle={variables.getMessage(`${QUOTE_SECTION}.custom_subtitle`)}
|
||||
final={true}
|
||||
>
|
||||
/>
|
||||
<Action>
|
||||
<button onClick={() => this.modifyCustomQuote('add')}>
|
||||
{variables.getMessage(`${QUOTE_SECTION}.add`)} <MdAdd />
|
||||
</button>
|
||||
</SettingsItem>
|
||||
</Action>
|
||||
</Row>
|
||||
|
||||
{this.state.customQuote.length !== 0 ? (
|
||||
<div className="messagesContainer">
|
||||
|
@ -255,13 +263,15 @@ export default class QuoteSettings extends PureComponent {
|
|||
/>
|
||||
)}
|
||||
{this.state.sourceSection && (
|
||||
<SettingsItem
|
||||
<Row final={true}>
|
||||
<Content
|
||||
title={variables.getMessage('modals.main.settings.sections.background.source.title')}
|
||||
subtitle={variables.getMessage(`${QUOTE_SECTION}.source_subtitle`)}
|
||||
final={true}
|
||||
>
|
||||
/>
|
||||
<Action>
|
||||
<SourceDropdown />
|
||||
</SettingsItem>
|
||||
</Action>
|
||||
</Row>
|
||||
)}
|
||||
{!this.state.sourceSection && (
|
||||
<PreferencesWrapper setting="quote" zoomSetting="zoomQuote" switch={true}>
|
||||
|
|
|
@ -6,7 +6,8 @@ import { MenuItem, TextField } from '@mui/material';
|
|||
import Header from '../Header';
|
||||
import Dropdown from '../Dropdown';
|
||||
import Checkbox from '../Checkbox';
|
||||
import SettingsItem from '../SettingsItem';
|
||||
|
||||
import { Row, Content, Action } from '../SettingsItem';
|
||||
|
||||
import EventBus from 'modules/helpers/eventbus';
|
||||
|
||||
|
@ -69,10 +70,12 @@ export default class SearchSettings extends PureComponent {
|
|||
|
||||
const AdditionalOptions = () => {
|
||||
return (
|
||||
<SettingsItem
|
||||
<Row>
|
||||
<Content
|
||||
title={variables.getMessage('modals.main.settings.additional_settings')}
|
||||
subtitle={variables.getMessage(`${SEARCH_SECTION}.additional`)}
|
||||
>
|
||||
/>
|
||||
<Action>
|
||||
{/* not supported on firefox */}
|
||||
{navigator.userAgent.includes('Chrome') && typeof InstallTrigger === 'undefined' ? (
|
||||
<Checkbox
|
||||
|
@ -98,19 +101,21 @@ export default class SearchSettings extends PureComponent {
|
|||
text={variables.getMessage(`${SEARCH_SECTION}.autocomplete`)}
|
||||
category="search"
|
||||
/>
|
||||
</SettingsItem>
|
||||
</Action>
|
||||
</Row>
|
||||
);
|
||||
};
|
||||
|
||||
const SearchEngineSelection = () => {
|
||||
return (
|
||||
<SettingsItem
|
||||
<Row final={!this.state.customEnabled}>
|
||||
<Content
|
||||
title={variables.getMessage(`${SEARCH_SECTION}.search_engine`)}
|
||||
subtitle={variables.getMessage(
|
||||
'modals.main.settings.sections.search.search_engine_subtitle',
|
||||
)}
|
||||
final={!this.state.customEnabled}
|
||||
>
|
||||
/>
|
||||
<Action>
|
||||
<Dropdown
|
||||
name="searchEngine"
|
||||
onChange={(value) => this.setSearchEngine(value)}
|
||||
|
@ -125,7 +130,8 @@ export default class SearchSettings extends PureComponent {
|
|||
{variables.getMessage(`${SEARCH_SECTION}.custom`).split(' ')[0]}
|
||||
</MenuItem>
|
||||
</Dropdown>
|
||||
</SettingsItem>
|
||||
</Action>
|
||||
</Row>
|
||||
);
|
||||
};
|
||||
|
||||
|
@ -141,7 +147,9 @@ export default class SearchSettings extends PureComponent {
|
|||
<AdditionalOptions />
|
||||
<SearchEngineSelection />
|
||||
{this.state.customEnabled && (
|
||||
<SettingsItem title={variables.getMessage(`${SEARCH_SECTION}.custom`)} final={true}>
|
||||
<Row final={true}>
|
||||
<Content title={variables.getMessage(`${SEARCH_SECTION}.custom`)} />
|
||||
<Action>
|
||||
<TextField
|
||||
label={variables.getMessage(`${SEARCH_SECTION}.custom`)}
|
||||
value={this.state.customValue}
|
||||
|
@ -154,7 +162,8 @@ export default class SearchSettings extends PureComponent {
|
|||
{variables.getMessage('modals.main.settings.buttons.reset')}
|
||||
</span>
|
||||
</p>
|
||||
</SettingsItem>
|
||||
</Action>
|
||||
</Row>
|
||||
)}
|
||||
</PreferencesWrapper>
|
||||
</>
|
||||
|
|
|
@ -5,8 +5,9 @@ import Header from '../Header';
|
|||
import Checkbox from '../Checkbox';
|
||||
import Dropdown from '../Dropdown';
|
||||
import Radio from '../Radio';
|
||||
import SettingsItem from '../SettingsItem';
|
||||
|
||||
import PreferencesWrapper from '../PreferencesWrapper';
|
||||
import { Row, Content, Action } from '../SettingsItem';
|
||||
|
||||
import { MdRefresh } from 'react-icons/md';
|
||||
|
||||
|
@ -33,14 +34,17 @@ const TimeSettings = () => {
|
|||
|
||||
const WidgetType = () => {
|
||||
return (
|
||||
<SettingsItem
|
||||
<Row final={timeType === 'percentageComplete'}>
|
||||
<Content
|
||||
title={variables.getMessage(`${TIME_SECTION}.type`)}
|
||||
subtitle={variables.getMessage(`${TIME_SECTION}.type_subtitle`)}
|
||||
final={timeType === 'percentageComplete'}
|
||||
>
|
||||
/>
|
||||
<Action>
|
||||
<Dropdown name="timeType" onChange={(value) => setTimeType(value)} category="clock">
|
||||
<option value="digital">{variables.getMessage(`${TIME_SECTION}.digital.title`)}</option>
|
||||
<option value="analogue">{variables.getMessage(`${TIME_SECTION}.analogue.title`)}</option>
|
||||
<option value="analogue">
|
||||
{variables.getMessage(`${TIME_SECTION}.analogue.title`)}
|
||||
</option>
|
||||
<option value="percentageComplete">
|
||||
{variables.getMessage(`${TIME_SECTION}.percentage_complete`)}
|
||||
</option>
|
||||
|
@ -48,16 +52,18 @@ const TimeSettings = () => {
|
|||
{variables.getMessage(`${TIME_SECTION}.vertical_clock.title`)}
|
||||
</option>
|
||||
</Dropdown>
|
||||
</SettingsItem>
|
||||
</Action>
|
||||
</Row>
|
||||
);
|
||||
};
|
||||
|
||||
const digitalSettings = (
|
||||
<SettingsItem
|
||||
<Row final={true}>
|
||||
<Content
|
||||
title={variables.getMessage(`${TIME_SECTION}.digital.title`)}
|
||||
subtitle={variables.getMessage(`${TIME_SECTION}.digital.subtitle`)}
|
||||
final={true}
|
||||
>
|
||||
/>
|
||||
<Action>
|
||||
<Radio
|
||||
name="timeformat"
|
||||
options={[
|
||||
|
@ -83,15 +89,17 @@ const TimeSettings = () => {
|
|||
text={variables.getMessage(`${TIME_SECTION}.digital.zero`)}
|
||||
category="clock"
|
||||
/>
|
||||
</SettingsItem>
|
||||
</Action>
|
||||
</Row>
|
||||
);
|
||||
|
||||
const analogSettings = (
|
||||
<SettingsItem
|
||||
<Row final={true}>
|
||||
<Content
|
||||
title={variables.getMessage(`${TIME_SECTION}.analogue.title`)}
|
||||
subtitle={variables.getMessage(`${TIME_SECTION}.analogue.subtitle`)}
|
||||
final={true}
|
||||
>
|
||||
/>
|
||||
<Action>
|
||||
<Checkbox
|
||||
name="secondHand"
|
||||
text={variables.getMessage(`${TIME_SECTION}.analogue.second_hand`)}
|
||||
|
@ -122,16 +130,19 @@ const TimeSettings = () => {
|
|||
text={variables.getMessage(`${TIME_SECTION}.analogue.round_clock`)}
|
||||
category="clock"
|
||||
/>
|
||||
</SettingsItem>
|
||||
</Action>
|
||||
</Row>
|
||||
);
|
||||
|
||||
const verticalClock = (
|
||||
<>
|
||||
<SettingsItem
|
||||
<Row>
|
||||
<Content
|
||||
title={variables.getMessage(
|
||||
'modals.main.settings.sections.time.vertical_clock.change_hour_colour',
|
||||
)}
|
||||
>
|
||||
/>
|
||||
<Action>
|
||||
<div className="colourInput">
|
||||
<input
|
||||
type="color"
|
||||
|
@ -148,12 +159,15 @@ const TimeSettings = () => {
|
|||
<MdRefresh />
|
||||
{variables.getMessage('modals.main.settings.buttons.reset')}
|
||||
</span>
|
||||
</SettingsItem>
|
||||
<SettingsItem
|
||||
</Action>
|
||||
</Row>
|
||||
<Row>
|
||||
<Content
|
||||
title={variables.getMessage(
|
||||
'modals.main.settings.sections.time.vertical_clock.change_minute_colour',
|
||||
)}
|
||||
>
|
||||
/>
|
||||
<Action>
|
||||
<div className="colourInput">
|
||||
<input
|
||||
type="color"
|
||||
|
@ -170,7 +184,8 @@ const TimeSettings = () => {
|
|||
<MdRefresh />
|
||||
{variables.getMessage('modals.main.settings.buttons.reset')}
|
||||
</span>
|
||||
</SettingsItem>
|
||||
</Action>
|
||||
</Row>
|
||||
{digitalSettings}
|
||||
</>
|
||||
);
|
||||
|
|
|
@ -8,9 +8,11 @@ import Radio from '../Radio';
|
|||
import Dropdown from '../Dropdown';
|
||||
import Checkbox from '../Checkbox';
|
||||
import { TextField } from '@mui/material';
|
||||
import SettingsItem from '../SettingsItem';
|
||||
|
||||
import PreferencesWrapper from '../PreferencesWrapper';
|
||||
|
||||
import { Row, Content, Action } from '../SettingsItem';
|
||||
|
||||
export default class WeatherSettings extends PureComponent {
|
||||
constructor() {
|
||||
super();
|
||||
|
@ -44,7 +46,9 @@ export default class WeatherSettings extends PureComponent {
|
|||
|
||||
const WidgetType = () => {
|
||||
return (
|
||||
<SettingsItem title={variables.getMessage(`${WEATHER_SECTION}.widget_type`)}>
|
||||
<Row>
|
||||
<Content title={variables.getMessage(`${WEATHER_SECTION}.widget_type`)} />
|
||||
<Action>
|
||||
<Dropdown
|
||||
label={variables.getMessage('modals.main.settings.sections.time.type')}
|
||||
name="weatherType"
|
||||
|
@ -52,11 +56,16 @@ export default class WeatherSettings extends PureComponent {
|
|||
onChange={() => this.forceUpdate()}
|
||||
>
|
||||
<option value="1">{variables.getMessage(`${WEATHER_SECTION}.options.basic`)}</option>
|
||||
<option value="2">{variables.getMessage(`${WEATHER_SECTION}.options.standard`)}</option>
|
||||
<option value="3">{variables.getMessage(`${WEATHER_SECTION}.options.expanded`)}</option>
|
||||
<option value="2">
|
||||
{variables.getMessage(`${WEATHER_SECTION}.options.standard`)}
|
||||
</option>
|
||||
<option value="3">
|
||||
{variables.getMessage(`${WEATHER_SECTION}.options.expanded`)}
|
||||
</option>
|
||||
<option value="4">{variables.getMessage(`${WEATHER_SECTION}.options.custom`)}</option>
|
||||
</Dropdown>
|
||||
</SettingsItem>
|
||||
</Action>
|
||||
</Row>
|
||||
);
|
||||
};
|
||||
|
||||
|
@ -89,7 +98,9 @@ export default class WeatherSettings extends PureComponent {
|
|||
);
|
||||
};
|
||||
return (
|
||||
<SettingsItem title={variables.getMessage(`${WEATHER_SECTION}.location`)}>
|
||||
<Row>
|
||||
<Content title={variables.getMessage(`${WEATHER_SECTION}.location`)} />
|
||||
<Action>
|
||||
<TextField
|
||||
label={variables.getMessage(`${WEATHER_SECTION}.location`)}
|
||||
value={this.state.location}
|
||||
|
@ -102,16 +113,16 @@ export default class WeatherSettings extends PureComponent {
|
|||
<MdAutoAwesome />
|
||||
{variables.getMessage(`${WEATHER_SECTION}.auto`)}
|
||||
</span>
|
||||
</SettingsItem>
|
||||
</Action>
|
||||
</Row>
|
||||
);
|
||||
};
|
||||
|
||||
const TemperatureFormat = () => {
|
||||
return (
|
||||
<SettingsItem
|
||||
title={variables.getMessage(`${WEATHER_SECTION}.temp_format.title`)}
|
||||
final={weatherType !== '4'}
|
||||
>
|
||||
<Row final={weatherType !== '4'}>
|
||||
<Content title={variables.getMessage(`${WEATHER_SECTION}.temp_format.title`)} />
|
||||
<Action>
|
||||
<Radio
|
||||
name="tempformat"
|
||||
options={[
|
||||
|
@ -130,7 +141,8 @@ export default class WeatherSettings extends PureComponent {
|
|||
]}
|
||||
category="weather"
|
||||
/>
|
||||
</SettingsItem>
|
||||
</Action>
|
||||
</Row>
|
||||
);
|
||||
};
|
||||
|
||||
|
@ -167,10 +179,9 @@ export default class WeatherSettings extends PureComponent {
|
|||
];
|
||||
|
||||
return (
|
||||
<SettingsItem
|
||||
title={variables.getMessage(`${WEATHER_SECTION}.custom_settings`)}
|
||||
final={true}
|
||||
>
|
||||
<Row final={true}>
|
||||
<Content title={variables.getMessage(`${WEATHER_SECTION}.custom_settings`)} />
|
||||
<Action>
|
||||
{weatherOptions.map((item) => (
|
||||
<Checkbox
|
||||
key={item.name}
|
||||
|
@ -181,7 +192,8 @@ export default class WeatherSettings extends PureComponent {
|
|||
disabled={item.disabled}
|
||||
/>
|
||||
))}
|
||||
</SettingsItem>
|
||||
</Action>
|
||||
</Row>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
@ -9,7 +9,7 @@ import ChipSelect from '../../ChipSelect';
|
|||
import Dropdown from '../../Dropdown';
|
||||
import Slider from '../../Slider';
|
||||
import Radio from '../../Radio';
|
||||
import SettingsItem from '../../SettingsItem';
|
||||
import { Row, Content, Action } from '../../SettingsItem';
|
||||
import Text from '../../Text';
|
||||
|
||||
import ColourSettings from './Colour';
|
||||
|
@ -92,11 +92,7 @@ export default class BackgroundSettings extends PureComponent {
|
|||
|
||||
render() {
|
||||
/* const interval = (
|
||||
<SettingsItem
|
||||
title={variables.getMessage('modals.main.settings.sections.background.interval.title')}
|
||||
subtitle={variables.getMessage(
|
||||
'modals.main.settings.sections.background.interval.subtitle',
|
||||
)}
|
||||
<Row
|
||||
final={
|
||||
localStorage.getItem('photo_packs') &&
|
||||
this.state.backgroundType !== 'custom' &&
|
||||
|
@ -104,6 +100,11 @@ export default class BackgroundSettings extends PureComponent {
|
|||
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
|
||||
label={variables.getMessage('modals.main.settings.sections.background.interval.title')}
|
||||
name="backgroundchange"
|
||||
|
@ -128,16 +129,18 @@ export default class BackgroundSettings extends PureComponent {
|
|||
{variables.getMessage('modals.main.settings.sections.background.interval.month')}
|
||||
</option>
|
||||
</Dropdown>
|
||||
</SettingsItem>
|
||||
</Action>
|
||||
</Row>
|
||||
);*/
|
||||
|
||||
const APISettings = (
|
||||
<>
|
||||
<SettingsItem
|
||||
<Row final={this.state.backgroundAPI === 'mue'}>
|
||||
<Content
|
||||
title={variables.getMessage('modals.main.settings.sections.background.api')}
|
||||
subtitle={variables.getMessage('modals.main.settings.sections.background.api_subtitle')}
|
||||
final={this.state.backgroundAPI === 'mue'}
|
||||
>
|
||||
/>
|
||||
<Action>
|
||||
{this.state.backgroundCategories[0] === variables.getMessage('modals.main.loading') ? (
|
||||
<>
|
||||
<Dropdown
|
||||
|
@ -172,7 +175,9 @@ export default class BackgroundSettings extends PureComponent {
|
|||
)}
|
||||
</option>
|
||||
<option value="high">
|
||||
{variables.getMessage('modals.main.settings.sections.background.source.quality.high')}
|
||||
{variables.getMessage(
|
||||
'modals.main.settings.sections.background.source.quality.high',
|
||||
)}
|
||||
</option>
|
||||
<option value="normal">
|
||||
{variables.getMessage(
|
||||
|
@ -202,13 +207,17 @@ export default class BackgroundSettings extends PureComponent {
|
|||
element="#backgroundImage"
|
||||
onChange={(e) => this.updateAPI(e)}
|
||||
/>
|
||||
</SettingsItem>
|
||||
</Action>
|
||||
</Row>
|
||||
{this.state.backgroundAPI === 'unsplash' && (
|
||||
<SettingsItem
|
||||
title={variables.getMessage('modals.main.settings.sections.background.unsplash.title')}
|
||||
<Row final={true}>
|
||||
<Action
|
||||
title={variables.getMessage(
|
||||
'modals.main.settings.sections.background.unsplash.title',
|
||||
)}
|
||||
subtitle={variables.getMessage('modals.main.settings.sections.background.subtitle')}
|
||||
final={true}
|
||||
>
|
||||
/>
|
||||
<Action>
|
||||
<Text
|
||||
title={variables.getMessage('modals.main.settings.sections.background.id')}
|
||||
subtitle={variables.getMessage(
|
||||
|
@ -219,7 +228,8 @@ export default class BackgroundSettings extends PureComponent {
|
|||
category="background"
|
||||
element="#backgroundImage"
|
||||
/>
|
||||
</SettingsItem>
|
||||
</Action>
|
||||
</Row>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
@ -385,13 +395,14 @@ export default class BackgroundSettings extends PureComponent {
|
|||
(this.state.backgroundType === 'api' ||
|
||||
this.state.backgroundType === 'custom' ||
|
||||
this.state.marketplaceEnabled) ? (
|
||||
<SettingsItem
|
||||
<Row final={true}>
|
||||
<Content
|
||||
title={variables.getMessage('modals.main.settings.sections.background.display')}
|
||||
subtitle={variables.getMessage(
|
||||
'modals.main.settings.sections.background.display_subtitle',
|
||||
)}
|
||||
final={true}
|
||||
>
|
||||
/>
|
||||
<Action>
|
||||
<Checkbox
|
||||
name="ddgProxy"
|
||||
text={variables.getMessage(
|
||||
|
@ -419,22 +430,30 @@ export default class BackgroundSettings extends PureComponent {
|
|||
element=".other"
|
||||
disabled={!usingImage}
|
||||
/>
|
||||
</SettingsItem>
|
||||
</Action>
|
||||
</Row>
|
||||
) : null}
|
||||
{this.state.backgroundSettingsSection && (
|
||||
<>
|
||||
<SettingsItem
|
||||
title={variables.getMessage('modals.main.settings.sections.background.source.title')}
|
||||
subtitle={variables.getMessage(
|
||||
'modals.main.settings.sections.background.source.subtitle',
|
||||
)}
|
||||
<Row
|
||||
final={
|
||||
this.state.backgroundType === 'random_colour' ||
|
||||
this.state.backgroundType === 'random_gradient'
|
||||
}
|
||||
>
|
||||
<Content
|
||||
title={variables.getMessage(
|
||||
'modals.main.settings.sections.background.source.title',
|
||||
)}
|
||||
subtitle={variables.getMessage(
|
||||
'modals.main.settings.sections.background.source.subtitle',
|
||||
)}
|
||||
/>
|
||||
<Action>
|
||||
<Dropdown
|
||||
label={variables.getMessage('modals.main.settings.sections.background.type.title')}
|
||||
label={variables.getMessage(
|
||||
'modals.main.settings.sections.background.type.title',
|
||||
)}
|
||||
name="backgroundType"
|
||||
onChange={(value) => this.setState({ backgroundType: value })}
|
||||
category="background"
|
||||
|
@ -468,7 +487,8 @@ export default class BackgroundSettings extends PureComponent {
|
|||
)}
|
||||
</option>
|
||||
</Dropdown>
|
||||
</SettingsItem>
|
||||
</Action>
|
||||
</Row>
|
||||
{/* // todo: ideally refactor all of this file, but we need interval to appear on marketplace too */}
|
||||
{/*{this.state.backgroundType === 'api' ||
|
||||
this.state.backgroundType === 'custom' ||
|
||||
|
@ -482,15 +502,18 @@ export default class BackgroundSettings extends PureComponent {
|
|||
this.state.backgroundType === 'custom' ||
|
||||
this.state.marketplaceEnabled) &&
|
||||
this.state.effects ? (
|
||||
<SettingsItem
|
||||
<Row final={true}>
|
||||
<Content
|
||||
title={variables.getMessage('modals.main.settings.sections.background.effects.title')}
|
||||
subtitle={variables.getMessage(
|
||||
'modals.main.settings.sections.background.effects.subtitle',
|
||||
)}
|
||||
final={true}
|
||||
>
|
||||
/>
|
||||
<Action>
|
||||
<Slider
|
||||
title={variables.getMessage('modals.main.settings.sections.background.effects.blur')}
|
||||
title={variables.getMessage(
|
||||
'modals.main.settings.sections.background.effects.blur',
|
||||
)}
|
||||
name="blur"
|
||||
min="0"
|
||||
max="100"
|
||||
|
@ -568,7 +591,8 @@ export default class BackgroundSettings extends PureComponent {
|
|||
element="#backgroundImage"
|
||||
/>
|
||||
)}
|
||||
</SettingsItem>
|
||||
</Action>
|
||||
</Row>
|
||||
) : null}
|
||||
</>
|
||||
);
|
||||
|
|
|
@ -2,7 +2,7 @@ import variables from 'modules/variables';
|
|||
import { PureComponent, Fragment } from 'react';
|
||||
import { ColorPicker } from '@muetab/react-color-gradient-picker';
|
||||
import { toast } from 'react-toastify';
|
||||
import SettingsItem from '../../SettingsItem';
|
||||
import { Row, Content, Action } from '../../SettingsItem';
|
||||
|
||||
import hexToRgb from 'modules/helpers/background/hexToRgb';
|
||||
import rgbToHex from 'modules/helpers/background/rgbToHex';
|
||||
|
@ -220,19 +220,21 @@ export default class ColourSettings extends PureComponent {
|
|||
|
||||
return (
|
||||
<>
|
||||
<SettingsItem
|
||||
<Row final={true}>
|
||||
<Content
|
||||
title={variables.getMessage(
|
||||
'modals.main.settings.sections.background.source.custom_colour',
|
||||
)}
|
||||
final={true}
|
||||
>
|
||||
/>
|
||||
<Action>
|
||||
{colourSettings}
|
||||
<div className="colourReset">
|
||||
<span className="link" onClick={() => this.resetColour()}>
|
||||
{variables.getMessage('modals.main.settings.buttons.reset')}
|
||||
</span>
|
||||
</div>
|
||||
</SettingsItem>
|
||||
</Action>
|
||||
</Row>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue