From d8ed0e5277a44901b431cad4ce61001893bd212f Mon Sep 17 00:00:00 2001 From: James Allen Date: Tue, 20 Mar 2018 10:27:45 +0000 Subject: [PATCH 1/5] Allow v2 notification banner to be dismissed --- .../app/views/project/list/notifications.pug | 22 ++++++++++++++----- .../public/coffee/main/announcements.coffee | 1 - .../notifications-controller.coffee | 9 +++++++- .../public/stylesheets/app/project-list.less | 4 ---- .../public/stylesheets/components/close.less | 2 +- 5 files changed, 25 insertions(+), 13 deletions(-) diff --git a/services/web/app/views/project/list/notifications.pug b/services/web/app/views/project/list/notifications.pug index 69fc1806a0..5afbff6db5 100644 --- a/services/web/app/views/project/list/notifications.pug +++ b/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 Overleaf v2 in late 2018 (read more). -
- | 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="OverleafNotificationController", 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 Overleaf v2 in late 2018 (read more). +
+ | 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") × + span.sr-only #{translate("close")} span(ng-controller="NotificationsController").userNotifications ul.list-unstyled.notifications-list( diff --git a/services/web/public/coffee/main/announcements.coffee b/services/web/public/coffee/main/announcements.coffee index 5663be9ca6..92c0cb4f4a 100644 --- a/services/web/public/coffee/main/announcements.coffee +++ b/services/web/public/coffee/main/announcements.coffee @@ -29,4 +29,3 @@ define [ $scope.showAll = -> $scope.ui.newItems = 0 - diff --git a/services/web/public/coffee/main/project-list/notifications-controller.coffee b/services/web/public/coffee/main/project-list/notifications-controller.coffee index 21476f4f04..498a4c5328 100644 --- a/services/web/public/coffee/main/project-list/notifications-controller.coffee +++ b/services/web/public/coffee/main/project-list/notifications-controller.coffee @@ -35,4 +35,11 @@ define [ $scope.notification.accepted = true .catch () -> $scope.notification.inflight = false - $scope.notification.error = true \ No newline at end of file + $scope.notification.error = true + + App.controller "OverleafNotificationController", ($scope, localStorage) -> + $scope.visible = !localStorage('overleaf_notification_hidden_at') + + $scope.dismiss = () -> + $scope.visible = false + localStorage('overleaf_notification_hidden_at', Date.now()) diff --git a/services/web/public/stylesheets/app/project-list.less b/services/web/public/stylesheets/app/project-list.less index 99506f7c93..982086a262 100644 --- a/services/web/public/stylesheets/app/project-list.less +++ b/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; - } } } } diff --git a/services/web/public/stylesheets/components/close.less b/services/web/public/stylesheets/components/close.less index 9b4e74f2b8..0bb09033ef 100755 --- a/services/web/public/stylesheets/components/close.less +++ b/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 { From 3551f1453b4fce66e05f489d1460618766ca0b39 Mon Sep 17 00:00:00 2001 From: James Allen Date: Tue, 20 Mar 2018 12:15:04 +0000 Subject: [PATCH 2/5] Use flexible height v2 message panel --- services/web/app/views/project/list.pug | 29 ++++++++++--------- .../stylesheets/app/sidebar-v2-dash-pane.less | 20 +++++++++---- 2 files changed, 29 insertions(+), 20 deletions(-) diff --git a/services/web/app/views/project/list.pug b/services/web/app/views/project/list.pug index 3abcde9ba7..7996c36238 100644 --- a/services/web/app/views/project/list.pug +++ b/services/web/app/views/project/list.pug @@ -61,21 +61,22 @@ 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", style="") + 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 .project-list-main.col-md-10.col-xs-9 include ./list/notifications diff --git a/services/web/public/stylesheets/app/sidebar-v2-dash-pane.less b/services/web/public/stylesheets/app/sidebar-v2-dash-pane.less index d1586b4a5c..44c5e9b529 100644 --- a/services/web/public/stylesheets/app/sidebar-v2-dash-pane.less +++ b/services/web/public/stylesheets/app/sidebar-v2-dash-pane.less @@ -1,20 +1,28 @@ -@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: @line-height-computed / 2; + padding-right: @line-height-computed / 2; } .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; + background-color: @v2-dash-pane-bg; flex-direction: column; justify-content: center; color: white; font-size: 13px; + padding: @line-height-computed / 2; } .project-list-sidebar-v2-pane a { From a023512872b54ce5b2683dcd954d374f3eca19db Mon Sep 17 00:00:00 2001 From: James Allen Date: Tue, 20 Mar 2018 13:50:51 +0000 Subject: [PATCH 3/5] Collapse panel with v1 info --- services/web/app/views/project/list.pug | 26 ++++++++++++------- .../app/views/project/list/notifications.pug | 2 +- .../notifications-controller.coffee | 17 +++++++++--- .../stylesheets/app/sidebar-v2-dash-pane.less | 12 ++++++--- 4 files changed, 41 insertions(+), 16 deletions(-) diff --git a/services/web/app/views/project/list.pug b/services/web/app/views/project/list.pug index 7996c36238..fcf93accb3 100644 --- a/services/web/app/views/project/list.pug +++ b/services/web/app/views/project/list.pug @@ -66,17 +66,25 @@ block content include ./list/side-bar if hasFeature('v1-return-message') - .project-list-sidebar-v2-pane(ng-controller="OverleafV1NotificationController", style="") - span Welcome to the Overleaf v2 alpha! #[a(href="https://www.overleaf.com/help/342-overleaf-v2-faq") Find out more]. + .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) - 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 + 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) - a.project-list-sidebar-v1-link( - href=settings.accountMerge.sharelatexHost - ) Go back to ShareLaTeX + 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 diff --git a/services/web/app/views/project/list/notifications.pug b/services/web/app/views/project/list/notifications.pug index 5afbff6db5..15301482a3 100644 --- a/services/web/app/views/project/list/notifications.pug +++ b/services/web/app/views/project/list/notifications.pug @@ -1,6 +1,6 @@ if (user.awareOfV2 && !settings.overleaf) .userNotifications - ul.list-unstyled.notifications-list(ng-controller="OverleafNotificationController", ng-show="visible") + ul.list-unstyled.notifications-list(ng-controller="OverleafV2NotificationController", ng-show="visible") li.notification_entry .row .col-xs-12 diff --git a/services/web/public/coffee/main/project-list/notifications-controller.coffee b/services/web/public/coffee/main/project-list/notifications-controller.coffee index 498a4c5328..6cdaf8bd77 100644 --- a/services/web/public/coffee/main/project-list/notifications-controller.coffee +++ b/services/web/public/coffee/main/project-list/notifications-controller.coffee @@ -37,9 +37,20 @@ define [ $scope.notification.inflight = false $scope.notification.error = true - App.controller "OverleafNotificationController", ($scope, localStorage) -> - $scope.visible = !localStorage('overleaf_notification_hidden_at') + App.controller "OverleafV2NotificationController", ($scope, localStorage) -> + $scope.visible = !localStorage('overleaf_v2_notification_hidden_at') $scope.dismiss = () -> $scope.visible = false - localStorage('overleaf_notification_hidden_at', Date.now()) + localStorage('overleaf_v2_notification_hidden_at', Date.now()) + + App.controller "OverleafV1NotificationController", ($scope, localStorage) -> + $scope.visible = !localStorage('overleaf_v1_notification_hidden_at') + + $scope.toggle = () -> + console.log('toggle!', $scope.visible) + $scope.visible = !$scope.visible + if !$scope.visible + localStorage('overleaf_v1_notification_hidden_at', Date.now()) + else + localStorage('overleaf_v1_notification_hidden_at', null) \ No newline at end of file diff --git a/services/web/public/stylesheets/app/sidebar-v2-dash-pane.less b/services/web/public/stylesheets/app/sidebar-v2-dash-pane.less index 44c5e9b529..8f2c6ccbe0 100644 --- a/services/web/public/stylesheets/app/sidebar-v2-dash-pane.less +++ b/services/web/public/stylesheets/app/sidebar-v2-dash-pane.less @@ -16,10 +16,7 @@ flex-grow: 0; flex-shrink: 0; text-align: center; - display: flex; background-color: @v2-dash-pane-bg; - flex-direction: column; - justify-content: center; color: white; font-size: 13px; padding: @line-height-computed / 2; @@ -33,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; + } + } From 01343b8419b2e56d2356a876955072b3fab4146b Mon Sep 17 00:00:00 2001 From: James Allen Date: Tue, 20 Mar 2018 14:21:34 +0000 Subject: [PATCH 4/5] Remove console.log line --- .../coffee/main/project-list/notifications-controller.coffee | 1 - 1 file changed, 1 deletion(-) diff --git a/services/web/public/coffee/main/project-list/notifications-controller.coffee b/services/web/public/coffee/main/project-list/notifications-controller.coffee index 6cdaf8bd77..fff75d0f35 100644 --- a/services/web/public/coffee/main/project-list/notifications-controller.coffee +++ b/services/web/public/coffee/main/project-list/notifications-controller.coffee @@ -48,7 +48,6 @@ define [ $scope.visible = !localStorage('overleaf_v1_notification_hidden_at') $scope.toggle = () -> - console.log('toggle!', $scope.visible) $scope.visible = !$scope.visible if !$scope.visible localStorage('overleaf_v1_notification_hidden_at', Date.now()) From 27fac4029c31feb765be26245ce7c43345393c0f Mon Sep 17 00:00:00 2001 From: James Allen Date: Tue, 20 Mar 2018 14:46:15 +0000 Subject: [PATCH 5/5] Make margins consistent with col margins --- services/web/public/stylesheets/app/sidebar-v2-dash-pane.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/services/web/public/stylesheets/app/sidebar-v2-dash-pane.less b/services/web/public/stylesheets/app/sidebar-v2-dash-pane.less index 8f2c6ccbe0..6000b08d02 100644 --- a/services/web/public/stylesheets/app/sidebar-v2-dash-pane.less +++ b/services/web/public/stylesheets/app/sidebar-v2-dash-pane.less @@ -8,8 +8,8 @@ .project-list-sidebar { flex-grow: 1; height: 100%; - padding-left: @line-height-computed / 2; - padding-right: @line-height-computed / 2; + padding-left: 15px; + padding-right: 15px; } .project-list-sidebar-v2-pane {