From c539e4e10d18f622a57285ee501d985715b8e4ea Mon Sep 17 00:00:00 2001 From: infinite-persistence Date: Thu, 5 Aug 2021 21:16:10 +0800 Subject: [PATCH] Move combobox to right | Move "Search only in language" into separate row --- static/app-strings.json | 2 +- ui/component/homepageSelector/view.jsx | 9 ++----- ui/component/settingAppearance/index.js | 2 ++ ui/component/settingAppearance/view.jsx | 31 ++++++++++++++++++------- ui/component/settingLanguage/index.js | 13 ++++------- ui/component/settingLanguage/view.jsx | 18 +++----------- 6 files changed, 36 insertions(+), 39 deletions(-) diff --git a/static/app-strings.json b/static/app-strings.json index 0558bba20..b983ff095 100644 --- a/static/app-strings.json +++ b/static/app-strings.json @@ -1610,7 +1610,7 @@ "None selected": "None selected", "Secondary Language": "Secondary Language", "Your other content language": "Your other content language", - "Search only in this language by default": "Search only in this language by default", + "Search only in the selected language by default": "Search only in the selected language by default", "This link leads to an external website.": "This link leads to an external website.", "No Content Found": "No Content Found", "No Lists Found": "No Lists Found", diff --git a/ui/component/homepageSelector/view.jsx b/ui/component/homepageSelector/view.jsx index ce7e15e48..b8eb7adef 100644 --- a/ui/component/homepageSelector/view.jsx +++ b/ui/component/homepageSelector/view.jsx @@ -22,12 +22,7 @@ function SelectHomepage(props: Props) { return null; } return ( -
-
-

{__('Homepage')}

-

{__('Tailor your experience.')}

-
- + ))} -
+ ); } diff --git a/ui/component/settingAppearance/index.js b/ui/component/settingAppearance/index.js index 609263f25..54db43d7f 100644 --- a/ui/component/settingAppearance/index.js +++ b/ui/component/settingAppearance/index.js @@ -6,10 +6,12 @@ import SettingAppearance from './view'; const select = (state) => ({ clock24h: makeSelectClientSetting(SETTINGS.CLOCK_24H)(state), + searchInLanguage: makeSelectClientSetting(SETTINGS.SEARCH_IN_LANGUAGE)(state), }); const perform = (dispatch) => ({ setClientSetting: (key, value) => dispatch(doSetClientSetting(key, value)), + setSearchInLanguage: (value) => dispatch(doSetClientSetting(SETTINGS.SEARCH_IN_LANGUAGE, value)), }); export default connect(select, perform)(SettingAppearance); diff --git a/ui/component/settingAppearance/view.jsx b/ui/component/settingAppearance/view.jsx index 0a3d42616..f9f674da9 100644 --- a/ui/component/settingAppearance/view.jsx +++ b/ui/component/settingAppearance/view.jsx @@ -5,17 +5,20 @@ 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, setClientSetting: (string, boolean | string | number) => void, + setSearchInLanguage: (boolean) => void, }; export default function SettingAppearance(props: Props) { - const { clock24h, setClientSetting } = props; + const { clock24h, searchInLanguage, setClientSetting, setSearchInLanguage } = props; return ( - {/* --- Homepage --- */} {homepages && Object.keys(homepages).length > 1 && ( -
+ -
+ )} - {/* --- Language --- */} -
+ -
+ - SettingsRow title={__('Theme')}> + + setSearchInLanguage(!searchInLanguage)} + /> + + + @@ -53,3 +63,8 @@ export default function SettingAppearance(props: Props) { /> ); } + +// prettier-disable +const HELP = { + LANGUAGE: 'Multi-language support is brand new and incomplete. Switching your language may have unintended consequences, like glossolalia.', +}; diff --git a/ui/component/settingLanguage/index.js b/ui/component/settingLanguage/index.js index 5a3d60abe..34ee83fd5 100644 --- a/ui/component/settingLanguage/index.js +++ b/ui/component/settingLanguage/index.js @@ -1,17 +1,14 @@ import { connect } from 'react-redux'; -import { SETTINGS } from 'lbry-redux'; -import { doSetLanguage, doSetClientSetting } from 'redux/actions/settings'; -import { makeSelectClientSetting, selectLanguage } from 'redux/selectors/settings'; +import { doSetLanguage } from 'redux/actions/settings'; +import { selectLanguage } from 'redux/selectors/settings'; import SettingLanguage from './view'; -const select = state => ({ +const select = (state) => ({ language: selectLanguage(state), - searchInLanguage: makeSelectClientSetting(SETTINGS.SEARCH_IN_LANGUAGE)(state), }); -const perform = dispatch => ({ - setLanguage: value => dispatch(doSetLanguage(value)), - setSearchInLanguage: value => dispatch(doSetClientSetting(SETTINGS.SEARCH_IN_LANGUAGE, value)), +const perform = (dispatch) => ({ + setLanguage: (value) => dispatch(doSetLanguage(value)), }); export default connect(select, perform)(SettingLanguage); diff --git a/ui/component/settingLanguage/view.jsx b/ui/component/settingLanguage/view.jsx index cb58a7f19..515970d6e 100644 --- a/ui/component/settingLanguage/view.jsx +++ b/ui/component/settingLanguage/view.jsx @@ -10,12 +10,10 @@ import { getDefaultLanguage, sortLanguageMap } from 'util/default-languages'; type Props = { language: string, setLanguage: (string) => void, - searchInLanguage: boolean, - setSearchInLanguage: (boolean) => void, }; function SettingLanguage(props: Props) { - const { language, setLanguage, searchInLanguage, setSearchInLanguage } = props; + const { language, setLanguage } = props; const [previousLanguage, setPreviousLanguage] = useState(null); if (previousLanguage && language !== previousLanguage) { @@ -37,15 +35,13 @@ function SettingLanguage(props: Props) { return ( + {previousLanguage && } + {sortLanguageMap(SUPPORTED_LANGUAGES).map(([langKey, langName]) => ( ))} - {previousLanguage && } - setSearchInLanguage(!searchInLanguage)} - /> ); }