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:
alexsparkes
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,22 +18,25 @@ const PreferencesWrapper = ({ children, ...props }) => {
|
|||
return (
|
||||
<div className={shown ? 'preferences' : 'preferencesInactive'}>
|
||||
{props.zoomSetting && (
|
||||
<SettingsItem
|
||||
title={variables.getMessage(
|
||||
'modals.main.settings.sections.appearance.accessibility.widget_zoom',
|
||||
)}
|
||||
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}
|
||||
<Row>
|
||||
<Content
|
||||
title={variables.getMessage(
|
||||
'modals.main.settings.sections.appearance.accessibility.widget_zoom',
|
||||
)}
|
||||
subtitle={variables.getMessage('modals.main.settings.sections.header.size')}
|
||||
/>
|
||||
</SettingsItem>
|
||||
<Action>
|
||||
<Slider
|
||||
name={props.zoomSetting}
|
||||
min="10"
|
||||
max="400"
|
||||
default="100"
|
||||
display="%"
|
||||
marks={values('zoom')}
|
||||
category={props.zoomCategory || props.category}
|
||||
/>
|
||||
</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,67 +93,83 @@ export default function AdvancedSettings() {
|
|||
onClick={() => setData(true)}
|
||||
icon={<MdDataUsage />}
|
||||
/>
|
||||
<SettingsItem
|
||||
title={variables.getMessage('modals.main.settings.sections.advanced.offline_mode')}
|
||||
subtitle={variables.getMessage(
|
||||
'modals.main.settings.sections.advanced.offline_subtitle',
|
||||
)}
|
||||
>
|
||||
<Switch name="offlineMode" element=".other" />
|
||||
</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" />
|
||||
</Action>
|
||||
</Row>
|
||||
|
||||
<SettingsItem
|
||||
title={variables.getMessage('modals.main.settings.sections.advanced.timezone.title')}
|
||||
subtitle={variables.getMessage(
|
||||
'modals.main.settings.sections.advanced.timezone.subtitle',
|
||||
)}
|
||||
>
|
||||
<Dropdown name="timezone" category="timezone" manual={true}>
|
||||
<MenuItem value="auto">
|
||||
{variables.getMessage('modals.main.settings.sections.advanced.timezone.automatic')}
|
||||
</MenuItem>
|
||||
{time_zones.map((timezone) => (
|
||||
<MenuItem value={timezone} key={timezone}>
|
||||
{timezone}
|
||||
<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',
|
||||
)}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Dropdown>
|
||||
</SettingsItem>
|
||||
<SettingsItem
|
||||
title={variables.getMessage('modals.main.settings.sections.advanced.tab_name')}
|
||||
subtitle={variables.getMessage(
|
||||
'modals.main.settings.sections.advanced.tab_name_subtitle',
|
||||
)}
|
||||
>
|
||||
<Text name="tabName" default={variables.getMessage('tabname')} category="other" />
|
||||
</SettingsItem>
|
||||
{time_zones.map((timezone) => (
|
||||
<MenuItem value={timezone} key={timezone}>
|
||||
{timezone}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Dropdown>
|
||||
</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" />
|
||||
</Action>
|
||||
</Row>
|
||||
<FileUpload
|
||||
id="file-input"
|
||||
accept="application/json"
|
||||
type="settings"
|
||||
loadFunction={(e) => importSettings(e)}
|
||||
/>
|
||||
<SettingsItem
|
||||
title={variables.getMessage('modals.main.settings.sections.advanced.custom_css')}
|
||||
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"
|
||||
<Row>
|
||||
<Content
|
||||
title={variables.getMessage('modals.main.settings.sections.advanced.custom_css')}
|
||||
subtitle={variables.getMessage(
|
||||
'modals.main.settings.sections.advanced.custom_css_subtitle',
|
||||
)}
|
||||
/>
|
||||
</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
|
||||
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,191 +22,212 @@ function AppearanceSettings() {
|
|||
|
||||
const ThemeSelection = () => {
|
||||
return (
|
||||
<SettingsItem
|
||||
title={variables.getMessage('modals.main.settings.sections.appearance.theme.title')}
|
||||
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"
|
||||
<Row>
|
||||
<Content
|
||||
title={variables.getMessage('modals.main.settings.sections.appearance.theme.title')}
|
||||
subtitle={variables.getMessage(
|
||||
'modals.main.settings.sections.appearance.theme.description',
|
||||
)}
|
||||
/>
|
||||
</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 = () => {
|
||||
return (
|
||||
<SettingsItem
|
||||
title={variables.getMessage('modals.main.settings.sections.appearance.font.title')}
|
||||
subtitle={variables.getMessage('modals.main.settings.sections.appearance.font.description')}
|
||||
>
|
||||
<Checkbox
|
||||
name="fontGoogle"
|
||||
text={variables.getMessage('modals.main.settings.sections.appearance.font.google')}
|
||||
category="other"
|
||||
<Row>
|
||||
<Content
|
||||
title={variables.getMessage('modals.main.settings.sections.appearance.font.title')}
|
||||
subtitle={variables.getMessage(
|
||||
'modals.main.settings.sections.appearance.font.description',
|
||||
)}
|
||||
/>
|
||||
<Text
|
||||
title={variables.getMessage('modals.main.settings.sections.appearance.font.custom')}
|
||||
name="font"
|
||||
upperCaseFirst={true}
|
||||
category="other"
|
||||
/>
|
||||
<Dropdown
|
||||
label={variables.getMessage('modals.main.settings.sections.appearance.font.weight.title')}
|
||||
name="fontweight"
|
||||
category="other"
|
||||
>
|
||||
{/* names are taken from https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */}
|
||||
<option value="100">
|
||||
{variables.getMessage('modals.main.settings.sections.appearance.font.weight.thin')}
|
||||
</option>
|
||||
<option value="200">
|
||||
{variables.getMessage(
|
||||
'modals.main.settings.sections.appearance.font.weight.extra_light',
|
||||
<Action>
|
||||
<Checkbox
|
||||
name="fontGoogle"
|
||||
text={variables.getMessage('modals.main.settings.sections.appearance.font.google')}
|
||||
category="other"
|
||||
/>
|
||||
<Text
|
||||
title={variables.getMessage('modals.main.settings.sections.appearance.font.custom')}
|
||||
name="font"
|
||||
upperCaseFirst={true}
|
||||
category="other"
|
||||
/>
|
||||
<Dropdown
|
||||
label={variables.getMessage(
|
||||
'modals.main.settings.sections.appearance.font.weight.title',
|
||||
)}
|
||||
</option>
|
||||
<option value="300">
|
||||
{variables.getMessage('modals.main.settings.sections.appearance.font.weight.light')}
|
||||
</option>
|
||||
<option value="400">
|
||||
{variables.getMessage('modals.main.settings.sections.appearance.font.weight.normal')}
|
||||
</option>
|
||||
<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',
|
||||
name="fontweight"
|
||||
category="other"
|
||||
>
|
||||
{/* names are taken from https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */}
|
||||
<option value="100">
|
||||
{variables.getMessage('modals.main.settings.sections.appearance.font.weight.thin')}
|
||||
</option>
|
||||
<option value="200">
|
||||
{variables.getMessage(
|
||||
'modals.main.settings.sections.appearance.font.weight.extra_light',
|
||||
)}
|
||||
</option>
|
||||
<option value="300">
|
||||
{variables.getMessage('modals.main.settings.sections.appearance.font.weight.light')}
|
||||
</option>
|
||||
<option value="400">
|
||||
{variables.getMessage('modals.main.settings.sections.appearance.font.weight.normal')}
|
||||
</option>
|
||||
<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>
|
||||
</Dropdown>
|
||||
<Dropdown
|
||||
label={variables.getMessage('modals.main.settings.sections.appearance.font.style.title')}
|
||||
name="fontstyle"
|
||||
category="other"
|
||||
>
|
||||
<option value="normal">
|
||||
{variables.getMessage('modals.main.settings.sections.appearance.font.style.normal')}
|
||||
</option>
|
||||
<option value="italic">
|
||||
{variables.getMessage('modals.main.settings.sections.appearance.font.style.italic')}
|
||||
</option>
|
||||
<option value="oblique">
|
||||
{variables.getMessage('modals.main.settings.sections.appearance.font.style.oblique')}
|
||||
</option>
|
||||
</Dropdown>
|
||||
</SettingsItem>
|
||||
name="fontstyle"
|
||||
category="other"
|
||||
>
|
||||
<option value="normal">
|
||||
{variables.getMessage('modals.main.settings.sections.appearance.font.style.normal')}
|
||||
</option>
|
||||
<option value="italic">
|
||||
{variables.getMessage('modals.main.settings.sections.appearance.font.style.italic')}
|
||||
</option>
|
||||
<option value="oblique">
|
||||
{variables.getMessage('modals.main.settings.sections.appearance.font.style.oblique')}
|
||||
</option>
|
||||
</Dropdown>
|
||||
</Action>
|
||||
</Row>
|
||||
);
|
||||
};
|
||||
|
||||
const WidgetStyle = () => {
|
||||
return (
|
||||
<SettingsItem
|
||||
title={variables.getMessage('modals.main.settings.sections.appearance.style.title')}
|
||||
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"
|
||||
<Row>
|
||||
<Content
|
||||
title={variables.getMessage('modals.main.settings.sections.appearance.style.title')}
|
||||
subtitle={variables.getMessage(
|
||||
'modals.main.settings.sections.appearance.style.description',
|
||||
)}
|
||||
/>
|
||||
</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 = () => {
|
||||
return (
|
||||
<SettingsItem
|
||||
title={variables.getMessage('modals.main.settings.sections.appearance.accessibility.title')}
|
||||
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
|
||||
<Row final={true}>
|
||||
<Content
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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,47 +78,52 @@ export default function Date() {
|
|||
switch={true}
|
||||
/>
|
||||
<PreferencesWrapper setting="date" switch={true} zoomSetting="zoomDate">
|
||||
<SettingsItem
|
||||
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"
|
||||
<Row>
|
||||
<Content
|
||||
title={variables.getMessage('modals.main.settings.sections.time.type')}
|
||||
subtitle={variables.getMessage('modals.main.settings.sections.date.type.subtitle')}
|
||||
/>
|
||||
<Checkbox
|
||||
name="datezero"
|
||||
text={variables.getMessage('modals.main.settings.sections.time.digital.zero')}
|
||||
category="date"
|
||||
<Action>
|
||||
<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>
|
||||
</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>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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,50 +21,56 @@ function ExperimentalSettings() {
|
|||
<span className="subtitle">
|
||||
{variables.getMessage('modals.main.settings.sections.experimental.warning')}
|
||||
</span>
|
||||
<SettingsItem
|
||||
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"
|
||||
<Row>
|
||||
<Content
|
||||
title={variables.getMessage('modals.main.settings.sections.experimental.developer')}
|
||||
/>
|
||||
<p style={{ textAlign: 'left' }}>Send Event</p>
|
||||
<TextField
|
||||
label={'Type'}
|
||||
value={eventType}
|
||||
onChange={(e) => setEventType(e.target.value)}
|
||||
spellCheck={false}
|
||||
varient="outlined"
|
||||
InputLabelProps={{ shrink: true }}
|
||||
/>
|
||||
<TextField
|
||||
label={'Name'}
|
||||
value={eventName}
|
||||
onChange={(e) => setEventName(e.target.value)}
|
||||
spellCheck={false}
|
||||
varient="outlined"
|
||||
InputLabelProps={{ shrink: true }}
|
||||
/>
|
||||
<button className="uploadbg" onClick={() => EventBus.emit(eventType, eventName)}>
|
||||
Send
|
||||
</button>
|
||||
</SettingsItem>
|
||||
<SettingsItem title="Data" final={true}>
|
||||
<button
|
||||
className="reset"
|
||||
style={{ marginLeft: '0px' }}
|
||||
onClick={() => localStorage.clear()}
|
||||
>
|
||||
Clear LocalStorage
|
||||
</button>
|
||||
</SettingsItem>
|
||||
<Action>
|
||||
<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>
|
||||
<TextField
|
||||
label={'Type'}
|
||||
value={eventType}
|
||||
onChange={(e) => setEventType(e.target.value)}
|
||||
spellCheck={false}
|
||||
varient="outlined"
|
||||
InputLabelProps={{ shrink: true }}
|
||||
/>
|
||||
<TextField
|
||||
label={'Name'}
|
||||
value={eventName}
|
||||
onChange={(e) => setEventName(e.target.value)}
|
||||
spellCheck={false}
|
||||
varient="outlined"
|
||||
InputLabelProps={{ shrink: true }}
|
||||
/>
|
||||
<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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,56 +24,63 @@ const GreetingSettings = () => {
|
|||
|
||||
const AdditionalOptions = () => {
|
||||
return (
|
||||
<SettingsItem
|
||||
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"
|
||||
<Row>
|
||||
<Content
|
||||
title={variables.getMessage('modals.main.settings.additional_settings')}
|
||||
subtitle={variables.getMessage(`${GREETING_SECTION}.additional`)}
|
||||
/>
|
||||
<Checkbox
|
||||
name="defaultGreetingMessage"
|
||||
text={variables.getMessage(`${GREETING_SECTION}.default`)}
|
||||
category="greeting"
|
||||
/>
|
||||
<Text
|
||||
title={variables.getMessage(`${GREETING_SECTION}.name`)}
|
||||
name="greetingName"
|
||||
category="greeting"
|
||||
/>
|
||||
</SettingsItem>
|
||||
<Action>
|
||||
<Checkbox
|
||||
name="events"
|
||||
text={variables.getMessage(`${GREETING_SECTION}.events`)}
|
||||
category="greeting"
|
||||
/>
|
||||
<Checkbox
|
||||
name="defaultGreetingMessage"
|
||||
text={variables.getMessage(`${GREETING_SECTION}.default`)}
|
||||
category="greeting"
|
||||
/>
|
||||
<Text
|
||||
title={variables.getMessage(`${GREETING_SECTION}.name`)}
|
||||
name="greetingName"
|
||||
category="greeting"
|
||||
/>
|
||||
</Action>
|
||||
</Row>
|
||||
);
|
||||
};
|
||||
|
||||
const BirthdayOptions = () => {
|
||||
return (
|
||||
<SettingsItem
|
||||
title={variables.getMessage(`${GREETING_SECTION}.birthday`)}
|
||||
subtitle={variables.getMessage('modals.main.settings.sections.greeting.birthday_subtitle')}
|
||||
final={true}
|
||||
>
|
||||
<Switch
|
||||
name="birthdayenabled"
|
||||
text={variables.getMessage('modals.main.settings.enabled')}
|
||||
category="greeting"
|
||||
<Row final={true}>
|
||||
<Content
|
||||
title={variables.getMessage(`${GREETING_SECTION}.birthday`)}
|
||||
subtitle={variables.getMessage(
|
||||
'modals.main.settings.sections.greeting.birthday_subtitle',
|
||||
)}
|
||||
/>
|
||||
<Checkbox
|
||||
name="birthdayage"
|
||||
text={variables.getMessage(`${GREETING_SECTION}.birthday_age`)}
|
||||
category="greeting"
|
||||
/>
|
||||
<p style={{ marginRight: 'auto' }}>
|
||||
{variables.getMessage(`${GREETING_SECTION}.birthday_date`)}
|
||||
</p>
|
||||
<input
|
||||
type="date"
|
||||
onChange={changeDate}
|
||||
value={birthday.toISOString().substring(0, 10)}
|
||||
required
|
||||
/>
|
||||
</SettingsItem>
|
||||
<Action>
|
||||
<Switch
|
||||
name="birthdayenabled"
|
||||
text={variables.getMessage('modals.main.settings.enabled')}
|
||||
category="greeting"
|
||||
/>
|
||||
<Checkbox
|
||||
name="birthdayage"
|
||||
text={variables.getMessage(`${GREETING_SECTION}.birthday_age`)}
|
||||
category="greeting"
|
||||
/>
|
||||
<p style={{ marginRight: 'auto' }}>
|
||||
{variables.getMessage(`${GREETING_SECTION}.birthday_date`)}
|
||||
</p>
|
||||
<input
|
||||
type="date"
|
||||
onChange={changeDate}
|
||||
value={birthday.toISOString().substring(0, 10)}
|
||||
required
|
||||
/>
|
||||
</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}>
|
||||
<button onClick={() => this.modifyMessage('add')}>
|
||||
{variables.getMessage(`${MESSAGE_SECTION}.add`)} <MdAdd />
|
||||
</button>
|
||||
</SettingsItem>
|
||||
<Row final={true}>
|
||||
<Content title={variables.getMessage(`${MESSAGE_SECTION}.messages`)} />
|
||||
<Action>
|
||||
<button onClick={() => this.modifyMessage('add')}>
|
||||
{variables.getMessage(`${MESSAGE_SECTION}.add`)} <MdAdd />
|
||||
</button>
|
||||
</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,86 +121,92 @@ function Navbar() {
|
|||
zoomSetting="zoomNavbar"
|
||||
zoomCategory="navbar"
|
||||
/>
|
||||
<SettingsItem
|
||||
title={variables.getMessage('modals.main.settings.additional_settings')}
|
||||
subtitle={variables.getMessage(
|
||||
'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`)}
|
||||
<Row final={false}>
|
||||
<Content
|
||||
title={variables.getMessage('modals.main.settings.additional_settings')}
|
||||
subtitle={variables.getMessage(
|
||||
'modals.main.settings.sections.appearance.navbar.refresh_subtitle',
|
||||
'modals.main.settings.sections.appearance.navbar.additional',
|
||||
)}
|
||||
final={false}
|
||||
>
|
||||
<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>
|
||||
</SettingsItem>
|
||||
/>
|
||||
<Action>
|
||||
<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"
|
||||
/>
|
||||
</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
|
||||
title={variables.getMessage('widgets.navbar.apps.title')}
|
||||
subtitle={variables.getMessage(
|
||||
'modals.main.settings.sections.appearance.navbar.apps_subtitle',
|
||||
)}
|
||||
final={true}
|
||||
>
|
||||
<button onClick={() => setAppsModalInfo((oldState) => ({ ...oldState, newLink: true }))}>
|
||||
{variables.getMessage('modals.main.settings.sections.quicklinks.add_link')}
|
||||
<MdAddLink />
|
||||
</button>
|
||||
</SettingsItem>
|
||||
<Row final={true}>
|
||||
<Content
|
||||
title={variables.getMessage('widgets.navbar.apps.title')}
|
||||
subtitle={variables.getMessage(
|
||||
'modals.main.settings.sections.appearance.navbar.apps_subtitle',
|
||||
)}
|
||||
/>
|
||||
<Action>
|
||||
<button onClick={() => setAppsModalInfo((oldState) => ({ ...oldState, newLink: true }))}>
|
||||
{variables.getMessage('modals.main.settings.sections.quicklinks.add_link')}
|
||||
<MdAddLink />
|
||||
</button>
|
||||
</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,49 +138,58 @@ export default class QuickLinks extends PureComponent {
|
|||
switch={true}
|
||||
/>
|
||||
<PreferencesWrapper setting="quicklinksenabled" switch={true} zoomSetting="zoomQuicklinks">
|
||||
<SettingsItem
|
||||
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"
|
||||
<Row>
|
||||
<Content
|
||||
title={variables.getMessage('modals.main.settings.additional_settings')}
|
||||
subtitle={variables.getMessage(`${QUICKLINKS_SECTION}.additional`)}
|
||||
/>
|
||||
<Checkbox
|
||||
name="quicklinkstooltip"
|
||||
text={variables.getMessage(`${QUICKLINKS_SECTION}.tooltip`)}
|
||||
category="quicklinks"
|
||||
<Action>
|
||||
<Checkbox
|
||||
name="quicklinksnewtab"
|
||||
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>
|
||||
<SettingsItem
|
||||
title={variables.getMessage(`${QUICKLINKS_SECTION}.styling`)}
|
||||
subtitle={variables.getMessage(
|
||||
'modals.main.settings.sections.quicklinks.styling_description',
|
||||
)}
|
||||
>
|
||||
<Dropdown
|
||||
label={variables.getMessage(`${QUICKLINKS_SECTION}.style`)}
|
||||
name="quickLinksStyle"
|
||||
category="quicklinks"
|
||||
>
|
||||
<option value="icon">
|
||||
{variables.getMessage(`${QUICKLINKS_SECTION}.options.icon`)}
|
||||
</option>
|
||||
<option value="text">
|
||||
{variables.getMessage(`${QUICKLINKS_SECTION}.options.text_only`)}
|
||||
</option>
|
||||
<option value="metro">
|
||||
{variables.getMessage(`${QUICKLINKS_SECTION}.options.metro`)}
|
||||
</option>
|
||||
</Dropdown>
|
||||
</SettingsItem>
|
||||
<Action>
|
||||
<Dropdown
|
||||
label={variables.getMessage(`${QUICKLINKS_SECTION}.style`)}
|
||||
name="quickLinksStyle"
|
||||
category="quicklinks"
|
||||
>
|
||||
<option value="icon">
|
||||
{variables.getMessage(`${QUICKLINKS_SECTION}.options.icon`)}
|
||||
</option>
|
||||
<option value="text">
|
||||
{variables.getMessage(`${QUICKLINKS_SECTION}.options.text_only`)}
|
||||
</option>
|
||||
<option value="metro">
|
||||
{variables.getMessage(`${QUICKLINKS_SECTION}.options.metro`)}
|
||||
</option>
|
||||
</Dropdown>
|
||||
</Action>
|
||||
</Row>
|
||||
|
||||
<SettingsItem title={variables.getMessage(`${QUICKLINKS_SECTION}.title`)} final={true}>
|
||||
<button onClick={() => this.setState({ showAddModal: true })}>
|
||||
{variables.getMessage(`${QUICKLINKS_SECTION}.add_link`)} <MdAddLink />
|
||||
</button>
|
||||
</SettingsItem>
|
||||
<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>
|
||||
</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,26 +99,29 @@ export default class QuoteSettings extends PureComponent {
|
|||
|
||||
const ButtonOptions = () => {
|
||||
return (
|
||||
<SettingsItem
|
||||
title={variables.getMessage(`${QUOTE_SECTION}.buttons.title`)}
|
||||
subtitle={variables.getMessage('modals.main.settings.sections.quote.buttons.subtitle')}
|
||||
>
|
||||
<Checkbox
|
||||
name="copyButton"
|
||||
text={variables.getMessage(`${QUOTE_SECTION}.buttons.copy`)}
|
||||
category="quote"
|
||||
<Row>
|
||||
<Content
|
||||
title={variables.getMessage(`${QUOTE_SECTION}.buttons.title`)}
|
||||
subtitle={variables.getMessage('modals.main.settings.sections.quote.buttons.subtitle')}
|
||||
/>
|
||||
<Checkbox
|
||||
name="quoteShareButton"
|
||||
text={variables.getMessage('widgets.quote.share')}
|
||||
category="quote"
|
||||
/>
|
||||
<Checkbox
|
||||
name="favouriteQuoteEnabled"
|
||||
text={variables.getMessage(`${QUOTE_SECTION}.buttons.favourite`)}
|
||||
category="quote"
|
||||
/>
|
||||
</SettingsItem>
|
||||
<Action>
|
||||
<Checkbox
|
||||
name="copyButton"
|
||||
text={variables.getMessage(`${QUOTE_SECTION}.buttons.copy`)}
|
||||
category="quote"
|
||||
/>
|
||||
<Checkbox
|
||||
name="quoteShareButton"
|
||||
text={variables.getMessage('widgets.quote.share')}
|
||||
category="quote"
|
||||
/>
|
||||
<Checkbox
|
||||
name="favouriteQuoteEnabled"
|
||||
text={variables.getMessage(`${QUOTE_SECTION}.buttons.favourite`)}
|
||||
category="quote"
|
||||
/>
|
||||
</Action>
|
||||
</Row>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
@ -140,22 +144,24 @@ export default class QuoteSettings extends PureComponent {
|
|||
|
||||
const AdditionalOptions = () => {
|
||||
return (
|
||||
<SettingsItem
|
||||
title={variables.getMessage('modals.main.settings.additional_settings')}
|
||||
subtitle={variables.getMessage(`${QUOTE_SECTION}.additional`)}
|
||||
final={true}
|
||||
>
|
||||
<Checkbox
|
||||
name="authorLink"
|
||||
text={variables.getMessage(`${QUOTE_SECTION}.author_link`)}
|
||||
element=".other"
|
||||
<Row final={true}>
|
||||
<Content
|
||||
title={variables.getMessage('modals.main.settings.additional_settings')}
|
||||
subtitle={variables.getMessage(`${QUOTE_SECTION}.additional`)}
|
||||
/>
|
||||
<Checkbox
|
||||
name="authorImg"
|
||||
text={variables.getMessage(`${QUOTE_SECTION}.author_img`)}
|
||||
element=".other"
|
||||
/>
|
||||
</SettingsItem>
|
||||
<Action>
|
||||
<Checkbox
|
||||
name="authorLink"
|
||||
text={variables.getMessage(`${QUOTE_SECTION}.author_link`)}
|
||||
element=".other"
|
||||
/>
|
||||
<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) {
|
||||
customSettings = (
|
||||
<>
|
||||
<SettingsItem
|
||||
title={variables.getMessage(`${QUOTE_SECTION}.custom`)}
|
||||
subtitle={variables.getMessage(`${QUOTE_SECTION}.custom_subtitle`)}
|
||||
final={true}
|
||||
>
|
||||
<button onClick={() => this.modifyCustomQuote('add')}>
|
||||
{variables.getMessage(`${QUOTE_SECTION}.add`)} <MdAdd />
|
||||
</button>
|
||||
</SettingsItem>
|
||||
<Row final={true}>
|
||||
<Content
|
||||
title={variables.getMessage(`${QUOTE_SECTION}.custom`)}
|
||||
subtitle={variables.getMessage(`${QUOTE_SECTION}.custom_subtitle`)}
|
||||
/>
|
||||
<Action>
|
||||
<button onClick={() => this.modifyCustomQuote('add')}>
|
||||
{variables.getMessage(`${QUOTE_SECTION}.add`)} <MdAdd />
|
||||
</button>
|
||||
</Action>
|
||||
</Row>
|
||||
|
||||
{this.state.customQuote.length !== 0 ? (
|
||||
<div className="messagesContainer">
|
||||
|
|
@ -255,13 +263,15 @@ export default class QuoteSettings extends PureComponent {
|
|||
/>
|
||||
)}
|
||||
{this.state.sourceSection && (
|
||||
<SettingsItem
|
||||
title={variables.getMessage('modals.main.settings.sections.background.source.title')}
|
||||
subtitle={variables.getMessage(`${QUOTE_SECTION}.source_subtitle`)}
|
||||
final={true}
|
||||
>
|
||||
<SourceDropdown />
|
||||
</SettingsItem>
|
||||
<Row final={true}>
|
||||
<Content
|
||||
title={variables.getMessage('modals.main.settings.sections.background.source.title')}
|
||||
subtitle={variables.getMessage(`${QUOTE_SECTION}.source_subtitle`)}
|
||||
/>
|
||||
<Action>
|
||||
<SourceDropdown />
|
||||
</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,63 +70,68 @@ export default class SearchSettings extends PureComponent {
|
|||
|
||||
const AdditionalOptions = () => {
|
||||
return (
|
||||
<SettingsItem
|
||||
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' ? (
|
||||
<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
|
||||
name="voiceSearch"
|
||||
text={variables.getMessage(`${SEARCH_SECTION}.voice_search`)}
|
||||
category="search"
|
||||
/>
|
||||
) : null}
|
||||
<Checkbox
|
||||
name="voiceSearch"
|
||||
text={variables.getMessage(`${SEARCH_SECTION}.voice_search`)}
|
||||
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"
|
||||
/>
|
||||
) : null}
|
||||
<Checkbox
|
||||
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>
|
||||
</Action>
|
||||
</Row>
|
||||
);
|
||||
};
|
||||
|
||||
const SearchEngineSelection = () => {
|
||||
return (
|
||||
<SettingsItem
|
||||
title={variables.getMessage(`${SEARCH_SECTION}.search_engine`)}
|
||||
subtitle={variables.getMessage(
|
||||
'modals.main.settings.sections.search.search_engine_subtitle',
|
||||
)}
|
||||
final={!this.state.customEnabled}
|
||||
>
|
||||
<Dropdown
|
||||
name="searchEngine"
|
||||
onChange={(value) => this.setSearchEngine(value)}
|
||||
manual={true}
|
||||
>
|
||||
{searchEngines.map((engine) => (
|
||||
<MenuItem key={engine.name} value={engine.settingsName}>
|
||||
{engine.name}
|
||||
<Row final={!this.state.customEnabled}>
|
||||
<Content
|
||||
title={variables.getMessage(`${SEARCH_SECTION}.search_engine`)}
|
||||
subtitle={variables.getMessage(
|
||||
'modals.main.settings.sections.search.search_engine_subtitle',
|
||||
)}
|
||||
/>
|
||||
<Action>
|
||||
<Dropdown
|
||||
name="searchEngine"
|
||||
onChange={(value) => this.setSearchEngine(value)}
|
||||
manual={true}
|
||||
>
|
||||
{searchEngines.map((engine) => (
|
||||
<MenuItem key={engine.name} value={engine.settingsName}>
|
||||
{engine.name}
|
||||
</MenuItem>
|
||||
))}
|
||||
<MenuItem value="custom">
|
||||
{variables.getMessage(`${SEARCH_SECTION}.custom`).split(' ')[0]}
|
||||
</MenuItem>
|
||||
))}
|
||||
<MenuItem value="custom">
|
||||
{variables.getMessage(`${SEARCH_SECTION}.custom`).split(' ')[0]}
|
||||
</MenuItem>
|
||||
</Dropdown>
|
||||
</SettingsItem>
|
||||
</Dropdown>
|
||||
</Action>
|
||||
</Row>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
@ -141,20 +147,23 @@ export default class SearchSettings extends PureComponent {
|
|||
<AdditionalOptions />
|
||||
<SearchEngineSelection />
|
||||
{this.state.customEnabled && (
|
||||
<SettingsItem title={variables.getMessage(`${SEARCH_SECTION}.custom`)} final={true}>
|
||||
<TextField
|
||||
label={variables.getMessage(`${SEARCH_SECTION}.custom`)}
|
||||
value={this.state.customValue}
|
||||
onInput={(e) => this.setState({ customValue: e.target.value })}
|
||||
varient="outlined"
|
||||
InputLabelProps={{ shrink: true }}
|
||||
/>
|
||||
<p style={{ marginTop: '0px' }}>
|
||||
<span className="link" onClick={() => this.resetSearch()}>
|
||||
{variables.getMessage('modals.main.settings.buttons.reset')}
|
||||
</span>
|
||||
</p>
|
||||
</SettingsItem>
|
||||
<Row final={true}>
|
||||
<Content title={variables.getMessage(`${SEARCH_SECTION}.custom`)} />
|
||||
<Action>
|
||||
<TextField
|
||||
label={variables.getMessage(`${SEARCH_SECTION}.custom`)}
|
||||
value={this.state.customValue}
|
||||
onInput={(e) => this.setState({ customValue: e.target.value })}
|
||||
varient="outlined"
|
||||
InputLabelProps={{ shrink: true }}
|
||||
/>
|
||||
<p style={{ marginTop: '0px' }}>
|
||||
<span className="link" onClick={() => this.resetSearch()}>
|
||||
{variables.getMessage('modals.main.settings.buttons.reset')}
|
||||
</span>
|
||||
</p>
|
||||
</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,144 +34,158 @@ const TimeSettings = () => {
|
|||
|
||||
const WidgetType = () => {
|
||||
return (
|
||||
<SettingsItem
|
||||
title={variables.getMessage(`${TIME_SECTION}.type`)}
|
||||
subtitle={variables.getMessage(`${TIME_SECTION}.type_subtitle`)}
|
||||
final={timeType === 'percentageComplete'}
|
||||
>
|
||||
<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="percentageComplete">
|
||||
{variables.getMessage(`${TIME_SECTION}.percentage_complete`)}
|
||||
</option>
|
||||
<option value="verticalClock">
|
||||
{variables.getMessage(`${TIME_SECTION}.vertical_clock.title`)}
|
||||
</option>
|
||||
</Dropdown>
|
||||
</SettingsItem>
|
||||
<Row final={timeType === 'percentageComplete'}>
|
||||
<Content
|
||||
title={variables.getMessage(`${TIME_SECTION}.type`)}
|
||||
subtitle={variables.getMessage(`${TIME_SECTION}.type_subtitle`)}
|
||||
/>
|
||||
<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="percentageComplete">
|
||||
{variables.getMessage(`${TIME_SECTION}.percentage_complete`)}
|
||||
</option>
|
||||
<option value="verticalClock">
|
||||
{variables.getMessage(`${TIME_SECTION}.vertical_clock.title`)}
|
||||
</option>
|
||||
</Dropdown>
|
||||
</Action>
|
||||
</Row>
|
||||
);
|
||||
};
|
||||
|
||||
const digitalSettings = (
|
||||
<SettingsItem
|
||||
title={variables.getMessage(`${TIME_SECTION}.digital.title`)}
|
||||
subtitle={variables.getMessage(`${TIME_SECTION}.digital.subtitle`)}
|
||||
final={true}
|
||||
>
|
||||
<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"
|
||||
<Row final={true}>
|
||||
<Content
|
||||
title={variables.getMessage(`${TIME_SECTION}.digital.title`)}
|
||||
subtitle={variables.getMessage(`${TIME_SECTION}.digital.subtitle`)}
|
||||
/>
|
||||
<Checkbox
|
||||
name="seconds"
|
||||
text={variables.getMessage(`${TIME_SECTION}.digital.seconds`)}
|
||||
category="clock"
|
||||
/>
|
||||
<Checkbox
|
||||
name="zero"
|
||||
text={variables.getMessage(`${TIME_SECTION}.digital.zero`)}
|
||||
category="clock"
|
||||
/>
|
||||
</SettingsItem>
|
||||
<Action>
|
||||
<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
|
||||
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 = (
|
||||
<SettingsItem
|
||||
title={variables.getMessage(`${TIME_SECTION}.analogue.title`)}
|
||||
subtitle={variables.getMessage(`${TIME_SECTION}.analogue.subtitle`)}
|
||||
final={true}
|
||||
>
|
||||
<Checkbox
|
||||
name="secondHand"
|
||||
text={variables.getMessage(`${TIME_SECTION}.analogue.second_hand`)}
|
||||
category="clock"
|
||||
<Row final={true}>
|
||||
<Content
|
||||
title={variables.getMessage(`${TIME_SECTION}.analogue.title`)}
|
||||
subtitle={variables.getMessage(`${TIME_SECTION}.analogue.subtitle`)}
|
||||
/>
|
||||
<Checkbox
|
||||
name="minuteHand"
|
||||
text={variables.getMessage(`${TIME_SECTION}.analogue.minute_hand`)}
|
||||
category="clock"
|
||||
/>
|
||||
<Checkbox
|
||||
name="hourHand"
|
||||
text={variables.getMessage(`${TIME_SECTION}.analogue.hour_hand`)}
|
||||
category="clock"
|
||||
/>
|
||||
<Checkbox
|
||||
name="hourMarks"
|
||||
text={variables.getMessage(`${TIME_SECTION}.analogue.hour_marks`)}
|
||||
category="clock"
|
||||
/>
|
||||
<Checkbox
|
||||
name="minuteMarks"
|
||||
text={variables.getMessage(`${TIME_SECTION}.analogue.minute_marks`)}
|
||||
category="clock"
|
||||
/>
|
||||
<Checkbox
|
||||
name="roundClock"
|
||||
text={variables.getMessage(`${TIME_SECTION}.analogue.round_clock`)}
|
||||
category="clock"
|
||||
/>
|
||||
</SettingsItem>
|
||||
<Action>
|
||||
<Checkbox
|
||||
name="secondHand"
|
||||
text={variables.getMessage(`${TIME_SECTION}.analogue.second_hand`)}
|
||||
category="clock"
|
||||
/>
|
||||
<Checkbox
|
||||
name="minuteHand"
|
||||
text={variables.getMessage(`${TIME_SECTION}.analogue.minute_hand`)}
|
||||
category="clock"
|
||||
/>
|
||||
<Checkbox
|
||||
name="hourHand"
|
||||
text={variables.getMessage(`${TIME_SECTION}.analogue.hour_hand`)}
|
||||
category="clock"
|
||||
/>
|
||||
<Checkbox
|
||||
name="hourMarks"
|
||||
text={variables.getMessage(`${TIME_SECTION}.analogue.hour_marks`)}
|
||||
category="clock"
|
||||
/>
|
||||
<Checkbox
|
||||
name="minuteMarks"
|
||||
text={variables.getMessage(`${TIME_SECTION}.analogue.minute_marks`)}
|
||||
category="clock"
|
||||
/>
|
||||
<Checkbox
|
||||
name="roundClock"
|
||||
text={variables.getMessage(`${TIME_SECTION}.analogue.round_clock`)}
|
||||
category="clock"
|
||||
/>
|
||||
</Action>
|
||||
</Row>
|
||||
);
|
||||
|
||||
const verticalClock = (
|
||||
<>
|
||||
<SettingsItem
|
||||
title={variables.getMessage(
|
||||
'modals.main.settings.sections.time.vertical_clock.change_hour_colour',
|
||||
)}
|
||||
>
|
||||
<div className="colourInput">
|
||||
<input
|
||||
type="color"
|
||||
name="hourColour"
|
||||
className="minuteColour"
|
||||
onChange={(event) => updateColour('hourColour', event)}
|
||||
value={hourColour}
|
||||
></input>
|
||||
<label htmlFor={'hourColour'} className="customBackgroundHex">
|
||||
{hourColour}
|
||||
</label>
|
||||
</div>
|
||||
<span className="link" onClick={() => localStorage.setItem('hourColour', '#ffffff')}>
|
||||
<MdRefresh />
|
||||
{variables.getMessage('modals.main.settings.buttons.reset')}
|
||||
</span>
|
||||
</SettingsItem>
|
||||
<SettingsItem
|
||||
title={variables.getMessage(
|
||||
'modals.main.settings.sections.time.vertical_clock.change_minute_colour',
|
||||
)}
|
||||
>
|
||||
<div className="colourInput">
|
||||
<input
|
||||
type="color"
|
||||
name="minuteColour"
|
||||
className="minuteColour"
|
||||
onChange={(event) => updateColour('minuteColour', event)}
|
||||
value={minuteColour}
|
||||
></input>
|
||||
<label htmlFor={'minuteColour'} className="customBackgroundHex">
|
||||
{minuteColour}
|
||||
</label>
|
||||
</div>
|
||||
<span className="link" onClick={() => localStorage.setItem('minuteColour', '#ffffff')}>
|
||||
<MdRefresh />
|
||||
{variables.getMessage('modals.main.settings.buttons.reset')}
|
||||
</span>
|
||||
</SettingsItem>
|
||||
<Row>
|
||||
<Content
|
||||
title={variables.getMessage(
|
||||
'modals.main.settings.sections.time.vertical_clock.change_hour_colour',
|
||||
)}
|
||||
/>
|
||||
<Action>
|
||||
<div className="colourInput">
|
||||
<input
|
||||
type="color"
|
||||
name="hourColour"
|
||||
className="minuteColour"
|
||||
onChange={(event) => updateColour('hourColour', event)}
|
||||
value={hourColour}
|
||||
></input>
|
||||
<label htmlFor={'hourColour'} className="customBackgroundHex">
|
||||
{hourColour}
|
||||
</label>
|
||||
</div>
|
||||
<span className="link" onClick={() => localStorage.setItem('hourColour', '#ffffff')}>
|
||||
<MdRefresh />
|
||||
{variables.getMessage('modals.main.settings.buttons.reset')}
|
||||
</span>
|
||||
</Action>
|
||||
</Row>
|
||||
<Row>
|
||||
<Content
|
||||
title={variables.getMessage(
|
||||
'modals.main.settings.sections.time.vertical_clock.change_minute_colour',
|
||||
)}
|
||||
/>
|
||||
<Action>
|
||||
<div className="colourInput">
|
||||
<input
|
||||
type="color"
|
||||
name="minuteColour"
|
||||
className="minuteColour"
|
||||
onChange={(event) => updateColour('minuteColour', event)}
|
||||
value={minuteColour}
|
||||
></input>
|
||||
<label htmlFor={'minuteColour'} className="customBackgroundHex">
|
||||
{minuteColour}
|
||||
</label>
|
||||
</div>
|
||||
<span className="link" onClick={() => localStorage.setItem('minuteColour', '#ffffff')}>
|
||||
<MdRefresh />
|
||||
{variables.getMessage('modals.main.settings.buttons.reset')}
|
||||
</span>
|
||||
</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,19 +46,26 @@ export default class WeatherSettings extends PureComponent {
|
|||
|
||||
const WidgetType = () => {
|
||||
return (
|
||||
<SettingsItem title={variables.getMessage(`${WEATHER_SECTION}.widget_type`)}>
|
||||
<Dropdown
|
||||
label={variables.getMessage('modals.main.settings.sections.time.type')}
|
||||
name="weatherType"
|
||||
category="weather"
|
||||
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="4">{variables.getMessage(`${WEATHER_SECTION}.options.custom`)}</option>
|
||||
</Dropdown>
|
||||
</SettingsItem>
|
||||
<Row>
|
||||
<Content title={variables.getMessage(`${WEATHER_SECTION}.widget_type`)} />
|
||||
<Action>
|
||||
<Dropdown
|
||||
label={variables.getMessage('modals.main.settings.sections.time.type')}
|
||||
name="weatherType"
|
||||
category="weather"
|
||||
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="4">{variables.getMessage(`${WEATHER_SECTION}.options.custom`)}</option>
|
||||
</Dropdown>
|
||||
</Action>
|
||||
</Row>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
@ -89,48 +98,51 @@ export default class WeatherSettings extends PureComponent {
|
|||
);
|
||||
};
|
||||
return (
|
||||
<SettingsItem title={variables.getMessage(`${WEATHER_SECTION}.location`)}>
|
||||
<TextField
|
||||
label={variables.getMessage(`${WEATHER_SECTION}.location`)}
|
||||
value={this.state.location}
|
||||
onChange={(e) => this.changeLocation(e)}
|
||||
placeholder="London"
|
||||
varient="outlined"
|
||||
InputLabelProps={{ shrink: true }}
|
||||
/>
|
||||
<span className="link" onClick={getAuto}>
|
||||
<MdAutoAwesome />
|
||||
{variables.getMessage(`${WEATHER_SECTION}.auto`)}
|
||||
</span>
|
||||
</SettingsItem>
|
||||
<Row>
|
||||
<Content title={variables.getMessage(`${WEATHER_SECTION}.location`)} />
|
||||
<Action>
|
||||
<TextField
|
||||
label={variables.getMessage(`${WEATHER_SECTION}.location`)}
|
||||
value={this.state.location}
|
||||
onChange={(e) => this.changeLocation(e)}
|
||||
placeholder="London"
|
||||
varient="outlined"
|
||||
InputLabelProps={{ shrink: true }}
|
||||
/>
|
||||
<span className="link" onClick={getAuto}>
|
||||
<MdAutoAwesome />
|
||||
{variables.getMessage(`${WEATHER_SECTION}.auto`)}
|
||||
</span>
|
||||
</Action>
|
||||
</Row>
|
||||
);
|
||||
};
|
||||
|
||||
const TemperatureFormat = () => {
|
||||
return (
|
||||
<SettingsItem
|
||||
title={variables.getMessage(`${WEATHER_SECTION}.temp_format.title`)}
|
||||
final={weatherType !== '4'}
|
||||
>
|
||||
<Radio
|
||||
name="tempformat"
|
||||
options={[
|
||||
{
|
||||
name: variables.getMessage(`${WEATHER_SECTION}.temp_format.celsius`) + ' (°C)',
|
||||
value: 'celsius',
|
||||
},
|
||||
{
|
||||
name: variables.getMessage(`${WEATHER_SECTION}.temp_format.fahrenheit`) + ' (°F)',
|
||||
value: 'fahrenheit',
|
||||
},
|
||||
{
|
||||
name: variables.getMessage(`${WEATHER_SECTION}.temp_format.kelvin`) + ' (K)',
|
||||
value: 'kelvin',
|
||||
},
|
||||
]}
|
||||
category="weather"
|
||||
/>
|
||||
</SettingsItem>
|
||||
<Row final={weatherType !== '4'}>
|
||||
<Content title={variables.getMessage(`${WEATHER_SECTION}.temp_format.title`)} />
|
||||
<Action>
|
||||
<Radio
|
||||
name="tempformat"
|
||||
options={[
|
||||
{
|
||||
name: variables.getMessage(`${WEATHER_SECTION}.temp_format.celsius`) + ' (°C)',
|
||||
value: 'celsius',
|
||||
},
|
||||
{
|
||||
name: variables.getMessage(`${WEATHER_SECTION}.temp_format.fahrenheit`) + ' (°F)',
|
||||
value: 'fahrenheit',
|
||||
},
|
||||
{
|
||||
name: variables.getMessage(`${WEATHER_SECTION}.temp_format.kelvin`) + ' (K)',
|
||||
value: 'kelvin',
|
||||
},
|
||||
]}
|
||||
category="weather"
|
||||
/>
|
||||
</Action>
|
||||
</Row>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
@ -167,21 +179,21 @@ export default class WeatherSettings extends PureComponent {
|
|||
];
|
||||
|
||||
return (
|
||||
<SettingsItem
|
||||
title={variables.getMessage(`${WEATHER_SECTION}.custom_settings`)}
|
||||
final={true}
|
||||
>
|
||||
{weatherOptions.map((item) => (
|
||||
<Checkbox
|
||||
key={item.name}
|
||||
name={item.name}
|
||||
text={variables.getMessage(item.textKey)}
|
||||
category="weather"
|
||||
onChange={item.onChange}
|
||||
disabled={item.disabled}
|
||||
/>
|
||||
))}
|
||||
</SettingsItem>
|
||||
<Row final={true}>
|
||||
<Content title={variables.getMessage(`${WEATHER_SECTION}.custom_settings`)} />
|
||||
<Action>
|
||||
{weatherOptions.map((item) => (
|
||||
<Checkbox
|
||||
key={item.name}
|
||||
name={item.name}
|
||||
text={variables.getMessage(item.textKey)}
|
||||
category="weather"
|
||||
onChange={item.onChange}
|
||||
disabled={item.disabled}
|
||||
/>
|
||||
))}
|
||||
</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,98 +129,107 @@ export default class BackgroundSettings extends PureComponent {
|
|||
{variables.getMessage('modals.main.settings.sections.background.interval.month')}
|
||||
</option>
|
||||
</Dropdown>
|
||||
</SettingsItem>
|
||||
</Action>
|
||||
</Row>
|
||||
);*/
|
||||
|
||||
const APISettings = (
|
||||
<>
|
||||
<SettingsItem
|
||||
title={variables.getMessage('modals.main.settings.sections.background.api')}
|
||||
subtitle={variables.getMessage('modals.main.settings.sections.background.api_subtitle')}
|
||||
final={this.state.backgroundAPI === 'mue'}
|
||||
>
|
||||
{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)}
|
||||
<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')}
|
||||
/>
|
||||
</SettingsItem>
|
||||
{this.state.backgroundAPI === 'unsplash' && (
|
||||
<SettingsItem
|
||||
title={variables.getMessage('modals.main.settings.sections.background.unsplash.title')}
|
||||
subtitle={variables.getMessage('modals.main.settings.sections.background.subtitle')}
|
||||
final={true}
|
||||
>
|
||||
<Text
|
||||
title={variables.getMessage('modals.main.settings.sections.background.id')}
|
||||
subtitle={variables.getMessage(
|
||||
'modals.main.settings.sections.background.id_subtitle',
|
||||
<Action>
|
||||
{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',
|
||||
)}
|
||||
placeholder="e.g. 123456, 654321"
|
||||
name="unsplashCollections"
|
||||
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>
|
||||
</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 === 'custom' ||
|
||||
this.state.marketplaceEnabled) ? (
|
||||
<SettingsItem
|
||||
title={variables.getMessage('modals.main.settings.sections.background.display')}
|
||||
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',
|
||||
<Row final={true}>
|
||||
<Content
|
||||
title={variables.getMessage('modals.main.settings.sections.background.display')}
|
||||
subtitle={variables.getMessage(
|
||||
'modals.main.settings.sections.background.display_subtitle',
|
||||
)}
|
||||
element=".other"
|
||||
disabled={!usingImage}
|
||||
/>
|
||||
<Checkbox
|
||||
name="bgtransition"
|
||||
text={variables.getMessage('modals.main.settings.sections.background.transition')}
|
||||
element=".other"
|
||||
disabled={!usingImage}
|
||||
/>
|
||||
<Checkbox
|
||||
name="photoInformation"
|
||||
text={variables.getMessage(
|
||||
'modals.main.settings.sections.background.photo_information',
|
||||
)}
|
||||
element=".other"
|
||||
/>
|
||||
<Checkbox
|
||||
name="photoMap"
|
||||
text={variables.getMessage('modals.main.settings.sections.background.show_map')}
|
||||
element=".other"
|
||||
disabled={!usingImage}
|
||||
/>
|
||||
</SettingsItem>
|
||||
<Action>
|
||||
<Checkbox
|
||||
name="ddgProxy"
|
||||
text={variables.getMessage(
|
||||
'modals.main.settings.sections.background.ddg_image_proxy',
|
||||
)}
|
||||
element=".other"
|
||||
disabled={!usingImage}
|
||||
/>
|
||||
<Checkbox
|
||||
name="bgtransition"
|
||||
text={variables.getMessage('modals.main.settings.sections.background.transition')}
|
||||
element=".other"
|
||||
disabled={!usingImage}
|
||||
/>
|
||||
<Checkbox
|
||||
name="photoInformation"
|
||||
text={variables.getMessage(
|
||||
'modals.main.settings.sections.background.photo_information',
|
||||
)}
|
||||
element=".other"
|
||||
/>
|
||||
<Checkbox
|
||||
name="photoMap"
|
||||
text={variables.getMessage('modals.main.settings.sections.background.show_map')}
|
||||
element=".other"
|
||||
disabled={!usingImage}
|
||||
/>
|
||||
</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'
|
||||
}
|
||||
>
|
||||
<Dropdown
|
||||
label={variables.getMessage('modals.main.settings.sections.background.type.title')}
|
||||
name="backgroundType"
|
||||
onChange={(value) => this.setState({ backgroundType: value })}
|
||||
category="background"
|
||||
>
|
||||
{this.state.marketplaceEnabled && (
|
||||
<option value="photo_pack">
|
||||
{variables.getMessage('modals.main.navbar.marketplace')}
|
||||
</option>
|
||||
<Content
|
||||
title={variables.getMessage(
|
||||
'modals.main.settings.sections.background.source.title',
|
||||
)}
|
||||
<option value="api">
|
||||
{variables.getMessage('modals.main.settings.sections.background.type.api')}
|
||||
</option>
|
||||
<option value="custom">
|
||||
{variables.getMessage(
|
||||
'modals.main.settings.sections.background.type.custom_image',
|
||||
subtitle={variables.getMessage(
|
||||
'modals.main.settings.sections.background.source.subtitle',
|
||||
)}
|
||||
/>
|
||||
<Action>
|
||||
<Dropdown
|
||||
label={variables.getMessage(
|
||||
'modals.main.settings.sections.background.type.title',
|
||||
)}
|
||||
</option>
|
||||
<option value="colour">
|
||||
{variables.getMessage(
|
||||
'modals.main.settings.sections.background.type.custom_colour',
|
||||
name="backgroundType"
|
||||
onChange={(value) => this.setState({ backgroundType: value })}
|
||||
category="background"
|
||||
>
|
||||
{this.state.marketplaceEnabled && (
|
||||
<option value="photo_pack">
|
||||
{variables.getMessage('modals.main.navbar.marketplace')}
|
||||
</option>
|
||||
)}
|
||||
</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>
|
||||
</SettingsItem>
|
||||
<option value="api">
|
||||
{variables.getMessage('modals.main.settings.sections.background.type.api')}
|
||||
</option>
|
||||
<option value="custom">
|
||||
{variables.getMessage(
|
||||
'modals.main.settings.sections.background.type.custom_image',
|
||||
)}
|
||||
</option>
|
||||
<option value="colour">
|
||||
{variables.getMessage(
|
||||
'modals.main.settings.sections.background.type.custom_colour',
|
||||
)}
|
||||
</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 */}
|
||||
{/*{this.state.backgroundType === 'api' ||
|
||||
this.state.backgroundType === 'custom' ||
|
||||
|
|
@ -482,83 +502,19 @@ export default class BackgroundSettings extends PureComponent {
|
|||
this.state.backgroundType === 'custom' ||
|
||||
this.state.marketplaceEnabled) &&
|
||||
this.state.effects ? (
|
||||
<SettingsItem
|
||||
title={variables.getMessage('modals.main.settings.sections.background.effects.title')}
|
||||
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',
|
||||
<Row final={true}>
|
||||
<Content
|
||||
title={variables.getMessage('modals.main.settings.sections.background.effects.title')}
|
||||
subtitle={variables.getMessage(
|
||||
'modals.main.settings.sections.background.effects.subtitle',
|
||||
)}
|
||||
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' && (
|
||||
<Action>
|
||||
<Slider
|
||||
title={variables.getMessage(
|
||||
'modals.main.settings.sections.background.effects.filters.amount',
|
||||
'modals.main.settings.sections.background.effects.blur',
|
||||
)}
|
||||
name="backgroundFilterAmount"
|
||||
name="blur"
|
||||
min="0"
|
||||
max="100"
|
||||
default="0"
|
||||
|
|
@ -567,8 +523,76 @@ export default class BackgroundSettings extends PureComponent {
|
|||
category="background"
|
||||
element="#backgroundImage"
|
||||
/>
|
||||
)}
|
||||
</SettingsItem>
|
||||
<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
|
||||
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}
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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
|
||||
title={variables.getMessage(
|
||||
'modals.main.settings.sections.background.source.custom_colour',
|
||||
)}
|
||||
final={true}
|
||||
>
|
||||
{colourSettings}
|
||||
<div className="colourReset">
|
||||
<span className="link" onClick={() => this.resetColour()}>
|
||||
{variables.getMessage('modals.main.settings.buttons.reset')}
|
||||
</span>
|
||||
</div>
|
||||
</SettingsItem>
|
||||
<Row final={true}>
|
||||
<Content
|
||||
title={variables.getMessage(
|
||||
'modals.main.settings.sections.background.source.custom_colour',
|
||||
)}
|
||||
/>
|
||||
<Action>
|
||||
{colourSettings}
|
||||
<div className="colourReset">
|
||||
<span className="link" onClick={() => this.resetColour()}>
|
||||
{variables.getMessage('modals.main.settings.buttons.reset')}
|
||||
</span>
|
||||
</div>
|
||||
</Action>
|
||||
</Row>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue