Merge pull request #2877 from Automattic/fix/mobile-plugins-edit-all

Plugins: Make actionbar visible
Automattic · Jan 29, 2016 · 3f9594e · 3f9594e
2 parents e059331 + d9734f8
commit 3f9594e
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 15 deletions.
diff --git a/client/my-sites/plugins/plugin-list-header/index.jsx b/client/my-sites/plugins/plugin-list-header/index.jsx
@@ -23,8 +23,9 @@ import BulkSelect from 'components/bulk-select';
 
 let _actionBarVisible = true;
 
-// Below this width the action bar turns into a select dropdown.
-const MIN_VIEWPORT_WIDTH = 719;
+// If the Action
+const MAX_ACTIONBAR_HEIGHT = 50;
+const MIN_ACTIONBAR_WIDTH = 600;
 
 export default React.createClass( {
 	displayName: 'Plugins-list-header',
@@ -67,18 +68,35 @@ export default React.createClass( {
 
 	componentDidMount() {
 		this.debouncedAfterResize = debounce( this.afterResize, 100 );
-
 		window.addEventListener( 'resize', this.debouncedAfterResize );
-		_actionBarVisible = findDOMNode( this ).offsetWidth > MIN_VIEWPORT_WIDTH;
 	},
 
 	componentWillUnmount() {
 		window.removeEventListener( 'resize', this.debouncedAfterResize );
 	},
 
 	afterResize() {
-		const actionBarVisible = findDOMNode( this ).offsetWidth > MIN_VIEWPORT_WIDTH;
-		this.setState( { actionBarVisible } );
+		if ( this.props.isBulkManagementActive ) {
+			this.maybeMakeActionBarVisible();
+		}
+	},
+
+	maybeMakeActionBarVisible() {
+		const actionBarDomElement = findDOMNode( this );
+		if ( actionBarDomElement.offsetWidth < MIN_ACTIONBAR_WIDTH ) {
+			return;
+		}
+		this.setState( { actionBarVisible: true } );
+		setTimeout( () => {
+			const actionBarVisible = actionBarDomElement.offsetHeight <= MAX_ACTIONBAR_HEIGHT;
+			this.setState( { actionBarVisible } );
+		}, 1 );
+	},
+
+	toggleBulkManagement() {
+		this.props.toggleBulkManagement();
+
+		this.maybeMakeActionBarVisible();
 	},
 
 	onBrowserLinkClick() {
@@ -122,7 +140,7 @@ export default React.createClass( {
 			}
 			rightSideButtons.push(
 				<ButtonGroup key="plugin-list-header__buttons-bulk-management">
-					<Button compact onClick={ this.props.toggleBulkManagement }>
+					<Button compact onClick={ this.toggleBulkManagement }>
 						{ this.translate( 'Edit All', { context: 'button label' } ) }
 					</Button>
 				</ButtonGroup>
@@ -301,7 +319,7 @@ export default React.createClass( {
 				<SelectDropdown compact
 					className="plugin-list-header__actions_dropdown"
 					key="plugin-list-header__actions_dropdown"
-					selectedText="Actions">
+					selectedText={ this.translate( 'Actions' ) }>
 					{ options }
 				</SelectDropdown>
 			);

diff --git a/client/my-sites/plugins/plugin-list-header/style.scss b/client/my-sites/plugins/plugin-list-header/style.scss
@@ -47,13 +47,14 @@
 	@include breakpoint( '>660px' ) {
 		padding-right: 16px;
 	}
-
-	&.is-action-bar-visible {
-		.plugin-list-header__actions_dropdown {
-			display: none;
-		}
-		.plugin-list-header__action-buttons {
-			display: flex;
+	@include breakpoint( '>960px' ) {
+		&.is-action-bar-visible {
+			.plugin-list-header__actions_dropdown {
+				display: none;
+			}
+			.plugin-list-header__action-buttons {
+				display: flex;
+			}
 		}
 	}
 }