Improve UX of user profile

services/web/app/views/project/list.jade

@@ -26,17 +26,17 @@ block content
 						ul.dropdown-menu(role="menu")
 							li
 								a(
-									href="#",
+									href,
 									ng-click="openCreateProjectModal()"
 								) Blank Project
 							li
 								a(
-									href="#",
+									href,
 									ng-click="openCreateProjectModal('example')"
 								) Example Project
 							li
 								a(
-									href="#",
+									href,
 									ng-click="openUploadProjectModal()"
 								) Upload Project
 							li.divider
@@ -55,7 +55,8 @@ block content
 								a.menu-indent(href="/templates/bibliographies") Bibliographies
 							li
 								a.menu-indent(href="/templates") View All »
-					.row-spaced
+
+					.row-spaced(ng-if="projects.length > 0", ng-cloak)
 						ul.list-unstyled.folders-menu(
 							ng-controller="TagListController"
 						)
@@ -85,68 +86,33 @@ block content
 									|  {{tag.name}} 
 									span.subdued ({{tag.project_ids.length}})
 
+					.row-spaced(ng-if="projects.length == 0", ng-cloak)
+						.first-project
+							div
+								i.fa.fa-arrow-up.fa-2x
+							div
+								strong Create your first project!
+
 					-if (settings.enableSubscriptions)
-						.row-spaced
+						.row-spaced(ng-if="projects.length > 0", ng-cloak)
 							a(href="/user/bonus").btn.btn-info Upgrade Account
 
 					- if (showUserDetailsArea)
-						.row-spaced#userProfileInformation(ng-cloak)
-							div(ng-controller="UpdateForm").userProfileInformationArea
-								div(ng-hide="hidePersonalInfoSection").alert.alert-info
-									div(ng-show="percentComplete >= 100")
-										h4 100% complete, well done!
-									div(ng-hide="percentComplete >= 100")
-										h4 Your profile is 
-											strong {{percentComplete}}% 
-											| complete
-
+						.row-spaced#userProfileInformation(ng-if="projects.length > 0 && percentComplete < 100", ng-cloak)
+							div(ng-controller="UserProfileController")
+								.alert.alert-info.text-centered.user-profile
 									.progress
 										.progress-bar.progress-bar-info(ng-style="{'width' : (percentComplete+'%')}")
 
-									button#completeUserProfileInformation.btn.btn-primary(
-										ng-hide="formVisable",
-										ng-click="showForm()"
-									) Complete now
+									p.small
+										| Your profile is 
+										strong {{percentComplete}}% 
+										| complete
 
-									div(ng-show="formVisable")
-										form(enctype='multipart/form-data', method='post')
-											.form-group
-												input.form-control(
-													type='text',
-													name='first_name',
-													ng-model="userInfoForm.first_name",
-													ng-blur="sendUpdate()",
-													placeholder="First Name",
-													select-when="formVisable"
-												)
-											.form-group
-												input.form-control(
-													type='text',
-													name='last_name',
-													ng-model="userInfoForm.last_name",
-													ng-blur="sendUpdate()",
-													placeholder='Last Name'
-												)
-											.form-group#institution_auto_complete
-												autocomplete(
-													ng-model="userInfoForm.institution",
-													data="institutions",
-													ng-blur="sendUpdate()",
-													on-type="updateInstitutionsList",
-													attr-placeholder="Institution",
-													attr-inputclass="form-control"
-												)
-											.form-group
-												input.form-control(
-													type='text',
-													name='role',
-													ng-model="userInfoForm.role",
-													placeholder='Role',
-													ng-blur="sendUpdate()",
-													list="_roles"
-												)
-												datalist#_roles
-													option(ng-repeat='role in roles') {{role}}
+									button#completeUserProfileInformation.btn.btn-primary.btn-sm(
+										ng-hide="formVisable",
+										ng-click="openUserProfileModal()"
+									) Complete
 
 				.col-md-10
 					.container-fluid
@@ -258,52 +224,59 @@ block content
 						.row.row-spaced
 							.col-md-12
 								.card.card-thin
-									- if (projects.length > 0)
-										ul.list-unstyled.project-list(select-all-list, ng-cloak)
-											li.container-fluid
-												.row
-													.col-md-6
-														input.select-all(
-															select-all,
-															type="checkbox"
-														)
-														span.title TITLE
-													.col-md-2
-														span.owner OWNER
-													.col-md-4
-														span.last-modified LAST MODIFIED
-											li.project_entry.container-fluid(
-												ng-repeat="project in visibleProjects | orderBy:'lastUpdated':true",
-												ng-controller="ProjectListItemController"
-											)
-												.row
-													.col-md-6
-														input.select-item(
-															select-individual,
-															type="checkbox",
-															ng-model="project.selected"
-														)
-														span.title
-															a.projectName(href="/project/{{project.id}}") {{project.name}}
-														span
-															span.label.label-default(ng-repeat='tag in project.tags')
-																| {{tag.name}}
-													.col-md-2
-														span.owner {{ownerName()}}
-													.col-md-4
-														span.last-modified.isoDate {{project.lastUpdated | formatDate}}
-									- else
-										.row
-											.span12
-												.welcome
-													h1
-														i.fa.fa-arrow-left
-														| Welcome! Follow the arrow to get started
-													p New to LaTeX? Start by having a look at our
-														a(href="/templates")  templates
-														|  or
-														a(href="/learn")  help guides
-														| .
+									ul.list-unstyled.project-list(
+										select-all-list,
+										ng-if="projects.length > 0",
+										ng-cloak
+									)
+										li.container-fluid
+											.row
+												.col-md-6
+													input.select-all(
+														select-all,
+														type="checkbox"
+													)
+													span.title TITLE
+												.col-md-2
+													span.owner OWNER
+												.col-md-4
+													span.last-modified LAST MODIFIED
+										li.project_entry.container-fluid(
+											ng-repeat="project in visibleProjects | orderBy:'lastUpdated':true",
+											ng-controller="ProjectListItemController"
+										)
+											.row
+												.col-md-6
+													input.select-item(
+														select-individual,
+														type="checkbox",
+														ng-model="project.selected"
+													)
+													span.title
+														a.projectName(href="/project/{{project.id}}") {{project.name}}
+													span
+														span.label.label-default(ng-repeat='tag in project.tags')
+															| {{tag.name}}
+												.col-md-2
+													span.owner {{ownerName()}}
+												.col-md-4
+													span.last-modified.isoDate {{project.lastUpdated | formatDate}}
+										li(
+											ng-if="visibleProjects.length == 0",
+											ng-cloak
+										)
+											.row
+												.col-md-12.text-centered
+													small No projects
+									div.welcome.text-centered(ng-if="projects.length == 0", ng-cloak)
+										h2 Welcome to ShareLaTeX!
+										p New to LaTeX? Start by having a look at our
+											a(href="/templates")  templates
+											|  or
+											a(href="/learn")  help guides
+											| ,
+											br 
+											| or create your first project on the left.
 
 		script(type='text/ng-template', id='newTagModalTemplate')
 			.modal-header
@@ -436,3 +409,53 @@ block content
 				span Upload a zipped project
 			.modal-footer
 				button.btn.btn-default(ng-click="cancel()") Cancel
+
+		script(type="text/ng-template", id="userProfileModalTemplate")
+			.modal-header
+				h3 Your Profile
+			.modal-body
+				form(enctype='multipart/form-data', method='post')
+					.form-group
+						label(for="first_name") First Name
+						input.form-control(
+							type='text',
+							name='first_name',
+							ng-model="userInfoForm.first_name",
+							ng-blur="sendUpdate()",
+							placeholder="First Name",
+							select-when="formVisable"
+						)
+					.form-group
+						label(for="last_name") Last Name
+						input.form-control(
+							type='text',
+							name='last_name',
+							ng-model="userInfoForm.last_name",
+							ng-blur="sendUpdate()",
+							placeholder='Last Name'
+						)
+					.form-group#institution_auto_complete
+						label(for="institution") Institution
+						autocomplete(
+							ng-model="userInfoForm.institution",
+							name="institution",
+							data="institutions",
+							ng-blur="sendUpdate()",
+							on-type="updateInstitutionsList",
+							attr-placeholder="Institution",
+							attr-inputclass="form-control"
+						)
+					.form-group
+						label(for="role") Role
+						input.form-control(
+							type='text',
+							name='role',
+							ng-model="userInfoForm.role",
+							placeholder='Role',
+							ng-blur="sendUpdate()",
+							list="_roles"
+						)
+						datalist#_roles
+							option(ng-repeat='role in roles') {{role}}
+			.modal-footer
+				button.btn.btn-info(ng-click="done()") Done

services/web/public/coffee/app/main/user-details.coffee

@@ -5,12 +5,8 @@ define [
 	app.factory "Institutions", ->
 		new AlgoliaSearch(window.algolia.institutions.app_id, window.algolia.institutions.api_key).initIndex("institutions")
 
-	App.controller "UpdateForm", ($scope, $http, Institutions)->
+	App.controller "UserProfileController", ($scope, $modal, $http)->
 		$scope.institutions = []
-		$scope.formVisable = false
-		$scope.hidePersonalInfoSection = true
-		$scope.roles = ["Student", "Post-graduate student", "Post-doctoral researcher", "Lecturer", "Professor"]
-
 		$http.get("/user/personal_info").success (data)->
 			$scope.userInfoForm =
 				first_name: data.first_name || ""
@@ -19,23 +15,33 @@ define [
 				institution: data.institution || ""
 				_csrf : window.csrfToken
 
-			if getPercentComplete() != 100
-				$scope.percentComplete = getPercentComplete()
-				$scope.hidePersonalInfoSection = false
-
 		$scope.showForm = ->
 			$scope.formVisable = true
 
+		$scope.getPercentComplete = ->
+			results = _.filter $scope.userInfoForm, (value)-> !value? or value?.length != 0
+			results.length * 20
+
+		$scope.$watch "userInfoForm", (value) ->
+			if value?
+				$scope.percentComplete = $scope.getPercentComplete()
+		, true
+
+		$scope.openUserProfileModal = () ->
+			$modal.open {
+				templateUrl: "userProfileModalTemplate"
+				controller: "UserProfileModalController"
+				scope: $scope
+			}
+
+	App.controller "UserProfileModalController", ($scope, $modalInstance, $http, Institutions) ->
+		$scope.roles = ["Student", "Post-graduate student", "Post-doctoral researcher", "Lecturer", "Professor"]
+
 		$scope.sendUpdate = ->
 			request = $http.post "/user/settings", $scope.userInfoForm
 			request.success (data, status)->
 			request.error (data, status)->
 				console.log "the request failed"
-			$scope.percentComplete = getPercentComplete()
-
-		getPercentComplete = ->
-			results = _.filter $scope.userInfoForm, (value)-> !value? or value?.length != 0
-			results.length * 20
 
 		$scope.updateInstitutionsList = (inputVal)->
 
@@ -48,3 +54,5 @@ define [
 				$scope.institutions = _.map response.hits, (institution)->
 					"#{institution.name} (#{institution.domain})"
 
+		$scope.done = () ->
+			$modalInstance.close()

services/web/public/stylesheets/app/project-list.less

@@ -13,6 +13,21 @@
   display: inline;
 }
 
+.first-project {
+	width: 127px;
+	text-align: center;
+}
+
+.user-profile {
+	.progress {
+		height: @line-height-computed / 2;
+		margin-bottom: @line-height-computed / 4;
+	}
+	p {
+		margin-bottom: @line-height-computed / 4;
+	}
+}
+
 ul.folders-menu {
 	margin: 0;
 	.subdued {