b3b4e54975
All <Setting*> components will have an ID that corresponds to the sidebar link. When clicked, we scroll to the position of the card by searching for the element with the ID. It behaves simiar to # anchor navigation. I like this model mainly because in Mobile, users don't need to keep opening the drawer to navigate -- they just need to scroll. This allows us to use the same design for Mobile and App.
86 lines
2.7 KiB
JavaScript
86 lines
2.7 KiB
JavaScript
// @flow
|
|
import { SETTINGS_GRP } from 'constants/settings';
|
|
import React from 'react';
|
|
import { SETTINGS } from 'lbry-redux';
|
|
import Card from 'component/common/card';
|
|
import { FormField } from 'component/common/form';
|
|
import HomepageSelector from 'component/homepageSelector';
|
|
import SettingLanguage from 'component/settingLanguage';
|
|
import SettingsRow from 'component/settingsRow';
|
|
import ThemeSelector from 'component/themeSelector';
|
|
// $FlowFixMe
|
|
import homepages from 'homepages';
|
|
|
|
type Props = {
|
|
clock24h: boolean,
|
|
searchInLanguage: boolean,
|
|
isAuthenticated: boolean,
|
|
hideBalance: boolean,
|
|
setClientSetting: (string, boolean | string | number) => void,
|
|
setSearchInLanguage: (boolean) => void,
|
|
};
|
|
|
|
export default function SettingAppearance(props: Props) {
|
|
const { clock24h, searchInLanguage, isAuthenticated, hideBalance, setClientSetting, setSearchInLanguage } = props;
|
|
|
|
return (
|
|
<Card
|
|
id={SETTINGS_GRP.APPEARANCE}
|
|
title={__('Appearance')}
|
|
subtitle=""
|
|
isBodyList
|
|
body={
|
|
<>
|
|
{homepages && Object.keys(homepages).length > 1 && (
|
|
<SettingsRow title={__('Homepage')} subtitle={__('Tailor your experience.')}>
|
|
<HomepageSelector />
|
|
</SettingsRow>
|
|
)}
|
|
|
|
<SettingsRow title={__('Language')} subtitle={__(HELP.LANGUAGE)}>
|
|
<SettingLanguage />
|
|
</SettingsRow>
|
|
|
|
<SettingsRow title={__('Search only in the selected language by default')}>
|
|
<FormField
|
|
name="search-in-language"
|
|
type="checkbox"
|
|
checked={searchInLanguage}
|
|
onChange={() => setSearchInLanguage(!searchInLanguage)}
|
|
/>
|
|
</SettingsRow>
|
|
|
|
<SettingsRow title={__('Theme')}>
|
|
<ThemeSelector />
|
|
</SettingsRow>
|
|
|
|
<SettingsRow title={__('24-hour clock')}>
|
|
<FormField
|
|
type="checkbox"
|
|
name="clock24h"
|
|
onChange={() => setClientSetting(SETTINGS.CLOCK_24H, !clock24h)}
|
|
checked={clock24h}
|
|
/>
|
|
</SettingsRow>
|
|
|
|
{(isAuthenticated || !IS_WEB) && (
|
|
<SettingsRow title={__('Hide wallet balance in header')}>
|
|
<FormField
|
|
type="checkbox"
|
|
name="hide_balance"
|
|
onChange={() => setClientSetting(SETTINGS.HIDE_BALANCE, !hideBalance)}
|
|
checked={hideBalance}
|
|
/>
|
|
</SettingsRow>
|
|
)}
|
|
</>
|
|
}
|
|
/>
|
|
);
|
|
}
|
|
|
|
// prettier-disable
|
|
const HELP = {
|
|
LANGUAGE: 'Multi-language support is brand new and incomplete. Switching your language may have unintended consequences, like glossolalia.',
|
|
};
|