Joplin
/
joplin
mirror of https://github.com/laurent22/joplin.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Mobile: Fixes #9858: Fix deeply-nested subnotebook titles invisible in the folder dropdown (#9906)

pull/9917/head
Henry Heino 2024-02-08 15:17:17 -08:00 committed by GitHub
parent 802f6c462e
commit 347ba9bb38
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 15 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/app-mobile/components/Dropdown.tsx
View File

@ -7,6 +7,10 @@ type ValueType = string;
export interface DropdownListItem { export interface DropdownListItem {
label: string; label: string;
value: ValueType; value: ValueType;
// Depth corresponds with indentation and can be used to
// create tree structures.
depth?: number;
} }
export type OnValueChangedListener = (newValue: ValueType)=> void; export type OnValueChangedListener = (newValue: ValueType)=> void;
@ -67,6 +71,7 @@ class Dropdown extends Component<DropdownProps, DropdownState> {
const maxListTop = windowHeight - listHeight; const maxListTop = windowHeight - listHeight;
const listTop = Math.min(maxListTop, this.state.headerSize.y + this.state.headerSize.height); const listTop = Math.min(maxListTop, this.state.headerSize.y + this.state.headerSize.height);
const dropdownWidth = this.state.headerSize.width;
const wrapperStyle: ViewStyle = { const wrapperStyle: ViewStyle = {
width: this.state.headerSize.width, width: this.state.headerSize.width,
height: listHeight + 2, // +2 for the border (otherwise it makes the scrollbar appear) height: listHeight + 2, // +2 for the border (otherwise it makes the scrollbar appear)
@ -86,11 +91,14 @@ class Dropdown extends Component<DropdownProps, DropdownState> {
const itemListStyle = { ...(this.props.itemListStyle ? this.props.itemListStyle : {}), borderWidth: 1, const itemListStyle = { ...(this.props.itemListStyle ? this.props.itemListStyle : {}), borderWidth: 1,
borderColor: '#ccc' }; borderColor: '#ccc' };
const itemWrapperStyle = { ...(this.props.itemWrapperStyle ? this.props.itemWrapperStyle : {}), flex: 1, const itemWrapperStyle: ViewStyle = {
...(this.props.itemWrapperStyle ? this.props.itemWrapperStyle : {}),
flex: 1,
justifyContent: 'center', justifyContent: 'center',
height: itemHeight, height: itemHeight,
paddingLeft: 20, paddingLeft: 20,
paddingRight: 10 }; paddingRight: 10,
};
const headerWrapperStyle = { ...(this.props.headerWrapperStyle ? this.props.headerWrapperStyle : {}), height: 35, const headerWrapperStyle = { ...(this.props.headerWrapperStyle ? this.props.headerWrapperStyle : {}), height: 35,
flex: 1, flex: 1,
@ -123,9 +131,11 @@ class Dropdown extends Component<DropdownProps, DropdownState> {
const itemRenderer = ({ item }: { item: DropdownListItem }) => { const itemRenderer = ({ item }: { item: DropdownListItem }) => {
const key = item.value ? item.value.toString() : '__null'; // The top item ("Move item to notebook...") has a null value. const key = item.value ? item.value.toString() : '__null'; // The top item ("Move item to notebook...") has a null value.
const indentWidth = Math.min((item.depth ?? 0) * 32, dropdownWidth * 2 / 3);
return ( return (
<TouchableOpacity <TouchableOpacity
style={itemWrapperStyle as any} style={itemWrapperStyle}
accessibilityRole="menuitem" accessibilityRole="menuitem"
key={key} key={key}
onPress={() => { onPress={() => {
@ -133,7 +143,7 @@ class Dropdown extends Component<DropdownProps, DropdownState> {
if (this.props.onValueChange) this.props.onValueChange(item.value); if (this.props.onValueChange) this.props.onValueChange(item.value);
}} }}
> >
<Text ellipsizeMode="tail" numberOfLines={1} style={itemStyle} key={key}> <Text ellipsizeMode="tail" numberOfLines={1} style={{ ...itemStyle, marginStart: indentWidth }} key={key}>
{item.label} {item.label}
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>

2
packages/app-mobile/components/FolderPicker.tsx
View File

@ -44,7 +44,7 @@ const FolderPicker: FunctionComponent<FolderPickerProps> = ({
const f = folders[i]; const f = folders[i];
const icon = Folder.unserializeIcon(f.icon); const icon = Folder.unserializeIcon(f.icon);
const iconString = icon ? `${icon.emoji} ` : ''; const iconString = icon ? `${icon.emoji} ` : '';
pickerItems.push({ label: `${' '.repeat(indent)} ${iconString + Folder.displayTitle(f)}`, value: f.id }); pickerItems.push({ label: `${iconString + Folder.displayTitle(f)}`, depth: indent, value: f.id });
pickerItems = addFolderChildren(f.children, pickerItems, indent + 1); pickerItems = addFolderChildren(f.children, pickerItems, indent + 1);
} }