bm-core-ui 2.7.0 → 2.8.3

package/build/BMCollectionView/BMCollectionViewLayout.js

@@ -152,6 +152,164 @@ BMCollectionViewLayout.prototype = {
 		this._copy = undefined;
 	},
 
+
+	/************************************* CELL HIGHLIGHTING ********************************/
+
+	/**
+	 * Invoked by the collection view to obtain the first index path in the layout.
+	 * The default implementation returns the first index path in the data set.
+	 * @returns <BMIndexPath, nullable>		The first index path, or `undefined` if no index path exists.
+	 */
+	firstIndexPath() {
+		const sectionCount = this.collectionView.numberOfSections();
+
+		for (let i = 0; i < sectionCount; i++) {
+			const rowCount = this.collectionView.numberOfObjectsInSectionAtIndex(i);
+
+			if (rowCount) return this.collectionView.indexPathForObjectAtRow(0, {inSectionAtIndex: i});
+		}
+	},
+
+	/**
+	 * Invoked by the collection to obtain the index path that is visually to the left of the given index path.
+	 * 
+	 * Subclasses may override this method to return an appropriate index path.
+	 * If the given index path is at the left edge of the content area, the same index path should be returned.
+	 * 
+	 * The default implementation returns the previous index path in the data set.
+	 * @param indexPath <BMIndexPath>		The starting index path.
+	 * @returns <BMIndexPath>				The index path to the left of the starting index path.
+	 */
+	indexPathToTheLeftOfIndexPath(indexPath) {
+		if (indexPath.row > 0) {
+			return this.collectionView.indexPathForObjectAtRow(indexPath.row - 1, {inSectionAtIndex: indexPath.section});
+		}
+
+		if (indexPath.section > 0) {
+			let previousSection = indexPath.section - 1;
+			do {
+				const rowCount = this.collectionView.numberOfObjectsInSectionAtIndex(previousSection);
+				if (rowCount) {
+					return this.collectionView.indexPathForObjectAtRow(rowCount - 1, {inSectionAtIndex: previousSection});
+				}
+				else {
+					previousSection = previousSection - 1;
+				}
+			} while (previousSection >= 0);
+		}
+
+		return indexPath;
+	},
+
+	/**
+	 * Invoked by the collection to obtain the index path that is visually on top of the given index path.
+	 * 
+	 * Subclasses may override this method to return an appropriate index path.
+	 * If the given index path is at the top edge of the content area, the same index path should be returned.
+	 * 
+	 * The default implementation returns the result of calling `indexPathToTheLeftOfIndexPath`.
+	 * @param indexPath <BMIndexPath>		The starting index path.
+	 * @returns <BMIndexPath>				The index path above the starting index path.
+	 */
+	indexPathAboveIndexPath(indexPath) {
+		return this.indexPathToTheLeftOfIndexPath(indexPath);
+	},
+
+	/**
+	 * Invoked by the collection to obtain the index path that is visually to the right of the given index path.
+	 * 
+	 * Subclasses may override this method to return an appropriate index path.
+	 * If the given index path is at the right edge of the content area, the same index path should be returned.
+	 * 
+	 * The default implementation returns the next index path in the data set.
+	 * @param indexPath <BMIndexPath>		The starting index path.
+	 * @returns <BMIndexPath>				The index path to the right of the starting index path.
+	 */
+	indexPathToTheRightOfIndexPath(indexPath) {
+		const rowCount = this.collectionView.numberOfObjectsInSectionAtIndex(indexPath.section);
+		if (indexPath.row < rowCount - 1) {
+			return this.collectionView.indexPathForObjectAtRow(indexPath.row + 1, {inSectionAtIndex: indexPath.section});
+		}
+
+		const sectionCount = this.collectionView.numberOfSections();
+		if (indexPath.section < sectionCount - 1) {
+			let nextSection = indexPath.section + 1;
+			do {
+				const rowCount = this.collectionView.numberOfObjectsInSectionAtIndex(nextSection);
+				if (rowCount) {
+					return this.collectionView.indexPathForObjectAtRow(0, {inSectionAtIndex: nextSection});
+				}
+				else {
+					nextSection = nextSection + 1;
+				}
+			} while (nextSection < sectionCount);
+		}
+
+		return indexPath;
+	},
+
+	/**
+	 * Invoked by the collection view to obtain the index path that is visually below the given index path.
+	 * 
+	 * Subclasses may override this method to return an appropriate index path.
+	 * If the given index path is at the bottom edge of the content area, the same index path should be returned.
+	 * 
+	 * The default implementation returns the result of calling `indexPathToTheRightOfIndexPath`.
+	 * @param indexPath <BMIndexPath>		The starting index path.
+	 * @returns <BMIndexPath>				The index path below the starting index path.
+	 */
+	indexPathBelowIndexPath(indexPath) {
+		return this.indexPathToTheRightOfIndexPath(indexPath);
+	},
+
+	/**
+	 * Invoked by the collection view to obtain a list of index paths that are visually between
+	 * the two given index paths.
+	 * 
+	 * The default implementation returns a list containing the index paths from the data set that
+	 * start at the given index path, stopping at the target index path.
+	 * 
+	 * The starting and ending index paths should be included in the result.
+	 * @param indexPath <BMIndexPath>		The starting index path.
+	 * {
+	 * 	@param toIndexPath <BMIndexPath>	The ending index path.
+	 * }
+	 * @return <[BMIndexPath]>				An array of index paths.
+	 */
+	indexPathsFromIndexPath(indexPath, {toIndexPath}) {
+		const indexPaths = [];
+
+		// Swap the index paths if the target index path is before the source index path
+		if (toIndexPath.section < indexPath.section) {
+			const swapIndexPath = toIndexPath;
+			toIndexPath = indexPath;
+			indexPath = swapIndexPath;
+		}
+		else if (indexPath.section == toIndexPath.section && toIndexPath.row < indexPath.row) {
+			const swapIndexPath = toIndexPath;
+			toIndexPath = indexPath;
+			indexPath = swapIndexPath;
+		}
+
+		let i = indexPath.row;
+		const targetSection = toIndexPath.section;
+
+		for (let j = indexPath.section; j < targetSection + 1; j++) {
+			let rowCount = this.collectionView.numberOfObjectsInSectionAtIndex(j);
+			if (j == targetSection) {
+				rowCount = toIndexPath.row + 1;
+			}
+
+			for (; i < rowCount; i++) {
+				indexPaths.push(this.collectionView.indexPathForObjectAtRow(i, {inSectionAtIndex: j}));
+			}
+
+			i = 0;
+		}
+
+		return indexPaths;
+	},
+
     /****************************************** UPDATES ***********************************************/
 
     /**

package/build/BMCollectionView/BMCollectionViewMasonryLayout.js

@@ -3,7 +3,7 @@
 import {YES, NO, BMExtend} from '../Core/BMCoreUI'
 import {BMSizeMake} from '../Core/BMSize'
 import {BMRectMake} from '../Core/BMRect'
-import {BMCollectionViewLayoutAttributesMakeForCellAtIndexPath} from './BMCollectionViewLayoutAttributes'
+import {BMCollectionViewLayoutAttributesMakeForCellAtIndexPath, BMCollectionViewLayoutAttributesType} from './BMCollectionViewLayoutAttributes'
 import {BMCollectionViewLayout} from './BMCollectionViewLayout'
 
 // @type BMCollectionViewMasonryLayout extends BMCollectionViewLayout
@@ -331,15 +331,29 @@ BMCollectionViewMasonryLayout.prototype = BMExtend({}, BMCollectionViewLayout.pr
 	
 	/**
 	 * Retrieves the cached attributes for the cell at the given index path.
+	 * @param indexPath <BMIndexPath>							The cell's index path.
+	 * {
+	 *	@param usingCache <Object, nullable>					Defaults to this layout's current cache. The cache object to use.
+	 * }
+	 * @return <BMCollectionViewLayoutAttributes, nullable>		The layout attributes if the index path exists in the data set, `undefined` otherwise.
+	 */
+	cachedAttributesForCellAtIndexPath: function (indexPath, options) {
+		return this._extendedCachedAttributesForCellAtIndexPath(indexPath, options).attribute;
+	},
+	
+	/**
+	 * Retrieves the cached attributes for the cell at the given index path and information about
+	 * the column it is on.
 	 * @param indexPath <BMIndexPath>			The cell's index path.
 	 * {
 	 *	@param usingCache <Object, nullable>	Defaults to this layout's current cache. The cache object to use.
 	 * }
+	 * @return <Object, nullable>				An object that describes the requested attributes and its position in the layout.
 	 */
-	cachedAttributesForCellAtIndexPath: function (indexPath, options) {
+	_extendedCachedAttributesForCellAtIndexPath: function(indexPath, args) {
 		var offset = this.collectionView.scrollOffset;
 		
-		var cache = (options && options.usingCache) || this.cachedLayout;
+		var cache = (args && args.usingCache) || this.cachedLayout;
 		
 		// Find the attributes in each column
 		var columns = cache.columns;
@@ -367,12 +381,15 @@ BMCollectionViewMasonryLayout.prototype = BMExtend({}, BMCollectionViewLayout.pr
 					attribute.frame.origin.y = (attribute.frame.origin.y + speedAdjustment) | 0;
 					attribute.speed = column.speed;
 					
-					return attribute;
+					return {
+						attribute,
+						columnIndex: i,
+						rowIndex: attributeIndex
+					};
 				}
 			}
 			
 		}
-		
 	},
 	
 	
@@ -460,6 +477,129 @@ BMCollectionViewMasonryLayout.prototype = BMExtend({}, BMCollectionViewLayout.pr
         
         return attributes;
     },
+
+	/************************************* CELL HIGHLIGHTING ********************************/
+
+	// @override - BMCollectionViewLayout
+	indexPathToTheLeftOfIndexPath(indexPath) {
+		// Create a rect starting at the left edge of the given index path and request attributes in it
+		const extendedAttributes = this._extendedCachedAttributesForCellAtIndexPath(indexPath);
+
+		if (extendedAttributes.columnIndex == 0) return indexPath;
+
+		const startingAttributes = extendedAttributes.attribute;
+		const center = startingAttributes.frame.center.y;
+		
+		const offset = this.collectionView.scrollOffset;
+		
+		const cache = this.cachedLayout;
+		
+		// Find the attributes in previous column with the smallest vertical distance from the starting attributes
+		const column = cache.columns[extendedAttributes.columnIndex - 1];
+
+		// The speedTop is the unscaled top position at which to start retrieving cells.
+		var speedTop = offset.y * column.speed;
+		
+		// The speedAdjustment is the amount by which to displace each attribute's Y origin.
+		var speedAdjustment = offset.y - speedTop;
+
+		let minIndex = -1;
+		let minDistance = Number.MAX_SAFE_INTEGER;
+		for (let i = 0; i < column.attributes.length; i++) {
+			const attribute = column.attributes[i];
+			const position = attribute.frame.center.y + speedAdjustment | 0;
+
+			const distance = Math.abs(position - center);
+			if (distance < minDistance) {
+				minIndex = i;
+				minDistance = distance;
+			}
+		}
+
+		if (minIndex != -1) {
+			return column.attributes[minIndex].indexPath;
+		}
+
+		return indexPath;
+	},
+
+	// @override - BMCollectionViewLayout
+	indexPathAboveIndexPath(indexPath) {
+		// Return the row above the given index path in the same column
+		const extendedAttributes = this._extendedCachedAttributesForCellAtIndexPath(indexPath);
+
+		if (extendedAttributes.rowIndex > 0) {
+			return this.cachedLayout.columns[extendedAttributes.columnIndex].attributes[extendedAttributes.rowIndex - 1].indexPath;
+		}
+
+		return indexPath;
+	},
+	
+	// @override - BMCollectionViewLayout
+	indexPathToTheRightOfIndexPath(indexPath) {
+		// Create a rect starting at the left edge of the given index path and request attributes in it
+		const extendedAttributes = this._extendedCachedAttributesForCellAtIndexPath(indexPath);
+		
+		const cache = this.cachedLayout;
+
+		if (extendedAttributes.columnIndex >= this.cachedLayout.columns.length - 1) return indexPath;
+
+		const startingAttributes = extendedAttributes.attribute;
+		const center = startingAttributes.frame.center.y;
+		
+		const offset = this.collectionView.scrollOffset;
+		
+		// Find the attributes in next column with the smallest vertical distance from the starting attributes
+		const column = cache.columns[extendedAttributes.columnIndex + 1];
+
+		// The speedTop is the unscaled top position at which to start retrieving cells.
+		var speedTop = offset.y * column.speed;
+		
+		// The speedAdjustment is the amount by which to displace each attribute's Y origin.
+		var speedAdjustment = offset.y - speedTop;
+
+		let minIndex = -1;
+		let minDistance = Number.MAX_SAFE_INTEGER;
+		for (let i = 0; i < column.attributes.length; i++) {
+			const attribute = column.attributes[i];
+			const position = attribute.frame.center.y + speedAdjustment | 0;
+
+			const distance = Math.abs(position - center);
+			if (distance < minDistance) {
+				minIndex = i;
+				minDistance = distance;
+			}
+		}
+
+		if (minIndex != -1) {
+			return column.attributes[minIndex].indexPath;
+		}
+
+		return indexPath;
+	},
+	
+	// @override - BMCollectionViewLayout
+	indexPathBelowIndexPath(indexPath) {
+		// Return the row below the given index path in the same column
+		const extendedAttributes = this._extendedCachedAttributesForCellAtIndexPath(indexPath);
+
+		if (extendedAttributes.rowIndex < this.cachedLayout.columns[extendedAttributes.columnIndex].attributes.length - 1) {
+			return this.cachedLayout.columns[extendedAttributes.columnIndex].attributes[extendedAttributes.rowIndex + 1].indexPath;
+		}
+
+		return indexPath;
+	},
+	
+	// @override - BMCollectionViewLayout
+	indexPathsFromIndexPath(indexPath, {toIndexPath}) {
+		// Create and return the index paths available in the union of the two index paths' frames.
+		const startingAttributes = this.attributesForCellAtIndexPath(indexPath);
+		const targetAttributes = this.attributesForCellAtIndexPath(toIndexPath);
+
+		const attributes = this.attributesForElementsInRect(startingAttributes.frame.rectByUnionWithRect(targetAttributes.frame));
+		
+		return attributes.filter(a => a.itemType == BMCollectionViewLayoutAttributesType.Cell).map(a => a.indexPath);
+	},
 	
 	// @override - BMCollectionViewLayout
 	copy: function () {

package/build/BMCollectionView/BMCollectionViewTileLayout.js

@@ -6,7 +6,7 @@ import {BMPointMakeWithX} from '../Core/BMPoint'
 import {BMSizeMake} from '../Core/BMSize'
 import {BMRectMake, BMRectMakeWithX, BMRectMakeWithOrigin} from '../Core/BMRect'
 import {BMIndexPathMakeWithIndexes} from '../Core/BMIndexPath'
-import {BMCollectionViewLayoutAttributesMakeForCellAtIndexPath, BMCollectionViewLayoutAttributesMakeForSupplementaryViewWithIdentifier} from './BMCollectionViewLayoutAttributes'
+import {BMCollectionViewLayoutAttributesMakeForCellAtIndexPath, BMCollectionViewLayoutAttributesMakeForSupplementaryViewWithIdentifier, BMCollectionViewLayoutAttributesType} from './BMCollectionViewLayoutAttributes'
 import {BMCollectionViewFlowLayoutSupplementaryView, BMCollectionViewTableLayoutSupplementaryView} from './BMCollectionViewFlowLayout'
 import {BMCollectionViewLayout} from './BMCollectionViewLayout'
 
@@ -1106,7 +1106,152 @@ BMCollectionViewTileLayout.prototype = BMExtend({}, BMCollectionViewLayout.proto
 
 		// Control shouldn't reach this point
 		debugger;
-	}
+	},
+
+	/************************************* CELL HIGHLIGHTING ********************************/
+
+	// @override - BMCollectionViewLayout
+	 indexPathToTheLeftOfIndexPath(indexPath) {
+		// Create a rect starting at the left edge of the given index path and request attributes in it
+		const startingAttributes = this.attributesForCellAtIndexPath(indexPath);
+
+		const extent = BMRectMake(
+			startingAttributes.frame.origin.x - this.collectionView.bounds.size.width - 1,
+			startingAttributes.frame.origin.y,
+			this.collectionView.bounds.size.width,
+			startingAttributes.frame.size.height
+		);
+
+		// Filter to only include cell attributes
+		const attributes = this.attributesForElementsInRect(extent).filter(a => a.itemType == BMCollectionViewLayoutAttributesType.Cell);
+
+		// return the rightmost attributes, if any
+		let maxAttributesX = extent.left;
+		let maxAttributesIndex = -1;
+
+		for (let i = 0; i < attributes.length; i++) {
+			if (attributes[i].frame.origin.x > maxAttributesX) {
+				maxAttributesX = attributes[i].frame.origin.x;
+				maxAttributesIndex = i;
+			}
+		}
+
+		if (maxAttributesIndex != -1) {
+			return attributes[maxAttributesIndex].indexPath;
+		}
+
+		return indexPath;
+	},
+
+	// @override - BMCollectionViewLayout
+	indexPathAboveIndexPath(indexPath) {
+		// Create a rect starting at the top edge of the given index path and request attributes in it
+		const startingAttributes = this.attributesForCellAtIndexPath(indexPath);
+
+		const extent = BMRectMake(
+			startingAttributes.frame.origin.x,
+			startingAttributes.frame.origin.y - this.collectionView.bounds.size.height - 1,
+			startingAttributes.frame.size.width,
+			this.collectionView.bounds.size.height
+		);
+
+		// Filter to only include cell attributes
+		const attributes = this.attributesForElementsInRect(extent).filter(a => a.itemType == BMCollectionViewLayoutAttributesType.Cell);
+
+		// return the bottommost attributes, if any
+		let maxAttributesY = extent.origin.y;
+		let maxAttributesIndex = -1;
+
+		for (let i = 0; i < attributes.length; i++) {
+			if (attributes[i].frame.origin.y > maxAttributesY) {
+				maxAttributesY = attributes[i].frame.origin.y;
+				maxAttributesIndex = i;
+			}
+		}
+
+		if (maxAttributesIndex != -1) {
+			return attributes[maxAttributesIndex].indexPath;
+		}
+
+		return indexPath;
+	},
+	
+	// @override - BMCollectionViewLayout
+	indexPathToTheRightOfIndexPath(indexPath) {
+		// Create a rect starting at the right edge of the given index path and request attributes in it
+		const startingAttributes = this.attributesForCellAtIndexPath(indexPath);
+
+		const extent = BMRectMake(
+			startingAttributes.frame.right + 1,
+			startingAttributes.frame.origin.y,
+			this.collectionView.bounds.size.width,
+			startingAttributes.frame.size.height
+		);
+
+		// Filter to only include cell attributes
+		const attributes = this.attributesForElementsInRect(extent).filter(a => a.itemType == BMCollectionViewLayoutAttributesType.Cell);
+
+		// return the leftmost attributes, if any
+		let minAttributesX = extent.right;
+		let minAttributesIndex = -1;
+
+		for (let i = 0; i < attributes.length; i++) {
+			if (attributes[i].frame.origin.x < minAttributesX) {
+				minAttributesX = attributes[i].frame.origin.x;
+				minAttributesIndex = i;
+			}
+		}
+
+		if (minAttributesIndex != -1) {
+			return attributes[minAttributesIndex].indexPath;
+		}
+
+		return indexPath;
+	},
+	
+	// @override - BMCollectionViewLayout
+	indexPathBelowIndexPath(indexPath) {
+		// Create a rect starting at the bottom edge of the given index path and request attributes in it
+		const startingAttributes = this.attributesForCellAtIndexPath(indexPath);
+
+		const extent = BMRectMake(
+			startingAttributes.frame.origin.x,
+			startingAttributes.frame.bottom + 1,
+			startingAttributes.frame.size.width,
+			this.collectionView.bounds.size.height
+		);
+
+		// Filter to only include cell attributes
+		const attributes = this.attributesForElementsInRect(extent).filter(a => a.itemType == BMCollectionViewLayoutAttributesType.Cell);
+
+		// return the topmost attributes, if any
+		let minAttributesY = extent.bottom;
+		let minAttributesIndex = -1;
+
+		for (let i = 0; i < attributes.length; i++) {
+			if (attributes[i].frame.origin.y < minAttributesY) {
+				minAttributesY = attributes[i].frame.origin.y;
+				minAttributesIndex = i;
+			}
+		}
+
+		if (minAttributesIndex != -1) {
+			return attributes[minAttributesIndex].indexPath;
+		}
+
+		return indexPath;
+	},
+	
+	// @override - BMCollectionViewLayout
+	indexPathsFromIndexPath(indexPath, {toIndexPath}) {
+		// Create and return the index paths available in the union of the two index paths' frames.
+		const startingAttributes = this.attributesForCellAtIndexPath(indexPath);
+		const targetAttributes = this.attributesForCellAtIndexPath(toIndexPath);
+
+		const attributes = this.attributesForElementsInRect(startingAttributes.frame.rectByUnionWithRect(targetAttributes.frame));
+		
+		return attributes.filter(a => a.itemType == BMCollectionViewLayoutAttributesType.Cell).map(a => a.indexPath);
+	},
 
 });
 

package/build/BMCoreUI.css

@@ -32,6 +32,8 @@
 	position: fixed;
 
 	box-shadow: 0px 4px 12px rgba(0, 0, 0, .33);
+
+	pointer-events: none;
 }
 
 .BMDragIndicatorRed {
@@ -387,7 +389,7 @@
 }
 
 /* BMWindowSublabel should be used together with BMWindowLabel */
-.BMWindowSublabel {
+.BMWindowSublabel, .BMSublabel {
 	font-size: 14px;
 	color: rgba(0, 0, 0, .33);
 }
@@ -397,7 +399,7 @@
 		color: rgba(255, 255, 255, .9);
 	}
 	
-	.BMWindowSublabel, .BMLabel {
+	.BMWindowSublabel, .BMSubLabel {
 		color: rgba(255, 255, 255, .5);
 	}
 }
@@ -643,7 +645,7 @@
 	border: none;
 }
 
-.BMWindowButton:active, .BMButton:actie {
+.BMWindowButton:active, .BMButton:active {
 	background: rgb(0, 108, 235);
 }
 
@@ -1188,7 +1190,7 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 
 	border-radius: 8px !important;
 	box-shadow: 0px 4px 8px rgba(0, 0, 0, .1), 0px 0px 1px 1px rgba(0, 0, 0, .1);
-	z-index: 999999 !important;
+	z-index: 9999999 !important;
 	overflow: hidden !important;
 }
 
@@ -1222,8 +1224,8 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 }
 
 .BMLayoutEditorConstraintPopupOption, .BMMenuItem {
-	height: 24px;
-	line-height: 24px;
+	height: 28px;
+	line-height: 28px;
 	vertical-align: middle;
 
 	padding-left: 16px;
@@ -1259,16 +1261,43 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 	margin-right: 16px;
 }
 
-.BMLayoutEditorConstraintPopupOption:hover, .BMMenuItem:hover, .BMMenuTouch > .BMMenuItem:active {
+@keyframes BMMenuItemActiveAnimation {
+	from {
+		background: transparent;
+		color: rgba(0, 0, 0, .8);
+	}
+
+	49% {
+		background: transparent;
+		color: rgba(0, 0, 0, .8);
+	}
+
+	50% {
+		background: rgb(0, 128, 255);
+		color: white;
+	}
+
+	to {
+		background: rgb(0, 128, 255);
+		color: white;
+	}
+}
+
+.BMLayoutEditorConstraintPopupOption:hover, .BMMenuTouch > .BMMenuItem:active, .BMMenuItem.BMMenuItemHighlighted {
 	background: rgb(0, 128, 255);
 	color: white;
 }
 
-.BMLayoutEditorConstraintPopupOption:active, .BMMenuItem:active, .BMMenuTouch > .BMMenuItem:hover {
+.BMLayoutEditorConstraintPopupOption:active, .BMMenuTouch > .BMMenuItem:hover {
 	background: transparent;
 	color: rgba(0, 0, 0, .8);
 }
 
+.BMMenuItem.BMMenuItemActive {
+	animation: .2s linear BMMenuItemActiveAnimation;
+	animation-fill-mode: both;
+}
+
 .BMLayoutEditorConstraintPopupOptionHighlighted, .BMMenuItemHighlighted {
 	background: rgba(0, 128, 255, .5);
 }
@@ -1278,7 +1307,7 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 		color: rgba(255, 255, 255, .9);
 	}
 
-	.BMLayoutEditorConstraintPopupOption:active, .BMMenuItem:active, .BMMenuTouch > .BMMenuItem:hover {
+	.BMLayoutEditorConstraintPopupOption:active, .BMMenuTouch > .BMMenuItem:hover {
 		background: transparent;
 		color: white;
 	}
@@ -1286,6 +1315,28 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 	.BMMenuTouch > .BMMenuItem {
 		border-bottom-color: rgba(255, 255, 255, .1);
 	}
+
+	@keyframes BMMenuItemActiveAnimation {
+		from {
+			background: transparent;
+			color: rgba(255, 255, 255, .9);
+		}
+	
+		49% {
+			background: transparent;
+			color: rgba(255, 255, 255, .9);
+		}
+	
+		50% {
+			background: rgb(0, 128, 255);
+			color: white;
+		}
+	
+		to {
+			background: rgb(0, 128, 255);
+			color: white;
+		}
+	}
 }
 
 .BMLayoutEditorWorkspaceToolbarSizeClass .BMLayoutEditorConstraintPopupOption {
@@ -2606,7 +2657,6 @@ The background layer contains the background.
 
 .BMLayoutEditorConstantSuggestions, .BMTextFieldSuggestions {
 	pointer-events: all;
-	max-height: 420px;
 	overflow: hidden;
 }