From c7eca59a8adfb2d1bf4f245160f9113d7598f9a2 Mon Sep 17 00:00:00 2001
From: Paul Clarke <paul@silverstripe.com>
Date: Tue, 3 May 2016 13:03:12 +1200
Subject: [PATCH] Refactored class names, split out campaign specific elements,
 hide campaign links

---
 .../{LIstGroup.scss => ListGroup.scss}        | 77 ++++++++-----------
 .../CampaignAdmin/CampaignAdmin.scss          | 17 ++++
 .../CampaignAdmin/CampaignAdminItem.js        | 11 +--
 .../CampaignAdmin/CampaignAdminList.js        |  2 +-
 admin/client/src/styles/bundle.scss           |  1 +
 5 files changed, 58 insertions(+), 50 deletions(-)
 rename admin/client/src/components/ListGroup/{LIstGroup.scss => ListGroup.scss} (50%)
 create mode 100644 admin/client/src/containers/CampaignAdmin/CampaignAdmin.scss

diff --git a/admin/client/src/components/ListGroup/LIstGroup.scss b/admin/client/src/components/ListGroup/ListGroup.scss
similarity index 50%
rename from admin/client/src/components/ListGroup/LIstGroup.scss
rename to admin/client/src/components/ListGroup/ListGroup.scss
index a9201907f..a290bbf03 100644
--- a/admin/client/src/components/ListGroup/LIstGroup.scss
+++ b/admin/client/src/components/ListGroup/ListGroup.scss
@@ -1,5 +1,4 @@
 // List-group, based on Bootstraps list-group
-// TODO split out campaign specific css from generic list-group
 
 .list-group {
   margin-left: -$spacer-y;
@@ -18,25 +17,15 @@
 	&:first-child {
 		border-top: none;
 	}
+
 	&:hover {
 		text-decoration: none;
-
-		.list-group-item--has-links {
-			display: block;
-			opacity: 1;
-		}
-	}
+  }
 
 	&.active {
 		background-color: $brand-primary;
 		color: #FFF;
 		opacity: 1;
-
-		.list-group-item--has-links,
-		.list-group-item__status {
-			color: #FFF;
-			opacity: 1;
-		}
 	}
 }
 
@@ -56,41 +45,41 @@
 	margin: -12px 12px 0 -$spacer-y;
 }
 
-// Show linked items
-.list-group-item--has-links,
-.list-group-item--is-linked {
-	color: $brand-primary;
-	float: right;
-	font-size: $font-size-sm;
-	position: absolute;
-	right: $spacer-y;
-	top: 27px;
-	opacity: 0;
-	transition: opacity .2s ease-in-out;
-
-	.font-icon-link {
-		font-size: 16px;
-		position: relative;
-		top: 3px;
-		margin-right: 1px;
-	}
+.list-group-item__info {
+  opacity: 0;
+  display: block;
+  transition: opacity .2s ease-in-out;
 }
 
-.list-group-item--published {
-	opacity: .6;
+// Temp off for Alpha1
+.list-group-item:hover .list-group-item__info,
+.list-group-item.active .list-group-item__info {
+  opacity: 0;
+}
+
+.list-group-item--inactive {
+  opacity: .6;
 	transition: opacity .2s ease-in-out;
 
-	.list-group-item__status {
-		opacity: 0;
-		transition: opacity .2s ease-in-out;
-	}
-
-	&:hover {
+  &:hover {
 		opacity: 1;
-
-		.list-group-item__status {
-			display: inline-block;
-			opacity: 1;
-		}
 	}
 }
+
+.list-group-item__status {
+  display: inline-block;
+  transition: opacity .2s ease-in-out;
+}
+
+.list-group-item.active .list-group-item__status {
+	color: #FFF;
+	opacity: 1;
+}
+
+.list-group-item--inactive .list-group-item__status {
+  opacity: 0;
+}
+
+.list-group-item--inactive:hover .list-group-item__status {
+	opacity: 1;
+}
diff --git a/admin/client/src/containers/CampaignAdmin/CampaignAdmin.scss b/admin/client/src/containers/CampaignAdmin/CampaignAdmin.scss
new file mode 100644
index 000000000..62a0d4dab
--- /dev/null
+++ b/admin/client/src/containers/CampaignAdmin/CampaignAdmin.scss
@@ -0,0 +1,17 @@
+// Campaign items which have linked assications
+.campaign-admin__item-links--has-links,
+.campaign-admin__item-links--is-linked {
+	color: $brand-primary;
+	float: right;
+	position: absolute;
+	right: $spacer-y;
+	top: 27px;
+  font-size: $font-size-sm;
+
+	&::before {
+		font-size: 16px;
+		position: relative;
+		top: 3px;
+		margin-right: 1px;
+	}
+}
diff --git a/admin/client/src/containers/CampaignAdmin/CampaignAdminItem.js b/admin/client/src/containers/CampaignAdmin/CampaignAdminItem.js
index c32d338dc..567c7ee7e 100644
--- a/admin/client/src/containers/CampaignAdmin/CampaignAdminItem.js
+++ b/admin/client/src/containers/CampaignAdmin/CampaignAdminItem.js
@@ -41,10 +41,9 @@ class CampaignAdminItem extends SilverStripeComponent {
 
     // Linked items
     let links = (
-      <span className="list-group-item--has-links">
-        <i className="font-icon-link" />
-        3 linked items
-      </span>
+      <span
+        className="list-group-item__info campaign-admin__item-links--has-links font-icon-link"
+      >3 linked items</span>
     );
 
     // Thumbnail
@@ -60,7 +59,9 @@ class CampaignAdminItem extends SilverStripeComponent {
       <div>
         {thumbnail}
         <h4 className="list-group-item-heading">{item.Title}</h4>
-        <span className="list-group-item--is-linked"><i className="font-icon-link"></i></span>
+        <span
+          className="list-group-item__info campaign-admin__item-links--is-linked font-icon-link"
+        ></span>
         {links}
         {badge.className && badge.Title &&
           <span className={badge.className}>{badge.Title}</span>
diff --git a/admin/client/src/containers/CampaignAdmin/CampaignAdminList.js b/admin/client/src/containers/CampaignAdmin/CampaignAdminList.js
index 12fd9732d..78789ab01 100644
--- a/admin/client/src/containers/CampaignAdmin/CampaignAdminList.js
+++ b/admin/client/src/containers/CampaignAdmin/CampaignAdminList.js
@@ -81,7 +81,7 @@ class CampaignAdminList extends SilverStripeComponent {
         // Add extra css class for published items
         const itemClassNames = [];
         if (item.ChangeType === 'none' || campaign.State === 'published') {
-          itemClassNames.push('list-group-item--published');
+          itemClassNames.push('list-group-item--inactive');
         }
         if (selected) {
           itemClassNames.push('active');
diff --git a/admin/client/src/styles/bundle.scss b/admin/client/src/styles/bundle.scss
index 4920162fc..a9e8d81e5 100644
--- a/admin/client/src/styles/bundle.scss
+++ b/admin/client/src/styles/bundle.scss
@@ -40,3 +40,4 @@
 
 // Layout and sections
 @import "layout";
+@import "../containers/CampaignAdmin/CampaignAdmin";