aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorBrandon Lo <lobrandon1217@gmail.com>2019-07-02 11:35:10 -0400
committerBrandon Lo <lobrandon1217@gmail.com>2019-07-02 11:42:34 -0400
commite399390329cea075e36b914879801e485ccedfaa (patch)
treef1bf1a67a6c6c38d87c40850d9bd8dfa96656ee0
parent939f90eabd3fd6ac17b0a1a0646962ead88d5e99 (diff)
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>
-rw-r--r--src/static/css/base.css14
-rw-r--r--src/static/js/dashboard.js43
-rw-r--r--src/templates/dashboard/searchable_select_multiple.html2
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>