[Appearance] grab language and homepage

Also applied new Settings Page styling.
This commit is contained in:
infinite-persistence 2021-08-05 17:18:16 +08:00
parent e53181f2f3
commit 17871e78c8
No known key found for this signature in database
GPG key ID: B9C3252EDC3D0AA0
5 changed files with 54 additions and 23 deletions

View file

@ -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>
);
}

View 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);

View 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>
)}
</>
}
/>
);
}

View file

@ -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),
});

View file

@ -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