From e04d10d11f39abfda283926e3f570ade2158e552 Mon Sep 17 00:00:00 2001
From: Shane Kilkelly <shane@kilkelly.me>
Date: Fri, 29 Sep 2017 10:59:30 +0100
Subject: [PATCH] Styling of link-share, and fix read-only link

---
 .../web/app/views/project/editor/share.pug    | 20 ++++++++--------
 .../ShareProjectModalController.coffee        |  2 +-
 .../public/stylesheets/app/editor/share.less  | 23 +++++++++++--------
 3 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/services/web/app/views/project/editor/share.pug b/services/web/app/views/project/editor/share.pug
index 36ed146734..d6f362d9f4 100644
--- a/services/web/app/views/project/editor/share.pug
+++ b/services/web/app/views/project/editor/share.pug
@@ -12,30 +12,30 @@ script(type='text/ng-template', id='shareProjectModalTemplate')
 			//- Private
 			.row.public-access-level(ng-show="project.publicAccesLevel == 'private'")
 				.col-xs-12.text-center
-					| #{translate("this_project_is_private")}
+					| Link-sharing is off, only invited users can view this project.
 					| &nbsp;&nbsp;
 					a(
 						href
 						ng-click="openMakeTokenBasedModal()"
-					) #{translate("make_token_based")}
+					) Turn on link-sharing
 
 			//- Token-based access
 			.row.public-access-level(ng-show="project.publicAccesLevel == 'tokenBased'")
 				.col-xs-12.text-center
 					strong
-						| #{translate("this_project_is_token_based_access")}
+						| Link-sharing is on.
 						| &nbsp;&nbsp;
 					a(
 						href
 						ng-click="openMakePrivateModal()"
-					) #{translate("make_private")}
-				.col-xs-12.access-token-display
-					div
-						strong #{translate("read_only")}
-						pre.access-token {{ getReadOnlyTokenLink() }}
-					div
-						strong #{translate("read_and_write")}
+					) Turn off link-sharing
+				.col-xs-12.access-token-display-area
+					div.access-token-wrapper
+						strong Anyone with this link can edit this project
 						pre.access-token {{ getReadAndWriteTokenLink() }}
+					div.access-token-wrapper
+						strong Anyone with this link can access this project
+						pre.access-token {{ getReadOnlyTokenLink() }}
 
 			//- legacy public-access
 			.row.public-access-level(ng-show="project.publicAccesLevel == 'readAndWrite' || project.publicAccesLevel == 'readOnly'")
diff --git a/services/web/public/coffee/ide/share/controllers/ShareProjectModalController.coffee b/services/web/public/coffee/ide/share/controllers/ShareProjectModalController.coffee
index b28381bdc7..39f6438cef 100644
--- a/services/web/public/coffee/ide/share/controllers/ShareProjectModalController.coffee
+++ b/services/web/public/coffee/ide/share/controllers/ShareProjectModalController.coffee
@@ -203,7 +203,7 @@ define [
 			location.origin + "/" + $scope.project.tokens.readAndWrite
 
 		$scope.getReadOnlyTokenLink = () ->
-			location.origin + "/" + $scope.project.tokens.readOnly
+			location.origin + "/read/" + $scope.project.tokens.readOnly
 
 		$scope.done = () ->
 			$modalInstance.close()
diff --git a/services/web/public/stylesheets/app/editor/share.less b/services/web/public/stylesheets/app/editor/share.less
index 1fe4663c7b..ba1e79f4b1 100644
--- a/services/web/public/stylesheets/app/editor/share.less
+++ b/services/web/public/stylesheets/app/editor/share.less
@@ -6,15 +6,6 @@
 		font-size: 1rem;
 	}
 
-	.access-token-display {
-		padding-top: 8px;
-		.access-token {
-			background-color: @gray-lightest;
-			border: 1px solid @gray-lighter;
-			padding: 6px 12px 6px 12px
-		}
-	}
-
 	.project-member, .project-invite, .public-access-level {
 		padding: (@line-height-computed / 2) 0;
 		border-bottom: 1px solid @gray-lighter;
@@ -25,7 +16,19 @@
 		color: @gray;
 		padding-top: 0;
 		font-size: 12px;
-		padding-bottom: @line-height-computed;
+		padding-bottom: @line-height-computed/2;
+		.access-token-display-area {
+			margin-top: @line-height-computed/4;
+			.access-token-wrapper {
+				padding-top: @line-height-computed/4;
+				.access-token {
+					margin-top: @line-height-computed/4;
+					background-color: @gray-lightest;
+					border: 1px solid @gray-lighter;
+					padding: 6px 12px 6px 12px
+				}
+			}
+		}
 	}
 
 	.project-member, .project-invite {