MontoyaTech/ignite-html-material
MontoyaTech/ignite-html-material
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added linear progress component. Fixed a z-index issues with the circular progress. Added better border support for editable labels and chip lists.

Browse Source
This commit is contained in:
Matt Mo 2020-12-01 11:49:01 -08:00
parent 0254076862
commit d24c50cacb
4 changed files with 118 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
chip-list.js
View File

@ -15,11 +15,15 @@ class ChipList extends IgniteElement {
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
gap: 12px; gap: 12px;
border: solid 0.15rem transparent; border: solid 0.13rem #ced4da;
border-radius: 0.3rem; border-radius: 0.3rem;
padding: 0.4rem; padding: 0.4rem;
} }
mt-chip-list.no-border {
border-color: transparent;
}
mt-chip-list:focus { mt-chip-list:focus {
outline: none; outline: none;
} }
@ -29,13 +33,14 @@ class ChipList extends IgniteElement {
} }
mt-chip-list.editing { mt-chip-list.editing {
border: solid 0.15rem rgba(0,0,0,0.1); border: solid 0.13rem rgba(0,0,0,0.1);
border-radius: 0.3rem; border-radius: 0.3rem;
} }
mt-chip-list.placeholder { mt-chip-list.placeholder {
border: solid 0.13rem #ced4da; border: solid 0.13rem #ced4da;
border-radius: 0.3rem; border-radius: 0.3rem;
color: rgba(0,0,0,0.6);
} }
mt-chip-list > .input-container { mt-chip-list > .input-container {
@ -79,13 +84,15 @@ class ChipList extends IgniteElement {
chipBackground: null, chipBackground: null,
chipColor: null, chipColor: null,
changed: false, changed: false,
border: false
}; };
} }
render() { render() {
return this.template return this.template
.style("position", "relative") .style("position", "relative")
.class(this.editing, value => { return value ? "editing" : null }) .class(this.border, value => value ? null : "no-border")
.class(this.editing, value => value ? "editing" : null)
.attribute("tabindex", "0") .attribute("tabindex", "0")
.onFocus((e) => this.onFocus()) .onFocus((e) => this.onFocus())
.class([this.editing, this.items], (editing, items) => { .class([this.editing, this.items], (editing, items) => {

11
circular-progress.js
View File

@ -10,6 +10,7 @@ class CircularProgress extends IgniteElement {
return ` return `
mt-circular-progress > div > svg { mt-circular-progress > div > svg {
position: absolute; position: absolute;
z-index: 999999;
left: calc(50% - (4em / 2)); left: calc(50% - (4em / 2));
top: calc(50% - (4em / 2)); top: calc(50% - (4em / 2));
animation: rotator 2s linear infinite; animation: rotator 2s linear infinite;
@ -83,11 +84,11 @@ class CircularProgress extends IgniteElement {
.show(this.loading) .show(this.loading)
.child( .child(
new circle() new circle()
.attribute("cx", "44") .attribute("cx", "44")
.attribute("cy", "44") .attribute("cy", "44")
.attribute("r", "20.2") .attribute("r", "20.2")
.attribute("fill", "none") .attribute("fill", "none")
.attribute("stroke-width", this.stroke) .attribute("stroke-width", this.stroke)
), ),
new slot(this) new slot(this)
) )

18
editable-label.js
View File

@ -9,19 +9,23 @@ class EditableLabel extends IgniteElement {
get styles() { get styles() {
return ` return `
mt-editable-label.editing {
border: solid 0.15rem rgba(0,0,0,0.1);
}
mt-editable-label { mt-editable-label {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
border-radius: 0.3rem; border-radius: 0.3rem;
border: solid 0.15rem transparent; border: solid 0.13rem #ced4da;
padding: 0.4rem; padding: 0.4rem;
} }
mt-editable-label.no-border {
border-color: transparent;
}
mt-editable-label.editing {
border: solid 0.13rem rgba(0,0,0,0.1);
}
mt-editable-label:hover { mt-editable-label:hover {
cursor: pointer; cursor: pointer;
} }
@ -59,13 +63,15 @@ class EditableLabel extends IgniteElement {
multiLine: false, multiLine: false,
saveButton: true, saveButton: true,
input: null, input: null,
placeholder: null placeholder: null,
border: false
}; };
} }
render() { render() {
return this.template return this.template
.attribute("tabindex", "0") .attribute("tabindex", "0")
.class(this.border, value => value ? null : "no-border")
.class(this.editing, value => value ? "editing" : null) .class(this.editing, value => value ? "editing" : null)
.onFocus(e => this.onFocus()) .onFocus(e => this.onFocus())
.child( .child(

90
linear-progress.js Normal file
View File

@ -0,0 +1,90 @@
import { IgniteElement } from "../ignite-html/ignite-element.js";
import { IgniteTemplate, slot, div, svg, circle } from "../ignite-html/ignite-template.js";
class LinearProgress extends IgniteElement {
constructor() {
super();
}
get styles() {
return `
mt-linear-progress {
display: flex;
align-items: center;
justify-content: center;
}
mt-linear-progress > div {
height: 0.3em;
width: 100%;
position: relative;
overflow: hidden;
background-color: #ddd;
}
mt-linear-progress > div > div {
display: block;
position: absolute;
content: "";
left: -30em;
width: 30em;
height: 0.3em;
background-color: #26B3FC;
animation: loading 2s linear infinite;
}
@keyframes loading {
from {
left: -30em;
width: 0%;
}
50% {
width: 30%;
}
70% {
width: 70%;
}
80% {
left: 50%;
}
95% {
left: 120%;
}
to {
left: 100%;
}
}
`;
}
get properties() {
return {
loading: true,
};
}
render() {
return this.template.child(
new div(
new div()
)
).show(this.loading)
}
}
class LinearProgressTemplate extends IgniteTemplate {
constructor(...children) {
super("mt-linear-progress", children);
}
}
customElements.define("mt-linear-progress", LinearProgress);
export {
LinearProgressTemplate as LinearProgress
}