Change dropdown and selection list

Fix selection list text from overflowing
Add ellipses to overflowing text
Make dropdown z-index 2
Increase size of dropdown
Change delete button to simple X
Add title on hover to result entries

Change-Id: Ic274586e6bdf6e188efd147eb442660a99878e97
Signed-off-by: Brandon Lo <lobrandon1217@gmail.com>

3 files changed, 41 insertions, 18 deletions

diff --git a/src/static/css/base.css b/src/static/css/base.css
index 1494e77..72ecc40 100644
--- a/src/static/css/base.css
+++ b/src/static/css/base.css
@@ -81,14 +81,18 @@ a[aria-expanded="true"] > i.rotate {
     top: 0;
 }
 
-/* Dropdown for collaborators */
-#drop_results {
-    max-height: 10rem;
+.z-2 {
     z-index: 2;
 }
 
-#drop_results > li {
-    word-wrap: anywhere;
+.mh-30vh {
+    max-height: 30vh;
+}
+
+.overflow-ellipsis {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
 }
 
 /* Graphing for networks */
diff --git a/src/static/js/dashboard.js b/src/static/js/dashboard.js
index 9c99aa8..e0c0085 100644
--- a/src/static/js/dashboard.js
+++ b/src/static/js/dashboard.js
@@ -1056,12 +1056,13 @@ class SearchableSelectMultipleWidget {
 
         for( const id in ids )
         {
-            const result_entry = document.createElement("li");
-            const result_button = document.createElement("a");
             const obj = this.items[id];
             const result_text = this.generate_element_text(obj);
-            result_entry.classList.add("list-group-item", "list-group-item-action");
+            const result_entry = document.createElement("a");
+            result_entry.href = "#";
             result_entry.innerText = result_text;
+            result_entry.title = result_text;
+            result_entry.classList.add("list-group-item", "list-group-item-action", "overflow-ellipsis", "flex-shrink-0");
             result_entry.onclick = function() { searchable_select_multiple_widget.select_item(obj.id); };
             const tooltip = document.createElement("span");
             const tooltiptext = document.createTextNode(result_text);
@@ -1120,21 +1121,39 @@ class SearchableSelectMultipleWidget {
             added_list.removeChild(added_list.firstChild);
         }
 
-        let list_html = "";
+        const list_html = document.createElement("div");
+        list_html.classList.add("list-group");
 
         for( const item_id of this.added_items )
         {
-            const item = this.items[item_id];
+            const times = document.createElement("li");
+            times.classList.add("fas", "fa-times");
+
+            const deleteButton = document.createElement("a");
+            deleteButton.href = "#";
+            deleteButton.innerHTML = "<i class='fas fa-times'></i>"
+            // Setting .onclick/.addEventListener does not work,
+            // which is why I took the setAttribute approach
+            // If anyone knows why, please let me know :]
+            deleteButton.setAttribute("onclick", `searchable_select_multiple_widget.remove_item(${item_id});`);
+            deleteButton.classList.add("btn");
+            const deleteColumn = document.createElement("div");
+            deleteColumn.classList.add("col-auto");
+            deleteColumn.append(deleteButton);
 
+            const item = this.items[item_id];
             const element_entry_text = this.generate_element_text(item);
+            const textColumn = document.createElement("div");
+            textColumn.classList.add("col", "overflow-ellipsis");
+            textColumn.innerText = element_entry_text;
+            textColumn.title = element_entry_text;
+
+            const itemRow = document.createElement("div");
+            itemRow.classList.add("list-group-item", "d-flex", "p-0", "align-items-center");
+            itemRow.append(textColumn, deleteColumn);
 
-            list_html += '<div class="border rounded mt-2 w-100 d-flex align-items-center pl-2">'
-                + element_entry_text
-                + '<button onclick="searchable_select_multiple_widget.remove_item('
-                + item_id
-                + ')" class="btn btn-danger ml-auto">Remove</button>';
-            list_html += '</div>';
+            list_html.append(itemRow);
         }
-        added_list.innerHTML = list_html;
+        added_list.innerHTML = list_html.innerHTML;
     }
 }
diff --git a/src/templates/dashboard/searchable_select_multiple.html b/src/templates/dashboard/searchable_select_multiple.html
index 8299a55..80e4ea4 100644
--- a/src/templates/dashboard/searchable_select_multiple.html
+++ b/src/templates/dashboard/searchable_select_multiple.html
@@ -27,7 +27,7 @@
     </input>
 
     <div id="scroll_restrictor" class="d-flex pb-4 position-relative">
-        <ul id="drop_results" class="list-group w-100 overflow-auto position-absolute"></ul>
+        <div id="drop_results" class="list-group w-100 z-2 overflow-auto position-absolute mh-30vh"></div>
     </div>
 </div>