-
Notifications
You must be signed in to change notification settings - Fork 653
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
10905 layer onboarding #11532
Merged
Merged
10905 layer onboarding #11532
Changes from 20 commits
Commits
Show all changes
58 commits
Select commit
Hold shift + click to select a range
a4f3d0b
WIP: data onboarding first draft
ivanmalagon 302d2a2
Merge branch 'master' into 10905-layer-onboarding
matallo a4682f1
onboarding: add analysis, and style WIP
matallo ac2d635
onboarding: layer WIP
matallo 3ebf3ec
Refactored onboarding launchers and views
ivanmalagon 78beaa8
All 4 onboardings working in desktop breakpoint with no widgets
ivanmalagon 024685a
Data onboarding step 4 correctly placed in all cases
ivanmalagon fa6d331
Connected with notification API
ivanmalagon 3b42918
Aestethic changes: header line height and button spacing
ivanmalagon e152241
Refactored launcher
ivanmalagon 1dbb363
Linter
ivanmalagon 315fb98
Tests boilerplate
ivanmalagon 1964a9c
Design acceptance changes I
ivanmalagon db65d31
Style onboarding for different aggregations
ivanmalagon c065e36
Refactor geometry highlight
ivanmalagon f385812
Design acceptance minor fixes
ivanmalagon 0c14472
Preparing stuff
ivanmalagon 3a9274c
Previous tests increased and passing
ivanmalagon 7f5d142
Test are ongoing
ivanmalagon b7924ed
Lint Eastwood
ivanmalagon 172e44f
Tests finished
ivanmalagon 6cb3b94
Deleted unnecessary test
ivanmalagon d2771ca
Test if this fixes some Hound violations
ivanmalagon 23d8700
Hound
ivanmalagon e0a5408
Hound II
ivanmalagon 867064f
Hound III
ivanmalagon 4ecb627
Rollback DI
ivanmalagon d4bcc5a
Merge from master
ivanmalagon 10ca363
Fixing tests
ivanmalagon b19e453
Reverting a dev process
ivanmalagon b17cf18
Updated NEWS.md
ivanmalagon 5c80642
Update package.json
ivanmalagon da5f502
Creating analyses-service
xavijam 0a04fe2
Merge branch '10905-layer-onboarding' of github.com:CartoDB/cartodb i…
xavijam 1c87ec5
CR feedback applied
xavijam 1979d04
Merge branch 'master' into 10905-layer-onboarding
matallo 020ddb5
Merge branch '10905-layer-onboarding' of github.com:CartoDB/cartodb i…
matallo 9091cf0
step
matallo 39a17f9
initbinds
matallo c76c65a
Conflicts solved
xavijam c56afc9
tuberia
matallo ccb40f7
Merge branch '10905-layer-onboarding' of github.com:CartoDB/cartodb i…
matallo 4ac0f09
onboardingNotification
matallo d4a3486
onboardingNotification
matallo 502f6d4
🔥
matallo 6734a69
tests wip
matallo a059a1e
tests wip
matallo 54019fa
Merge branch 'master' into 10905-layer-onboarding
matallo 5350db7
fix tests, analyses service tests pending
matallo 09e90fa
fix tests
matallo 3785341
fix tests
matallo dba44f4
fix onboarding
matallo fa6ae96
Merge branch 'master' into 10905-layer-onboarding
matallo de5957e
requiredopts
matallo 3389505
Merge branch 'master' into 10905-layer-onboarding
matallo 0f866fb
Changed texts
xavijam 8761b66
Onboarding fixing problem
xavijam 8de889a
Merge branch 'master' into 10905-layer-onboarding
xavijam File filter
Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2,4 +2,5 @@ | |
* Vars for editor 3 app | ||
*/ | ||
|
||
$reponsiveWidth: 1200px; | ||
$sViewport-xxl: 1600px; | ||
$sViewport-xl: 1200px; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Empty file.
23 changes: 23 additions & 0 deletions
23
...ts/cartodb3/components/onboardings/layers/analysis-onboarding/analysis-onboarding-view.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
var _ = require('underscore'); | ||
var $ = require('jquery'); | ||
var OnboardingView = require('../layer-onboarding-view'); | ||
var template = require('./analysis-onboarding.tpl'); | ||
|
||
module.exports = OnboardingView.extend({ | ||
events: OnboardingView.extendEvents({ | ||
'click .js-add-analysis': '_onAddAnalysisClicked' | ||
}), | ||
|
||
initialize: function (opts) { | ||
OnboardingView.prototype.initialize.call(this, _.extend(opts, { | ||
template: template, | ||
numberOfSteps: 1, | ||
modifier: '--analysis' | ||
})); | ||
}, | ||
|
||
_onAddAnalysisClicked: function () { | ||
this.clean(); | ||
$('.js-add-analysis').click(); | ||
} | ||
}); |
52 changes: 52 additions & 0 deletions
52
...cripts/cartodb3/components/onboardings/layers/analysis-onboarding/analysis-onboarding.tpl
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,52 @@ | ||
<div class="LayerOnboarding-toolbarOverlay"></div> | ||
|
||
<div class="LayerOnboarding-pads LayerOnboarding-pads--left"> | ||
<div class="LayerOnboarding-padTop"></div> | ||
<div class="LayerOnboarding-padMiddle"></div> | ||
</div> | ||
|
||
<div class="LayerOnboarding-contentWrapper LayerOnboarding-contentWrapper--analysis is-step0 js-step"> | ||
<div class="LayerOnboarding-contentBody LayerOnboarding-contentBody--analysis is-step0 js-step"> | ||
<div class="Onboarding-body"> | ||
<p class="CDB-Text LayerOnboarding-headerTitle"><%- _t('analysis-onboarding.title')%></p> | ||
|
||
<p class="CDB-Text Onboarding-headerDescription"><%- _t('analysis-onboarding.description')%></p> | ||
|
||
<ul class="Onboarding-list"> | ||
<li class="Onboarding-listItem"> | ||
<p class="CDB-Text LayerOnboarding-description"><%- _t('analysis-onboarding.description-list.item1')%></p> | ||
</li> | ||
|
||
<li class="Onboarding-listItem"> | ||
<p class="CDB-Text LayerOnboarding-description"><%= _t('analysis-onboarding.description-list.item2')%></p> | ||
</li> | ||
|
||
<li class="Onboarding-listItem"> | ||
<p class="CDB-Text LayerOnboarding-description"><%- _t('analysis-onboarding.description-list.item3')%></p> | ||
</li> | ||
|
||
<li class="Onboarding-listItem"> | ||
<p class="CDB-Text LayerOnboarding-description"><%- _t('analysis-onboarding.description-list.item4')%></p> | ||
</li> | ||
</ul> | ||
</div> | ||
|
||
<div class="LayerOnboarding-footer"> | ||
<div class="LayerOnboarding-footerButtons"> | ||
<button class="CDB-Button CDB-Button--secondary CDB-Button--white CDB-Button--big Onboarding-footer--marginRight js-close"> | ||
<span class="CDB-Button-Text CDB-Text u-upperCase is-semibold CDB-Size-medium"><%- _t('analysis-onboarding.done')%></span> | ||
</button> | ||
|
||
<button class="CDB-Button CDB-Button--primary CDB-Button--big js-add-analysis"> | ||
<span class="CDB-Button-Text CDB-Text u-upperCase is-semibold CDB-Size-medium"><%- _t('analysis-onboarding.add-analysis')%></span> | ||
</button> | ||
</div> | ||
|
||
<div class="u-iBlock"> | ||
<input class="CDB-Checkbox js-forget" type="checkbox" id="forget-me" name="forget-me" value="true"> | ||
<span class="u-iBlock CDB-Checkbox-face"></span> | ||
<label for="forget-me" class="Onboarding-forgetLabel Checkbox-label CDB-Text CDB-Size-small u-whiteTextColor is-light u-lSpace"><%- _t('analyses-onboarding.never-show-message') %></label> | ||
</div> | ||
</div> | ||
</div> | ||
</div> |
36 changes: 36 additions & 0 deletions
36
...avascripts/cartodb3/components/onboardings/layers/data-onboarding/data-onboarding-view.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
var _ = require('underscore'); | ||
var OnboardingView = require('../layer-onboarding-view'); | ||
var template = require('./data-onboarding.tpl'); | ||
|
||
module.exports = OnboardingView.extend({ | ||
|
||
initialize: function (opts) { | ||
OnboardingView.prototype.initialize.call(this, _.extend(opts, { | ||
template: template, | ||
numberOfSteps: 4, | ||
modifier: '--data' | ||
})); | ||
if (opts.numberOfWidgets === void 0) { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Are not we using the helper for the required options anymore? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
throw new Error('numberOfWidgets is required.'); | ||
} | ||
if (opts.hasTimeSeries === void 0) { | ||
throw new Error('hasTimeSeries is required.'); | ||
} | ||
if (opts.hasAnimatedTimeSeries === void 0) { | ||
throw new Error('hasAnimatedTimeSeries is required.'); | ||
} | ||
this._hasTimeSeries = opts.hasTimeSeries; | ||
this._hasAnimatedTimeSeries = opts.hasAnimatedTimeSeries; | ||
this._hasSidebarWidgets = (opts.hasTimeSeries && opts.numberOfWidgets > 1) || (!opts.hasTimeSeries && opts.numberOfWidgets > 0); | ||
}, | ||
|
||
render: function () { | ||
this.$el.html(this._template({ | ||
hasSidebarWidgets: this._hasSidebarWidgets, | ||
hasTimeSeries: this._hasTimeSeries, | ||
hasAnimatedTimeSeries: this._hasAnimatedTimeSeries | ||
})); | ||
|
||
return this; | ||
} | ||
}); |
108 changes: 108 additions & 0 deletions
108
...re/javascripts/cartodb3/components/onboardings/layers/data-onboarding/data-onboarding.tpl
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,108 @@ | ||
<div class="LayerOnboarding-toolbarOverlay"></div> | ||
|
||
<div class="LayerOnboarding-pads LayerOnboarding-pads--left"> | ||
<div class="LayerOnboarding-padTop"></div> | ||
<div class="LayerOnboarding-padMiddle"> | ||
<div class="LayerOnboarding-body is-step0 js-step"> | ||
<div class="LayerOnboarding-step is-step1"> | ||
<p class="CDB-Text LayerOnboarding-headerTitle">1/4</p> | ||
<p class="CDB-Text LayerOnboarding-headerText"><%- _t('data-onboarding.layer-options.title')%></p> | ||
<p class="CDB-Text LayerOnboarding-description"> | ||
<%- _t('data-onboarding.layer-options.description')%> | ||
</p> | ||
</div> | ||
<div class="LayerOnboarding-step is-step2"> | ||
<p class="CDB-Text LayerOnboarding-headerTitle">2/4</p> | ||
<p class="CDB-Text LayerOnboarding-headerText"><%- _t('data-onboarding.data-tab.title')%></p> | ||
<p class="CDB-Text LayerOnboarding-description"> | ||
<%- _t('data-onboarding.data-tab.description')%> | ||
</p> | ||
</div> | ||
|
||
<div class="LayerOnboarding-step is-step3"> | ||
<p class="CDB-Text LayerOnboarding-headerTitle">3/4</p> | ||
<p class="CDB-Text LayerOnboarding-headerText"><%- _t('data-onboarding.sql-editor.title')%></p> | ||
<p class="CDB-Text LayerOnboarding-description"> | ||
<%- _t('data-onboarding.sql-editor.description')%> | ||
</p> | ||
</div> | ||
|
||
<div class="LayerOnboarding-footer is-step1 is-step2 is-step3"> | ||
<div class="LayerOnboarding-footerButtons"> | ||
<button class="CDB-Button CDB-Button--secondary CDB-Button--white CDB-Button--big Onboarding-footer--marginRight js-close"> | ||
<span class="CDB-Button-Text CDB-Text u-upperCase is-semibold CDB-Size-medium"><%- _t('data-onboarding.exit')%></span> | ||
</button> | ||
|
||
<button class="CDB-Button CDB-Button--primary CDB-Button--big js-next"> | ||
<span class="CDB-Button-Text CDB-Text u-upperCase is-semibold CDB-Size-medium"><%- _t('data-onboarding.next')%></span> | ||
</button> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
<div class="LayerOnboarding-padBottom"></div> | ||
</div> | ||
|
||
<div class="LayerOnboarding-contentWrapper is-step0 js-step"> | ||
<div class="LayerOnboarding-contentBody is-step0 js-step"> | ||
<div class="LayerOnboarding-header is-step0"> | ||
<p class="CDB-Text LayerOnboarding-headerTitle"><%- _t('data-onboarding.title')%></p> | ||
|
||
<p class="CDB-Text LayerOnboarding-description"> | ||
<%= _t('data-onboarding.description')%> | ||
</p> | ||
</div> | ||
|
||
<div class="LayerOnboarding-footer is-step0"> | ||
<div class="LayerOnboarding-footerButtons"> | ||
<button class="CDB-Button CDB-Button--secondary CDB-Button--white CDB-Button--big Onboarding-footer--marginRight js-start"> | ||
<span class="CDB-Button-Text CDB-Text u-upperCase is-semibold CDB-Size-medium"><%- _t('data-onboarding.take-tour')%></span> | ||
</button> | ||
|
||
<button class="CDB-Button CDB-Button--primary CDB-Button--big js-close"> | ||
<span class="CDB-Button-Text CDB-Text u-upperCase is-semibold CDB-Size-medium"><%- _t('data-onboarding.edit-layer')%></span> | ||
</button> | ||
</div> | ||
|
||
<div class="u-iBlock is-step1"> | ||
<input class="CDB-Checkbox js-forget" type="checkbox" id="forget-me" name="forget-me" value="true"> | ||
<span class="u-iBlock CDB-Checkbox-face"></span> | ||
<label for="forget-me" class="BuilderOnboarding-forgetLabel Checkbox-label CDB-Text CDB-Size-small u-whiteTextColor is-light u-lSpace"><%- _t('style-onboarding.never-show-message') %></label> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<div class="LayerOnboarding-pads LayerOnboarding-pads--right is-step0 js-step"> | ||
<div class="LayerOnboarding-padTop | ||
<% if (hasTimeSeries) { %>has-timeSeries <% if (hasAnimatedTimeSeries) { %>has-timeSeries--animated<% } %><% } %> | ||
<% if (hasSidebarWidgets) { %>has-widgets<% } %> | ||
"></div> | ||
<div class="LayerOnboarding-padMiddle"> | ||
<div class="LayerOnboarding-body is-step0 js-step"> | ||
<div class="LayerOnboarding-step is-step4"> | ||
<p class="CDB-Text LayerOnboarding-headerTitle">4/4</p> | ||
<p class="CDB-Text LayerOnboarding-headerText is-step4"><%- _t('data-onboarding.add-geometry.title')%></p> | ||
<p class="CDB-Text LayerOnboarding-description is-step4"> | ||
<%- _t('data-onboarding.add-geometry.description')%> | ||
</p> | ||
</div> | ||
|
||
<div class="LayerOnboarding-footer is-step4"> | ||
<div class="LayerOnboarding-footerButtons"> | ||
<button class="CDB-Button CDB-Button--primary CDB-Button--big js-close"> | ||
<span class="CDB-Button-Text CDB-Text u-upperCase is-semibold CDB-Size-medium"><%- _t('data-onboarding.add-geometry.edit-layer') %></span> | ||
</button> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
<div class="LayerOnboarding-padBottom | ||
<% if (hasTimeSeries) { %>has-timeSeries <% if (hasAnimatedTimeSeries) { %>has-timeSeries--animated<% } %><% } %> | ||
<% if (hasSidebarWidgets) { %>has-widgets<% } %> | ||
"></div> | ||
</div> | ||
|
||
<div class="LayerOnboarding-widgetsOverlay js-step | ||
<% if (hasSidebarWidgets) { %>has-widgets<% } %> | ||
"></div> |
5 changes: 5 additions & 0 deletions
5
lib/assets/core/javascripts/cartodb3/components/onboardings/layers/layer-onboarding-keys.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
module.exports = { | ||
data: 'layer-data-onboarding', | ||
analyses: 'layer-analysis-onboarding', | ||
style: 'layer-style-onboarding' | ||
}; |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is not super clean, could we find another way to trigger this action?.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Already started with @matallo in a solution, pending tests and validation.