refined custom insert dropdown UI (#817)

Co-authored-by: Jeffrey Warren <[email protected]>

dist/PublicLab.Editor.css

@@ -309,6 +309,17 @@ https://github.com/sliptree/bootstrap-tokenfield/pull/287 */
 .tooltip.bottom .tooltip-arrow {
   display: none;
 }
+
+.menu1 li:hover a,
+.menu2 li:hover a {
+  text-decoration: none !important;
+  color: white !important;
+}  
+.menu1 li:hover,
+.menu2 li:hover {
+  background-color: #007bff !important;
+}
+
 @media (max-width: 550px) {
   .ple-module-content a.btn {
     font-size: 0px !important;

dist/PublicLab.Editor.js

@@ -22663,11 +22663,11 @@ builder += '<span class= "selected">What Do you want to insert?</span>';
 builder += '<span class="caret"></span>';
 builder += '</button>';
 builder += '<ul class="dropdown-menu menu1" role="menu" aria-labelledby="dropdownMenu1">';
-builder += '<li role="presentation"><a role="menuitem" tabindex="-1" class="Notes">Notes</a></li>';
-builder += '<li role="presentation"><a role="menuitem" tabindex="-1" class="Wikis">Wikis</a></li>';
-builder += '<li role="presentation"><a role="menuitem" tabindex="-1" class="Nodes">Nodes(Wikis + Notes)</a></li>';
-builder += '<li role="presentation"><a role="menuitem" tabindex="-1" class="Activity">Activity</a></li>';
-builder += '<li role="presentation"><a role="menuitem" tabindex="-1" class="Questions">Questions</a></li>';
+builder += '<li role="button" class="p-2"><a role="menuitem" tabindex="-1" class="Notes">Notes</a></li>';
+builder += '<li role="button" class="p-2"><a role="menuitem" tabindex="-1" class="Wikis">Wikis</a></li>';
+builder += '<li role="button" class="p-2"><a role="menuitem" tabindex="-1" class="Nodes">Nodes(Wikis + Notes)</a></li>';
+builder += '<li role="button" class="p-2"><a role="menuitem" tabindex="-1" class="Activity">Activity</a></li>';
+builder += '<li role="button" class="p-2"><a role="menuitem" tabindex="-1" class="Questions">Questions</a></li>';
 builder += '</ul>';
 builder += '</div>';
 builder += '<div class="dropdown" style="margin-bottom: 20px;">';
@@ -22676,14 +22676,14 @@ builder += '<span class="selected2">Insert as a</span>';
 builder += '<span class="caret"></span>';
 builder += '</button>';
 builder += '<ul class="dropdown-menu menu2" role ="menu" aria-labelledby="dropdownMenu2">';
-builder += '<li role="presentation"><a role="menuitem" tabindex="-1" class="List">List</a></li>';
-builder += '<li role="presentation"><a role="menuitem" tabindex="-1" class="Grid">Grid</a></li>';
+builder += '<li role="button" class="p-2"><a role="menuitem" tabindex="-1" class="List">List</a></li>';
+builder += '<li role="button" class="p-2"><a role="menuitem" tabindex="-1" class="Grid">Grid</a></li>';
 builder += '</ul>';
 builder += '</div>';
 builder += '<div class="input-group">';
 builder += '<input type="text" class="form-control inputText" placeholder="Enter a tagname" style="min-width: 150px;">';
 builder += '<span class="input-group-btn">';
-builder += '<button class="btn btn-outline-secondary go1" type="button">Go!</button>';
+builder += '<button class="btn btn-outline-secondary ml-2 go1" type="button">Go!</button>';
 builder += '</span>';
 builder += '</div>';
 module.exports = builder;

src/modules/PublicLab.CustomInsert.Template.js

@@ -4,11 +4,11 @@ builder += '<span class= "selected">What Do you want to insert?</span>';
 builder += '<span class="caret"></span>';
 builder += '</button>';
 builder += '<ul class="dropdown-menu menu1" role="menu" aria-labelledby="dropdownMenu1">';
-builder += '<li role="presentation"><a role="menuitem" tabindex="-1" class="Notes">Notes</a></li>';
-builder += '<li role="presentation"><a role="menuitem" tabindex="-1" class="Wikis">Wikis</a></li>';
-builder += '<li role="presentation"><a role="menuitem" tabindex="-1" class="Nodes">Nodes(Wikis + Notes)</a></li>';
-builder += '<li role="presentation"><a role="menuitem" tabindex="-1" class="Activity">Activity</a></li>';
-builder += '<li role="presentation"><a role="menuitem" tabindex="-1" class="Questions">Questions</a></li>';
+builder += '<li role="button" class="p-2"><a role="menuitem" tabindex="-1" class="Notes">Notes</a></li>';
+builder += '<li role="button" class="p-2"><a role="menuitem" tabindex="-1" class="Wikis">Wikis</a></li>';
+builder += '<li role="button" class="p-2"><a role="menuitem" tabindex="-1" class="Nodes">Nodes(Wikis + Notes)</a></li>';
+builder += '<li role="button" class="p-2"><a role="menuitem" tabindex="-1" class="Activity">Activity</a></li>';
+builder += '<li role="button" class="p-2"><a role="menuitem" tabindex="-1" class="Questions">Questions</a></li>';
 builder += '</ul>';
 builder += '</div>';
 builder += '<div class="dropdown" style="margin-bottom: 20px;">';
@@ -17,14 +17,14 @@ builder += '<span class="selected2">Insert as a</span>';
 builder += '<span class="caret"></span>';
 builder += '</button>';
 builder += '<ul class="dropdown-menu menu2" role ="menu" aria-labelledby="dropdownMenu2">';
-builder += '<li role="presentation"><a role="menuitem" tabindex="-1" class="List">List</a></li>';
-builder += '<li role="presentation"><a role="menuitem" tabindex="-1" class="Grid">Grid</a></li>';
+builder += '<li role="button" class="p-2"><a role="menuitem" tabindex="-1" class="List">List</a></li>';
+builder += '<li role="button" class="p-2"><a role="menuitem" tabindex="-1" class="Grid">Grid</a></li>';
 builder += '</ul>';
 builder += '</div>';
 builder += '<div class="input-group">';
 builder += '<input type="text" class="form-control inputText" placeholder="Enter a tagname" style="min-width: 150px;">';
 builder += '<span class="input-group-btn">';
-builder += '<button class="btn btn-outline-secondary go1" type="button">Go!</button>';
+builder += '<button class="btn btn-outline-secondary ml-2 go1" type="button">Go!</button>';
 builder += '</span>';
 builder += '</div>';
 module.exports = builder;