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

Fixing issues and improving design.

Browse Source
This commit is contained in:
Matt Mo 2020-10-05 18:23:18 -07:00
parent ee2c5ae707
commit 34ba6ee7dd
2 changed files with 26 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
chip-list.js
View File

@ -39,6 +39,8 @@ class ChipList extends IgniteElement {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
flex: 1; flex: 1;
flex-basis: auto;
flex-shrink: 1;
} }
mt-chip-list > .input-container > .input { mt-chip-list > .input-container > .input {
@ -61,6 +63,7 @@ class ChipList extends IgniteElement {
editing: false, editing: false,
input: null, input: null,
searchBox: null, searchBox: null,
search: true,
searching: false, searching: false,
showSearchResults: true, showSearchResults: true,
searchResults: [ searchResults: [
@ -72,6 +75,8 @@ class ChipList extends IgniteElement {
blurTimeout: null, blurTimeout: null,
documentListener: null, documentListener: null,
freeForm: true, freeForm: true,
chipBackground: null,
chipColor: null
}; };
} }
@ -89,6 +94,8 @@ class ChipList extends IgniteElement {
new list(this.items, (item) => { new list(this.items, (item) => {
return new Chip() return new Chip()
.id(item.id) .id(item.id)
.property("color", this.chipColor)
.property("background", this.chipBackground)
.property("onDelete", () => { this.items = this.items.filter(needle => needle != item); }) .property("onDelete", () => { this.items = this.items.filter(needle => needle != item); })
.child(item.content); .child(item.content);
}), }),
@ -133,7 +140,7 @@ class ChipList extends IgniteElement {
} }
//If we are not searching and a key was pressed, open the search box. //If we are not searching and a key was pressed, open the search box.
if (!this.searching && (e.key !== "Backspace" || (e.key == "Backspace" && e.target.textContent.length > 1)) && (this.items == null || this.items.length < this.itemsMax)) { if (!this.searching && this.search && (e.key !== "Backspace" || (e.key == "Backspace" && e.target.textContent.length > 1)) && (this.items == null || this.items.length < this.itemsMax)) {
this.searching = true; this.searching = true;
this.showSearchResults = true; this.showSearchResults = true;
} else if (this.items != null && this.items.length >= this.itemsMax && e.key !== "Backspace") { } else if (this.items != null && this.items.length >= this.itemsMax && e.key !== "Backspace") {

27
chip.js
View File

@ -1,5 +1,5 @@
import { IgniteElement } from "../ignite-html/ignite-element.js"; import { IgniteElement } from "../ignite-html/ignite-element.js";
import { IgniteTemplate, slot, button } from "../ignite-html/ignite-template.js"; import { IgniteTemplate, slot, button, span } from "../ignite-html/ignite-template.js";
class Chip extends IgniteElement { class Chip extends IgniteElement {
constructor() { constructor() {
@ -8,7 +8,9 @@ class Chip extends IgniteElement {
get properties() { get properties() {
return { return {
onDelete: () => { } onDelete: () => { },
background: null,
color: null
} }
} }
@ -22,17 +24,24 @@ class Chip extends IgniteElement {
padding-left: 0.6em; padding-left: 0.6em;
padding-right: 0.6em; padding-right: 0.6em;
} }
mt-chip:hover {
filter: brightness(0.9);
}
`; `;
} }
render() { render() {
return this.template.child( return this.template
new slot(this), .style("background", this.background)
new button() .style("color", this.color)
.class("btn ml-1 p-0") .child(
.child(`<i class="fad fa-times-circle"></i>`) new slot(this),
.onClick(() => this.onDelete()) new button()
); .class("btn ml-1 p-0")
.child(`<i class="fad fa-times-circle" style="--fa-secondary-color: rgba(0,0,0,0.3); --fa-primary-color: rgba(0,0,0,0.5);"></i>`)
.onClick(() => this.onDelete())
);
} }
} }