diff --git a/ts_web/elements/dees-button.ts b/ts_web/elements/dees-button.ts
index 665269d..76cc795 100644
--- a/ts_web/elements/dees-button.ts
+++ b/ts_web/elements/dees-button.ts
@@ -19,7 +19,17 @@ declare global {
@customElement('dees-button')
export class DeesButton extends DeesElement {
- public static demo = () => html`This is a slotted Text`;
+ public static demo = () => html`
+ This is a slotted Text
+
Highlighted
+ This is discreete button
+ This is a disabled button
+ This is a slotted Text
+ Normal Status
+ Pending Status
+ Success Status
+ Error Status
+ `;
@property()
public text: string;
@@ -32,12 +42,21 @@ export class DeesButton extends DeesElement {
})
public disabled = false;
- @property()
+ @property({
+ type: Boolean
+ })
public isHidden = false;
- @property()
+ @property({
+ type: String
+ })
public type: 'normal' | 'highlighted' | 'discreet' | 'big' = 'normal';
+ @property({
+ type: String
+ })
+ public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
+
constructor() {
super();
}
@@ -54,10 +73,12 @@ export class DeesButton extends DeesElement {
}
.button {
+ position: relative;
transition: all 0.2s ease;
font-size: 14px;
- display: block;
- text-align: center;
+ display: flex;
+ justify-content: center;
+ align-items: center;
background: ${cssManager.bdTheme('#eee', '#333')};
box-shadow: ${cssManager.bdTheme('0px 0px 5px rgba(0,0,0,0.1)', 'none')};
border-top: ${cssManager.bdTheme('1px solid #eee', '1px solid #444')};
@@ -67,6 +88,7 @@ export class DeesButton extends DeesElement {
min-width: 100px;
user-select: none;
color: ${cssManager.bdTheme('#333', ' #ccc')};
+ max-width: 500px;
}
.button:hover {
@@ -91,41 +113,71 @@ export class DeesButton extends DeesElement {
.button.highlighted {
background: #e4002b;
+ border: none;
+ color: #fff;
+ }
+
+ .button.highlighted:hover {
+ background: #b50021;
+ border: none;
color: #fff;
}
.button.discreet {
background: none;
border: 1px solid #9b9b9e;
- color: #000;
+ color: ${cssManager.bdTheme('#000', '#fff')};
}
.button.discreet:hover {
- background: rgba(0, 0, 0, 0.1);
+ background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
}
- .hidden {
+ .button.hidden {
display: none;
}
- .big {
- display: inline-block;
+ .button.big {
+ width: 300px;
line-height: 48px;
font-size: 16px;
padding: 0px 48px;
margin-top: 36px;
}
+
+ .button.pending {
+ background: #0277bd70;
+ color: #fff;
+ }
+
+ .button.success {
+ background: #8BC34A70;
+ color: #fff;
+ }
+
+ .button.error {
+ background: #E64A1970;
+ color: #fff;
+ }
+
+ dees-spinner {
+ position: absolute;
+ left: 10px;
+ }
`,
];
public render(): TemplateResult {
return html`
`;
}
diff --git a/ts_web/elements/dees-form-submit.ts b/ts_web/elements/dees-form-submit.ts
index fd926e8..72873a5 100644
--- a/ts_web/elements/dees-form-submit.ts
+++ b/ts_web/elements/dees-form-submit.ts
@@ -28,6 +28,11 @@ export class DeesFormSubmit extends DeesElement {
})
public text: string;
+ @property({
+ type: String
+ })
+ public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
+
constructor() {
super();
}
@@ -36,7 +41,7 @@ export class DeesFormSubmit extends DeesElement {
public render() {
return html`
-
+
${this.text ? this.text : html``}
`;
diff --git a/ts_web/elements/dees-form.ts b/ts_web/elements/dees-form.ts
index 8c0d8c3..800cece 100644
--- a/ts_web/elements/dees-form.ts
+++ b/ts_web/elements/dees-form.ts
@@ -20,7 +20,7 @@ export class DeesForm extends DeesElement {
public static demo = () => html`
{
const form: DeesForm = eventArg.currentTarget;
- form.setStatus('freeze', 'authenticating...');
+ form.setStatus('pending', 'authenticating...');
await domtools.plugins.smartdelay.delayFor(1000);
form.setStatus('success', 'authenticated!');
}}>
@@ -116,13 +116,21 @@ export class DeesForm extends DeesElement {
console.log(valueObject);
}
- public setStatus (visualStateArg: 'normal' | 'freeze' | 'error' | 'success', textStateArg: string) {
+ public setStatus (visualStateArg: 'normal' | 'pending' | 'error' | 'success', textStateArg: string) {
const inputChildren = this.getFormChildren();
const submitButton = this.getSubmitButton();
switch(visualStateArg) {
- case 'freeze':
+ case 'pending':
submitButton.disabled = true;
+ submitButton.status = 'pending';
+ for (const inputChild of inputChildren) {
+ inputChild.disabled = true;
+ }
+ break;
+ case 'success':
+ submitButton.disabled = true;
+ submitButton.status = 'success';
for (const inputChild of inputChildren) {
inputChild.disabled = true;
}
diff --git a/ts_web/elements/dees-input-checkbox.ts b/ts_web/elements/dees-input-checkbox.ts
index 5d3be65..1928f14 100644
--- a/ts_web/elements/dees-input-checkbox.ts
+++ b/ts_web/elements/dees-input-checkbox.ts
@@ -107,7 +107,7 @@ export class DeesInputCheckbox extends DeesElement {
border: 1px dashed ${cssManager.bdTheme('#666666', '#666666')};
}
- .checkmark {
+ .checkbox .checkmark {
display: inline-block;
width: 22px;
height: 22px;
@@ -116,16 +116,16 @@ export class DeesInputCheckbox extends DeesElement {
transform: rotate(45deg);
}
- .checkmark_stem {
+ .checkbox .checkmark_stem {
position: absolute;
width: 3px;
height: 9px;
- background-color: #ccc;
+ background-color: #fff;
left: 11px;
top: 6px;
}
- .checkmark_kick {
+ .checkbox .checkmark_kick {
position: absolute;
width: 3px;
height: 3px;
@@ -134,6 +134,10 @@ export class DeesInputCheckbox extends DeesElement {
top: 12px;
}
+ .checkbox.disabled .checkmark_stem, .checkbox.disabled .checkmark_kick {
+ background-color: ${cssManager.bdTheme('#333', '#fff')};
+ }
+
img {
padding: 4px;
}
diff --git a/ts_web/elements/dees-spinner.ts b/ts_web/elements/dees-spinner.ts
new file mode 100644
index 0000000..65785f1
--- /dev/null
+++ b/ts_web/elements/dees-spinner.ts
@@ -0,0 +1,141 @@
+import {
+ customElement,
+ html,
+ DeesElement,
+ property,
+ TemplateResult,
+ cssManager,
+ css,
+ unsafeCSS,
+} from '@designestate/dees-element';
+
+import * as domtools from '@designestate/dees-domtools';
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'dees-spinner': DeesSpinner;
+ }
+}
+
+@customElement('dees-spinner')
+export class DeesSpinner extends DeesElement {
+ public static demo = () => html`
+
+
+
+ `;
+
+ @property({
+ type: Number,
+ })
+ public size = 20;
+
+ @property()
+ public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
+
+ constructor() {
+ super();
+ }
+
+ public static styles = [
+ cssManager.defaultStyles,
+ css`
+ :host {
+ display: block;
+ }
+
+ #loading {
+ transition: all 0.3s;
+ display: flex;
+ justify-content: center;
+ align-content: center;
+ background: #8bc34a00;
+ border: 3px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.3)')};
+ border-radius: 50%;
+ border-top-color: ${cssManager.bdTheme('#333', '#fff')};
+ animation: spin 1s ease-in-out infinite;
+ -webkit-animation: spin 1s ease-in-out infinite;
+ }
+
+ #loading.success {
+ border: 0px solid rgba(255, 255, 255, 0);
+ background: #8bc34a;
+ border-radius: 50%;
+ animation: none;
+ -webkit-animation: none;
+ }
+
+ #loading.error {
+ border: 0px solid rgba(255, 255, 255, 0);
+ background: #e64a19;
+ border-radius: 50%;
+ animation: none;
+ -webkit-animation: none;
+ }
+
+ @keyframes spin {
+ to {
+ -webkit-transform: rotate(360deg);
+ }
+ }
+ @-webkit-keyframes spin {
+ to {
+ -webkit-transform: rotate(360deg);
+ }
+ }
+
+ #loading .checkmark {
+ display: inline-block;
+ width: 22px;
+ height: 22px;
+ -ms-transform: rotate(45deg); /* IE 9 */
+ -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
+ transform: rotate(45deg);
+ }
+
+ #loading .checkmark_stem {
+ position: absolute;
+ width: 3px;
+ height: 9px;
+ background-color: #fff;
+ left: 9px;
+ top: 5px;
+ }
+
+ #loading .checkmark_kick {
+ position: absolute;
+ width: 3px;
+ height: 3px;
+ background-color: #fff;
+ left: 6px;
+ top: 11px;
+ }
+
+ #loading.disabled .checkmark_stem,
+ #loading.disabled .checkmark_kick {
+ background-color: ${cssManager.bdTheme('#333', '#fff')};
+ }
+ `,
+ ];
+
+ render() {
+ return html`
+
+
+ ${this.status === 'success' || this.status === 'error'
+ ? html`
+
+
+
+
+ `
+ : null}
+
+ `;
+ }
+}
diff --git a/ts_web/elements/index.ts b/ts_web/elements/index.ts
index ad89699..cc8b2f1 100644
--- a/ts_web/elements/index.ts
+++ b/ts_web/elements/index.ts
@@ -8,6 +8,7 @@ export * from './dees-input-fileupload';
export * from './dees-input-quantityselector';
export * from './dees-input-radio';
export * from './dees-input-text';
+export * from './dees-spinner';
export * from './dees-toast';
export * from './dees-updater';
export * from './dees-windowlayer';