diff --git a/services/web/app/coffee/Features/Project/ProjectEditorHandler.coffee b/services/web/app/coffee/Features/Project/ProjectEditorHandler.coffee index e25ff29b28..5da582aa4c 100644 --- a/services/web/app/coffee/Features/Project/ProjectEditorHandler.coffee +++ b/services/web/app/coffee/Features/Project/ProjectEditorHandler.coffee @@ -20,10 +20,10 @@ module.exports = ProjectEditorHandler = if !result.invites? result.invites = [] - hasTrackChanges = false + trackChangesVisible = false for member in members if member.privilegeLevel == "owner" and member.user?.featureSwitches?.track_changes - hasTrackChanges = true + trackChangesVisible = true {owner, ownerFeatures, members} = @buildOwnerAndMembersViews(members) result.owner = owner @@ -37,7 +37,8 @@ module.exports = ProjectEditorHandler = compileGroup:"standard" templates: false references: false - trackChanges: hasTrackChanges + trackChanges: false + trackChangesVisible: trackChangesVisible }) return result diff --git a/services/web/app/views/project/editor/editor.pug b/services/web/app/views/project/editor/editor.pug index 98a2840069..9924fe1221 100644 --- a/services/web/app/views/project/editor/editor.pug +++ b/services/web/app/views/project/editor/editor.pug @@ -53,7 +53,7 @@ div.full-size( syntax-validation="settings.syntaxValidation", review-panel="reviewPanel", events-bridge="reviewPanelEventsBridge" - track-changes-enabled="project.features.trackChanges", + track-changes-enabled="project.features.trackChangesVisible", track-changes= "editor.trackChanges", doc-id="editor.open_doc_id" renderer-data="reviewPanel.rendererData" diff --git a/services/web/app/views/project/editor/header.pug b/services/web/app/views/project/editor/header.pug index 475ba1da52..85397fa83f 100644 --- a/services/web/app/views/project/editor/header.pug +++ b/services/web/app/views/project/editor/header.pug @@ -87,7 +87,7 @@ header.toolbar.toolbar-header.toolbar-with-labels( a.btn.btn-full-height( href, - ng-if="project.features.trackChanges", + ng-if="project.features.trackChangesVisible", ng-class="{ active: ui.reviewPanelOpen }" ng-click="toggleReviewPanel()" ) diff --git a/services/web/app/views/project/editor/review-panel.pug b/services/web/app/views/project/editor/review-panel.pug index c09f2a1e0b..25ac9afd79 100644 --- a/services/web/app/views/project/editor/review-panel.pug +++ b/services/web/app/views/project/editor/review-panel.pug @@ -25,7 +25,13 @@ strong off span(ng-click="toggleTrackChanges(false)", ng-if="editor.wantTrackChanges === true") Track Changes is strong on - review-panel-toggle(ng-if="editor.wantTrackChanges == editor.trackChanges", ng-model="editor.wantTrackChanges", on-toggle="toggleTrackChanges") + review-panel-toggle( + ng-if="editor.wantTrackChanges == editor.trackChanges" + ng-model="editor.wantTrackChanges" + on-toggle="toggleTrackChanges" + disabled="!project.features.trackChanges" + on-disabled-click="openTrackChangesUpgradeModal" + ) span.review-panel-toolbar-label.review-panel-toolbar-label-disabled(ng-if="!permissions.write") span(ng-if="editor.wantTrackChanges === false") Track Changes is strong off @@ -372,3 +378,49 @@ script(type='text/ng-template', id='resolvedCommentsDropdownTemplate') .rp-loading(ng-if="!resolvedComments.length") | No resolved threads. +script(type="text/ng-template", id="trackChangesUpgradeModalTemplate") + .modal-header + button.close( + type="button" + data-dismiss="modal" + ng-click="cancel()" + ) × + h3 Upgrade to Track Changes + .modal-body + .teaser-video-container + video.teaser-video(autoplay, loop) + source(src="/img/teasers/track-changes/teaser-track-changes.mp4", type="video/mp4") + img(src="/img/teasers/track-changes/teaser-track-changes.gif") + + h4.teaser-title See changes in your documents, live + + p.small(ng-show="startedFreeTrial") + | #{translate("refresh_page_after_starting_free_trial")} + + .row + .col-md-10.col-md-offset-1 + ul.list-unstyled + li + i.fa.fa-check   + | Track any change, in real-time + + li + i.fa.fa-check   + | Review your peers' work + + li + i.fa.fa-check   + | Accept or reject each change individually + + + .row.text-center(ng-controller="FreeTrialModalController") + a.btn.btn-success( + href + ng-click="startFreeTrial('track-changes')" + ) Try it for free + + .modal-footer() + button.btn.btn-default( + ng-click="cancel()" + ) + span #{translate("close")} \ No newline at end of file diff --git a/services/web/public/coffee/ide/connection/ConnectionManager.coffee b/services/web/public/coffee/ide/connection/ConnectionManager.coffee index afbc656a02..a8696fc999 100644 --- a/services/web/public/coffee/ide/connection/ConnectionManager.coffee +++ b/services/web/public/coffee/ide/connection/ConnectionManager.coffee @@ -1,3 +1,4 @@ + define [], () -> ONEHOUR = 1000 * 60 * 60 class ConnectionManager diff --git a/services/web/public/coffee/ide/editor/EditorManager.coffee b/services/web/public/coffee/ide/editor/EditorManager.coffee index 3b6672fae8..e01a12cb8b 100644 --- a/services/web/public/coffee/ide/editor/EditorManager.coffee +++ b/services/web/public/coffee/ide/editor/EditorManager.coffee @@ -11,7 +11,7 @@ define [ open_doc_name: null opening: true trackChanges: false - wantTrackChanges: window.trackChangesEnabled + wantTrackChanges: false } @$scope.$on "entity:selected", (event, entity) => @@ -37,6 +37,10 @@ define [ @$scope.$watch "editor.wantTrackChanges", (value) => return if !value? @_syncTrackChangesState(@$scope.editor.sharejs_doc) + + @$scope.$watch "project.features.trackChanges", (trackChangesFeature) => + return if !trackChangesFeature? + @$scope.editor.wantTrackChanges = window.trackChangesEnabled and trackChangesFeature autoOpenDoc: () -> open_doc_id = diff --git a/services/web/public/coffee/ide/review-panel/ReviewPanelManager.coffee b/services/web/public/coffee/ide/review-panel/ReviewPanelManager.coffee index 2ad425b737..1565d6db73 100644 --- a/services/web/public/coffee/ide/review-panel/ReviewPanelManager.coffee +++ b/services/web/public/coffee/ide/review-panel/ReviewPanelManager.coffee @@ -1,5 +1,6 @@ define [ "ide/review-panel/controllers/ReviewPanelController" + "ide/review-panel/controllers/TrackChangesUpgradeModalController" "ide/review-panel/directives/reviewPanelSorted" "ide/review-panel/directives/reviewPanelToggle" "ide/review-panel/directives/changeEntry" diff --git a/services/web/public/coffee/ide/review-panel/controllers/ReviewPanelController.coffee b/services/web/public/coffee/ide/review-panel/controllers/ReviewPanelController.coffee index c36c881e3c..1358acfce6 100644 --- a/services/web/public/coffee/ide/review-panel/controllers/ReviewPanelController.coffee +++ b/services/web/public/coffee/ide/review-panel/controllers/ReviewPanelController.coffee @@ -4,7 +4,7 @@ define [ "ide/colors/ColorManager" "ide/review-panel/RangesTracker" ], (App, EventEmitter, ColorManager, RangesTracker) -> - App.controller "ReviewPanelController", ($scope, $element, ide, $timeout, $http, event_tracking) -> + App.controller "ReviewPanelController", ($scope, $element, ide, $timeout, $http, $modal, event_tracking) -> $reviewPanelEl = $element.find "#review-panel" $scope.SubViews = @@ -438,9 +438,12 @@ define [ ide.editorManager.openDocId(doc_id, { gotoOffset: entry.offset }) $scope.toggleTrackChanges = (value) -> - $scope.editor.wantTrackChanges = value - $http.post "/project/#{$scope.project_id}/track_changes", {_csrf: window.csrfToken, on: value} - event_tracking.sendMB "rp-trackchanges-toggle", { value } + if $scope.project.features.trackChanges + $scope.editor.wantTrackChanges = value + $http.post "/project/#{$scope.project_id}/track_changes", {_csrf: window.csrfToken, on: value} + event_tracking.sendMB "rp-trackchanges-toggle", { value } + else + $scope.openTrackChangesUpgradeModal() ide.socket.on "toggle-track-changes", (value) -> $scope.$apply () -> @@ -529,3 +532,10 @@ define [ hue: ColorManager.getHueForUserId(id) avatar_text: [user.first_name, user.last_name].filter((n) -> n?).map((n) -> n[0]).join "" } + + $scope.openTrackChangesUpgradeModal = () -> + $modal.open { + templateUrl: "trackChangesUpgradeModalTemplate" + controller: "TrackChangesUpgradeModalController" + scope: $scope.$new() + } diff --git a/services/web/public/coffee/ide/review-panel/controllers/TrackChangesUpgradeModalController.coffee b/services/web/public/coffee/ide/review-panel/controllers/TrackChangesUpgradeModalController.coffee new file mode 100644 index 0000000000..ae8c049f69 --- /dev/null +++ b/services/web/public/coffee/ide/review-panel/controllers/TrackChangesUpgradeModalController.coffee @@ -0,0 +1,11 @@ +define [ + "base" +], (App) -> + App.controller "TrackChangesUpgradeModalController", ($scope, $modalInstance) -> + $scope.cancel = () -> + $modalInstance.dismiss() + + $scope.startFreeTrial = (source) -> + ga?('send', 'event', 'subscription-funnel', 'upgraded-free-trial', source) + window.open("/user/subscription/new?planCode=student_free_trial_7_days") + $scope.startedFreeTrial = true \ No newline at end of file diff --git a/services/web/public/coffee/ide/review-panel/directives/reviewPanelToggle.coffee b/services/web/public/coffee/ide/review-panel/directives/reviewPanelToggle.coffee index 24b7070d07..2b5180dce6 100644 --- a/services/web/public/coffee/ide/review-panel/directives/reviewPanelToggle.coffee +++ b/services/web/public/coffee/ide/review-panel/directives/reviewPanelToggle.coffee @@ -6,16 +6,23 @@ define [ scope: onToggle: '=' ngModel: '=' + disabled: '=?' + onDisabledClick: '=?' link: (scope) -> + if !scope.disabled? + scope.disabled = false scope.onChange = (args...) -> scope.onToggle(scope.localModel) + scope.handleClick = () -> + if scope.disabled + scope.onDisabledClick() scope.localModel = scope.ngModel scope.$watch "ngModel", (value) -> scope.localModel = value template: """ -
- +
+
""" diff --git a/services/web/public/img/teasers/track-changes/teaser-track-changes.gif b/services/web/public/img/teasers/track-changes/teaser-track-changes.gif new file mode 100644 index 0000000000..00e02a29b0 Binary files /dev/null and b/services/web/public/img/teasers/track-changes/teaser-track-changes.gif differ diff --git a/services/web/public/img/teasers/track-changes/teaser-track-changes.mp4 b/services/web/public/img/teasers/track-changes/teaser-track-changes.mp4 new file mode 100644 index 0000000000..1f75a461ad Binary files /dev/null and b/services/web/public/img/teasers/track-changes/teaser-track-changes.mp4 differ diff --git a/services/web/public/stylesheets/app/editor/review-panel.less b/services/web/public/stylesheets/app/editor/review-panel.less index e39df0fbc6..0d4c0032e8 100644 --- a/services/web/public/stylesheets/app/editor/review-panel.less +++ b/services/web/public/stylesheets/app/editor/review-panel.less @@ -653,7 +653,7 @@ .rp-toggle { display: inline-block; vertical-align: middle; - margin-left: 5px; + padding-left: 5px; } .rp-toggle-hidden-input { display: none;