github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2025-04-07 13:02:15 +00:00
Code Issues Projects Releases Packages Wiki Activity

Basic onboarding tutorial for track-changes.

Browse source
This commit is contained in:
Paulo Reis 2017-02-07 15:07:26 +00:00
parent 73835f004d
commit d792230bf0
4 changed files with 91 additions and 84 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

111
services/web/app/views/project/editor/feature-onboarding.pug
View file

@ -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
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

2
services/web/app/views/project/editor/review-panel.pug
View file

@ -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"

35
services/web/public/coffee/ide/FeatureOnboardingController.coffee
View file

@ -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
# $scope.$on "$destroy", () ->
# $(document).off "keypress", handleKeypress

27
services/web/public/stylesheets/app/editor/feature-onboarding.less
View file

@ -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 {