Add dark theme for APIView

src/dotnet/APIView/APIViewWeb/Client/src/comments.ts

@@ -323,14 +323,14 @@
             if (commentRows.length != 1)
             {
                 if (index == 0) {
-                    commentNavigationButtons.append(`<a class="btn btn btn-outline-secondary" href="#${nextCommentThreadAnchor}" title="Next Comment"><i class="fa fa-chevron-down" aria-hidden="true"></i></a>`)
+                  commentNavigationButtons.append(`<a class="btn btn-outline-dark" href="#${nextCommentThreadAnchor}" title="Next Comment"><i class="fa fa-chevron-down" aria-hidden="true"></i></a>`)
                 }
                 else if (index == commentRows.length - 1) {
-                    commentNavigationButtons.append(`<a class="btn btn btn-outline-secondary" href="#${previousCommentThreadAnchor}" title="Previous Comment"><i class="fa fa-chevron-up" aria-hidden="true"></i></a>`)
+                  commentNavigationButtons.append(`<a class="btn btn-outline-dark" href="#${previousCommentThreadAnchor}" title="Previous Comment"><i class="fa fa-chevron-up" aria-hidden="true"></i></a>`)
                 }
                 else {
-                    commentNavigationButtons.append(`<a class="btn btn btn-outline-secondary" href="#${previousCommentThreadAnchor}" title="Previous Comment"><i class="fa fa-chevron-up" aria-hidden="true"></i></a>`)
-                    commentNavigationButtons.append(`<a class="btn btn btn-outline-secondary ml-1" href="#${nextCommentThreadAnchor}" title="Next Comment"><i class="fa fa-chevron-down" aria-hidden="true"></i></a>`)
+                  commentNavigationButtons.append(`<a class="btn btn-outline-dark" href="#${previousCommentThreadAnchor}" title="Previous Comment"><i class="fa fa-chevron-up" aria-hidden="true"></i></a>`)
+                  commentNavigationButtons.append(`<a class="btn btn-outline-dark ml-1" href="#${nextCommentThreadAnchor}" title="Next Comment"><i class="fa fa-chevron-down" aria-hidden="true"></i></a>`)
                 }
             }
         });

src/dotnet/APIView/APIViewWeb/Client/src/helpers.ts

@@ -0,0 +1,12 @@
+// Updated Page Setting by Updating UserPreference 
+export function updatePageSettings(callBack) {
+  var hideLineNumbers = $("#hide-line-numbers").prop("checked");
+  var hideLeftNavigation = $("#hide-left-navigation").prop("checked");
+  var selectedTheme = $("#theme-selector").children(":selected").val() as string;
+  var uri = location.origin + `/account/updatesettings?hideLineNumbers=${hideLineNumbers}&hideLeftNavigation=${hideLeftNavigation}&theme=${selectedTheme}`;
+
+  $.ajax({
+    type: "PUT",
+    url: uri
+  }).done(callBack());
+}

src/dotnet/APIView/APIViewWeb/Client/src/navbar.ts

@@ -1 +1,29 @@
-
+import Split from "split.js";
+import { updatePageSettings } from "./helpers";
+
+addEventListener("load", () => {
+    $(".nav-list-toggle").click(function () {
+        $(this).parents(".nav-list-group").first().toggleClass("nav-list-collapsed");
+    });
+});
+
+$(() => {
+    const themeSelector = $( '#theme-selector' );
+
+    // Add EventListener for Changing CSS Theme
+    themeSelector.on('change', function() {
+        updatePageSettings(function(){
+            var allThemes = themeSelector.children();
+            var newTheme = themeSelector.children(":selected").val() as string;
+            var themesToRemove = allThemes.filter(function(){
+                return ($(this).val() as string) != newTheme;
+            });
+            var body = $('body');
+
+            themesToRemove.each(function(){
+                body.removeClass(($(this).val() as string));
+            })
+            body.addClass(newTheme);
+        });
+    });
+});

src/dotnet/APIView/APIViewWeb/Client/src/review.ts

@@ -1,4 +1,5 @@
 import Split from "split.js";
+import { updatePageSettings } from "./helpers";
 
 $(() => {  
   const SEL_DOC_CLASS = ".documentation";
@@ -7,8 +8,6 @@ $(() => {
   const SHOW_DOC_HREF = ".show-document";
   const SHOW_DIFFONLY_CHECKBOX = ".show-diffonly-checkbox";
   const SHOW_DIFFONLY_HREF = ".show-diffonly";
-  const HIDE_LINE_NUMBERS = "#hide-line-numbers";
-  const HIDE_LEFT_NAVIGATION = "#hide-left-navigation";
 
   hideCheckboxIfNoDocs();
 
@@ -43,18 +42,6 @@ $(() => {
     }
   }
 
-  // Updated Page Setting by Updating UserPreference 
-  function updatePageSettings(callBack) {
-    var hideLineNumbers = $(HIDE_LINE_NUMBERS).prop("checked");
-    var hideLeftNavigation = $(HIDE_LEFT_NAVIGATION).prop("checked");
-    var uri = `?handler=updatepagesettings&hideLineNumbers=${hideLineNumbers}&hideLeftNavigation=${hideLeftNavigation}`;
-
-    $.ajax({
-      type: "GET",
-      url: uri
-    }).done(callBack());
-  }
-
   /* ADD EVENT LISTENER FOR TOGGLING LEFT NAVIGATION
   --------------------------------------------------------------------------------------------------------------------------------------------------------*/
   addEventListener("load", () => {
@@ -83,13 +70,13 @@ $(() => {
     $(SHOW_DIFFONLY_HREF)[0].click();
   });
 
-  $(HIDE_LINE_NUMBERS).on("click", e => {
+  $("#hide-line-numbers").on("click", e => {
     updatePageSettings(function(){
       $(".line-number").toggleClass("d-none");
     });
   });
 
-  $(HIDE_LEFT_NAVIGATION).on("click", e => {
+  $("#hide-left-navigation").on("click", e => {
     updatePageSettings(function(){
       var leftContainer = $("#review-left");
       var rightContainer = $("#review-right");

src/dotnet/APIView/APIViewWeb/Controllers/AccountController.cs

@@ -2,12 +2,21 @@
 using Microsoft.AspNetCore.Mvc;
 using System.Threading.Tasks;
 using Microsoft.AspNetCore.Authorization;
+using APIViewWeb.Repositories;
+using APIViewWeb.Models;
+
 
 namespace APIViewWeb.Controllers
 {
     [AllowAnonymous]
     public class AccountController : Controller
     {
+        private readonly UserPreferenceCache _preferenceCache;
+        public AccountController(UserPreferenceCache preferenceCache)
+        {
+            _preferenceCache = preferenceCache;
+        }
+
         [HttpGet]
         public async Task<IActionResult> Login(string returnUrl = "/")
         {
@@ -25,5 +34,19 @@ public async Task<IActionResult> Logout()
             await HttpContext.SignOutAsync();
             return RedirectToPage("/Login");
         }
+
+        [HttpPut]
+        [Authorize("RequireOrganization")]
+        public ActionResult UpdateSettings(bool? hideLineNumbers = null, bool? hideLeftNavigation = null, string theme = "light-theme")
+        {
+            _preferenceCache.UpdateUserPreference(new UserPreferenceModel()
+            {
+                UserName = User.GetGitHubLogin(),
+                HideLeftNavigation = hideLeftNavigation,
+                HideLineNumbers = hideLineNumbers,
+                Theme = theme
+            });
+            return Ok();
+        }
     }
 }

src/dotnet/APIView/APIViewWeb/Helpers/AutoMapperProfiles.cs

@@ -15,7 +15,8 @@ public AutoMapperProfiles()
                 .ForMember(dest => dest.State, opt => opt.MapFrom((src, dest) => src.State != null ? src.State : dest.State))
                 .ForMember(dest => dest.Status, opt => opt.MapFrom((src, dest) => src.Status != null ? src.Status : dest.Status))
                 .ForMember(dest => dest.HideLineNumbers, opt => opt.MapFrom((src, dest) => src.HideLineNumbers != null ? src.HideLineNumbers : dest.HideLineNumbers))
-                .ForMember(dest => dest.HideLeftNavigation, opt => opt.MapFrom((src, dest) => src.HideLeftNavigation != null ? src.HideLeftNavigation : dest.HideLeftNavigation));
+                .ForMember(dest => dest.HideLeftNavigation, opt => opt.MapFrom((src, dest) => src.HideLeftNavigation != null ? src.HideLeftNavigation : dest.HideLeftNavigation))
+                .ForMember(dest => dest.Theme, opt => opt.MapFrom((src, dest) => src.Theme != null ? src.Theme : dest.Theme));
         }
     }
 }

src/dotnet/APIView/APIViewWeb/Helpers/PageModelHelpers.cs

@@ -0,0 +1,13 @@
+using APIViewWeb.Models;
+using APIViewWeb.Repositories;
+
+namespace APIViewWeb.Helpers
+{
+    public static class PageModelHelpers
+    {
+        public static UserPreferenceModel GetUserPreference(UserPreferenceCache preferenceCache, string userName)
+        {
+            return preferenceCache.GetUserPreferences(userName);
+        }
+    }
+}

src/dotnet/APIView/APIViewWeb/Models/UserPreferenceModel.cs

@@ -21,5 +21,7 @@ public class UserPreferenceModel
         public bool? HideLineNumbers { get; set; }
         [Name("HideLeftNavigation")]
         public bool? HideLeftNavigation { get; set; }
+        [Name("Theme")]
+        public string Theme { get; set; }
     }
 }

src/dotnet/APIView/APIViewWeb/Pages/Assemblies/Conversation.cshtml

@@ -1,8 +1,11 @@
 @page "{id?}"
 @model APIViewWeb.Pages.Assemblies.ConversationModel
+@using APIViewWeb.Helpers
+@using APIViewWeb.Models
 @{
     Layout = "ReviewLayout";
     ViewData["Title"] = "Conversation";
+    ViewData["UserPreference"] = PageModelHelpers.GetUserPreference(Model._preferenceCache, User.GetGitHubLogin()) ?? new UserPreferenceModel();
 }
 <div class="container-fluid">
     <div class="mx-5 mt-2">

src/dotnet/APIView/APIViewWeb/Pages/Assemblies/Conversation.cshtml.cs

@@ -16,6 +16,7 @@ public class ConversationModel : PageModel
         private readonly ReviewManager _reviewManager;
         private const string ENDPOINT_SETTING = "Endpoint";
         private readonly BlobCodeFileRepository _codeFileRepository;
+        public readonly UserPreferenceCache _preferenceCache;
 
         public string Endpoint { get; }
         public ReviewModel Review { get; private set; }
@@ -26,12 +27,14 @@ public ConversationModel(
             IConfiguration configuration,
             BlobCodeFileRepository codeFileRepository,
             CommentsManager commentsManager,
-            ReviewManager reviewManager)
+            ReviewManager reviewManager,
+            UserPreferenceCache preferenceCache)
         {
             _codeFileRepository = codeFileRepository;
             _commentsManager = commentsManager;
             _reviewManager = reviewManager;
             Endpoint = configuration.GetValue<string>(ENDPOINT_SETTING);
+            _preferenceCache = preferenceCache;
         }
 
         public async Task<IActionResult> OnGetAsync(string id)

src/dotnet/APIView/APIViewWeb/Pages/Assemblies/Delete.cshtml

@@ -1,7 +1,10 @@
 @page
 @model APIViewWeb.Pages.Assemblies.DeleteModel
+@using APIViewWeb.Helpers
+@using APIViewWeb.Models
 @{
     ViewData["Title"] = "Delete";
+    ViewData["UserPreference"] = PageModelHelpers.GetUserPreference(Model._preferenceCache, User.GetGitHubLogin()) ?? new UserPreferenceModel();
 }
 <div class="container-fluid">
     <div class="mx-5 mt-2">

src/dotnet/APIView/APIViewWeb/Pages/Assemblies/Delete.cshtml.cs

@@ -8,10 +8,12 @@ namespace APIViewWeb.Pages.Assemblies
     public class DeleteModel : PageModel
     {
         private readonly ReviewManager _manager;
+        public readonly UserPreferenceCache _preferenceCache;
 
-        public DeleteModel(ReviewManager manager)
+        public DeleteModel(ReviewManager manager, UserPreferenceCache preferenceCache)
         {
             _manager = manager;
+            _preferenceCache = preferenceCache;
         }
 
         public string AssemblyName { get; set; }

src/dotnet/APIView/APIViewWeb/Pages/Assemblies/Index.cshtml

@@ -3,8 +3,11 @@
 @using APIViewWeb
 @using System
 @using System.Text.RegularExpressions
+@using APIViewWeb.Helpers
+@using APIViewWeb.Models
 @{
     ViewData["Title"] = "Reviews";
+    ViewData["UserPreference"] = PageModelHelpers.GetUserPreference(Model._preferenceCache, User.GetGitHubLogin()) ?? new UserPreferenceModel();
 }
 @section Scripts
 {
@@ -48,7 +51,7 @@
                     <div class="modal-header">
                         <h5 class="modal-title">Create Review</h5>
                         <button type="button" class="close" data-dismiss="modal">
-                            <span aria-hidden="true">&times;</span>
+                            <span aria-hidden="true"><i class="fa-solid fa-xmark"></i></span>
                         </button>
                     </div>
                     <div class="modal-body">
@@ -208,7 +211,7 @@
                         </div>
                     </div>
                     <div class="modal-footer">
-                        <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Close</button>
+                        <button type="button" class="btn btn-outline-dark" data-dismiss="modal">Close</button>
                         <button type="submit" class="btn btn-primary" onclick="this.form.submit(); this.disabled = true;"><i class="fas fa-cloud-upload-alt"></i> Upload</button>
                     </div>
                 </form>

src/dotnet/APIView/APIViewWeb/Pages/Assemblies/Index.cshtml.cs

@@ -13,7 +13,7 @@ namespace APIViewWeb.Pages.Assemblies
     public class IndexPageModel : PageModel
     {
         private readonly ReviewManager _manager;
-        private readonly UserPreferenceCache _preferenceCache;
+        public readonly UserPreferenceCache _preferenceCache;
         public const int _defaultPageSize = 50;
         public const string _defaultSortField = "LastUpdated";
 

src/dotnet/APIView/APIViewWeb/Pages/Assemblies/LegacyReview.cshtml

@@ -1,8 +1,10 @@
 @page
-
 @model APIViewWeb.Pages.Assemblies.LegacyReview
+@using APIViewWeb.Helpers
+@using APIViewWeb.Models
 @{
     ViewData["Title"] = "Legacy Review";
+    ViewData["UserPreference"] = PageModelHelpers.GetUserPreference(Model._preferenceCache, User.GetGitHubLogin()) ?? new UserPreferenceModel();
 }
 
 <h2>This review can not be viewed anymore but here are the comments:</h2>

src/dotnet/APIView/APIViewWeb/Pages/Assemblies/LegacyReview.cshtml.cs

@@ -4,6 +4,7 @@
 using System.Threading.Tasks;
 using ApiView;
 using APIViewWeb.Models;
+using APIViewWeb.Repositories;
 using Microsoft.AspNetCore.Mvc;
 using Microsoft.AspNetCore.Mvc.RazorPages;
 
@@ -12,10 +13,12 @@ namespace APIViewWeb.Pages.Assemblies
     public class LegacyReview: PageModel
     {
         private CommentsManager _commentsManager;
+        public readonly UserPreferenceCache _preferenceCache;
 
-        public LegacyReview(CommentsManager commentsManager)
+        public LegacyReview(CommentsManager commentsManager, UserPreferenceCache preferenceCache)
         {
             _commentsManager = commentsManager;
+            _preferenceCache = preferenceCache;
         }
 
         public string Id { get; set; }

src/dotnet/APIView/APIViewWeb/Pages/Assemblies/Review.cshtml

@@ -1,8 +1,12 @@
 @page "{id}/{revisionId?}"
 @model APIViewWeb.Pages.Assemblies.ReviewPageModel
+@using APIViewWeb.Helpers
+@using APIViewWeb.Models
 @{
     Layout = "ReviewLayout";
     ViewData["Title"] = Model.Review.DisplayName;
+    var userPreference = PageModelHelpers.GetUserPreference(Model._preferenceCache, User.GetGitHubLogin()) ?? new UserPreferenceModel();
+    ViewData["UserPreference"] = userPreference;
 }
 
 <div class="container-fluid">
@@ -45,13 +49,13 @@
                 @{
                     var popOverContent = $"<b>{Model.ActiveConversations}</b> active revision threads.<br><b>{Model.TotalActiveConversations}</b> total active threads.<br>"
                     + $"<b>Current Revision:</b> <em>{@Model.Revision.DisplayName}</em>";
-                                    @if (Model.DiffRevisionId != null)
+                                        @if (Model.DiffRevisionId != null)
                     {
                         popOverContent += $"<br><b>Current Diff:</b> <em>{@Model.DiffRevision?.DisplayName}</em>";
                     }
-                                    <button type="button" class="btn btn-info btn-sm shadow-sm" data-placement="bottom" data-trigger="focus" data-toggle="popover" data-html="true" data-title="Page Info" data-content="@popOverContent">
-                                        <i class="far fa-comment-alt mr-2"></i><span class="badge badge-light">@Model.ActiveConversations / @Model.TotalActiveConversations</span>
-                                    </button>
+                                        <button type="button" class="btn btn-info btn-sm shadow-sm" data-placement="bottom" data-trigger="focus" data-toggle="popover" data-html="true" data-title="Page Info" data-content="@popOverContent">
+                                            <i class="far fa-comment-alt mr-2"></i><span class="badge badge-light">@Model.ActiveConversations / @Model.TotalActiveConversations</span>
+                                        </button>
                 }
             </div>
             <div class="my-1">
@@ -114,7 +118,7 @@
                     </span>
                     <span class="dropdown-item checkbox">
                         <label>
-                            @if (Model.GetUserPreference().HideLineNumbers == true)
+                            @if (userPreference.HideLineNumbers == true)
                             {
                                 <input type="checkbox" id="hide-line-numbers" checked>
                             }
@@ -127,7 +131,7 @@
                     </span>
                     <span class="dropdown-item checkbox">
                         <label>
-                            @if (Model.GetUserPreference().HideLeftNavigation == true)
+                            @if (userPreference.HideLeftNavigation == true)
                             {
                                 <input type="checkbox" id="hide-left-navigation" checked>
                             }
@@ -313,7 +317,7 @@
         @{
             var reviewLeftDisplay = String.Empty;
             var reviewRightSize = "10";
-            if (Model.GetUserPreference().HideLeftNavigation == true)
+            if (userPreference.HideLeftNavigation == true)
             {
                 reviewLeftDisplay = "d-none";
                 reviewRightSize = "12";
@@ -331,9 +335,6 @@
         <div id="review-right" class="col-@reviewRightSize rounded-1 border">
             <table class="code-window">
                 <tbody>
-                    @{
-                        TempData["UserPreference"] = Model.GetUserPreference();
-                    }
                     @foreach (var line in Model.Lines)
                     {
                         <partial name="_CodeLine" model="@line" />