From 34ba6ee7dd50f6d35728eb9c675a558f494f392c Mon Sep 17 00:00:00 2001
From: Matt Mo <matt@montoyatech.com>
Date: Mon, 5 Oct 2020 18:23:18 -0700
Subject: [PATCH] Fixing issues and improving design.
---
chip-list.js | 9 ++++++++-
chip.js | 27 ++++++++++++++++++---------
2 files changed, 26 insertions(+), 10 deletions(-)
diff --git a/chip-list.js b/chip-list.js
index b783a21..7bf7e08 100644
--- a/chip-list.js
+++ b/chip-list.js
@@ -39,6 +39,8 @@ class ChipList extends IgniteElement {
flex-direction: column;
justify-content: center;
flex: 1;
+ flex-basis: auto;
+ flex-shrink: 1;
}
mt-chip-list > .input-container > .input {
@@ -61,6 +63,7 @@ class ChipList extends IgniteElement {
editing: false,
input: null,
searchBox: null,
+ search: true,
searching: false,
showSearchResults: true,
searchResults: [
@@ -72,6 +75,8 @@ class ChipList extends IgniteElement {
blurTimeout: null,
documentListener: null,
freeForm: true,
+ chipBackground: null,
+ chipColor: null
};
}
@@ -89,6 +94,8 @@ class ChipList extends IgniteElement {
new list(this.items, (item) => {
return new Chip()
.id(item.id)
+ .property("color", this.chipColor)
+ .property("background", this.chipBackground)
.property("onDelete", () => { this.items = this.items.filter(needle => needle != item); })
.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 (!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.showSearchResults = true;
} else if (this.items != null && this.items.length >= this.itemsMax && e.key !== "Backspace") {
diff --git a/chip.js b/chip.js
index c541fdb..45b6ad9 100644
--- a/chip.js
+++ b/chip.js
@@ -1,5 +1,5 @@
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 {
constructor() {
@@ -8,7 +8,9 @@ class Chip extends IgniteElement {
get properties() {
return {
- onDelete: () => { }
+ onDelete: () => { },
+ background: null,
+ color: null
}
}
@@ -22,17 +24,24 @@ class Chip extends IgniteElement {
padding-left: 0.6em;
padding-right: 0.6em;
}
+
+ mt-chip:hover {
+ filter: brightness(0.9);
+ }
`;
}
render() {
- return this.template.child(
- new slot(this),
- new button()
- .class("btn ml-1 p-0")
- .child(`<i class="fad fa-times-circle"></i>`)
- .onClick(() => this.onDelete())
- );
+ return this.template
+ .style("background", this.background)
+ .style("color", this.color)
+ .child(
+ new slot(this),
+ 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())
+ );
}
}