diff --git a/services/web/app/views/project/editor/feature-onboarding.pug b/services/web/app/views/project/editor/feature-onboarding.pug index 2ede426a3e..da05d7b541 100644 --- a/services/web/app/views/project/editor/feature-onboarding.pug +++ b/services/web/app/views/project/editor/feature-onboarding.pug @@ -1,85 +1,96 @@ .feat-onboard( ng-controller="FeatureOnboardingController" ng-class="('feat-onboard-step' + onboarding.innerStep)" + ng-if="!state.loading && ui.showCollabFeaturesOnboarding" ng-cloak ) .feat-onboard-wrapper - 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 - | 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/onboarding/review-panel/open-review.mp4", type="video/mp4") - img(src="/img/onboarding/review-panel/open-review.gif") - .row.feat-onboard-adv-wrapper + h1.feat-onboard-title + span.feat-onboard-title-name Commenting + |  &  + span.feat-onboard-title-name Track Changes + p.feat-onboard-description + | Collaboration features are finally here!  + p.feat-onboard-description + span.feat-onboard-highlight Commenting  + | and  + span.feat-onboard-highlight Track Changes  + | will make it easier for you to work with peers in your documents. + + .feat-onboard-tutorial-wrapper + button.btn.btn-primary.feat-onboard-nav-btn( + ng-click="gotoPrevStep();" + ng-disabled="onboarding.innerStep === 1;") + i.fa.fa-arrow-left + .feat-onboard-video-container(ng-switch="onboarding.innerStep") + div(ng-switch-when="1") + video.feat-onboard-video( + autoplay + loop + ) + source(src="/img/onboarding/review-panel/open-review.mp4", type="video/mp4") + img(src="/img/onboarding/review-panel/open-review.gif") + div(ng-switch-when="2") + 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") + div(ng-switch-when="3") + 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") + div(ng-switch-when="4") + 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") + button.btn.btn-primary.feat-onboard-nav-btn( + ng-click="gotoNextStep();" + ng-disabled="onboarding.innerStep === onboarding.nSteps;") + i.fa.fa-arrow-right + + div(ng-switch="onboarding.innerStep") + .row.feat-onboard-adv-wrapper(ng-switch-when="1") .col-xs-6 - h2.feat-onboard-adv-title - span.feat-onboard-adv-title-highlight Commenting + h2.feat-onboard-adv-title 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 - span.feat-onboard-adv-title-highlight Track Changes + h2.feat-onboard-adv-title 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="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 - 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="onboarding.innerStep = 3;") Next + .row.feat-onboard-adv-wrapper(ng-switch-when="2") + .col-xs-12 + h2.feat-onboard-adv-title Commenting + p + span.feat-onboard-highlight Commenting  + | is very easy. + p Just select a span of text and click on  + span.feat-onboard-highlight “Add comment” + | . + .row.feat-onboard-adv-wrapper(ng-switch-when="3") + .col-xs-12 + h2.feat-onboard-adv-title Track Changes + p + | Let your peers know what you've been up to. + p + | Click on the + span.feat-onboard-highlight “Track Changes”  + | toggle to start marking your insertions, as well as your deletions. - 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 + .row.feat-onboard-adv-wrapper(ng-switch-when="4") + .col-xs-12 + h2.feat-onboard-adv-title Track Changes + p + | Click  + span.feat-onboard-highlight “Accept”  + | or  + span.feat-onboard-highlight “Reject”  + | to keep or discard an individual change. diff --git a/services/web/public/stylesheets/app/editor/feature-onboarding.less b/services/web/public/stylesheets/app/editor/feature-onboarding.less index 03de8984a2..42d193bf8f 100644 --- a/services/web/public/stylesheets/app/editor/feature-onboarding.less +++ b/services/web/public/stylesheets/app/editor/feature-onboarding.less @@ -20,7 +20,6 @@ } .feat-onboard-wrapper { - width: @feat-onboard-wrapper-width; } .feat-onboard-title { color: #FFF; @@ -36,26 +35,22 @@ 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-highlight { + font-weight: bold; + white-space: nowrap; } .feat-onboard-adv-wrapper { text-align: left; } .feat-onboard-adv-title { + font-weight: bold; + white-space: nowrap; color: #FFF; font-size: 23px; + margin-top: 0; } - .feat-onboard-adv-title-highlight { - font-weight: bold; - } .feat-onboard-btn-wrapper { margin-top: 30px; @@ -64,4 +59,31 @@ > .btn { box-shadow: 0 0 70px 0 rgba(255, 255, 255, 0.3); } - } \ No newline at end of file + } + + .feat-onboard-tutorial-wrapper { + display: flex; + align-items: center; + padding: 30px 0; + } + .feat-onboard-video-container { + width: 618px; + margin: 0 30px; + } + .feat-onboard-video { + box-shadow: 0 0 70px 0 rgba(255, 255, 255, 0.3); + } + + .feat-onboard-nav-btn { + border-radius: 1em; + width: 2em; + height: 2em; + text-align: center; + padding: 0; + font-size: 1.3em; + line-height: 1em; + + &[disabled] { + opacity: 0.2; + } + } \ No newline at end of file