Update project-list list to a table and show last updated user

services/web/app/views/project/list/item.pug

@@ -1,7 +1,4 @@
-- var titleClasses = settings.overleaf ? "col-xs-6 col-sm-4 col-md-6" : "col-xs-6"
-- var lastUpdatedClasses = settings.overleaf ? " col-xs-4 col-sm-3 col-md-2" : "col-xs-4"
-
-div(class=titleClasses)
+td.selectProject
 	input.select-item(
 		select-individual,
 		type="checkbox",
@@ -10,29 +7,29 @@ div(class=titleClasses)
 		stop-propagation="click"
 		aria-label=translate('select_project') + " '{{ project.name }}'"
 	)
-	span
-		a.projectName(
-			ng-href="{{projectLink(project)}}"
+td.projectName
+	a.projectName(
+		ng-href="{{projectLink(project)}}"
+		stop-propagation="click"
+	) {{project.name}}
+	span(
+		ng-controller="TagListController"
+	)
+		.tag-label(
+			ng-repeat='tag in project.tags'
 			stop-propagation="click"
-		) {{project.name}}
-		span(
-			ng-controller="TagListController"
 		)
-			.tag-label(
-				ng-repeat='tag in project.tags'
-				stop-propagation="click"
-			)
-				a.label.label-default.tag-label-name(
-					href,
-					ng-click="selectTag(tag)"
-				) {{tag.name}}
-				a.label.label-default.tag-label-remove(
-					href
-					ng-click="removeProjectFromTag(project, tag)"
-				) ×
+			a.label.label-default.tag-label-name(
+				href,
+				ng-click="selectTag(tag)"
+			) {{tag.name}}
+			a.label.label-default.tag-label-remove(
+				href
+				ng-click="removeProjectFromTag(project, tag)"
+			) ×
 
-.col-xs-2
-	span.owner {{ownerName()}}
+td
+	span.owner {{userDisplayName(project.owner)}}
 	span(ng-if="isLinkSharingProject(project)")
 		|  
 		i.fa.fa-link.small(
@@ -41,64 +38,52 @@ div(class=titleClasses)
 			tooltip-append-to-body="true"
 		)
 
-div(class=lastUpdatedClasses)
-	if settings.overleaf
-		span.last-modified(tooltip="{{project.lastUpdated | formatDate}}") {{project.lastUpdated | fromNowDate}}
-	else
-		span.last-modified {{project.lastUpdated | formatDate}}
+td
+	span.last-modified(tooltip="{{project.lastUpdated | formatDate}}")
+		| {{project.lastUpdated | fromNowDate}}
+	span(ng-show='project.lastUpdatedBy')
+		|
+		| by {{userDisplayName(project.lastUpdatedBy)}}
 
-if settings.overleaf
-	.hidden-xs.col-sm-3.col-md-2.action-btn-row
-		div(
-			ng-if="!project.isTableActionInflight"
+td.text-right
+	div(
+		ng-if="!project.isTableActionInflight"
+	)
+		button.btn.btn-link.action-btn(
+			tooltip=translate('copy'),
+			tooltip-placement="top",
+			tooltip-append-to-body="true",
+			ng-click="clone($event)"
+		)
+			i.icon.fa.fa-files-o
+		button.btn.btn-link.action-btn(
+			tooltip=translate('download'),
+			tooltip-placement="top",
+			tooltip-append-to-body="true",
+			ng-click="download($event)"
+		)
+			i.icon.fa.fa-cloud-download
+		button.btn.btn-link.action-btn(
+			ng-if="!project.archived && isOwner()"
+			tooltip=translate('archive'),
+			tooltip-placement="top",
+			tooltip-append-to-body="true",
+			ng-click="archiveOrLeave($event)"
+		)
+			i.icon.fa.fa-inbox
+		button.btn.btn-link.action-btn(
+			ng-if="!project.archived && !isOwner()"
+			tooltip=translate('leave'),
+			tooltip-placement="top",
+			tooltip-append-to-body="true",
+			ng-click="archiveOrLeave($event)"
 		)
-			button.btn.btn-link.action-btn(
-				tooltip=translate('copy'),
-				tooltip-placement="top",
-				tooltip-append-to-body="true",
-				ng-click="clone($event)"
-			)
-				i.icon.fa.fa-files-o
-			button.btn.btn-link.action-btn(
-				tooltip=translate('download'),
-				tooltip-placement="top",
-				tooltip-append-to-body="true",
-				ng-click="download($event)"
-			)
-				i.icon.fa.fa-cloud-download
-			button.btn.btn-link.action-btn(
-				ng-if="!project.archived && isOwner()"
-				tooltip=translate('archive'),
-				tooltip-placement="top",
-				tooltip-append-to-body="true",
-				ng-click="archiveOrLeave($event)"
-			)
-				i.icon.fa.fa-inbox
-			button.btn.btn-link.action-btn(
-				ng-if="!project.archived && !isOwner()"
-				tooltip=translate('leave'),
-				tooltip-placement="top",
-				tooltip-append-to-body="true",
-				ng-click="archiveOrLeave($event)"
-			)
-				i.icon.fa.fa-sign-out
-			button.btn.btn-link.action-btn(
-				ng-if="project.archived"
-				tooltip=translate('unarchive'),
-				tooltip-placement="top",
-				tooltip-append-to-body="true",
-				ng-click="restore($event)"
-			)
-				i.icon.fa.fa-reply
-			button.btn.btn-link.action-btn(
-				ng-if="project.archived && isOwner()"
-				tooltip=translate('delete_forever'),
-				tooltip-placement="top",
-				tooltip-append-to-body="true",
-				ng-click="deleteProject($event)"
-			)
-				i.icon.fa.fa-trash
-		div(
-			ng-if="project.isTableActionInflight"
+			i.icon.fa.fa-sign-out
+		button.btn.btn-link.action-btn(
+			ng-if="project.archived"
+			tooltip=translate('unarchive'),
+			tooltip-placement="top",
+			tooltip-append-to-body="true",
+			ng-click="restore($event)"
 		)
-			i.fa.fa-spinner.fa-spin
+			i.icon.fa.fa-reply

services/web/app/views/project/list/project-list.pug

@@ -123,54 +123,44 @@
 
 	.col-xs-12
 		.card.card-thin.project-list-card
-			ul.list-unstyled.project-list.structured-list(
-				select-all-list,
-				ng-if="projects.length > 0",
-				max-height="projectListHeight - 25",
-				ng-cloak
-			)
-				li.container-fluid
-					.row
-						- var titleClasses = settings.overleaf ? " col-xs-6 col-sm-4 col-md-6" : "col-xs-6"
-						- var lastUpdatedClasses = settings.overleaf ? " col-xs-4 col-sm-3 col-md-2" : "col-xs-4"
-
-						div(class=titleClasses)
-							input.select-all(
-								select-all,
-								type="checkbox"
-								aria-label=translate('select_all_projects')
-							)
-							span.header.clickable(ng-click="changePredicate('name')") #{translate("title")}
-								i.tablesort.fa(ng-class="getSortIconClass('name')")
-						.col-xs-2
-							span.header.clickable(ng-click="changePredicate('accessLevel')") #{translate("owner")}
-								i.tablesort.fa(ng-class="getSortIconClass('accessLevel')")
-						div(class=lastUpdatedClasses)
-							span.header.clickable(ng-click="changePredicate('lastUpdated')") #{translate("last_modified")}
-								i.tablesort.fa(ng-class="getSortIconClass('lastUpdated')")
-						if settings.overleaf
-							.hidden-xs.col-sm-3.col-md-2.action-btn-row-header
-								span.header #{translate("actions")}
-				li.project_entry.container-fluid(
-					ng-repeat="project in visibleProjects | orderBy:predicate:reverse",
-					ng-controller="ProjectListItemController"
-				)
-					.row(
-						ng-if="!project.isV1Project"
-						select-row
-					)
-						include ./item
-					.row(
-						ng-if="project.isV1Project"
-					)
-						include ./v1-item
-				li(
-					ng-if="visibleProjects.length == 0",
+			.table-wrapper(max-height="projectListHeight - 25",)
+				table.table.table-hover.project-list(
+					select-all-list,
+					ng-if="projects.length > 0",
 					ng-cloak
 				)
-					.row
-						.col-xs-12.text-centered
-							small #{translate("no_projects")}
+					thead
+						tr
+							th.selectProject
+								input.select-all(
+									select-all,
+									type="checkbox"
+									aria-label=translate('select_all_projects')
+								)
+							th.projectName
+								span.header.clickable(ng-click="changePredicate('name')") #{translate("title")}
+									i.tablesort.fa(ng-class="getSortIconClass('name')")
+							th
+								span.header.clickable(ng-click="changePredicate('accessLevel')") #{translate("owner")}
+									i.tablesort.fa(ng-class="getSortIconClass('accessLevel')")
+							th
+								span.header.clickable(ng-click="changePredicate('lastUpdated')") #{translate("last_modified")}
+									i.tablesort.fa(ng-class="getSortIconClass('lastUpdated')")
+							if settings.overleaf
+								th.text-right
+									span.header #{translate("actions")}
+					tbody
+						tr.project_entry(
+							ng-repeat="project in visibleProjects | orderBy:predicate:reverse",
+							ng-controller="ProjectListItemController"
+						)
+							include ./item
+						tr(
+							ng-if="visibleProjects.length == 0",
+							ng-cloak
+						)
+							td(colspan=5).text-center
+								small #{translate("no_projects")}
 
 			div.welcome.text-centered(ng-if="projects.length == 0", ng-cloak)
 				h2 #{translate("welcome_to_sl")}

services/web/app/views/project/list/v1-item.pug

@@ -19,7 +19,7 @@
 			) {{project.name}}
 
 .col-xs-2
-	span.owner {{ownerName()}}
+	span.owner {{userDisplayName(project.owner)}}
 
 .col-xs-4.col-sm-3.col-md-2
 	span.last-modified(tooltip="{{project.lastUpdated | formatDate}}") {{project.lastUpdated | fromNowDate}}

services/web/public/coffee/main/project-list/project-list.coffee

@@ -485,11 +485,11 @@ define [
 		$scope.isLinkSharingProject = (project) ->
 			return project.source == 'token'
 
-		$scope.ownerName = () ->
-			if $scope.project.accessLevel == "owner"
+		$scope.userDisplayName = (user) ->
+			if user._id == window.user_id
 				return "You"
-			else if $scope.project.owner?
-				return [$scope.project.owner.first_name, $scope.project.owner.last_name].filter((n) -> n?).join(" ")
+			else if user?
+				return [user.first_name, user.last_name].filter((n) -> n?).join(" ")
 			else
 				return "None"
 

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

@@ -314,8 +314,38 @@ ul.structured-list {
 	padding: 0 (@line-height-computed / 4);
 }
 
-ul.project-list {
-	li {
+.table-wrapper {
+	overflow: scroll;
+}
+
+table.project-list {
+	margin: 0;
+	width: 100%;
+
+	th when (@is-overleaf = true) {
+		font-weight: 600;
+	}
+	th when (@is-overleaf = false) {
+		text-transform: uppercase;
+		font-weight: normal;
+	}
+
+	// thead > tr > th {
+	// 	padding-top: @line-height-computed / 8;
+	// }
+
+	td {
+		@media (min-width: @screen-md-min) {
+			white-space: nowrap;
+		}
+		&.projectName {
+			white-space: normal;
+			width: 50%;
+		}
+		&.selectProject {
+			width: 1%;
+		}
+
 		.last-modified when (@is-overleaf = false) {
 			font-size: .8rem;
 		}
@@ -325,12 +355,13 @@ ul.project-list {
 		.owner when (@is-overleaf = false) {
 			margin-right: 0;
 		}
-		.projectName {
+		a.projectName {
 			margin-right: @line-height-computed / 4;
 			padding: 0;
 			vertical-align: inherit;
 			white-space: normal;
 			text-align: left;
+			color: @structured-list-link-color;
 		}
 
 		.tag-label {

services/web/public/stylesheets/components/tables.less

@@ -34,7 +34,7 @@ th {
   // Bottom align for column headings
   > thead > tr > th {
     vertical-align: bottom;
-    border-bottom: 2px solid @table-border-color;
+    border-bottom: 1px solid @table-border-color;
   }
   // Remove top border from thead by default
   > caption + thead,

services/web/public/stylesheets/core/_common-variables.less

@@ -110,7 +110,7 @@
 //## Customizes the `.table` component with basic values, each used across all table variations.
 
 //** Padding for `<th>`s and `<td>`s.
-@table-cell-padding:            8px;
+@table-cell-padding:            @line-height-computed / 4;
 //** Padding for cells in `.table-condensed`.
 @table-condensed-cell-padding:  5px;