From d792230bf03b42594503a96fc64aa305bfe691a6 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Tue, 7 Feb 2017 15:07:26 +0000 Subject: [PATCH] Basic onboarding tutorial for track-changes. --- .../project/editor/feature-onboarding.pug | 111 +++++++++++------- .../app/views/project/editor/review-panel.pug | 2 +- .../ide/FeatureOnboardingController.coffee | 35 ++---- .../app/editor/feature-onboarding.less | 27 ++--- 4 files changed, 91 insertions(+), 84 deletions(-) diff --git a/services/web/app/views/project/editor/feature-onboarding.pug b/services/web/app/views/project/editor/feature-onboarding.pug index 1a8d769088..2ede426a3e 100644 --- a/services/web/app/views/project/editor/feature-onboarding.pug +++ b/services/web/app/views/project/editor/feature-onboarding.pug @@ -1,54 +1,85 @@ .feat-onboard( ng-controller="FeatureOnboardingController" - ng-class="('feat-onboard-step' + innerStep)" - ng-if="!state.loading && ui.showCodeCheckerOnboarding" + ng-class="('feat-onboard-step' + onboarding.innerStep)" ng-cloak ) .feat-onboard-wrapper - h1.feat-onboard-title - | Introducing  - span.feat-onboard-title-name Code check - div(ng-if="innerStep === 1;") + div(ng-if="onboarding.innerStep === 1;") + h1.feat-onboard-title + span.feat-onboard-title-name Commenting + |  &  + span.feat-onboard-title-name Track Changes p.feat-onboard-description - span.feat-onboard-description-name Code check  - | will highlight potential problems in your LaTeX code, allowing you to handle errors earlier and become more productive. + | Collaboration features are finally here!  + p.feat-onboard-description + span.feat-onboard-description-name Commenting  + | and  + span.feat-onboard-description-name Track Changes  + | will make it easier for you to work with peers in your documents. .row video.feat-onboard-video(autoplay, loop) - source(src="/img/teasers/code-checker/code-checker.mp4", type="video/mp4") - img(src="/img/teasers/code-checker/code-checker.gif") + source(src="/img/onboarding/review-panel/open-review.mp4", type="video/mp4") + img(src="/img/onboarding/review-panel/open-review.gif") .row.feat-onboard-adv-wrapper - .col-xs-4 + .col-xs-6 h2.feat-onboard-adv-title - | Missing  - span.feat-onboard-adv-title-highlight brackets - p Forgot to place a closing bracket? We'll warn you. - .col-xs-4 + span.feat-onboard-adv-title-highlight Commenting + p Want to discuss specific parts of the text? + p Use our brand-new commenting system. + .col-xs-6 h2.feat-onboard-adv-title - | Unclosed  - span.feat-onboard-adv-title-highlight environments - p - | Know when you are missing an  - code \end{...} - |  command. - .col-xs-4 - h2.feat-onboard-adv-title - | Incorrect  - span.feat-onboard-adv-title-highlight nesting - p - | Order matters. Get notified when you use an  - code \end{...} - |   too soon. + span.feat-onboard-adv-title-highlight Track Changes + p See changes in your documents, live. + p Track, accept and reject changes individually. .feat-onboard-btn-wrapper - button.btn.btn-primary(ng-click="turnCodeCheckOn();") Yes, turn Code check on - .feat-onboard-btn-wrapper - button.btn.btn-default(ng-click="turnCodeCheckOff();") No, disable it for now - div(ng-if="innerStep === 2;") + button.btn.btn-primary(ng-click="onboarding.innerStep = 2;") Next + //- .feat-onboard-btn-wrapper + //- button.btn.btn-default(ng-click="turnCodeCheckOff();") No, disable it for now + + div(ng-if="onboarding.innerStep === 2;") + h1.feat-onboard-title + span.feat-onboard-title-name Commenting p.feat-onboard-description - | Remember: you can always turn  - span.feat-onboard-description-name Code check  - em on  - | or  - em off  - |, in the settings menu. + span.feat-onboard-description-name Commenting  + | is very easy. + p.feat-onboard-description Just select a span of text and click on  + span.feat-onboard-description-name “Add comment” + | . + .row + video.feat-onboard-video(autoplay, loop) + source(src="/img/onboarding/review-panel/commenting.mp4", type="video/mp4") + img(src="/img/onboarding/review-panel/commenting.gif") .feat-onboard-btn-wrapper - button.btn.btn-primary(ng-click="dismiss();") OK, got it \ No newline at end of file + button.btn.btn-primary(ng-click="onboarding.innerStep = 3;") Next + + div(ng-if="onboarding.innerStep === 3;") + h1.feat-onboard-title + span.feat-onboard-title-name Track Changes + p.feat-onboard-description + | Let your peers know what you've been up to. + p.feat-onboard-description + | Click on the + span.feat-onboard-description-name “Track Changes”  + | toggle to start marking your insertions, as well as your deletions. + .row + video.feat-onboard-video(autoplay, loop) + source(src="/img/onboarding/review-panel/add-changes.mp4", type="video/mp4") + img(src="/img/onboarding/review-panel/add-changes.gif") + .feat-onboard-btn-wrapper + button.btn.btn-primary(ng-click="onboarding.innerStep = 4;") Next + + div(ng-if="onboarding.innerStep === 4;") + h1.feat-onboard-title + span.feat-onboard-title-name Track Changes + p.feat-onboard-description + | Click  + span.feat-onboard-description-name “Accept”  + | or  + span.feat-onboard-description-name “Reject”  + | to keep or discard an individual change. + .row + video.feat-onboard-video(autoplay, loop) + source(src="/img/onboarding/review-panel/accept-changes.mp4", type="video/mp4") + img(src="/img/onboarding/review-panel/accept-changes.gif") + .feat-onboard-btn-wrapper + button.btn.btn-primary(ng-click="onboarding.innerStep = 4;") Next \ No newline at end of file diff --git a/services/web/app/views/project/editor/review-panel.pug b/services/web/app/views/project/editor/review-panel.pug index 43a854b591..17d351be65 100644 --- a/services/web/app/views/project/editor/review-panel.pug +++ b/services/web/app/views/project/editor/review-panel.pug @@ -6,7 +6,7 @@ ng-class="{ 'rp-track-changes-indicator-on-dark' : darkTheme }" ) Track changes is strong on - + .review-panel-toolbar resolved-comments-dropdown( class="rp-flex-block" diff --git a/services/web/public/coffee/ide/FeatureOnboardingController.coffee b/services/web/public/coffee/ide/FeatureOnboardingController.coffee index a5687cb42f..1dc326dcbd 100644 --- a/services/web/public/coffee/ide/FeatureOnboardingController.coffee +++ b/services/web/public/coffee/ide/FeatureOnboardingController.coffee @@ -2,34 +2,21 @@ define [ "base" ], (App) -> App.controller "FeatureOnboardingController", ($scope, settings) -> - $scope.innerStep = 1 - - $scope.turnCodeCheckOn = () -> - settings.saveSettings({ syntaxValidation: true }) - $scope.settings.syntaxValidation = true - navToInnerStep2() - - $scope.turnCodeCheckOff = () -> - settings.saveSettings({ syntaxValidation: false }) - $scope.settings.syntaxValidation = false - navToInnerStep2() + $scope.onboarding = + innerStep: 1 $scope.dismiss = () -> $scope.ui.leftMenuShown = false $scope.ui.showCodeCheckerOnboarding = false - navToInnerStep2 = () -> - $scope.innerStep = 2 - $scope.ui.leftMenuShown = true + # handleKeypress = (e) -> + # if e.keyCode == 13 + # if $scope.innerStep == 1 + # $scope.turnCodeCheckOn() + # else + # $scope.dismiss() - handleKeypress = (e) -> - if e.keyCode == 13 - if $scope.innerStep == 1 - $scope.turnCodeCheckOn() - else - $scope.dismiss() + # $(document).on "keypress", handleKeypress - $(document).on "keypress", handleKeypress - - $scope.$on "$destroy", () -> - $(document).off "keypress", handleKeypress \ No newline at end of file + # $scope.$on "$destroy", () -> + # $(document).off "keypress", handleKeypress \ No newline at end of file diff --git a/services/web/public/stylesheets/app/editor/feature-onboarding.less b/services/web/public/stylesheets/app/editor/feature-onboarding.less index fa815f1d8d..03de8984a2 100644 --- a/services/web/public/stylesheets/app/editor/feature-onboarding.less +++ b/services/web/public/stylesheets/app/editor/feature-onboarding.less @@ -1,5 +1,5 @@ -@feat-onboard-wrapper-width: 820px; -@feat-onboard-max-text-width: 750px; +@feat-onboard-wrapper-width: 750px; +@feat-onboard-max-text-width: 700px; .feat-onboard { position: fixed; @@ -10,56 +10,44 @@ display: flex; justify-content: center; align-items: center; - background-image: linear-gradient(rgba(0, 0, 0, .85), rgba(0, 0, 0, .85)); + background-color: rgba(0, 0, 0, .85); background-repeat: no-repeat; background-position-x: 0; color: #FFF; text-align: center; z-index: 102; - transition: background-position ease-in-out @left-menu-animation-duration; overflow: auto; } -.feat-onboard-step2 { - background-position-x: @left-menu-width; - - ~ #left-menu { - pointer-events: none; - - .code-check-setting { - box-shadow: 0 0 300px 0 #000; - } - } -} .feat-onboard-wrapper { width: @feat-onboard-wrapper-width; } .feat-onboard-title { - color: @brand-primary; + color: #FFF; margin-bottom: 40px; } .feat-onboard-title-name { - color: #FFF; font-weight: bold; } .feat-onboard-description { max-width: @feat-onboard-max-text-width; - margin: 0 auto 30px; + margin: 0 auto 5px; padding: 0 80px; } .feat-onboard-description-name { font-weight: bold; + white-space: nowrap; } .feat-onboard-video { + margin-top: 30px; box-shadow: 0 0 70px 0 rgba(255, 255, 255, 0.3); } .feat-onboard-adv-wrapper { text-align: left; - margin-bottom: 30px; } .feat-onboard-adv-title { color: #FFF; @@ -70,6 +58,7 @@ } .feat-onboard-btn-wrapper { + margin-top: 30px; margin-bottom: 10px; > .btn {