design.estate/dees-catalog
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(core): update

Browse Source
This commit is contained in:
Philipp Kunz 2021-09-01 22:43:31 +02:00
parent f4aebcf4e6
commit 5890977009
2 changed files with 72 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
ts_web/elements/dees-stepper.ts
View File

@ -25,19 +25,26 @@ export class DeesStepper extends DeesElement {
}) })
public steps: IStep[] = [ public steps: IStep[] = [
{ {
title: 'Who are you?', title: 'Whats your name?',
content: html` content: html`
<dees-form> <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> </dees-form>
`, `,
}, },
{ {
title: 'Verification:', title: 'Whats your mobile number?',
content: html``, content: html``,
}, },
{ {
title: 'Verification:', title: 'Whats the verification code?',
content: html``,
},
{
title: 'Whats your new password?',
content: html``, content: html``,
}, },
{ {
@ -73,12 +80,13 @@ export class DeesStepper extends DeesElement {
.step { .step {
position: relative; position: relative;
pointer-events: none;
overflow: hidden; overflow: hidden;
transition: all 0.7s ease-out; transition: all 0.7s ease-in-out;
max-width: 600px; max-width: 500px;
min-height: 300px; min-height: 300px;
border-radius: 10px; border-radius: 3px;
background: ${cssManager.bdTheme('#ffffff', '#222')}; background: ${cssManager.bdTheme('#ffffff', '#181818')};
color: ${cssManager.bdTheme('#333', '#fff')}; color: ${cssManager.bdTheme('#333', '#fff')};
margin: auto; margin: auto;
margin-bottom: 20px; margin-bottom: 20px;
@ -87,27 +95,51 @@ export class DeesStepper extends DeesElement {
} }
.step.selected { .step.selected {
pointer-events: all;
filter: opacity(1); filter: opacity(1);
box-shadow: 0px 0px 5px #00000010; box-shadow: 0px 0px 5px #00000010;
} }
.step.hiddenStep {
filter: opacity(0);
}
.step .stepCounter { .step .stepCounter {
position: absolute; position: absolute;
top: 0px; top: 0px;
right: 0px; right: 0px;
padding: 10px 15px; padding: 10px 15px;
font-size: 12px; font-size: 12px;
border-bottom-left-radius: 10px; border-bottom-left-radius: 3px;
background: ${cssManager.bdTheme('#00000008', '#ffffff08')}; 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 { .step .title {
text-align: center; text-align: center;
padding: 30px; padding-top: 50px;
font-family: Roboto; font-family: Roboto;
font-size: 25px; font-size: 25px;
font-weight: 300; font-weight: 300;
} }
.step .content {
padding: 20px;
}
`, `,
]; ];
@ -116,9 +148,10 @@ export class DeesStepper extends DeesElement {
<div class="stepperContainer"> <div class="stepperContainer">
${this.steps.map( ${this.steps.map(
(stepArg) => (stepArg) =>
html` <div class="step ${stepArg === this.selectedStep ? 'selected' : null}"> html`<div class="step ${stepArg === this.selectedStep ? 'selected' : null} ${this.getIndexOfStep(stepArg) > this.getIndexOfStep(this.selectedStep) ? 'hiddenStep' : ''}">
<div class="title">${stepArg.title}</div> ${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="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 class="content">${stepArg.content}</div>
</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() { public firstUpdated() {
this.selectedStep = this.steps[0]; this.selectedStep = this.steps[0];
this.setScrollStatus(); this.setScrollStatus();
domtools.plugins.smartdelay.delayFor(2000).then(() => { domtools.plugins.smartdelay.delayFor(2000).then(() => {
this.selectedStep = this.steps[1]; this.goNext();
domtools.plugins.smartdelay.delayFor(2000).then(() => {
this.goBack();
})
}) })
} }
@ -148,14 +182,20 @@ export class DeesStepper extends DeesElement {
const stepperContainer: HTMLElement = this.shadowRoot.querySelector('.stepperContainer'); const stepperContainer: HTMLElement = this.shadowRoot.querySelector('.stepperContainer');
const firstStepElement: HTMLElement = this.shadowRoot.querySelector('.step'); const firstStepElement: HTMLElement = this.shadowRoot.querySelector('.step');
const selectedStepElement: HTMLElement = this.shadowRoot.querySelector('.selected'); 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('Setting scroll status');
console.log(selectedStepElement); console.log(selectedStepElement);
const scrollPosition = selectedStepElement.offsetTop - (stepperContainer.offsetHeight / 2) + (selectedStepElement.offsetHeight / 2) ; const scrollPosition = selectedStepElement.offsetTop - (stepperContainer.offsetHeight / 2) + (selectedStepElement.offsetHeight / 2) ;
console.log(scrollPosition); console.log(scrollPosition);
const domtoolsInstance = await domtools.DomTools.setupDomTools() const domtoolsInstance = await domtools.DomTools.setupDomTools()
if (!this.scroller) { 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); this.scroller.to(scrollPosition);
} }
@ -167,6 +207,6 @@ export class DeesStepper extends DeesElement {
public goNext() { public goNext() {
const currentIndex = this.steps.findIndex(stepArg => stepArg === this.selectedStep); const currentIndex = this.steps.findIndex(stepArg => stepArg === this.selectedStep);
this.selectedStep = this.steps[currentIndex - 1]; this.selectedStep = this.steps[currentIndex + 1];
} }
} }

22
ts_web/elements/dees-updater.ts
View File

@ -4,6 +4,7 @@ import * as domtools from '@designestate/dees-domtools';
import './dees-windowlayer'; import './dees-windowlayer';
import { css, cssManager } from '@designestate/dees-element';
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
@ -26,18 +27,17 @@ export class DeesUpdater extends LitElement {
domtools.elementBasic.setup(); domtools.elementBasic.setup();
} }
public render(): TemplateResult { public static styles = [
return html` cssManager.defaultStyles,
${domtools.elementBasic.styles} css`
<style> .modalContainer {
.modalContainer {
will-change: transform; will-change: transform;
position: relative; position: relative;
background: #222; background: ${cssManager.bdTheme('#eeeeeb', '#222')};
margin: auto; margin: auto;
max-width: 800px; max-width: 800px;
border-radius: 3px; border-radius: 3px;
border-top: 1px solid #333; border-top: 1px solid ${cssManager.bdTheme('#eeeeeb', '#333')};
} }
.headingContainer { .headingContainer {
@ -50,7 +50,7 @@ export class DeesUpdater extends LitElement {
h1 { h1 {
margin: none; margin: none;
font-size: 20px; font-size: 20px;
color: #fff; color: ${cssManager.bdTheme('#333', '#fff')};
margin-left: 20px; margin-left: 20px;
font-weight: normal; font-weight: normal;
} }
@ -59,7 +59,11 @@ export class DeesUpdater extends LitElement {
display: grid; display: grid;
grid-template-columns: 50% 50%; grid-template-columns: 50% 50%;
} }
</style> `
]
public render(): TemplateResult {
return html`
<dees-windowlayer @clicked="${this.windowLayerClicked}"> <dees-windowlayer @clicked="${this.windowLayerClicked}">
<div class="modalContainer"> <div class="modalContainer">
<div class="headingContainer"> <div class="headingContainer">