10905 layer onboarding #11532
10905 layer onboarding #11532
Conversation
| &.has-timeSeries--animated { | ||
| height: calc(100% - (64 + 151) * 1px); | ||
| } | ||
| &.has-widgets { |
There was a problem hiding this comment.
Nesting should be no greater than 3, but was 4
| } | ||
| &.has-timeSeries--animated { | ||
| height: calc(100% - (64 + 151) * 1px); | ||
| } |
| &.has-timeSeries--animated { | ||
| height: calc(100% - (64 + 151) * 1px); // 151 - XL animated | ||
| } | ||
| &.has-widgets { |
There was a problem hiding this comment.
Nesting should be no greater than 3, but was 4
| } | ||
| &.has-timeSeries--animated { | ||
| height: calc(100% - (64 + 151) * 1px); // 151 - XL animated | ||
| } |
| &.has-timeSeries { | ||
| height: 151px; | ||
| } | ||
| &.has-timeSeries--animated { |
There was a problem hiding this comment.
Nesting should be no greater than 3, but was 4
| .LayerOnboarding-padBottom { | ||
| height: 16px; | ||
|
|
||
| &.has-timeSeries { |
There was a problem hiding this comment.
Nesting should be no greater than 3, but was 4
| &.has-timeSeries { | ||
| height: calc(100% - (64 + 151) * 1px); // 151 - XXXL time serie | ||
| } | ||
| &.has-timeSeries--animated { |
There was a problem hiding this comment.
Nesting should be no greater than 3, but was 4
| .LayerOnboarding-padTop { | ||
| height: calc(100% - (64 + 16) * 1px); | ||
|
|
||
| &.has-timeSeries { |
There was a problem hiding this comment.
Nesting should be no greater than 3, but was 4
| &.has-timeSeries--animated { | ||
| height: calc(100% - (64 + 151) * 1px); | ||
| } | ||
| &.has-widgets { |
There was a problem hiding this comment.
Nesting should be no greater than 3, but was 4
| } | ||
| &.has-timeSeries--animated { | ||
| height: calc(100% - (64 + 151) * 1px); | ||
| } |
| &.has-timeSeries--animated { | ||
| height: calc(100% - (64 + 151) * 1px); // 151 - XL animated | ||
| } | ||
| &.has-widgets { |
There was a problem hiding this comment.
Nesting should be no greater than 3, but was 4
| } | ||
| &.has-timeSeries--animated { | ||
| height: calc(100% - (64 + 151) * 1px); // 151 - XL animated | ||
| } |
| &.has-timeSeries { | ||
| height: 151px; | ||
| } | ||
| &.has-timeSeries--animated { |
There was a problem hiding this comment.
Nesting should be no greater than 3, but was 4
| .LayerOnboarding-padBottom { | ||
| height: 16px; | ||
|
|
||
| &.has-timeSeries { |
There was a problem hiding this comment.
Nesting should be no greater than 3, but was 4
| &.has-timeSeries { | ||
| height: calc(100% - (64 + 151) * 1px); // 151 - XXXL time serie | ||
| } | ||
| &.has-timeSeries--animated { |
There was a problem hiding this comment.
Nesting should be no greater than 3, but was 4
| .LayerOnboarding-padTop { | ||
| height: calc(100% - (64 + 16) * 1px); | ||
|
|
||
| &.has-timeSeries { |
There was a problem hiding this comment.
Nesting should be no greater than 3, but was 4
| } | ||
|
|
||
| .LayerOnboarding--data .LayerOnboarding-pads--right { | ||
| width: 136px; |
There was a problem hiding this comment.
Properties should be ordered display, width
| .LayerOnboarding-padMiddle, | ||
| .LayerOnboarding-padBottom { | ||
| @include transition(height, 300ms, ease-in-out); | ||
| width: 100%; |
There was a problem hiding this comment.
Properties should be ordered display, width
| } | ||
|
|
||
| .LayerOnboarding-widgetsOverlay { | ||
| width: 16px; |
There was a problem hiding this comment.
Properties should be ordered display, width
| width: $sBigDescriptionWidth; | ||
| } | ||
|
|
||
| .LayerOnboarding-description.is-step4{ |
There was a problem hiding this comment.
Opening curly brace { should be preceded by one space
| margin-bottom: 16px; | ||
| } | ||
|
|
||
| .LayerOnboarding-headerText.is-step4{ |
There was a problem hiding this comment.
Opening curly brace { should be preceded by one space
|
|
||
| .LayerOnboarding-headerText { | ||
| width: $sBigDescriptionWidth; | ||
| color: #FFF; |
There was a problem hiding this comment.
Properties should be ordered width, margin-top, margin-bottom, color, font-size, line-height
|
|
||
| .LayerOnboarding-body.is-step4 { | ||
| right: 100%; | ||
| left: auto; |
There was a problem hiding this comment.
Properties should be ordered right, bottom, left
…nto 10905-layer-onboarding
…nto 10905-layer-onboarding
| } | ||
| }, this); | ||
| AnalysesService.addAnalysis(layerId); | ||
| // this._onboardings.destroy(); |
There was a problem hiding this comment.
Ouch, I've forgotten to remove this commented code please 💋 .
|
@ivanmalagon spotted this just after creating a map, I'll show you tomorrow
|
| numberOfSteps: 4, | ||
| modifier: '--data' | ||
| })); | ||
| if (opts.numberOfWidgets === void 0) { |
There was a problem hiding this comment.
Are not we using the helper for the required options anymore?
Implements #10905
This PR enables a user onboarding flow when entering the layer edition.
Minimum Viable Acceptance
There are three distinct onboardings when entering layer edition:
There are plenty of combinations per each one.
Data tab
There are four steps in the onboarding process. The last step is the tricky one since its location depends of the map state.
The different cases to tests are:
And per each one there are three responsive breakpoints that modify page elements sizes.
Known issues
The buttons for geometry edition and dataset switching doesn't place themselves in the right position in the smaller breakpoint. The onboarding highlights the right place where they should be placed once this issue is fixed.
Analysis tab
Only one step. Test that the button triggers an analysis creation.
Style tab
Two different scenarios.
Points geometry: in this scenario test all different aggregations (simple, heatmap, hexabins, ...) since there are different sizes for the menu options that reflect on this onboarding.
Lines or polygons geometry: one less step than in points onboarding.
The onboarding was already checked and accepted by the one and only @arianaescobar and @noguerol will take a look also, as far as I know.
Warning
If you check
Don't show this againyou won't see the onboarding (that's how it works 😉 ) so test those checks as the last step.If you accidentally check them and you need to trigger the onboarding againg, ping me.