Update the styling and workflow around publishing a template

services/web/app/views/templates.jade

@@ -290,22 +290,29 @@
 		-if(session && session.user && session.user.isAdmin)
 			.box
 				.page-header
-					h2 Publish Project
+					h2 Publish project as template
 					
-				#publishedAsTemplateArea(style="display:none;")
-					a#templateLink(href='{{canonicalUrl}}') View Template
-					p published at {{publishedDate}}
-					.btn.btn-warning#unPublishProjectAsTemplate unpublish project as template
-					.btn.btn-success#republishProjectAsTemplate re publish project as template
+				#publishedAsTemplateArea.show-when-published.alert.alert-success
+					p
+						.btn.btn-warning#unPublishProjectAsTemplate.pull-right Unpublish
+						i.icon-ok 
+						|  Your project is currently published. 
+						a#templateLink(href='{{canonicalUrl}}') View in template gallery.
+					p
+						| Lastest version: {{publishedDate}}. 
 
-				#problemWithPublishingArea(style="display:none;")
+				#problemWithPublishingArea
 					p There is a problem with our publishing service, please try again in a few minutes.
-				#publishWorkingArea(style="display:none;")
-					p Working.....
-				#unpublishedAsTemplateArea(style="display:none;")
-					.btn.btn-success#publishProjectAsTemplate Publish project as template
-				div
-					textarea.span6#projectDescription {{description}}
+				#publishWorkingArea
+					p Working...
+				div.show-when-published.show-when-unpublished.project-description
+					label(for="project-description") Description
+					.row-fluid
+						textarea(placeholder="Template description", name="project-description").span12#projectDescription {{description}}
+				#unpublishedAsTemplateArea.show-when-unpublished
+					.btn.btn-success#publishProjectAsTemplate Publish
+				p.show-when-published
+					button.btn.btn-success#republishProjectAsTemplate Re-Publish
 
 
 	script(type="text/template")#settingsPanelTemplate

services/web/public/coffee/project-members/ProjectMembersManager.coffee

@@ -3,9 +3,10 @@ define [
 	"models/ProjectMemberList"
 	"account/AccountManager"
 	"utils/Modal"
+	"moment"
 	"libs/backbone"
 	"libs/mustache"
-], (User, ProjectMemberList, AccountManager, Modal) ->
+], (User, ProjectMemberList, AccountManager, Modal, moment) ->
 	INFINITE_COLLABORATORS = -1
 
 	class ProjectMembersManager
@@ -20,6 +21,8 @@ define [
 					name: "Share"
 					content : $(@templates.userPanel)
 					lock: true
+					onShown: () =>
+						@publishProjectView.refreshPublishStatus()
 
 			setupPublish = _.once =>
 				@publishProjectView = new PublishProjectView
@@ -179,25 +182,32 @@ define [
 		initialize: () ->
 			@ide = @options.ide
 			@model = @ide.project
-			_.bindAll(this, "render");
-			this.model.bind('change', this.render)
-			@refreshPublishStatus()
-			
+			@render()
 
 		render: ->
 			viewModel = 
 				description: @model.get("description")
 				canonicalUrl: @model.get("template.canonicalUrl")
 				isPublished: @model.get("template.isPublished")
-				publishedDate: @model.get("template.publishedDate")
+				publishedDate: moment(@model.get("template.publishedDate")).format("Do MMM YYYY, h:mm a")
 
-			$(@el).html $(Mustache.to_html(@template, viewModel))
-			@publishedArea = $('#publishedAsTemplateArea')
-			@unpublishedArea = $('#unpublishedAsTemplateArea')
+			@$el.html $(Mustache.to_html(@template, viewModel))
+			@publishedArea = $('.show-when-published')
+			@unpublishedArea = $('.show-when-unpublished')
+			$('#problemWithPublishingArea').hide()
+			$('#publishWorkingArea').hide()
 
+		refreshView: () ->
+			if @model.get("template.isPublished")
+				@$("a#templateLink").attr("href", @model.get("template.canonicalUrl"))
+				@publishedArea.show()
+			else
+				@unpublishedArea.show()
 
 		refreshPublishStatus: ->
+			@showWorking()
 			@ide.socket.emit "getPublishedDetails", @ide.user.get("id"), (err, details)=>
+				@hideWorking()
 				if err?
 					return @showError()
 
@@ -205,16 +215,17 @@ define [
 				if details.exists
 					@model.set("template.canonicalUrl", details.canonicalUrl)
 					@model.set("template.publishedDate", details.publishedDate)
-					@publishedArea.show()
-					@unpublishedArea.hide()
-				else
-					@publishedArea.hide()
-					@unpublishedArea.show()
+
+				@refreshView()
 
 		showError: ->
+			@publishedArea.hide()
+			@unpublishedArea.hide()
 			$('#problemWithPublishingArea').show()
 
 		showWorking: ->
+			@publishedArea.hide()
+			@unpublishedArea.hide()
 			$('#publishWorkingArea').show()
 
 		hideWorking: ->

services/web/public/stylesheets/less/editor.less

@@ -891,6 +891,18 @@ i[class*="sprite-"] {
 	}
 }
 
+.project-description {
+	textarea {
+		min-height: 120px;
+	}
+	label {
+		border-bottom: 1px solid #eeeeee;
+		font-size: 1.2em;
+		line-height: 1.8em;
+		margin-bottom: 6px;
+	}
+}
+
 .btn-facebook {
   color: #ffffff;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);