No issue - introduced tooltip for cba-list

browser-automation · Jan 20, 2024 · 4e9c563 · 4e9c563
1 parent bdacba7
commit 4e9c563
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 6 deletions.
diff --git 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`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" viewBox="0 0 487.65 487.65" width="12px" height="12px">
+<g>
+	<path d="M243.824,0C109.163,0,0,109.163,0,243.833C0,378.487,109.163,487.65,243.824,487.65 c134.662,0,243.826-109.163,243.826-243.817C487.65,109.163,378.486,0,243.824,0z M243.762,103.634 c20.416,0,36.977,16.555,36.977,36.977c0,20.425-16.561,36.978-36.977,36.978c-20.424,0-36.986-16.553-36.986-36.978 C206.775,120.189,223.338,103.634,243.762,103.634z M307.281,381.228c0,3.695-2.995,6.691-6.684,6.691h-21.509h-70.663h-21.492 c-3.689,0-6.683-2.996-6.683-6.691v-13.719c0-3.694,2.993-6.689,6.683-6.689h21.492V230.706h-22.153 c-3.689,0-6.685-2.996-6.685-6.692V210.28c0-3.695,2.996-6.69,6.685-6.69h22.153h63.981h0.216c3.686,0,6.683,2.995,6.683,6.69 v150.539h21.293c3.688,0,6.684,2.995,6.684,6.689V381.228z"/>
+</g>
+</svg>`;
+
 export class List extends HTMLElement
 {
   constructor()
@@ -584,13 +598,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`<span class="${classes.join(" ")}" tabindex="${selected ? 0 : -1}" draggable="${this.drag}" contenteditable="${editable}" title="${text}">${text}</span>`;
+      let alertTmpl = "";
+      if (item.alert)
+      {
+        alertTmpl = html`<span class="alert ${item.alert.type}"><cba-tooltip text="${item.alert.text}" arrow="x">${infoIcon}</cba-tooltip></span>`;
+      }
+      const row = html`<span class="${classes.join(" ")}" draggable="${this.drag}" title="${text}" tabindex="${selected ? 0 : -1}"><span contenteditable="${editable}" class="text">${text}</span>${alertTmpl}</span>`;
       const infoText = this._getText(item, this.tooltipText);
       if (infoText)
       {

diff --git a/src/cba-list/shadow.css b/src/cba-list/shadow.css
@@ -117,20 +117,20 @@ ul
 
 li .row
 {
-  display: block;
+  display: flex;
   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,6 +142,19 @@ 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;

diff --git a/tests/smoke/cba-list/index.html b/tests/smoke/cba-list/index.html
@@ -6,6 +6,7 @@
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
   <script src="/js/cba-list/cba-list.js" type="module"></script>
+  <script src="/js/cba-tooltip/cba-tooltip.js" type="module"></script>
   <script src="/smoke/res/highlight.js"></script>
   <script src="smoke.js" defer></script>
   <link rel="stylesheet" href="/smoke/res/highlight.css">

diff --git 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"
       }
     ]
   },