diff --git a/ts_web/elements/dees-stepper.ts b/ts_web/elements/dees-stepper.ts
index 6a8f17c..bf16855 100644
--- a/ts_web/elements/dees-stepper.ts
+++ b/ts_web/elements/dees-stepper.ts
@@ -25,19 +25,26 @@ export class DeesStepper extends DeesElement {
})
public steps: IStep[] = [
{
- title: 'Who are you?',
+ title: 'Whats your name?',
content: html`
-
+
+
+
+ Next
`,
},
{
- title: 'Verification:',
+ title: 'Whats your mobile number?',
content: html``,
},
{
- title: 'Verification:',
+ title: 'Whats the verification code?',
+ content: html``,
+ },
+ {
+ title: 'Whats your new password?',
content: html``,
},
{
@@ -73,12 +80,13 @@ export class DeesStepper extends DeesElement {
.step {
position: relative;
+ pointer-events: none;
overflow: hidden;
- transition: all 0.7s ease-out;
- max-width: 600px;
+ transition: all 0.7s ease-in-out;
+ max-width: 500px;
min-height: 300px;
- border-radius: 10px;
- background: ${cssManager.bdTheme('#ffffff', '#222')};
+ border-radius: 3px;
+ background: ${cssManager.bdTheme('#ffffff', '#181818')};
color: ${cssManager.bdTheme('#333', '#fff')};
margin: auto;
margin-bottom: 20px;
@@ -87,27 +95,51 @@ export class DeesStepper extends DeesElement {
}
.step.selected {
+ pointer-events: all;
filter: opacity(1);
box-shadow: 0px 0px 5px #00000010;
}
+ .step.hiddenStep {
+ filter: opacity(0);
+ }
+
.step .stepCounter {
position: absolute;
top: 0px;
right: 0px;
padding: 10px 15px;
font-size: 12px;
- border-bottom-left-radius: 10px;
+ border-bottom-left-radius: 3px;
background: ${cssManager.bdTheme('#00000008', '#ffffff08')};
}
+ .step .goBack {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ padding: 10px 15px;
+ font-size: 12px;
+ border-bottom-right-radius: 3px;
+ background: ${cssManager.bdTheme('#00000008', '#ffffff08')};
+ cursor: pointer;
+ }
+
+ .step .goBack:hover {
+ background: ${cssManager.bdTheme('#00000012', '#ffffff12')};
+ }
+
.step .title {
text-align: center;
- padding: 30px;
+ padding-top: 50px;
font-family: Roboto;
font-size: 25px;
font-weight: 300;
}
+
+ .step .content {
+ padding: 20px;
+ }
`,
];
@@ -116,9 +148,10 @@ export class DeesStepper extends DeesElement {
${this.steps.map(
(stepArg) =>
- html`
-
${stepArg.title}
+ html`
+ ${this.getIndexOfStep(stepArg) > 0 ? html`
<- go to previous step
` : ``}
Step ${this.steps.findIndex(elementArg => elementArg === stepArg) + 1} of ${this.steps.length}
+
${stepArg.title}
${stepArg.content}
`
)}
@@ -126,14 +159,15 @@ export class DeesStepper extends DeesElement {
`;
}
+ public getIndexOfStep = (stepArg: IStep): number => {
+ return this.steps.findIndex(stepArg2 => stepArg === stepArg2 )
+ }
+
public firstUpdated() {
this.selectedStep = this.steps[0];
this.setScrollStatus();
domtools.plugins.smartdelay.delayFor(2000).then(() => {
- this.selectedStep = this.steps[1];
- domtools.plugins.smartdelay.delayFor(2000).then(() => {
- this.goBack();
- })
+ this.goNext();
})
}
@@ -148,14 +182,20 @@ export class DeesStepper extends DeesElement {
const stepperContainer: HTMLElement = this.shadowRoot.querySelector('.stepperContainer');
const firstStepElement: HTMLElement = this.shadowRoot.querySelector('.step');
const selectedStepElement: HTMLElement = this.shadowRoot.querySelector('.selected');
- stepperContainer.style.paddingTop = `${(stepperContainer.offsetHeight / 2) - (selectedStepElement.offsetHeight / 2)}px`;
+ if (!stepperContainer.style.paddingTop) {
+ stepperContainer.style.paddingTop = `${(stepperContainer.offsetHeight / 2) - (selectedStepElement.offsetHeight / 2)}px`;
+ }
console.log('Setting scroll status');
console.log(selectedStepElement);
const scrollPosition = selectedStepElement.offsetTop - (stepperContainer.offsetHeight / 2) + (selectedStepElement.offsetHeight / 2) ;
console.log(scrollPosition);
const domtoolsInstance = await domtools.DomTools.setupDomTools()
if (!this.scroller) {
- this.scroller = new domtools.plugins.sweetScroll({}, stepperContainer);
+ this.scroller = new domtools.plugins.sweetScroll({
+ vertical: true,
+ horizontal: false,
+ easing: 'easeInOutQuint'
+ }, stepperContainer);
}
this.scroller.to(scrollPosition);
}
@@ -167,6 +207,6 @@ export class DeesStepper extends DeesElement {
public goNext() {
const currentIndex = this.steps.findIndex(stepArg => stepArg === this.selectedStep);
- this.selectedStep = this.steps[currentIndex - 1];
+ this.selectedStep = this.steps[currentIndex + 1];
}
}
diff --git a/ts_web/elements/dees-updater.ts b/ts_web/elements/dees-updater.ts
index 3e5a48e..9621af7 100644
--- a/ts_web/elements/dees-updater.ts
+++ b/ts_web/elements/dees-updater.ts
@@ -4,6 +4,7 @@ import * as domtools from '@designestate/dees-domtools';
import './dees-windowlayer';
+import { css, cssManager } from '@designestate/dees-element';
declare global {
interface HTMLElementTagNameMap {
@@ -26,18 +27,17 @@ export class DeesUpdater extends LitElement {
domtools.elementBasic.setup();
}
- public render(): TemplateResult {
- return html`
- ${domtools.elementBasic.styles}
-
+ `
+ ]
+
+ public render(): TemplateResult {
+ return html`