From 45184813df24116e40822413e3749bb5e46236ea Mon Sep 17 00:00:00 2001 From: Chidozie Ononiwu Date: Fri, 22 Jul 2022 19:21:14 -0700 Subject: [PATCH 1/6] Add dark theme for APIView --- .../APIView/APIViewWeb/Client/css/site.scss | 298 ++++++++++++++++-- .../APIView/APIViewWeb/Client/src/comments.ts | 8 +- .../APIViewWeb/Pages/Assemblies/Index.cshtml | 4 +- .../Pages/Shared/_CommentThreadPartial.cshtml | 10 +- 4 files changed, 278 insertions(+), 42 deletions(-) diff --git a/src/dotnet/APIView/APIViewWeb/Client/css/site.scss b/src/dotnet/APIView/APIViewWeb/Client/css/site.scss index dbeaa1f1bb8..5f44be9cfbf 100644 --- a/src/dotnet/APIView/APIViewWeb/Client/css/site.scss +++ b/src/dotnet/APIView/APIViewWeb/Client/css/site.scss @@ -1,4 +1,61 @@ -/* Mixins, Media, Include and Keyframes +/* Themes +------------------------------------------------------------------------------------------------------------------------------------------------------------*/ +.default { + --background-color: #fff; + --border-color: #dee2e6; + --text-color: #212529; + --bg-light: #f8f9fa; + --bg-light-hover: #e2e6ea; + --link-color: #006ee5; + --link-color-hover: #0056b3; + --btn-outline-dark: #343a40; + --monochrome-8: rgb(0 0 0 / 8%); + --monochrome-2: rgba(0, 0, 0, 0.2); + --monochrome-19: rgba(0, 0, 0, 0.19); + --monochrome-15: rgba(0, 0, 0, 0.15); + --monochrome-75: rgba(0, 0, 0, .075); + --monochrome-5: rgba(0, 0, 0, 0.5); + --monochrome-03: rgba(0, 0, 0, 0.03); + --monochrome-125: rgba(0, 0, 0, 0.125); + --focus-shadow: rgb(0 123 255 / 25%); + --muted-color: #6c757d; + --icon-color-filter: invert(0.0); + --keyword-color: blue; + --class-color: #007e79; + --code-color: #d1377e; + --code-diagnostics-error-color: lightpink; + --code-diagnostics-warn-color: lightyellow; + --code-diagnostics-info-color: lightblue; +} + +:root { + --background-color: #010409; + --border-color: #30363d; + --text-color: #c9d1d9; + --bg-light: #161b22; + --bg-light-hover: #30363d; + --link-color: #0084ff; + --link-color-hover: #a8d2ff; + --btn-outline-dark: #ccd6df; + --monochrome-8: rgba(255, 255, 255, 8%); + --monochrome-2: rgba(255, 255, 255, 0.2); + --monochrome-19: rgba(255, 255, 255, 0.19); + --monochrome-15: rgba(255, 255, 255, 0.15); + --monochrome-75: rgba(255, 255, 255, .075); + --monochrome-5: rgba(255, 255, 255, 0.5); + --monochrome-03: rgba(255, 255, 255, 0.03); + --monochrome-125: rgba(255, 255, 255, 0.125); + --focus-shadow: rgba(0, 123, 255, 0.642); + --muted-color: #717a83; + --icon-color-filter: invert(0.5); + --keyword-color: #ff7b72; + --class-color: #d2a8ff; + --code-color: #db3984; + --code-diagnostics-error-color: darkmagenta; + --code-diagnostics-warn-color: darkgoldenrod; + --code-diagnostics-info-color: darkblue; +} +/* Mixins, Media, Include and Keyframes ------------------------------------------------------------------------------------------------------------------------------------------------------------*/ @mixin placeholder { @@ -36,20 +93,24 @@ /* Color table ------------------------------------------------------------------------------------------------------------------------------------------------------------*/ -$gray-light: #f6f8fa; -$primary-blue: #006ee5; $success-green: #208636; $pale-green: #008484; /* HTML Tags ------------------------------------------------------------------------------------------------------------------------------------------------------------*/ a { - color: $primary-blue; + color: var(--link-color); +} + +a:hover { + color: var(--link-color-hover); } body { /* Margin bottom by footer height */ margin-bottom: 60px; + background-color: var(--background-color); + color: var(--text-color); } button.accept-policy { @@ -107,6 +168,7 @@ input[type="search"]::-webkit-search-cancel-button { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + border-top: 1px solid var(--border-color); } #reviews-table-search-container { @@ -117,39 +179,204 @@ input[type="search"]::-webkit-search-cancel-button { /* Classes ------------------------------------------------------------------------------------------------------------------------------------------------------------*/ -/* Bootstrap Classes Overridden +/* Classes Overridden ----------------------------------------------------------------------*/ +.badge-light { + color: var(--text-color); + background-color: var(--bg-light-hover); +} + +.bg-light { + background-color: var(--bg-light) !important; +} + +.border { + border: 1px solid var(--border-color) !important; +} + +.border-left { + border-left: 1px solid var(--border-color) !important; +} .border-top { - border-top: 1px solid #e5e5e5; + border-top: 1px solid var(--border-color) !important; } .border-bottom { - border-bottom: 1px solid #e5e5e5; + border-bottom: 1px solid var(--border-color) !important; } .bootstrap-select .dropdown-toggle .filter-option-inner-inner { - color: #626262; + color: var(--text-color); +} + +.bootstrap-select.show-menu-arrow .dropdown-toggle .filter-option:after { + border-bottom: 6px solid var(--background-color); +} + +.btn-light { + color: var(--text-color); + background-color: var(--bg-light); + border-color: var(--bg-light); +} + +.btn-light:hover, .btn-light:active { + color: var(--text-color); + background-color: var(--bg-light-hover); +} + +.btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active, .show > .btn-light.dropdown-toggle { + color: var(--text-color); + background-color: var(--bg-light-hover); } .btn-success { background-color: $success-green; } +.card-header { + background-color: var(--monochrome-03); + border-bottom: 1px solid var(--monochrome-125); +} + +.custom-file-label { + color: var(--text-color); + background-color: var(--background-color); + border: 1px solid var(--border-color); +} + +.custom-file-label::after { + color: var(--text-color); + background-color: var(--bg-light); +} + +.close { + color: var(--text-color); +} + +.dropdown-menu { + color: var(--text-color); + background-color: var(--background-color); + border: 1px solid var(--monochrome-15); +} + +.dropdown-item { + color: var(--text-color); +} + +.dropdown-item:hover, .dropdown-item:focus { + color: var(--text-color); + background-color: var(--bg-light); +} + +.form-control { + color: var(--text-color); + background-color: var(--background-color); + border: 1px solid var(--border-color); +} + +.form-control { + color: var(--text-color); + background-color: var(--background-color); + border: 1px solid var(--border-color); +} + +.form-control:focus { + color: var(--text-color); + background-color: var(--background-color); + border-color: var(--border-color); + box-shadow: 0 0 0 0.2rem var(--focus-shadow); +} + +.list-group-item +{ + background-color: var(--background-color); + border: 1px solid var(--border-color); +} + +.modal-header { + border-bottom: 1px solid var(--border-color); +} + +.modal-content { + background-color: var(--background-color); + border: 1px solid var(--monochrome-2); +} + +.modal-footer { + border-top: 1px solid var(--border-color); +} + .nav-pills .nav-link.active, .nav-pills .show > .nav-link { - background-color: $primary-blue; + background-color: var(--link-color); +} + +.shadow-sm { + box-shadow: 0 0.125rem 0.25rem var(--monochrome-8) !important; +} + +.table { + color: var(--text-color); +} + +.table th, .table td { + border-top: 1px solid var(--border-color); +} + +.table thead th { + border-bottom: 2px solid var(--border-color); +} + +.table-hover tbody tr:hover { + color: var(--text-color); + background-color: var(--monochrome-75); } +.text-black-50 { + color: var(--monochrome-5) !important; +} + +.text-dark { + color: var(--text-color) !important;; +} + +.text-muted { + color: var(--muted-color) !important; +} + +a.text-dark:focus, a.text-dark:hover { + color: var(--text-color) !important; +} + +.page-link { + background-color: var(--background-color); + border: 1px solid var(--border-color); +} + +.page-link:hover { + background-color: var(--bg-light-hover); + border-color: var(--border-color); +} + +.page-item.disabled .page-link { + color: var(--text-color); + background-color: var(--background-color); + border-color: var(--border-color); +} + +pre { + color: var(--text-color); +} /* Code rendering classes ----------------------------------------------------------------------*/ .class { - color: #007e79; + color: var(--class-color); scroll-margin-top: calc(50px + 1.7em); } code { - color: #d1377e; + color: var(--code-color); } .code-comment { @@ -161,11 +388,11 @@ code { } .keyword { - color: blue; + color: var(--keyword-color); } .name { - color: black; + color: var(--text-color); } .specialName { @@ -231,12 +458,17 @@ code { } .btn-primary { - background-color: #006ee5; + background-color: var(--link-color); } .btn-outline-primary { - color: #006ee5; - border-color: #006ee5; + color: var(--link-color); + border-color: var(--link-color); +} + +.btn-outline-dark { + color: var(--btn-outline-dark); + border-color: var(--btn-outline-dark); } .btn-circle { @@ -254,7 +486,7 @@ code { line-height: 1.2rem; font-weight: bold; font-size: 1.0rem; - box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + box-shadow: 0 4px 8px 0 var(--monochrome-2), 0 6px 20px 0 var(--monochrome-19); } .btn-xs { @@ -267,17 +499,17 @@ code { /* Diagnostics ----------------------------------------------------------------------*/ .code-diagnostics-error { - background-color: lightpink; + background-color: var(--code-diagnostics-error-color); border: 1px solid red; } .code-diagnostics-warn { - background-color: lightyellow; + background-color: var(--code-diagnostics-warn-color); border: 1px solid #ffe066; } .code-diagnostics-info { - background-color: #e0ffff; + background-color: var(--code-diagnostics-info-color); border: 1px solid blue; } @@ -309,10 +541,10 @@ code { } .comment-row { - border: 1px solid gray; + border: 1px solid var(--border-color); border-spacing: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - background-color: white; + background-color: var(--background-color); } .comment-cancel-button { @@ -366,7 +598,7 @@ code { border-collapse: separate; tab-size: 8; border-spacing: 0; - background-color: white; // prevents code-window from overlapping stickySidebar + background-color: var(--background-color); // prevents code-window from overlapping stickySidebar width: 100%; } @@ -412,16 +644,20 @@ code { } .code-added { - background-color: #e6ffed; + background-color: rgba(46,160,67,0.15); } .code-removed { - background-color: #ffeef0; + background-color: rgba(248,81,73,0.15); } .deprecated { text-decoration: line-through; } +.file-code-icon { + filter: var(--icon-color-filter); +} + .footer { position: absolute; bottom: 0; @@ -435,7 +671,7 @@ code { .gutter { &:hover { - background-color: $gray-light; + background-color: var(--bg-light); } &.gutter-horizontal { @@ -620,8 +856,8 @@ code { .line-details { border-right: 1px solid; - border-right: 1px solid #DEE2E6; - background-color: white; + border-right: 1px solid var(--border-color); + background-color: var(--background-color); color: darkcyan; z-index:1; position: sticky; @@ -717,13 +953,13 @@ mark { border-collapse: separate; tab-size: 8; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - background-color: $gray-light; + background-color: var(--bg-light); } .new-thread-comment-text { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 14px; - background-color: $gray-light; + background-color: var(--bg-light); max-width: 758px; } @@ -750,7 +986,7 @@ mark { } .review-thread-reply { - background-color: $gray-light; + background-color: var(--bg-light); border-radius: 0 0 3px 3px; border-top: 1px solid #E1E4E8; border-bottom: 1px solid #E1E4E8; diff --git a/src/dotnet/APIView/APIViewWeb/Client/src/comments.ts b/src/dotnet/APIView/APIViewWeb/Client/src/comments.ts index 0691176959e..0b9519c95e1 100644 --- a/src/dotnet/APIView/APIViewWeb/Client/src/comments.ts +++ b/src/dotnet/APIView/APIViewWeb/Client/src/comments.ts @@ -323,14 +323,14 @@ if (commentRows.length != 1) { if (index == 0) { - commentNavigationButtons.append(``) + commentNavigationButtons.append(``) } else if (index == commentRows.length - 1) { - commentNavigationButtons.append(``) + commentNavigationButtons.append(``) } else { - commentNavigationButtons.append(``) - commentNavigationButtons.append(``) + commentNavigationButtons.append(``) + commentNavigationButtons.append(``) } } }); diff --git a/src/dotnet/APIView/APIViewWeb/Pages/Assemblies/Index.cshtml b/src/dotnet/APIView/APIViewWeb/Pages/Assemblies/Index.cshtml index d7d2fe6e2ff..286fe1f1cfb 100644 --- a/src/dotnet/APIView/APIViewWeb/Pages/Assemblies/Index.cshtml +++ b/src/dotnet/APIView/APIViewWeb/Pages/Assemblies/Index.cshtml @@ -48,7 +48,7 @@ diff --git a/src/dotnet/APIView/APIViewWeb/Pages/Shared/_CommentThreadPartial.cshtml b/src/dotnet/APIView/APIViewWeb/Pages/Shared/_CommentThreadPartial.cshtml index 2485ae4d09b..fda414fc99f 100644 --- a/src/dotnet/APIView/APIViewWeb/Pages/Shared/_CommentThreadPartial.cshtml +++ b/src/dotnet/APIView/APIViewWeb/Pages/Shared/_CommentThreadPartial.cshtml @@ -29,7 +29,7 @@ -
+
-
-
@@ -90,13 +90,13 @@ @if (Model.IsResolved) {
- +
} else {
- +
}
From 83cdcce7893f5ee42f6196302feb86178e762971 Mon Sep 17 00:00:00 2001 From: Chidozie Ononiwu Date: Thu, 28 Jul 2022 19:13:31 -0700 Subject: [PATCH 2/6] Add button for switching themes --- .../APIView/APIViewWeb/Client/css/site.scss | 10 ++++--- .../APIView/APIViewWeb/Client/src/navbar.ts | 27 ++++++++++++++++++- .../APIViewWeb/Pages/Shared/_Layout.cshtml | 10 +++++-- 3 files changed, 41 insertions(+), 6 deletions(-) diff --git a/src/dotnet/APIView/APIViewWeb/Client/css/site.scss b/src/dotnet/APIView/APIViewWeb/Client/css/site.scss index 5f44be9cfbf..30cbf26778b 100644 --- a/src/dotnet/APIView/APIViewWeb/Client/css/site.scss +++ b/src/dotnet/APIView/APIViewWeb/Client/css/site.scss @@ -1,6 +1,6 @@ /* Themes ------------------------------------------------------------------------------------------------------------------------------------------------------------*/ -.default { +.light-theme { --background-color: #fff; --border-color: #dee2e6; --text-color: #212529; @@ -28,7 +28,7 @@ --code-diagnostics-info-color: lightblue; } -:root { +.dark-theme { --background-color: #010409; --border-color: #30363d; --text-color: #c9d1d9; @@ -52,7 +52,7 @@ --class-color: #d2a8ff; --code-color: #db3984; --code-diagnostics-error-color: darkmagenta; - --code-diagnostics-warn-color: darkgoldenrod; + --code-diagnostics-warn-color: #846007; --code-diagnostics-info-color: darkblue; } /* Mixins, Media, Include and Keyframes @@ -935,6 +935,10 @@ mark { .navbar-dark .navbar-nav .nav-link { color: #fff; } + +.navbar-expand-sm .navbar-nav .dropdown-menu { + z-index: 1030; +} /*----------------------------------------------------------------------*/ .namespace-view { diff --git a/src/dotnet/APIView/APIViewWeb/Client/src/navbar.ts b/src/dotnet/APIView/APIViewWeb/Client/src/navbar.ts index 5f282702bb0..1a06eddd64d 100644 --- a/src/dotnet/APIView/APIViewWeb/Client/src/navbar.ts +++ b/src/dotnet/APIView/APIViewWeb/Client/src/navbar.ts @@ -1 +1,26 @@ - \ No newline at end of file +import Split from "split.js"; + +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() { + 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); + }); +}); diff --git a/src/dotnet/APIView/APIViewWeb/Pages/Shared/_Layout.cshtml b/src/dotnet/APIView/APIViewWeb/Pages/Shared/_Layout.cshtml index 4543cbb2e18..80e43eb75fe 100644 --- a/src/dotnet/APIView/APIViewWeb/Pages/Shared/_Layout.cshtml +++ b/src/dotnet/APIView/APIViewWeb/Pages/Shared/_Layout.cshtml @@ -20,9 +20,9 @@ - + - +