UI Prototype: Add indication that there are more blocks available (#107)

WordPress · Feb 21, 2017 · c325b41 · c325b41
1 parent a4369fb
commit c325b41
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 5 deletions.
diff --git a/blocks.js b/blocks.js
@@ -521,16 +521,12 @@ function renderBlockMenu() {
 			insertBlockMenuContent.appendChild( node );
 		}
 	} );
-
-	var placeholder = document.createElement('div');
-	placeholder.className = 'insert-block__separator';
-	placeholder.textContent = 'These don\'t work yet.';
-	insertBlockMenuContent.appendChild( placeholder );
 }
 
 function attachBlockMenuSearch() {
 	insertBlockMenuSearchInput.addEventListener( 'keyup', filterBlockMenu, false );
 	insertBlockMenuSearchInput.addEventListener( 'input', filterBlockMenu, false );
+	insertBlockMenuContent.addEventListener( 'scroll', handleBlockMenuScroll, false );
 	selectBlockInMenu();
 	renderBlockMenu();
 
@@ -539,6 +535,14 @@ function attachBlockMenuSearch() {
 		selectBlockInMenu();
 		renderBlockMenu();
 	}
+
+	function handleBlockMenuScroll( event ) {
+		if ( insertBlockMenuContent.scrollHeight - insertBlockMenuContent.scrollTop <= insertBlockMenuContent.clientHeight ) {
+			insertBlockMenuContent.className = 'insert-block__content is-bottom';
+		} else {
+			insertBlockMenuContent.className = 'insert-block__content';
+		}
+	}
 }
 
 /**

diff --git a/style.css b/style.css
@@ -426,6 +426,11 @@ img.is-selected {
 .insert-block__content {
 	max-height: 180px;
 	overflow: auto;
+	box-shadow: inset 0px -4px 6px -2px rgba(224,229,233,1);
+}
+
+.insert-block__content.is-bottom {
+	box-shadow: none;
 }
 
 .insert-block__content:focus {