self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2025-07-16 00:14:34 +02:00
Code Issues Releases Activity

Android: Fix plugin card titles are clipped (#10296)

Browse Source
This commit is contained in:
Henry Heino
2024-04-11 00:37:20 -07:00
committed by GitHub
parent 346f49fa66
commit 1bb724fe0e
2 changed files with 15 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
packages/app-mobile/components/screens/ConfigScreen/plugins/PluginBox/index.tsx
View File

@ -1,7 +1,7 @@
import * as React from 'react'; import * as React from 'react';
import { Icon, Card, Chip, Text } from 'react-native-paper'; import { Icon, Card, Chip, Text } from 'react-native-paper';
import { _ } from '@joplin/lib/locale'; import { _ } from '@joplin/lib/locale';
import { Alert, Linking, TextStyle, View } from 'react-native'; import { Alert, Linking, StyleSheet, View } from 'react-native';
import { PluginItem } from '@joplin/lib/components/shared/config/plugins/types'; import { PluginItem } from '@joplin/lib/components/shared/config/plugins/types';
import shim from '@joplin/lib/shim'; import shim from '@joplin/lib/shim';
import PluginService from '@joplin/lib/services/plugins/PluginService'; import PluginService from '@joplin/lib/services/plugins/PluginService';
@ -56,9 +56,15 @@ const onRecommendedPress = () => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied // eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
const PluginIcon = (props: any) => <Icon {...props} source='puzzle'/>; const PluginIcon = (props: any) => <Icon {...props} source='puzzle'/>;
const versionTextStyle: TextStyle = { const styles = StyleSheet.create({
opacity: 0.8, versionText: {
}; opacity: 0.8,
},
title: {
// Prevents the title text from being clipped on Android
verticalAlign: 'middle',
},
});
const PluginBox: React.FC<Props> = props => { const PluginBox: React.FC<Props> = props => {
const manifest = props.item.manifest; const manifest = props.item.manifest;
@ -162,12 +168,13 @@ const PluginBox: React.FC<Props> = props => {
const updateStateIsIdle = props.updateState !== UpdateState.Idle; const updateStateIsIdle = props.updateState !== UpdateState.Idle;
const titleComponent = <> const titleComponent = <>
<Text variant='titleMedium'>{manifest.name}</Text> <Text variant='bodySmall' style={versionTextStyle}>v{manifest.version}</Text> <Text variant='titleMedium'>{manifest.name}</Text> <Text variant='bodySmall' style={styles.versionText}>v{manifest.version}</Text>
</>; </>;
return ( return (
<Card style={{ margin: 8, opacity: props.isCompatible ? undefined : 0.75 }} testID='plugin-card'> <Card style={{ margin: 8, opacity: props.isCompatible ? undefined : 0.75 }} testID='plugin-card'>
<Card.Title <Card.Title
title={titleComponent} title={titleComponent}
titleStyle={styles.title}
subtitle={manifest.description} subtitle={manifest.description}
left={PluginIcon} left={PluginIcon}
/> />

6
packages/app-mobile/components/screens/ConfigScreen/plugins/PluginStates.test.tsx
View File

@ -127,8 +127,8 @@ describe('PluginStates', () => {
initialPluginSettings={defaultPluginSettings} initialPluginSettings={defaultPluginSettings}
/>, />,
); );
expect(await screen.findByText('ABC Sheet Music')).toBeVisible(); expect(await screen.findByText(/^ABC Sheet Music/)).toBeVisible();
expect(await screen.findByText('Backlinks to note')).toBeVisible(); expect(await screen.findByText(/^Backlinks to note/)).toBeVisible();
expect(await screen.findByRole('button', { name: 'Update ABC Sheet Music', disabled: false })).toBeVisible(); expect(await screen.findByRole('button', { name: 'Update ABC Sheet Music', disabled: false })).toBeVisible();
@ -154,7 +154,7 @@ describe('PluginStates', () => {
initialPluginSettings={defaultPluginSettings} initialPluginSettings={defaultPluginSettings}
/>, />,
); );
expect(await screen.findByText('ABC Sheet Music')).toBeVisible(); expect(await screen.findByText(/^ABC Sheet Music/)).toBeVisible();
expect(await screen.findByRole('button', { name: 'Update ABC Sheet Music', disabled: false })).toBeVisible(); expect(await screen.findByRole('button', { name: 'Update ABC Sheet Music', disabled: false })).toBeVisible();
expect(await screen.findByText(`v${outdatedVersion}`)).toBeVisible(); expect(await screen.findByText(`v${outdatedVersion}`)).toBeVisible();
}); });