feat: #8989, convert widget nav to dropdown

public/src/admin/extend/widgets.js

@@ -10,14 +10,13 @@ define('admin/extend/widgets', [
 	var Widgets = {};
 
 	Widgets.init = function () {
-		$('#widgets .nav-pills a').on('click', function (ev) {
+		$('#widgets .nav-pills .dropdown-menu a').on('click', function (ev) {
 			var $this = $(this);
-			$('#widgets .nav-pills li').removeClass('active');
-			$this.parent().addClass('active');
-
 			$('#widgets .tab-pane').removeClass('active');
-			$('#widgets .tab-pane[data-template="' + $this.attr('data-template') + '"]').addClass('active');
-
+			var templateName = $this.attr('data-template');
+			$('#widgets .tab-pane[data-template="' + templateName + '"]').addClass('active');
+			$('#widgets .selected-template').text(templateName);
+			$('#widgets .nav-pills .dropdown').trigger('click');
 			ev.preventDefault();
 			return false;
 		});

src/views/admin/extend/widgets.tpl

@@ -1,9 +1,17 @@
 <div id="widgets" class="row">
 	<div class="col-md-8" id="active-widgets">
 		<ul class="nav nav-pills">
-		{{{ each templates }}}
-			<li class="<!-- IF @first -->active<!-- ENDIF @first -->"><a href="#" data-template="{../template}" data-toggle="pill">{../template}</a></li>
-		{{{ end }}}
+
+			<li role="presentation" class="dropdown">
+				<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
+				<span class="selected-template">{templates.0.template}</span> <span class="caret"></span>
+				</a>
+				<ul class="dropdown-menu">
+					{{{ each templates }}}
+					<li><a href="#" data-template="{../template}" data-toggle="pill">{../template}</a></li>
+					{{{ end }}}
+				</ul>
+			</li>
 		</ul>
 
 		<div class="row">