[Appearance] grab language and homepage
Also applied new Settings Page styling.
This commit is contained in:
parent
e53181f2f3
commit
17871e78c8
5 changed files with 54 additions and 23 deletions
|
@ -8,7 +8,7 @@ import { getDefaultHomepageKey } from 'util/default-languages';
|
|||
|
||||
type Props = {
|
||||
homepage: string,
|
||||
setHomepage: string => void,
|
||||
setHomepage: (string) => void,
|
||||
};
|
||||
|
||||
function SelectHomepage(props: Props) {
|
||||
|
@ -22,22 +22,25 @@ function SelectHomepage(props: Props) {
|
|||
return null;
|
||||
}
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div className="section__actions--between">
|
||||
<div>
|
||||
<p>{__('Homepage')}</p>
|
||||
<p className="help">{__('Tailor your experience.')}</p>
|
||||
</div>
|
||||
|
||||
<FormField
|
||||
name="homepage_select"
|
||||
type="select"
|
||||
label={__('Homepage')}
|
||||
onChange={handleSetHomepage}
|
||||
value={homepage || getDefaultHomepageKey()}
|
||||
helper={__('Tailor your experience.')}
|
||||
>
|
||||
{Object.keys(homepages).map(hp => (
|
||||
{Object.keys(homepages).map((hp) => (
|
||||
<option key={'hp' + hp} value={hp}>
|
||||
{`${LANGUAGES[hp][1]}`}
|
||||
</option>
|
||||
))}
|
||||
</FormField>
|
||||
</React.Fragment>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
8
ui/component/settingAppearance/index.js
Normal file
8
ui/component/settingAppearance/index.js
Normal file
|
@ -0,0 +1,8 @@
|
|||
import { connect } from 'react-redux';
|
||||
import SettingAppearance from './view';
|
||||
|
||||
const select = (state) => ({});
|
||||
|
||||
const perform = (dispatch) => ({});
|
||||
|
||||
export default connect(select, perform)(SettingAppearance);
|
34
ui/component/settingAppearance/view.jsx
Normal file
34
ui/component/settingAppearance/view.jsx
Normal file
|
@ -0,0 +1,34 @@
|
|||
// @flow
|
||||
import React from 'react';
|
||||
import Card from 'component/common/card';
|
||||
import HomepageSelector from 'component/homepageSelector';
|
||||
import SettingLanguage from 'component/settingLanguage';
|
||||
// $FlowFixMe
|
||||
import homepages from 'homepages';
|
||||
|
||||
type Props = {};
|
||||
|
||||
export default function SettingAppearance(props: Props) {
|
||||
return (
|
||||
<Card
|
||||
title={__('Appearance')}
|
||||
subtitle=""
|
||||
isBodyList
|
||||
body={
|
||||
<>
|
||||
{/* --- Language --- */}
|
||||
<div className="card__main-actions">
|
||||
<SettingLanguage />
|
||||
</div>
|
||||
|
||||
{/* --- Homepage --- */}
|
||||
{homepages && Object.keys(homepages).length > 1 && (
|
||||
<div className="card__main-actions">
|
||||
<HomepageSelector />
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
|
@ -10,12 +10,7 @@ import {
|
|||
doExitSettingsPage,
|
||||
} from 'redux/actions/settings';
|
||||
import { doSetPlayingUri } from 'redux/actions/content';
|
||||
import {
|
||||
makeSelectClientSetting,
|
||||
selectDaemonSettings,
|
||||
selectLanguage,
|
||||
selectShowMatureContent,
|
||||
} from 'redux/selectors/settings';
|
||||
import { makeSelectClientSetting, selectDaemonSettings, selectShowMatureContent } from 'redux/selectors/settings';
|
||||
import { selectMyChannelUrls, SETTINGS } from 'lbry-redux';
|
||||
import SettingsPage from './view';
|
||||
import { selectUserVerifiedEmail, selectUser } from 'redux/selectors/user';
|
||||
|
@ -35,7 +30,6 @@ const select = (state) => ({
|
|||
floatingPlayer: makeSelectClientSetting(SETTINGS.FLOATING_PLAYER)(state),
|
||||
hideReposts: makeSelectClientSetting(SETTINGS.HIDE_REPOSTS)(state),
|
||||
darkModeTimes: makeSelectClientSetting(SETTINGS.DARK_MODE_TIMES)(state),
|
||||
language: selectLanguage(state),
|
||||
myChannelUrls: selectMyChannelUrls(state),
|
||||
user: selectUser(state),
|
||||
});
|
||||
|
|
|
@ -8,15 +8,12 @@ import { FormField } from 'component/common/form';
|
|||
import Button from 'component/button';
|
||||
import Page from 'component/page';
|
||||
import SettingAccount from 'component/settingAccount';
|
||||
import SettingLanguage from 'component/settingLanguage';
|
||||
import SettingAppearance from 'component/settingAppearance';
|
||||
import SettingSystem from 'component/settingSystem';
|
||||
import FileSelector from 'component/common/file-selector';
|
||||
import HomepageSelector from 'component/homepageSelector';
|
||||
import Card from 'component/common/card';
|
||||
import classnames from 'classnames';
|
||||
import { SIMPLE_SITE } from 'config';
|
||||
// $FlowFixMe
|
||||
import homepages from 'homepages';
|
||||
import { Lbryio } from 'lbryinc';
|
||||
import Yrbl from 'component/yrbl';
|
||||
import { getStripeEnvironment } from 'util/stripe';
|
||||
|
@ -65,7 +62,6 @@ type Props = {
|
|||
darkModeTimes: DarkModeTimes,
|
||||
setDarkTime: (string, {}) => void,
|
||||
openModal: (string) => void,
|
||||
language?: string,
|
||||
enterSettings: () => void,
|
||||
exitSettings: () => void,
|
||||
myChannelUrls: ?Array<string>,
|
||||
|
@ -166,6 +162,7 @@ class SettingsPage extends React.PureComponent<Props> {
|
|||
|
||||
return newStyle ? (
|
||||
<Page noFooter noSideNavigation backout={{ title: __('Settings'), backLabel: __('Done') }} className="card-stack">
|
||||
<SettingAppearance />
|
||||
<SettingAccount />
|
||||
<SettingSystem />
|
||||
</Page>
|
||||
|
@ -179,11 +176,6 @@ class SettingsPage extends React.PureComponent<Props> {
|
|||
}}
|
||||
className="card-stack"
|
||||
>
|
||||
<Card title={__('Language')} actions={<SettingLanguage />} />
|
||||
{homepages && Object.keys(homepages).length > 1 && (
|
||||
<Card title={__('Homepage')} actions={<HomepageSelector />} />
|
||||
)}
|
||||
|
||||
{!isAuthenticated && IS_WEB && (
|
||||
<div className="main--empty">
|
||||
<Yrbl
|
||||
|
|
Loading…
Reference in a new issue