mirror of
https://github.com/mue/mue.git
synced 2026-07-14 20:43:54 +02:00
refactor(settings): Move to new style settings row
Comprised of: - Row element - Content (title and description) - Action
This commit is contained in:
alexsparkes
@@ -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 };
|
||||
|
||||
15
src/components/modals/main/settings/SettingsRow.jsx
Normal file
15
src/components/modals/main/settings/SettingsRow.jsx
Normal file
@@ -0,0 +1,15 @@
|
||||
import { memo } from 'react';
|
||||
|
||||
function SettingsRow({ final, title, subtitle, children }) {
|
||||
return (
|
||||
<div className={final ? 'settingsRow settingsNoBorder' : 'settingsRow'}>
|
||||
<div className="content">
|
||||
<span className="title">{title}</span>
|
||||
<span className="subtitle">{subtitle}</span>
|
||||
</div>
|
||||
<div className="action">{children}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default memo(SettingsRow);
|
||||
@@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user