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

Added truncate option to editable label to auto truncate text when not editing. Also fixed a few styling issues.

Browse Source
This commit is contained in:
Matt Mo 2021-01-08 19:58:33 -08:00
parent c403c1cb40
commit 5686e4fd75
1 changed files with 14 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
editable-label.js
View File

@ -13,6 +13,7 @@ class EditableLabel extends IgniteElement {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-between;
border-radius: 0.3rem; border-radius: 0.3rem;
border: solid 0.13rem #ced4da; border: solid 0.13rem #ced4da;
padding: 0.4rem; padding: 0.4rem;
@ -26,10 +27,21 @@ class EditableLabel extends IgniteElement {
border: solid 0.13rem rgba(0,0,0,0.1); border: solid 0.13rem rgba(0,0,0,0.1);
} }
mt-editable-label.truncate > div {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
mt-editable-label:hover { mt-editable-label:hover {
cursor: pointer; cursor: pointer;
} }
mt-editable-label>div {
flex: 1;
word-break: break-word;
}
mt-editable-label>div:focus { mt-editable-label>div:focus {
outline: none; outline: none;
} }
@ -61,6 +73,7 @@ class EditableLabel extends IgniteElement {
editing: false, editing: false,
value: null, value: null,
multiLine: false, multiLine: false,
truncate: false,
saveButton: true, saveButton: true,
input: null, input: null,
placeholder: null, placeholder: null,
@ -73,6 +86,7 @@ class EditableLabel extends IgniteElement {
.attribute("tabindex", "0") .attribute("tabindex", "0")
.class(this.border, value => value ? null : "no-border") .class(this.border, value => value ? null : "no-border")
.class(this.editing, value => value ? "editing" : null) .class(this.editing, value => value ? "editing" : null)
.class([this.editing, this.truncate], (editing, truncate) => !editing && truncate ? "truncate" : null)
.onFocus(e => this.onFocus()) .onFocus(e => this.onFocus())
.child( .child(
new div() new div()