Merge pull request #565 from sharelatex/as-dash-action-btns

Add action buttons to v2 dash

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

@@ -1,4 +1,7 @@
-.col-xs-6
+- 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-item(
 		select-individual,
 		type="checkbox",
@@ -37,8 +40,42 @@
 			tooltip-placement="right"
 			tooltip-append-to-body="true"
 		)
-.col-xs-4
+
+div(class=lastUpdatedClasses)
 	if settings.overleaf
 		span.last-modified(tooltip="{{project.lastUpdated | formatDate}}") {{project.lastUpdated | fromNowDate}}
 	else
 		span.last-modified {{project.lastUpdated | formatDate}}
+
+if settings.overleaf
+	.hidden-xs.col-sm-3.col-md-2.action-btn-row
+		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"
+			tooltip=translate('archive'),
+			tooltip-placement="top",
+			tooltip-append-to-body="true",
+			ng-click="archive($event)"
+		)
+			i.icon.fa.fa-inbox
+		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

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

@@ -131,7 +131,10 @@
 			)
 				li.container-fluid
 					.row
-						.col-xs-6
+						- 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"
@@ -142,9 +145,12 @@
 						.col-xs-2
 							span.header.clickable(ng-click="changePredicate('accessLevel')") #{translate("owner")}
 								i.tablesort.fa(ng-class="getSortIconClass('accessLevel')")
-						.col-xs-4
+						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"

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

@@ -1,4 +1,4 @@
-.col-xs-6
+.col-xs-6.col-sm-4.col-md-6
 	.select-item
 		span.v1-badge(
 			aria-label=translate("v1_badge")
@@ -21,5 +21,5 @@
 .col-xs-2
 	span.owner {{ownerName()}}
 
-.col-xs-4
+.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

@@ -350,14 +350,15 @@ define [
 				$scope.archiveOrLeaveSelectedProjects()
 
 		$scope.archiveOrLeaveSelectedProjects = () ->
-			selected_projects = $scope.getSelectedProjects()
+			$scope.archiveOrLeaveProjects($scope.getSelectedProjects())
-			selected_project_ids = $scope.getSelectedProjectIds()
 
+		$scope.archiveOrLeaveProjects = (projects) ->
+			projectIds = projects.map (p) -> p.id
 			# Remove project from any tags
 			for tag in $scope.tags
-				$scope._removeProjectIdsFromTagArray(tag, selected_project_ids)
+				$scope._removeProjectIdsFromTagArray(tag, projectIds)
 
-			for project in selected_projects
+			for project in projects
 				project.tags = []
 				if project.accessLevel == "owner"
 					project.archived = true
@@ -414,13 +415,14 @@ define [
 			$scope.updateVisibleProjects()
 
 		$scope.restoreSelectedProjects = () ->
-			selected_projects = $scope.getSelectedProjects()
+			$scope.restoreProjects($scope.getSelectedProjects())
-			selected_project_ids = $scope.getSelectedProjectIds()
 
-			for project in selected_projects
+		$scope.restoreProjects = (projects) ->
+			projectIds = projects.map (p) -> p.id
+			for project in projects
 				project.archived = false
 
-			for project_id in selected_project_ids
+			for projectId in projectIds
 				queuedHttp {
 					method: "POST"
 					url: "/project/#{project_id}/restore"
@@ -437,13 +439,14 @@ define [
 			)
 
 		$scope.downloadSelectedProjects = () ->
-			selected_project_ids = $scope.getSelectedProjectIds()
+			$scope.downloadProjectsById($scope.getSelectedProjectIds())
-			event_tracking.send 'project-list-page-interaction', 'project action', 'Download Zip'
-			if selected_project_ids.length > 1
-				path = "/project/download/zip?project_ids=#{selected_project_ids.join(',')}"
-			else
-				path = "/project/#{selected_project_ids[0]}/download/zip"
 
+		$scope.downloadProjectsById = (projectIds) ->
+			event_tracking.send 'project-list-page-interaction', 'project action', 'Download Zip'
+			if projectIds.length > 1
+				path = "/project/download/zip?project_ids=#{projectIds.join(',')}"
+			else
+				path = "/project/#{projectIds[0]}/download/zip"
 			window.location = path
 
 		$scope.openV1ImportModal = (project) ->
@@ -490,3 +493,19 @@ define [
 		$scope.$watch "project.selected", (value) ->
 			if value?
 				$scope.updateSelectedProjects()
+
+		$scope.clone = (e) ->
+			e.stopPropagation()
+			$scope.cloneProject($scope.project, "#{$scope.project.name} (Copy)")
+
+		$scope.download = (e) ->
+			e.stopPropagation()
+			$scope.downloadProjectsById([$scope.project.id])
+
+		$scope.archive = (e) ->
+			e.stopPropagation()
+			$scope.archiveOrLeaveProjects([$scope.project])
+
+		$scope.restore = (e) ->
+			e.stopPropagation()
+			$scope.restoreProjects([$scope.project])

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

@@ -369,6 +369,16 @@ ul.project-list {
 		.v1-badge {
 			margin-left: -4px;
 		}
+
+		.action-btn-row-header, .action-btn-row {
+			padding-right: 20px;
+			text-align: right;
+		}
+
+		.action-btn {
+			padding: 0 0.3em;
+			margin-left: 0.2em;
+		}
 	}
 	i.tablesort {
 		padding-left: 8px;