feature-onboarding.pug 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. .feat-onboard(
  2. ng-controller="FeatureOnboardingController"
  3. ng-class="('feat-onboard-step' + onboarding.innerStep)"
  4. ng-if="!state.loading && ui.showCollabFeaturesOnboarding"
  5. ng-cloak
  6. stop-propagation="click"
  7. )
  8. a.feat-onboard-dismiss(
  9. href
  10. ng-click="dismiss();"
  11. ) ×
  12. .feat-onboard-wrapper
  13. h1.feat-onboard-title
  14. | Introducing 
  15. span.feat-onboard-highlight Commenting
  16. | &
  17. span.feat-onboard-highlight Track Changes
  18. p.feat-onboard-description
  19. span.feat-onboard-highlight Commenting
  20. | and
  21. span.feat-onboard-highlight Track Changes
  22. | will make it easier for you to work with peers in your documents.
  23. .feat-onboard-tutorial-wrapper
  24. button.btn.btn-primary.feat-onboard-nav-btn(
  25. ng-click="gotoPrevStep();"
  26. ng-disabled="onboarding.innerStep === 1;")
  27. i.fa.fa-arrow-left
  28. div(ng-show="onboarding.innerStep === 1;")
  29. video.feat-onboard-video(
  30. video-play-state="onboarding.innerStep === 1;"
  31. autoplay
  32. loop
  33. )
  34. source(src="/img/onboarding/review-panel/open-review.mp4", type="video/mp4")
  35. img(src="/img/onboarding/review-panel/open-review.gif")
  36. div(ng-show="onboarding.innerStep === 2;")
  37. video.feat-onboard-video(
  38. video-play-state="onboarding.innerStep === 2;"
  39. autoplay
  40. loop
  41. )
  42. source(src="/img/onboarding/review-panel/commenting.mp4", type="video/mp4")
  43. img(src="/img/onboarding/review-panel/commenting.gif")
  44. div(ng-show="onboarding.innerStep === 3;")
  45. video.feat-onboard-video(
  46. video-play-state="onboarding.innerStep === 3;"
  47. autoplay
  48. loop
  49. )
  50. source(src="/img/onboarding/review-panel/add-changes.mp4", type="video/mp4")
  51. img(src="/img/onboarding/review-panel/add-changes.gif")
  52. div(ng-show="onboarding.innerStep === 4;")
  53. video.feat-onboard-video(
  54. video-play-state="onboarding.innerStep === 4;"
  55. autoplay
  56. loop
  57. )
  58. source(src="/img/onboarding/review-panel/accept-changes.mp4", type="video/mp4")
  59. img(src="/img/onboarding/review-panel/accept-changes.gif")
  60. button.btn.btn-primary.feat-onboard-nav-btn(
  61. ng-click="gotoNextStep();"
  62. ng-disabled="onboarding.innerStep === onboarding.nSteps;")
  63. i.fa.fa-arrow-right
  64. div(ng-switch="onboarding.innerStep")
  65. .row(ng-switch-when="1")
  66. .col-xs-6
  67. h2.feat-onboard-adv-title Commenting
  68. p.feat-onboard-description Want to discuss specific parts of the text?
  69. p.feat-onboard-description Use our brand-new commenting system.
  70. .col-xs-6
  71. h2.feat-onboard-adv-title Track Changes
  72. p.feat-onboard-description See changes in your documents, live.
  73. p.feat-onboard-description Track, accept and reject changes individually.
  74. .row(ng-switch-when="2")
  75. .col-xs-12
  76. h2.feat-onboard-adv-title Commenting
  77. p.feat-onboard-description Just select a span of text and click on
  78. span.feat-onboard-highlight “Add comment”
  79. | .
  80. p.feat-onboard-description
  81. span.feat-onboard-highlight Comments
  82. | can be
  83. span.feat-onboard-highlight replied
  84. | to,
  85. span.feat-onboard-highlight resolved
  86. | and permanently
  87. span.feat-onboard-highlight deleted
  88. | .
  89. .row(ng-switch-when="3")
  90. .col-xs-12
  91. h2.feat-onboard-adv-title Track Changes
  92. p.feat-onboard-description
  93. | Let your peers know what you've been up to.
  94. p.feat-onboard-description
  95. | Click on the
  96. span.feat-onboard-highlight “Track Changes”
  97. | toggle to start marking your insertions, as well as your deletions.
  98. .row(ng-switch-when="4")
  99. .col-xs-12
  100. h2.feat-onboard-adv-title Track Changes
  101. p.feat-onboard-description Upon reviewing,
  102. span.feat-onboard-highlight changes
  103. | can be accepted or undone.
  104. p.feat-onboard-description
  105. | Click 
  106. span.feat-onboard-highlight “Accept”
  107. | or 
  108. span.feat-onboard-highlight “Reject”
  109. | to incorporate or discard an individual change.