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-wrap: wrap;
gap: 12px;
border: solid 0.15rem transparent;
border: solid 0.13rem #ced4da;
border-radius: 0.3rem;
padding: 0.4rem;
}
mt-chip-list.no-border {
border-color: transparent;
}
mt-chip-list:focus {
outline: none;
}
@ -29,13 +33,14 @@ class ChipList extends IgniteElement {
}
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;
}
mt-chip-list.placeholder {
border: solid 0.13rem #ced4da;
border-radius: 0.3rem;
color: rgba(0,0,0,0.6);
}
mt-chip-list > .input-container {
@ -79,13 +84,15 @@ class ChipList extends IgniteElement {
chipBackground: null,
chipColor: null,
changed: false,
border: false
};
}
render() {
return this.template
.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")
.onFocus((e) => this.onFocus())
.class([this.editing, this.items], (editing, items) => {

11
circular-progress.js
View File

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

18
editable-label.js
View File

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