Plugins: Bulk edit mode with disabled plugin actions

Automattic · Dec 16, 2015 · f75768b · f75768b
1 parent 097aab8
commit f75768b
Show file tree

Hide file tree

Showing 9 changed files with 15 additions and 11 deletions.
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 }, 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,10 @@
 	vertical-align: top;
 	text-transform: uppercase;
 	cursor: pointer;
+
+	.is-disabled & {
+		color: lighten( $gray, 30% );
+	}
 }
 
 .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-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
@@ -135,8 +135,8 @@ module.exports = React.createClass( {
 	renderActions: function() {
 		if ( this.props.selectedSite ) {
 			return <div className="plugin-item__actions">
-				<PluginActivateToggle isMock={ this.props.isMock || this.props.isSelectable } plugin={ this.props.plugin } site={ this.props.selectedSite } notices={ this.props.notices } />
-				<PluginAutoupdateToggle isMock={ this.props.isMock || this.props.isSelectable } plugin={ this.props.plugin } site={ this.props.selectedSite } notices={ this.props.notices } wporg={ !! this.props.plugin.wporg } />
+				<PluginActivateToggle isMock={ this.props.isMock } disabled={ this.props.isSelectable } plugin={ this.props.plugin } site={ this.props.selectedSite } notices={ this.props.notices } />
+				<PluginAutoupdateToggle isMock={ this.props.isMock } disabled={ this.props.isSelectable } plugin={ this.props.plugin } site={ this.props.selectedSite } notices={ this.props.notices } wporg={ !! this.props.plugin.wporg } />
 			</div>;
 		}
 		return null;

diff --git a/client/my-sites/plugins/plugin-item/style.scss b/client/my-sites/plugins/plugin-item/style.scss
@@ -7,11 +7,6 @@
 
 	.is-bulk-editing & {
 		padding-left: 24px;
-
-		.plugin-item__actions {
-			opacity: 0.3;
-			filter: grayscale(70%);
-		}
 	}
 
 	& ~ .notice.is-error {