Merge pull request #1554 from Automattic/update/plugin-item-selectabl…

…e-layout Plugins: Include action buttons and icon in the plugin-item edit mode
Automattic · Dec 21, 2015 · b3b71d3 · b3b71d3
2 parents 05dc334 + 8252efc
commit b3b71d3
Show file tree

Hide file tree

Showing 12 changed files with 105 additions and 71 deletions.
diff --git a/client/components/forms/form-toggle/style.scss b/client/components/forms/form-toggle/style.scss
@@ -39,6 +39,8 @@
 	}
 	&:hover {
 		background: lighten( $gray, 20% );
+
+
 	}
 	.accessible-focus &:focus{
 		box-shadow: 0 0 0 2px $blue-medium;
@@ -47,6 +49,10 @@
 
 .form-toggle__label {
 	cursor: pointer;
+
+	.is-disabled & {
+		cursor: default;
+	}
 }
 
 .form-toggle {
@@ -72,9 +78,9 @@
 			background: $blue-light;
 		}
 	}
-	&:disabled,
-	&:disabled:hover {
-		+ .form-toggle__label .form-toggle__switch {
+	&:disabled {
+		+ label.form-toggle__label span.form-toggle__switch:hover,
+		+ label.form-toggle__label span.form-toggle__switch {
 			background: lighten( $gray, 30% );
 			cursor: default;
 		}

diff --git a/client/my-sites/plugins/disconnect-jetpack/disconnect-jetpack-button.jsx b/client/my-sites/plugins/disconnect-jetpack/disconnect-jetpack-button.jsx
@@ -44,6 +44,7 @@ export default React.createClass( {
 			id: `disconnect-jetpack-${ site.ID }`,
 			className: buttonClasses,
 			compact: true,
+			disabled: this.props.disabled,
 			scary: true,
 			onClick: ( event ) => {
 				event.preventDefault();

diff --git a/client/my-sites/plugins/plugin-action/README.md b/client/my-sites/plugins/plugin-action/README.md
@@ -47,4 +47,5 @@ render: function() {
 * `inProgress`: (bool) whether the action is in the middle of being performed.
 * `htmlFor`: (string) htmlFor is used for creating the for attribute on the label.
 * `disabledInfo`: ( string ) text that gets displayed in a infoPopover explaining why the action is disabled.
+* `disabled`: ( bool ) whether the toggle is disabled (grayed out and non interactive) or not
 
diff --git a/client/my-sites/plugins/plugin-action/plugin-action.jsx b/client/my-sites/plugins/plugin-action/plugin-action.jsx
@@ -90,7 +90,7 @@ module.exports = React.createClass( {
 
 	render: function() {
 		return (
-			<div className={ classNames( 'plugin-action', this.props.className ) }>
+			<div className={ classNames( 'plugin-action', { 'is-disabled': this.props.disabled, 'has-disabled-info': !! this.props.disabledInfo }, this.props.className ) }>
 				{ this.renderInner() }
 			</div>
 		);

diff --git a/client/my-sites/plugins/plugin-action/style.scss b/client/my-sites/plugins/plugin-action/style.scss
@@ -30,6 +30,15 @@
 	vertical-align: top;
 	text-transform: uppercase;
 	cursor: pointer;
+
+	.is-disabled & {
+		color: lighten( $gray, 30% );
+		cursor: default;
+	}
+
+	.has-disabled-info & {
+		cursor: pointer;
+	}
 }
 
 .plugin-action .form-toggle__label .form-toggle__switch {

diff --git a/client/my-sites/plugins/plugin-activate-toggle/README.md b/client/my-sites/plugins/plugin-activate-toggle/README.md
@@ -27,3 +27,4 @@ render: function() {
 * `site`: a site object.
 * `notices`: a notices object.
 * `isMock`: a boolean indicating if the toggle should not launch any real action when interacted
+* `disabled`: a boolean indicating whether the toggle is disabled (grayed out and non interactive) or not
diff --git a/client/my-sites/plugins/plugin-activate-toggle/index.jsx b/client/my-sites/plugins/plugin-activate-toggle/index.jsx
@@ -23,7 +23,7 @@ module.exports = React.createClass( {
 	},
 
 	toggleActivation: function() {
-		if ( this.props.isMock ) {
+		if ( this.props.isMock || this.props.disabled ) {
 			return;
 		}
 
@@ -64,7 +64,7 @@ module.exports = React.createClass( {
 					htmlFor={ 'disconnect-jetpack-' + this.props.site.ID }
 					>
 					<DisconnectJetpackButton
-						disabled={ ! this.props.plugin }
+						disabled={ this.props.disabled || ! this.props.plugin }
 						site={ this.props.site }
 						redirect="/plugins/jetpack"
 						/>
@@ -73,6 +73,7 @@ module.exports = React.createClass( {
 		}
 		return (
 			<PluginAction
+				disabled={ this.props.disabled }
 				className="plugin-activate-toggle"
 				label={ this.translate( 'Active', { context: 'plugin status' } ) }
 				inProgress={ inProgress }

diff --git a/client/my-sites/plugins/plugin-activate-toggle/style.scss b/client/my-sites/plugins/plugin-activate-toggle/style.scss
@@ -2,6 +2,12 @@
 	font-size: 11px;
 	color: $alert-red;
 	text-transform: uppercase;
+
+	&:disabled,
+	&:disabled:hover {
+		color: lighten( $gray, 30% );
+		cursor: default;
+	}
 }
 
 .plugin-activate-toggle .plugin-action__children {

diff --git a/client/my-sites/plugins/plugin-autoupdate-toggle/README.md b/client/my-sites/plugins/plugin-autoupdate-toggle/README.md
@@ -29,3 +29,4 @@ render: function() {
 * `notices`: a notices object.
 * `wporg`: whether the plugin is from .org or not
 * `isMock`: a boolean indicating if the toggle should not launch any real action when interacted
+* `disabled`: a boolean indicating whether the toggle is disabled (grayed out and non interactive) or not
diff --git a/client/my-sites/plugins/plugin-autoupdate-toggle/index.jsx b/client/my-sites/plugins/plugin-autoupdate-toggle/index.jsx
@@ -25,7 +25,7 @@ module.exports = React.createClass( {
 	},
 
 	toggleAutoupdates: function() {
-		if ( this.props.isMock ) {
+		if ( this.props.isMock || this.props.disabled ) {
 			return;
 		}
 
@@ -131,6 +131,7 @@ module.exports = React.createClass( {
 
 		return (
 			<PluginAction
+				disabled={ this.props.disabled }
 				label={ label }
 				status={ this.props.plugin.autoupdate }
 				action={ this.toggleAutoupdates }

diff --git a/client/my-sites/plugins/plugin-item/plugin-item.jsx b/client/my-sites/plugins/plugin-item/plugin-item.jsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-var React = require( 'react/addons' ),
+var React = require( 'react' ),
 	classNames = require( 'classnames' ),
 	uniq = require( 'lodash/array/uniq' ),
 	i18n = require( 'lib/mixins/i18n' );
@@ -141,11 +141,13 @@ module.exports = React.createClass( {
 				<PluginActivateToggle
 					isMock={ this.props.isMock }
 					plugin={ this.props.plugin }
+					disabled={ this.props.isSelectable }
 					site={ this.props.selectedSite }
 					notices={ this.props.notices } />
 				<PluginAutoupdateToggle
 					isMock={ this.props.isMock }
 					plugin={ this.props.plugin }
+					disabled={ this.props.isSelectable }
 					site={ this.props.selectedSite }
 					notices={ this.props.notices }
 					wporg={ !! this.props.plugin.wporg } />
@@ -175,19 +177,40 @@ module.exports = React.createClass( {
 		);
 	},
 
+	onItemClick: function( event ) {
+		if ( this.props.isSelectable ) {
+			event.preventDefault();
+			this.props.onClick( this );
+		}
+	},
+
 	render: function() {
 		var pluginTitle,
 			plugin = this.props.plugin,
 			errors = this.props.errors ? this.props.errors : [],
 			numberOfWarningIcons = 0,
 			errorNotices = [],
 			errorCounter = 0;
-		const pluginItemClasses = classNames( 'plugin-item', { disabled: this.props.hasAllNoManageSites } );
 
 		if ( ! this.props.plugin ) {
 			return this.renderPlaceholder();
 		}
 
+		errors.forEach( function( error ) {
+			errorNotices.push(
+				<Notice
+					type='message'
+					status='is-error'
+					text={ PluginNotices.getMessage( [ error ], PluginNotices.errorMessage.bind( PluginNotices ) ) }
+					button={ PluginNotices.getErrorButton( error ) }
+					href={ PluginNotices.getErrorHref( error ) }
+					raw={ { onRemoveCallback: PluginsActions.removePluginsNotices.bind( this, [ error ] ) } }
+					inline={ true }
+					key={ 'notice-' + errorCounter } />
+			);
+			errorCounter++;
+		}, this );
+
 		if ( this.props.hasNoManageSite ) {
 			numberOfWarningIcons++;
 		}
@@ -202,60 +225,10 @@ module.exports = React.createClass( {
 			</div>
 			);
 
-		if ( this.props.isSelectable ) {
-			errors.forEach( function( error ) {
-				let action = null;
-
-				if ( PluginNotices.getErrorButton( error ) ) {
-					action = (
-						<NoticeAction href={ PluginNotices.getErrorHref( error ) }>
-							{ PluginNotices.getErrorButton( error ) }
-						</NoticeAction>
-					);
-				}
-
-				errorNotices.push(
-					<Notice
-						type='message'
-						status='is-error'
-						showDismiss={ false }
-						text={ PluginNotices.getMessage( [ error ], PluginNotices.errorMessage.bind( PluginNotices ) ) }
-						inline={ true }
-						key={ 'notice-' + errorCounter }
-						>
-						{ action }
-					</Notice>
-				);
-				errorCounter++;
-			}, this );
-			return (
-				<div>
-					<CompactCard className={ pluginItemClasses }>
-						<input
-							className="plugin-item__checkbox"
-							id={ plugin.slug }
-							type="checkbox"
-							onClick={ this.props.onClick }
-							checked={ this.props.isSelected }
-							readOnly={ true }
-						/>
-						<label className="plugin-item__label" htmlFor={ plugin.slug }>
-							<span className="screen-reader-text">
-								{ this.translate( 'Toggle selection of %(plugin)s', { args: { plugin: plugin.name } } ) }
-							</span>
-						</label>
-						<div className="plugin-item__info">
-							{ pluginTitle }
-							{ this.pluginMeta( plugin ) }
-						</div>
-					</CompactCard>
-					<div className="plugin-item__error-notices">
-						{ errorNotices }
-					</div>
-				</div>
-			);
-		}
 		if ( this.props.hasAllNoManageSites ) {
+			const pluginItemClasses = classNames( 'plugin-item', {
+				disabled: this.props.hasAllNoManageSites,
+			} );
 			return (
 				<div className="plugin-item__wrapper">
 					<CompactCard className={ pluginItemClasses }
@@ -275,14 +248,26 @@ module.exports = React.createClass( {
 			);
 		}
 		return (
-			<CompactCard className="plugin-item">
-				<a href={ this.props.pluginLink } className="plugin-item__link">
-					<PluginIcon image={ plugin.icon }/>
-					{ pluginTitle }
-					{ this.pluginMeta( plugin ) }
-				</a>
-				{ this.props.selectedSite ? this.renderActions() : this.renderCount() }
-			</CompactCard>
+			<div>
+				<CompactCard className="plugin-item">
+					{ ! this.props.isSelectable
+						? null
+						: <input className="plugin-item__checkbox"
+								id={ plugin.slug }
+								type="checkbox"
+								onClick={ this.props.onClick }
+								checked={ this.props.isSelected }
+								readOnly={ true } />
+					}
+					<a href={ this.props.pluginLink } onClick={ this.onItemClick } className="plugin-item__link">
+						<PluginIcon image={ plugin.icon }/>
+						{ pluginTitle }
+						{ this.pluginMeta( plugin ) }
+					</a>
+					{ this.props.selectedSite ? this.renderActions() : this.renderCount() }
+				</CompactCard>
+				{ errorNotices }
+			</div>
 		);
 	}
 

diff --git a/client/my-sites/plugins/plugin-item/style.scss b/client/my-sites/plugins/plugin-item/style.scss
@@ -1,6 +1,18 @@
 .plugin-item.card {
 	padding: 0;
 
+	.is-bulk-editing & {
+		padding-left: 24px;
+	}
+
+	& ~ .notice.is-error {
+		margin-bottom: 0;
+	}
+
+	input {
+		margin-right: 8px;
+	}
+
 	@include breakpoint( '>660px' ) {
 		padding: 0;
 	}
@@ -37,7 +49,6 @@
 
 .plugin-item__link,
 .plugin-item__disabled,
-.is-bulk-editing .plugin-item,
 .plugin-item.is-placeholder {
 	display: block;
 	flex-grow: 1;
@@ -53,6 +64,17 @@
 	}
 }
 
+.plugin-item__link {
+	.is-bulk-editing & {
+		padding-left: 40px;
+	}
+}
+
+.plugin-item__disabled {
+	opacity: 0.5;
+	background: $gray-light;
+}
+
 // Checkbox for multiselect purposes
 .plugin-item__checkbox[type=checkbox] {
 	position: absolute;