Merge pull request #430 from sharelatex/ja-hide-v2-notification

Allow dismissing/hiding v2 and v1 banners

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

@@ -61,21 +61,30 @@ block content
 
 			.row.project-list-row(ng-cloak)
 				.project-list-container(ng-if="projects.length > 0")
-					aside.project-list-sidebar.col-md-2.col-xs-3
-						include ./list/side-bar
+					.project-list-sidebar-wrapper.col-md-2.col-xs-3
+						aside.project-list-sidebar
+							include ./list/side-bar
 
-					if hasFeature('v1-return-message')
-						.project-list-sidebar-v2-pane.col-md-2.col-xs-3
-							span Welcome to the Overleaf v2 alpha! #[a(href="https://www.overleaf.com/help/342-overleaf-v2-faq") Find out more].
-							if userIsFromOLv1(user)
-								span To tag or rename your v1 projects, please go back to Overleaf v1.
-								a.project-list-sidebar-v1-link(
-									href=settings.overleaf.host + "/dash?prefer-v1-dash=1"
-								) Go back to v1
-							if userIsFromSL(user)
-								a.project-list-sidebar-v1-link(
-									href=settings.accountMerge.sharelatexHost
-								) Go back to ShareLaTeX
+						if hasFeature('v1-return-message')
+							.project-list-sidebar-v2-pane(ng-controller="OverleafV1NotificationController")
+								div
+									button.btn-link.pull-right.project-list-sidebar-v2-pane-toggle(
+										ng-click="toggle()"
+									)
+										i.fa.fa-fw(ng-class="{ 'fa-chevron-up': !visible, 'fa-close': visible }")
+									| Welcome to the Overleaf v2 beta!
+								div(ng-show="visible") #[a(href="https://www.overleaf.com/help/342-overleaf-v2-faq") Find out more].
+								if userIsFromOLv1(user)
+									div(ng-show="visible")
+										| To tag or rename your v1 projects, please go back to Overleaf v1.
+										a.project-list-sidebar-v1-link(
+											href=settings.overleaf.host + "/dash?prefer-v1-dash=1"
+										) Go back to v1
+								if userIsFromSL(user)
+									div(ng-show="visible")
+										a.project-list-sidebar-v1-link(
+											href=settings.accountMerge.sharelatexHost
+										) Go back to ShareLaTeX
 
 					.project-list-main.col-md-10.col-xs-9
 						include ./list/notifications

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

@@ -1,10 +1,20 @@
 if (user.awareOfV2 && !settings.overleaf)
-	.alert.alert-info.small
-		a.pull-right.btn.btn-info.btn-sm(href="/user/login_to_ol_v2" style="margin-left: 12px") Click here to try Overleaf v2
-		p
-			| ShareLaTeX is joining Overleaf and will become <em>Overleaf v2</em> in late 2018 (<a href="https://www.overleaf.com/help/342-overleaf-v2-faq">read more</a>).
-			<br/>
-			| We’re beta testing Overleaf v2 now and you can try it out with your ShareLaTeX account.
+	.userNotifications
+		ul.list-unstyled.notifications-list(ng-controller="OverleafV2NotificationController", ng-show="visible")
+			li.notification_entry
+				.row
+					.col-xs-12
+						.alert.alert-info
+							.notification_inner
+								.notification_body
+									a.btn.btn-info.btn-sm.pull-right(href="/user/login_to_ol_v2") Try Overleaf v2
+									| ShareLaTeX is joining Overleaf and will become <em>Overleaf v2</em> in late 2018 (<a href="https://www.overleaf.com/help/342-overleaf-v2-faq">read more</a>).
+									<br/>
+									| We’re beta testing Overleaf v2 now and you can try it out with your ShareLaTeX account.
+								.notification_close
+									button(ng-click="dismiss()").close.pull-right
+										span(aria-hidden="true") &times;
+										span.sr-only #{translate("close")}
 
 span(ng-controller="NotificationsController").userNotifications
 	ul.list-unstyled.notifications-list(

services/web/public/coffee/main/announcements.coffee

@@ -29,4 +29,3 @@ define [
 
 		$scope.showAll = -> 
 			$scope.ui.newItems = 0
-

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

@@ -35,4 +35,21 @@ define [
 					$scope.notification.accepted = true
 				.catch () ->
 					$scope.notification.inflight = false
-					$scope.notification.error = true
+					$scope.notification.error = true
+
+	App.controller "OverleafV2NotificationController", ($scope, localStorage) ->
+		$scope.visible = !localStorage('overleaf_v2_notification_hidden_at')
+
+		$scope.dismiss = () ->
+			$scope.visible = false
+			localStorage('overleaf_v2_notification_hidden_at', Date.now())
+
+	App.controller "OverleafV1NotificationController", ($scope, localStorage) ->
+		$scope.visible = !localStorage('overleaf_v1_notification_hidden_at')
+
+		$scope.toggle = () ->
+			$scope.visible = !$scope.visible
+			if !$scope.visible
+				localStorage('overleaf_v1_notification_hidden_at', Date.now())
+			else
+				localStorage('overleaf_v1_notification_hidden_at', null)

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

@@ -130,10 +130,6 @@
 					padding-right: 15px;
 					vertical-align: middle;
 				}
-				.notification_close {
-					display: table-cell;
-					vertical-align: middle;
-				}
 			}
 		}
 	}

services/web/public/stylesheets/app/sidebar-v2-dash-pane.less

@@ -1,20 +1,25 @@
-@v2-dash-pane-link-height: 130px;
+.project-list-sidebar-wrapper {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	margin: 0 -15px;
+}
 
 .project-list-sidebar {
-	height: calc(~"100% -" @v2-dash-pane-link-height);
+	flex-grow: 1;
+	height: 100%;
+	padding-left: 15px;
+	padding-right: 15px;
 }
 
 .project-list-sidebar-v2-pane {
-	position: absolute;
-	bottom: 0;
-	height: @v2-dash-pane-link-height;
-	background-color: @v2-dash-pane-bg;
+	flex-grow: 0;
+	flex-shrink: 0;
 	text-align: center;
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
+	background-color: @v2-dash-pane-bg;
 	color: white;
 	font-size: 13px;
+	padding: @line-height-computed / 2;
 }
 
 	.project-list-sidebar-v2-pane a {
@@ -25,3 +30,12 @@
 	.project-list-sidebar-v2-pane a:hover {
 		text-decoration: none;
 	}
+
+		.project-list-sidebar-v2-pane-toggle {
+			color: white;
+			padding: 0;
+			line-height: 1;
+			&:hover, &:active {
+				color: white;
+			}
+		}

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

@@ -10,7 +10,7 @@
   line-height: 1;
   color: @close-color;
   text-shadow: @close-text-shadow;
-  .opacity(.2);
+  .opacity(.4);
 
   &:hover,
   &:focus {