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

Adjusted styling of chip list and editable label. Cleaned up CSS and simplified a few things.

Browse Source
This commit is contained in:
Matt Mo 2020-10-28 10:03:50 -07:00
parent 7217f2bd9e
commit cf13ee1466
2 changed files with 21 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
chip-list.js
View File

@ -15,10 +15,13 @@ class ChipList extends IgniteElement {
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
gap: 12px; gap: 12px;
border: solid 0.13rem transparent; border: solid 0.15rem transparent;
border-radius: 0.3rem; border-radius: 0.3rem;
padding: 0.2rem; padding: 0.4rem;
margin-left: calc((0.13rem + 0.2rem) * -1); }
mt-chip-list:focus {
outline: none;
} }
mt-chip-list:hover { mt-chip-list:hover {
@ -26,7 +29,7 @@ class ChipList extends IgniteElement {
} }
mt-chip-list.editing { mt-chip-list.editing {
border: solid 0.13rem #ced4da; border: solid 0.15rem rgba(0,0,0,0.1);
border-radius: 0.3rem; border-radius: 0.3rem;
} }
@ -144,6 +147,11 @@ class ChipList extends IgniteElement {
//will focus the next avaiable element. //will focus the next avaiable element.
if (e.key == "Tab") { if (e.key == "Tab") {
this.searching = false; this.searching = false;
if (this.stopEditingOnBlur) {
this.editing = false;
}
this.input.innerHTML = ""; this.input.innerHTML = "";
return; return;
} }
@ -192,8 +200,6 @@ class ChipList extends IgniteElement {
} }
onFocus() { onFocus() {
console.log("ChpiList, focus called");
if (!this.editing) { if (!this.editing) {
this.editing = true; this.editing = true;
this.input.focus(); this.input.focus();
@ -218,7 +224,6 @@ class ChipList extends IgniteElement {
} }
searchResultClick(item) { searchResultClick(item) {
console.log("Search result click");
if (this.items == null) { if (this.items == null) {
this.items = []; this.items = [];
} }

18
editable-label.js
View File

@ -9,26 +9,25 @@ 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;
}
mt-editable-label>div.focus {
border: solid 0.13rem #ced4da;
padding: 0.2rem;
border-radius: 0.3rem; border-radius: 0.3rem;
border: solid 0.15rem transparent;
padding: 0.4rem;
} }
mt-editable-label:hover { mt-editable-label:hover {
cursor: pointer; cursor: pointer;
} }
mt-editable-label>div { mt-editable-label>div:focus {
outline: unset; outline: none;
border: solid 0.13rem transparent;
padding: 0.2rem;
} }
mt-editable-label>div:empty:before { mt-editable-label>div:empty:before {
@ -70,6 +69,7 @@ class EditableLabel extends IgniteElement {
render() { render() {
return this.template return this.template
.attribute("tabindex", "0") .attribute("tabindex", "0")
.class(this.editing, value => value ? "editing" : null)
.onFocus(e => this.onFocus()) .onFocus(e => this.onFocus())
.child( .child(
new div() new div()