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

Fixed styling issue with chip. Remove placeholder search results. Added the ability to change individual chip background and color within the item itself. And a few other styling tweaks.

Browse Source
This commit is contained in:
Matt Mo 2020-10-12 14:30:39 -07:00
parent e036ef1d5c
commit 3326133f7b
2 changed files with 9 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
chip-list.js
View File

@ -18,6 +18,7 @@ class ChipList extends IgniteElement {
border: solid 0.13rem transparent; border: solid 0.13rem transparent;
border-radius: 0.3rem; border-radius: 0.3rem;
padding: 0.2rem; padding: 0.2rem;
margin-left: calc((0.13rem + 0.2rem) * -1);
} }
mt-chip-list:hover { mt-chip-list:hover {
@ -66,10 +67,7 @@ class ChipList extends IgniteElement {
search: true, search: true,
searching: false, searching: false,
showSearchResults: true, showSearchResults: true,
searchResults: [ searchResults: null,
{ id: 502, corporation: "Starbucks", content: "Starbucks #1, Spokane WA" },
{ id: 503, corporation: "Starbucks", content: "Starbucks #2, Spokane WA" }
],
searchPlaceholder: "No results found.", searchPlaceholder: "No results found.",
searchFooter: null, searchFooter: null,
blurTimeout: null, blurTimeout: null,
@ -94,8 +92,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("color", item.chipColor ? item.chipColor : this.chipColor)
.property("background", this.chipBackground) .property("background", item.chipBackground ? item.chipBackground : 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);
}), }),
@ -206,7 +204,7 @@ class ChipList extends IgniteElement {
this.items = []; this.items = [];
} }
this.items.push({ content: item.content }); this.items.push(item);
this.searching = false; this.searching = false;
this.input.innerHTML = ""; this.input.innerHTML = "";
this.input.focus(); this.input.focus();

4
chip.js
View File

@ -23,6 +23,10 @@ class Chip extends IgniteElement {
padding-bottom: 0.3em; padding-bottom: 0.3em;
padding-left: 0.6em; padding-left: 0.6em;
padding-right: 0.6em; padding-right: 0.6em;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
} }
mt-chip:hover { mt-chip:hover {