Conditionally show "active" checkmark on plugins

Previously, CSS was being used to hide the "active" checkmarks on plugin displays if there were disabled. This patch conditonally renders those checkmarks so that the CSS hiding is unnecessary.
Automattic · Jun 3, 2016 · a960cd7 · a960cd7
1 parent 49e7566
commit a960cd7
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 11 deletions.
diff --git a/client/my-sites/plugins-wpcom/business-plugins-panel.jsx b/client/my-sites/plugins-wpcom/business-plugins-panel.jsx
@@ -33,7 +33,15 @@ export const BusinessPluginsPanel = React.createClass( {
 						{ plugins.map( ( { name, descriptionLink, icon, category, description } ) =>
 							<Plugin
 								onClick={ () => onClick( name ) }
-								{ ...{ name, key: name, descriptionLink, icon, category, description } }
+								{ ...{
+									name,
+									key: name,
+									descriptionLink,
+									icon,
+									isActive,
+									category,
+									description
+								} }
 							/>
 						) }
 					</div>

diff --git a/client/my-sites/plugins-wpcom/plugin.jsx b/client/my-sites/plugins-wpcom/plugin.jsx
@@ -23,6 +23,7 @@ export const Plugin = React.createClass( {
 			category,
 			description,
 			icon = 'plugins',
+			isActive = true,
 			name,
 			onClick = noop,
 			descriptionLink
@@ -51,7 +52,8 @@ export const Plugin = React.createClass( {
 				>
 					<div className="wpcom-plugins__plugin-icon">
 						<Gridicon icon={ linkIcon } />
-						<Gridicon icon="checkmark-circle" size={ 18 } />
+						{ isActive &&
+							<Gridicon icon="checkmark-circle" size={ 18 } /> }
 					</div>
 					<div className="wpcom-plugins__plugin-title">{ name }</div>
 					<div className="wpcom-plugins__plugin-category">{ category }</div>
@@ -66,6 +68,7 @@ Plugin.propTypes = {
 	category: PropTypes.string.isRequired,
 	description: PropTypes.string.isRequired,
 	icon: PropTypes.string,
+	isActive: PropTypes.bool,
 	name: PropTypes.string.isRequired,
 	onClick: PropTypes.func,
 	descriptionLink: PropTypes.string.isRequired

diff --git a/client/my-sites/plugins-wpcom/premium-plugins-panel.jsx b/client/my-sites/plugins-wpcom/premium-plugins-panel.jsx
@@ -33,7 +33,15 @@ export const PremiumPluginsPanel = React.createClass( {
 						{ plugins.map( ( { name, descriptionLink, icon, category, description } ) =>
 							<Plugin
 								onClick={ () => onClick( name ) }
-								{ ...{ name, key: name, descriptionLink, icon, category, description } }
+								{ ...{
+									name,
+									key: name,
+									descriptionLink,
+									icon,
+									isActive,
+									category,
+									description
+								} }
 							/>
 						) }
 					</div>

diff --git a/client/my-sites/plugins-wpcom/style.scss b/client/my-sites/plugins-wpcom/style.scss
@@ -10,10 +10,6 @@
 	.wpcom-plugins__plugin-item {
 		opacity: 0.5;
 	}
-
-	.gridicons-checkmark-circle  {
-		display: none;
-	}
 }
 
 .wpcom-plugins__list {
@@ -27,11 +23,11 @@
 	padding: 16px;
 	border-bottom: 1px solid lighten( $gray, 20% );
 	width: 100%;
-	
+
 	&:last-child {
 		border-bottom: none;
 	}
-	
+
 	@include breakpoint( ">960px" ) {
 		width: 33.33%;
 		border-right: 1px solid lighten( $gray, 20% );
@@ -111,7 +107,7 @@
 
 .wpcom-plugin-panel button.is-active-plugin {
 	color: $alert-green;
-	
+
 	&:hover {
 		color: $alert-green;
 	}
@@ -124,4 +120,4 @@
 .wpcom-plugin-panel__panel-footer {
 	padding-top: 14px;
 	padding-bottom: 14px;
-}
+}