Make location view state update as the state changes on the unit page

cms/static/coffee/src/views/unit.coffee

@@ -22,6 +22,11 @@ class CMS.Views.UnitEdit extends Backbone.View
       model: @model
     )
 
+    @locationView = new CMS.Views.UnitEdit.LocationState(
+      el: @$('.section-item.editing a')
+      model: @model
+    )
+
     @model.on('change:state', @render)
 
     @$newComponentItem = @$('.new-component-item')
@@ -150,6 +155,13 @@ class CMS.Views.UnitEdit extends Backbone.View
       @model.set('state', @$('#visibility').val())
     )
 
+class CMS.Views.UnitEdit.LocationState extends Backbone.View
+  initialize: =>
+    @model.on('change:state', @render)
+  
+  render: =>
+    @$el.toggleClass("#{@model.previous('state')}-item #{@model.get('state')}-item")
+
 class CMS.Views.UnitEdit.Visibility extends Backbone.View
   initialize: =>
     @model.on('change:state', @render)

cms/static/sass/_cms_mixins.scss

@@ -173,13 +173,33 @@
 			background: #fffcf1;
 		}
 
-		.draft-item,
-		.hidden-item,
+		.draft-item:after,
+		.public-item:after,
+		.private-item:after {
+			margin-left: 3px;
+			font-size: 9px;
+			font-weight: 600;
+			text-transform: uppercase;
+		}
+
+		.draft-item:after {
+			content: "- draft";
+		}
+
+		.public-item:after {
+			content: "- public";
+		}
+
+		.private-item:after {
+			content: "- private";
+		}
+
+		.public-item,
 		.private-item {
 			color: #a4aab7;
 		}
 
-		.has-new-draft-item {
+		.draft-item {
 			color: #9f7d10;
 		}
 	}

cms/static/sass/_graphics.scss

@@ -117,9 +117,8 @@
 }
 
 .draft-tag,
-.hidden-tag,
-.private-tag,
-.has-new-draft-tag {
+.public-tag,
+.private-tag {
 	margin-left: 3px;
 	font-size: 9px;
 	font-weight: 600;
@@ -127,7 +126,7 @@
 	color: #a4aab7;
 }
 
-.has-new-draft-tag {
+.draft-tag {
 	color: #9f7d10;
 }
 

cms/templates/widgets/units.html

@@ -1,4 +1,5 @@
 <%! from django.core.urlresolvers import reverse %>
+<%! from contentstore.utils import compute_unit_state %>
 
 <!--
 This def will enumerate through a passed in subsection and list all of the units
@@ -8,16 +9,16 @@ This def will enumerate through a passed in subsection and list all of the units
   % for unit in subsection.get_children():
   <li class="leaf unit" data-id="${unit.location}">
     <%
+      unit_state = compute_unit_state(unit)
       if unit.location == selected:
         selected_class = 'editing'
       else:
         selected_class = ''
     %>
     <div class="section-item ${selected_class}">
-      <a href="${reverse('edit_unit', args=[unit.location])}" class="private-item">
+      <a href="${reverse('edit_unit', args=[unit.location])}" class="${unit_state}-item">
         <span class="${unit.category}-icon"></span>
         ${unit.display_name}
-        <span class="private-tag wip">- private</span>
       </a>
       % if actions:
       <div class="item-actions">