fix(core): update
This commit is contained in:
parent
f4aebcf4e6
commit
5890977009
@ -25,19 +25,26 @@ export class DeesStepper extends DeesElement {
|
||||
})
|
||||
public steps: IStep[] = [
|
||||
{
|
||||
title: 'Who are you?',
|
||||
title: 'Whats your name?',
|
||||
content: html`
|
||||
<dees-form>
|
||||
<dees-input-text label="Your Email" value="hello@something.com" disabled></dees-input-text>
|
||||
<dees-input-text key="email" label="Your Email" value="hello@something.com" disabled></dees-input-text>
|
||||
<dees-input-text key="firstName" required label="Vorname"></dees-input-text>
|
||||
<dees-input-text key="lastName" required label="Nachname"></dees-input-text>
|
||||
<dees-form-submit>Next</dees-form-submit>
|
||||
</dees-form>
|
||||
`,
|
||||
},
|
||||
{
|
||||
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 {
|
||||
<div class="stepperContainer">
|
||||
${this.steps.map(
|
||||
(stepArg) =>
|
||||
html` <div class="step ${stepArg === this.selectedStep ? 'selected' : null}">
|
||||
<div class="title">${stepArg.title}</div>
|
||||
html`<div class="step ${stepArg === this.selectedStep ? 'selected' : null} ${this.getIndexOfStep(stepArg) > this.getIndexOfStep(this.selectedStep) ? 'hiddenStep' : ''}">
|
||||
${this.getIndexOfStep(stepArg) > 0 ? html`<div class="goBack" @click=${this.goBack}><- go to previous step</div>` : ``}
|
||||
<div class="stepCounter">Step ${this.steps.findIndex(elementArg => elementArg === stepArg) + 1} of ${this.steps.length} </div>
|
||||
<div class="title">${stepArg.title}</div>
|
||||
<div class="content">${stepArg.content}</div>
|
||||
</div> `
|
||||
)}
|
||||
@ -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];
|
||||
}
|
||||
}
|
||||
|
||||
@ -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}
|
||||
<style>
|
||||
.modalContainer {
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
.modalContainer {
|
||||
will-change: transform;
|
||||
position: relative;
|
||||
background: #222;
|
||||
background: ${cssManager.bdTheme('#eeeeeb', '#222')};
|
||||
margin: auto;
|
||||
max-width: 800px;
|
||||
border-radius: 3px;
|
||||
border-top: 1px solid #333;
|
||||
border-top: 1px solid ${cssManager.bdTheme('#eeeeeb', '#333')};
|
||||
}
|
||||
|
||||
.headingContainer {
|
||||
@ -50,7 +50,7 @@ export class DeesUpdater extends LitElement {
|
||||
h1 {
|
||||
margin: none;
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
color: ${cssManager.bdTheme('#333', '#fff')};
|
||||
margin-left: 20px;
|
||||
font-weight: normal;
|
||||
}
|
||||
@ -59,7 +59,11 @@ export class DeesUpdater extends LitElement {
|
||||
display: grid;
|
||||
grid-template-columns: 50% 50%;
|
||||
}
|
||||
</style>
|
||||
`
|
||||
]
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<dees-windowlayer @clicked="${this.windowLayerClicked}">
|
||||
<div class="modalContainer">
|
||||
<div class="headingContainer">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user