diff --git a/src/cba-list/cba-list.js b/src/cba-list/cba-list.js index 9d47c98..11a20e3 100644 --- a/src/cba-list/cba-list.js +++ b/src/cba-list/cba-list.js @@ -4,12 +4,19 @@ import ConstructableCSS from '../ConstructableCSS'; const constructableCSS = new ConstructableCSS(shadowCSS); +/** + * @typedef {object} Alert - alert object. + * @property {string} [text] - alert text. + * @property {"error"} [type] - alert type. + */ + /** * @typedef {object} ListSubItem * @property {string} id - Unique id of the item. * @property {string} text - Text to be displayed. * @property {boolean} selected - Is the item selected. * @property {boolean} editable - Is the item editable. + * @property {Alert} alert - highlight row. */ /** @@ -20,8 +27,15 @@ const constructableCSS = new ConstructableCSS(shadowCSS); * @property {ListSubItem["selected"]} selected - Is the item selected. * @property {ListSubItem["editable"]} editable - Is the item editable. * @property {ListSubItem[]} subItems - Sub items of the item. + * @property {Alert} alert - highlight row. */ +const infoIcon = html` + + + +`; + export class List extends HTMLElement { constructor() @@ -151,7 +165,8 @@ export class List extends HTMLElement const row = target.closest(".row"); if (row) { - this.selectRow(row.parentElement.dataset.id); + const listId = row.closest("[data-id]").dataset.id + this.selectRow(listId); } }); @@ -584,13 +599,21 @@ export class List extends HTMLElement _render() { this.container.dataset.subitems = this.hasSubtiems; + /** + * @param {ListItem|ListSubItem} item - list item. + */ const createRow = (item) => { const {text, selected, editable = false} = item; const classes = ["row"]; if (selected) classes.push("highlight"); - const row = html`${text}`; + let alertTmpl = ""; + if (item.alert) + { + alertTmpl = html`${infoIcon}`; + } + const row = html`
${text}${alertTmpl}
`; const infoText = this._getText(item, this.tooltipText); if (infoText) { diff --git a/src/cba-list/shadow.css b/src/cba-list/shadow.css index 457cc19..fca1686 100644 --- a/src/cba-list/shadow.css +++ b/src/cba-list/shadow.css @@ -117,20 +117,21 @@ ul li .row { - display: block; + display: flex; + align-items: center; border: solid 1px var(--color-border); border-top-width: 0; border-left-width: 0; border-right-width: 0; font-weight: 300; padding-left: 5px; - overflow: hidden; } -li .row:not([contenteditable="true"]) +li .row .text:not([contenteditable="true"]) { white-space: pre; text-overflow: ellipsis; + overflow: hidden; } li .row:not(.highlight):hover @@ -142,12 +143,25 @@ li .row:not(.highlight):hover cursor: pointer; } +li .alert +{ + position: absolute; + right: 5px; + top: 0px; + cursor: pointer; +} + +li .alert svg g +{ + fill: rgb(255, 131, 131); +} + ul li { position: relative; } -li > .row.highlight +li .row.highlight { background-color: var(--color-selected); cursor: pointer; diff --git a/src/cba-table/shadow.css b/src/cba-table/shadow.css index be3f190..2384aec 100644 --- a/src/cba-table/shadow.css +++ b/src/cba-table/shadow.css @@ -112,18 +112,14 @@ tbody position: relative; } -tbody tr.highlight +tbody tr.highlight, +tbody tr.alert { background-color: var(--color-selected); cursor: pointer; outline: none; } -tbody tr.alert -{ - background-color: var(--color-alert); -} - tbody tr { outline: none; diff --git a/src/cba-tooltip/cba-tooltip.js b/src/cba-tooltip/cba-tooltip.js index b34d4cc..8c78aaa 100644 --- a/src/cba-tooltip/cba-tooltip.js +++ b/src/cba-tooltip/cba-tooltip.js @@ -85,14 +85,16 @@ class List extends HTMLElement _setDirection() { const clientRect = this.getBoundingClientRect(); - const viewportWidth = document.documentElement.clientWidth; - const viewportHeight = document.documentElement.clientHeight; + const hostElement = this.getRootNode().host; + const viewportWidth = hostElement ? hostElement.clientWidth : document.documentElement.clientWidth; + const viewportHeight = hostElement ? hostElement.clientHeight : document.documentElement.clientHeight; + const distanceTop = hostElement ? clientRect.top - hostElement.getBoundingClientRect().top : clientRect.top; const distanceLeft = clientRect.left; - const distanceTop = clientRect.top; + const clientVerticalCenter = distanceTop + clientRect.height / 2; + const viewportVerticalCenter = viewportHeight / 2; const distanceRight = viewportWidth - clientRect.right; - const distanceBottom = viewportHeight - clientRect.bottom; const placementX = distanceLeft - distanceRight > 0 ? "left" : "right"; - const placementY = distanceTop - distanceBottom > 0 ? "top" : "bottom"; + const placementY = viewportVerticalCenter > clientVerticalCenter ? "bottom" : "top"; this.tooltipElem.dataset.tooltip = `${placementX}-${placementY}`; } diff --git a/tests/smoke/cba-list/index.html b/tests/smoke/cba-list/index.html index 0a6a645..fb2c2d3 100644 --- a/tests/smoke/cba-list/index.html +++ b/tests/smoke/cba-list/index.html @@ -6,6 +6,7 @@ Document + diff --git a/tests/smoke/cba-list/smoke.js b/tests/smoke/cba-list/smoke.js index 064731d..94e1651 100644 --- a/tests/smoke/cba-list/smoke.js +++ b/tests/smoke/cba-list/smoke.js @@ -3,7 +3,11 @@ const items = [ { id: "row1", data: "Info", - text: "List1" + text: "List1", + alert: { + text: "Topmost element Alert text", + type: "error" + } }, { id: "row2", @@ -16,8 +20,17 @@ const items = [ text: "Sub List1" }, { + id: "subrow2", data: "Info", - text: "Sub List2" + text: "Sub List2", + alert: { + text: "Subitem Alert text", + type: "error" + } + }, + { + data: "Info", + text: "Sub List3" } ] }, @@ -30,12 +43,29 @@ const items = [ for (let i = 4; i < 20; i++) { - items.push({ + const item = { id: `row${i}`, data: `Info`, text: `List${i}` - }); + } + if (i === 10) + { + item.alert = { + text: "Middle Alert text", + type: "error" + } + } + items.push(item); } +items.push({ + id: "row20", + data: "Info", + text: "List20", + alert: { + text: "Bottom Alert text", + type: "error" + } +}); cbaList.items = items; const cbaSortableList = document.querySelector("#sortable");