Desktop: Move note sort drop handler to ItemList to enlarge dropzone …

…downwards

Sorting notes was slightly finicky because, to move things to the top or bottom, you needed to drop onto the top half of the top note item in the list, or the bottom half of the bottom note item.

This change fixes this for the bottom drop - the dropzone for "to bottom" is enlarged beyond the bottom half of the bottom list item, to the entire remainder of the NoteList (ItemList) div below.

packages/app-desktop/gui/ItemList.tsx

@@ -8,6 +8,7 @@ interface Props {
 	onKeyDown?: Function;
 	itemRenderer: Function;
 	className?: string;
+	onNoteDrop?: Function;
 }
 
 interface State {
@@ -29,6 +30,7 @@ class ItemList extends React.Component<Props, State> {
 
 		this.onScroll = this.onScroll.bind(this);
 		this.onKeyDown = this.onKeyDown.bind(this);
+		this.onDrop = this.onDrop.bind(this);
 	}
 
 	visibleItemCount(props: Props = undefined) {
@@ -76,6 +78,10 @@ class ItemList extends React.Component<Props, State> {
 		if (this.props.onKeyDown) this.props.onKeyDown(event);
 	}
 
+	onDrop(event: any) {
+		if (this.props.onNoteDrop) this.props.onNoteDrop(event);
+	}
+
 	makeItemIndexVisible(itemIndex: number) {
 		const top = Math.min(this.props.items.length - 1, this.state.topItemIndex);
 		const bottom = Math.max(0, this.state.bottomItemIndex);
@@ -141,7 +147,7 @@ class ItemList extends React.Component<Props, State> {
 		if (this.props.className) classes.push(this.props.className);
 
 		return (
-			<div ref={this.listRef} className={classes.join(' ')} style={style} onScroll={this.onScroll} onKeyDown={this.onKeyDown}>
+			<div ref={this.listRef} className={classes.join(' ')} style={style} onScroll={this.onScroll} onKeyDown={this.onKeyDown} onDrop={this.onDrop}>
 				{itemComps}
 			</div>
 		);

packages/app-desktop/gui/NoteList/NoteList.tsx

@@ -269,7 +269,6 @@ const NoteListComponent = (props: Props) => {
 			onCheckboxClick={noteItem_checkboxClick}
 			onDragStart={noteItem_dragStart}
 			onNoteDragOver={noteItem_noteDragOver}
-			onNoteDrop={noteItem_noteDrop}
 			onTitleClick={noteItem_titleClick}
 			onContextMenu={itemContextMenu}
 		/>;
@@ -500,6 +499,7 @@ const NoteListComponent = (props: Props) => {
 				style={props.size}
 				itemRenderer={renderItem}
 				onKeyDown={onKeyDown}
+				onNoteDrop={noteItem_noteDrop}
 			/>
 		);
 	};

packages/app-desktop/gui/NoteListItem.tsx

@@ -56,7 +56,6 @@ interface NoteListItemProps {
 	onCheckboxClick: any;
 	onDragStart: any;
 	onNoteDragOver: any;
-	onNoteDrop: any;
 	onTitleClick: any;
 	onContextMenu(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>): void;
 }
@@ -175,7 +174,6 @@ function NoteListItem(props: NoteListItemProps, ref: any) {
 		<StyledRoot
 			className={classNames}
 			onDragOver={props.onNoteDragOver}
-			onDrop={props.onNoteDrop}
 			width={props.width}
 			height={props.height}
 			isProvisional={props.isProvisional}