clean up the sorting option names. add a way to see which filter/sort is currently applied.

PlexRequests.UI/Content/requests.js

@@ -13,7 +13,7 @@ var mixItUpDefault = {
     animation: { enable: true },
     load: {
         filter: 'all',
-        sort: 'default:asc'
+        sort: 'requestorder:desc'
     },
     layout: {
         display: 'block'
@@ -149,6 +149,13 @@ $('#approveTVShows').click(function (e) {
     });
 });
 
+// filtering/sorting
+$('.filter,.sort', '.dropdown-menu').click(function (e) {
+    var $this = $(this);
+    $('.fa-square', $this.parents('.dropdown-menu:first')).removeClass('fa-square').addClass('fa-square-o');
+    $this.children('.fa').first().removeClass('fa-square-o').addClass('fa-square');
+});
+
 
 // Report Issue
 $(document).on("click", ".dropdownIssue", function (e) {

PlexRequests.UI/Views/Requests/Index.cshtml

@@ -45,11 +45,11 @@
                 <i class="fa fa-filter"></i>
             </a>
             <ul class="dropdown-menu">
-                <li><a href="#" class="filter" data-filter="all">All</a></li>
-                <li><a href="#" class="filter" data-filter=".approved-true">Approved</a></li>
-                <li><a href="#" class="filter" data-filter=".approved-false">Not Approved</a></li>
-                <li><a href="#" class="filter" data-filter=".available-true">Available</a></li>
-                <li><a href="#" class="filter" data-filter=".available-false">Not Available</a></li>
+                <li><a href="#" class="filter" data-filter="all"><i class="fa fa-square"></i>  All</a></li>
+                <li><a href="#" class="filter" data-filter=".approved-true"><i class="fa fa-square-o"></i>  Approved</a></li>
+                <li><a href="#" class="filter" data-filter=".approved-false"><i class="fa fa-square-o"></i>  Not Approved</a></li>
+                <li><a href="#" class="filter" data-filter=".available-true"><i class="fa fa-square-o"></i>  Available</a></li>
+                <li><a href="#" class="filter" data-filter=".available-false"><i class="fa fa-square-o"></i>  Not Available</a></li>
             </ul>
         </div>
         <div class="btn-group col-sm-push-8">
@@ -58,11 +58,10 @@
                 <i class="fa fa-sort"></i>
             </a>
             <ul class="dropdown-menu">
-                <li><a href="#" class="sort" data-sort="default">Default</a></li>
-                <li><a href="#" class="sort" data-sort="requestorder:asc">Requested Date (asc)</a></li>
-                <li><a href="#" class="sort" data-sort="requestorder:desc">Requested Date (desc)</a></li>
-                <li><a href="#" class="sort" data-sort="releaseorder:asc">Release Date (asc)</a></li>
-                <li><a href="#" class="sort" data-sort="releaseorder:desc">Release Date (desc)</a></li>
+                <li><a href="#" class="sort" data-sort="requestorder:desc"><i class="fa fa-square"></i>  Recent Requests</a></li>
+                <li><a href="#" class="sort" data-sort="requestorder:asc"><i class="fa fa-square-o"></i>  Older Requests</a></li>
+                <li><a href="#" class="sort" data-sort="releaseorder:desc"><i class="fa fa-square-o"></i>  Recent Releases</a></li>
+                <li><a href="#" class="sort" data-sort="releaseorder:asc"><i class="fa fa-square-o"></i>  Older Releases</a></li>
             </ul>
         </div>
         @if (Model.SearchForMovies)