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

18
editable-label.js
View File

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