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

Relayout the onboarding, making a video slideshow.

Browse source
This commit is contained in:
Paulo Reis 2017-02-08 17:19:29 +00:00
parent 1ef5cc97fc
commit d137b00822
2 changed files with 118 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

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

@ -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);
}
}
}
.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;
}
}