Mobile: Fixes #3564: "Move Note" dropdown menu can be very narrow (#6306)

packages/app-mobile/components/Dropdown.js

@@ -38,10 +38,9 @@ class Dropdown extends React.Component {
 		const listTop = Math.min(maxListTop, this.state.headerSize.y + this.state.headerSize.height);
 
 		const wrapperStyle = {
-			width: this.state.headerSize.width,
 			height: listHeight + 2, // +2 for the border (otherwise it makes the scrollbar appear)
 			marginTop: listTop,
-			marginLeft: this.state.headerSize.x,
+			alignSelf: 'center',
 		};
 
 		const itemListStyle = Object.assign({}, this.props.itemListStyle ? this.props.itemListStyle : {}, {
@@ -87,6 +86,7 @@ class Dropdown extends React.Component {
 		if (this.props.labelTransform && this.props.labelTransform === 'trim') headerLabel = headerLabel.trim();
 
 		const closeList = () => {
+			if (this.props.onClose()) this.props.onClose();
 			this.setState({ listVisible: false });
 		};
 
@@ -116,6 +116,7 @@ class Dropdown extends React.Component {
 					onPress={() => {
 						this.updateHeaderCoordinates();
 						this.setState({ listVisible: true });
+						if (this.props.onOpen()) this.props.onOpen();
 					}}
 				>
 					<Text ellipsizeMode="tail" numberOfLines={1} style={headerStyle}>

packages/app-mobile/components/screen-header.js

@@ -29,8 +29,10 @@ class ScreenHeaderComponent extends React.PureComponent {
 	constructor() {
 		super();
 		this.styles_ = {};
+		this.state = { showUndoRedoButtons: true };
 	}
 
+
 	styles() {
 		const themeId = Setting.value('theme');
 		if (this.styles_[themeId]) return this.styles_[themeId];
@@ -256,7 +258,7 @@ class ScreenHeaderComponent extends React.PureComponent {
 		}
 
 		const renderTopButton = (options) => {
-			if (!options.visible) return null;
+			if (!options.visible || !this.state.showUndoRedoButtons) return null;
 
 			const icon = <Icon name={options.iconName} style={this.styles().topIcon} />;
 			const viewStyle = options.disabled ? this.styles().iconButtonDisabled : this.styles().iconButton;
@@ -422,6 +424,16 @@ class ScreenHeaderComponent extends React.PureComponent {
 							color: theme.color,
 							fontSize: theme.fontSize,
 						}}
+						onOpen={() => {
+							this.setState({
+								showUndoRedoButtons: false,
+							});
+						}}
+						onClose={() => {
+							this.setState({
+								showUndoRedoButtons: true,
+							});
+						}}
 						onValueChange={async (folderId, itemIndex) => {
 							// If onValueChange is specified, use this as a callback, otherwise do the default
 							// which is to take the selectedNoteIds from the state and move them to the