diff --git a/.eslintignore b/.eslintignore index e84c7c968..a4e71ba69 100644 --- a/.eslintignore +++ b/.eslintignore @@ -515,6 +515,7 @@ packages/app-mobile/commands/scrollToHash.js packages/app-mobile/commands/util/goToNote.js packages/app-mobile/components/ActionButton.js packages/app-mobile/components/BackButtonDialogBox.js +packages/app-mobile/components/BetaChip.js packages/app-mobile/components/CameraView.js packages/app-mobile/components/DismissibleDialog.js packages/app-mobile/components/Dropdown.test.js diff --git a/.gitignore b/.gitignore index 3cc399f9b..0cb6bae95 100644 --- a/.gitignore +++ b/.gitignore @@ -494,6 +494,7 @@ packages/app-mobile/commands/scrollToHash.js packages/app-mobile/commands/util/goToNote.js packages/app-mobile/components/ActionButton.js packages/app-mobile/components/BackButtonDialogBox.js +packages/app-mobile/components/BetaChip.js packages/app-mobile/components/CameraView.js packages/app-mobile/components/DismissibleDialog.js packages/app-mobile/components/Dropdown.test.js diff --git a/packages/app-mobile/components/BetaChip.tsx b/packages/app-mobile/components/BetaChip.tsx new file mode 100644 index 000000000..b166435f6 --- /dev/null +++ b/packages/app-mobile/components/BetaChip.tsx @@ -0,0 +1,40 @@ +import * as React from 'react'; +import { StyleSheet, Text, View } from 'react-native'; +import { themeStyle } from './global-style'; +import { useMemo } from 'react'; +import { _ } from '@joplin/lib/locale'; +import { connect } from 'react-redux'; +import { AppState } from '../utils/types'; + +interface Props { + themeId: number; + size: number; +} + +const useStyles = (themeId: number, size: number) => { + return useMemo(() => { + const theme = themeStyle(themeId); + + return StyleSheet.create({ + container: { + borderColor: theme.color4, + color: theme.color4, + fontSize: size, + opacity: 0.8, + borderRadius: 12, + borderWidth: 1, + padding: 4, + flexGrow: 0, + textAlign: 'center', + textAlignVertical: 'center', + }, + }); + }, [themeId, size]); +}; + +const BetaChip: React.FC = props => { + const styles = useStyles(props.themeId, props.size); + return {_('Beta')}; +}; + +export default connect((state: AppState) => ({ themeId: state.settings.theme }))(BetaChip); diff --git a/packages/app-mobile/components/screens/ConfigScreen/SectionSelector.tsx b/packages/app-mobile/components/screens/ConfigScreen/SectionSelector.tsx index 31be09e14..124f19e8a 100644 --- a/packages/app-mobile/components/screens/ConfigScreen/SectionSelector.tsx +++ b/packages/app-mobile/components/screens/ConfigScreen/SectionSelector.tsx @@ -8,6 +8,7 @@ import { settingsSections } from '@joplin/lib/components/shared/config/config-sh import Icon from '../../Icon'; import { _ } from '@joplin/lib/locale'; import { TouchableRipple } from 'react-native-paper'; +import BetaChip from '../../BetaChip'; interface Props { styles: ConfigScreenStyles; @@ -46,6 +47,9 @@ const SectionSelector: FunctionComponent = props => { /> ) : null; + const isBeta = item.name === 'plugins'; + const betaChip = isBeta ? : null; + return ( = props => { style={styles.sidebarIcon} /> - - {label} - + + + {label} + + + {betaChip} + = props => { return ( {renderRepoApiStatus()} + }> + Plugin support on mobile is still in beta. Plugins may cause performance issues. Some have only partial support for Joplin mobile. + + +