Make scrollbars independent between left and right review pane

Azure · Sep 22, 2022 · e26fff6 · e26fff6
1 parent bdae348
commit e26fff6
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 12 deletions.
diff --git a/src/dotnet/APIView/APIViewWeb/Client/css/site.scss b/src/dotnet/APIView/APIViewWeb/Client/css/site.scss
@@ -192,13 +192,18 @@ input[type="search"]::-webkit-search-cancel-button {
 #review-left {
     max-width: none;
     min-width: 10px;
+    height: auto;
+    overflow: auto;
+    max-height: 100vh;
 }
 
 #review-right {
     max-width: 100%;
     min-width: 100px;
-    overflow-x: auto;
+    height: auto;
+    overflow: auto;
     padding: 0px;
+    max-height: 100vh
 }
 /*---------------------------------------------------------------------*/
 
@@ -802,7 +807,7 @@ code {
 .icon-comments {
     cursor: pointer;
     position: absolute;
-    right: 30px;
+    right: -25px;
 }
 
 .icon-chevron-right {
@@ -870,6 +875,9 @@ code {
     background: url(/icons/swagger-original.svg) center center no-repeat;
 }
 /*---------------------------------------------------------------------*/
+.invisible {
+    visibility: hidden;
+}
 
 .info-text {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
@@ -908,23 +916,35 @@ code {
 }
 
 .line-toggle-documentation-button {
-    display: inline-block;
+    display: block;
     width: 100%;
     height: 100%;
     text-align: center;
     cursor: pointer;
     user-select: none;
+    position: relative;
+}
+
+.line-toggle-documentation-button svg {
+    top: 0px;
+    left: 0px;
+}
+
+.line-toggle-documentation-button i {
+    position: absolute;
+    top: 25%;
+    left: 25%;
 }
 
 .line-details-button-cell {
     width: 22px;
     height: 22px;
     min-width: 22px;
     min-height: 22px;
+    padding: 0px;
 }
 
 .line-details {
-    border-right: 1px solid;
     border-right: 1px solid var(--border-color);
     background-color: var(--background-color);
     color: darkcyan;

diff --git a/src/dotnet/APIView/APIViewWeb/Client/src/comments.ts b/src/dotnet/APIView/APIViewWeb/Client/src/comments.ts
@@ -417,7 +417,7 @@
 
   function ensureMessageIconInDOM() {
     if (!MessageIconAddedToDom) {
-      $(".line-comment-button-cell").append(`<span class="icon icon-comments ` + INVISIBLE + `"><i class="far fa-comment-alt pt-1 pl-1"></i></span>`);
+      $(".comment-icon-cell").append(`<span class="icon icon-comments ` + INVISIBLE + `"><i class="far fa-comment-alt pt-1 pl-1"></i></span>`);
       MessageIconAddedToDom = true;
     }
   }

diff --git a/src/dotnet/APIView/APIViewWeb/Client/src/review.ts b/src/dotnet/APIView/APIViewWeb/Client/src/review.ts
@@ -299,11 +299,15 @@ $(() => {
       $(".code-line-documentation").removeClass('hidden-row');
       $(TOGGLE_DOCUMENTATION).children('i').removeClass("fa-square-plus");
       $(TOGGLE_DOCUMENTATION).children('i').addClass("fa-square-minus");
+      $(TOGGLE_DOCUMENTATION).children('i').css("color", "darkorange");
+      $(TOGGLE_DOCUMENTATION).children('svg').removeClass("invisible");
     } else {
       // hide all documentation
       $(".code-line-documentation").addClass("hidden-row");
       $(TOGGLE_DOCUMENTATION).children('i').removeClass("fa-square-minus");
       $(TOGGLE_DOCUMENTATION).children('i').addClass("fa-square-plus");
+      $(TOGGLE_DOCUMENTATION).children('i').css("color", "darkcyan");
+      $(TOGGLE_DOCUMENTATION).children('svg').addClass("invisible");
     }
   });
 
@@ -355,6 +359,14 @@ $(() => {
 
     $(this).children('i').toggleClass('fa-square-minus');
     $(this).children('i').toggleClass('fa-square-plus');
+    if ($(this).children('i').hasClass('fa-square-plus')) {
+      $(this).children('i').css("color", "darkcyan");
+      $(this).children('svg').addClass("invisible");
+    }
+    else {
+      $(this).children('i').css("color", "darkorange");
+      $(this).children('svg').removeClass("invisible");
+    }
 
     // scroll button to center of screen, so that the line is visible after toggling folding
     $(this).get(0).scrollIntoView({ block: "center"});

diff --git a/src/dotnet/APIView/APIViewWeb/Pages/Assemblies/_CodeLine.cshtml b/src/dotnet/APIView/APIViewWeb/Pages/Assemblies/_CodeLine.cshtml
@@ -71,15 +71,22 @@
     <td class="line-details">
         <table>
             <tr>
-                @if(userPreference.HideLineNumbers == true || Model.CodeLine.IsDocumentation)
+                @if(userPreference.HideLineNumbers == true)
                 {
-                    var lineNumberClass = RemoveMultipleSpaces($"line-number {lineClass}");
-                    <td class="@lineNumberClass" style="visibility: hidden;"><span>@Model.LineNumber</span></td>
+                    var lineNumberClass = RemoveMultipleSpaces($"line-number d-none {lineClass}");
+                    <td class="@lineNumberClass"><span>@Model.LineNumber</span></td>
                 }
                 else
                 {
                     var lineNumberClass = RemoveMultipleSpaces($"line-number {lineClass}");
-                    <td class="@lineNumberClass"><span>@Model.LineNumber</span></td>
+                    if (Model.CodeLine.IsDocumentation)
+                    {
+                        <td class="@lineNumberClass invisible"><span></span></td>
+                    }
+                    else
+                    {
+                        <td class="@lineNumberClass"><span>@Model.LineNumber</span></td>
+                    }
                 }
                 <td class="@lineDetailsClass comment-icon-cell">
                     @if (!isRemoved && Model.CodeLine.ElementId != null)
@@ -88,21 +95,24 @@
                     }
                     else
                     {
-                       <a class="line-comment-button" style="visibility: hidden;">+</a> // Added for visual consistency
+                        <a class="line-comment-button invisible">+</a>// Added for visual consistency
                     }
                 </td>
                 <td class="@lineDetailsClass">
                     @if(Model.DocumentedByLines?.Length  > 0)
                     {
                         <span class="line-toggle-documentation-button" data-documented-by="[@String.Join(",",Model.DocumentedByLines)]">
+                            <svg height='23' width='23' class="invisible">
+                                <line x1='52%' y1='0' x2='52%' y2='30%' style='stroke:rgb(255,140,0);stroke-width:1.2' />
+                            </svg>
                             <i class="fa-regular fa-square-plus"></i>
                         </span>
                     }
                     @if (Model.CodeLine.IsDocumentation)
                     {
                         <span>
                             <svg height='23' width='23'>
-                                <line x1='60%' y1='0' x2='60%' y2='100%' style='stroke:rgb(0,139,139);stroke-width:1.2' />
+                                <line x1='52%' y1='0' x2='52%' y2='100%' style='stroke:rgb(255,140,0);stroke-width:1.2' />
                             </svg>
                         </span>
                     }

diff --git a/src/dotnet/APIView/APIViewWeb/Pages/Shared/_CommentThreadInnerPartial.cshtml b/src/dotnet/APIView/APIViewWeb/Pages/Shared/_CommentThreadInnerPartial.cshtml
@@ -42,7 +42,7 @@
                         }
                         <li><h4 class="dropdown-header">Create GitHub Issue</h4></li>
                         <div class="px-4">
-                            <a href="#" class="badge badge-light js-github" data-repo="azure-sdk-for-net" data-repo-language="c#">.Net</a>
+                            <a href="#" class="badge badge-light js-github" data-repo="azure-sdk-for-net" data-repo-language="c#">.NET</a>
                             <a href="#" class="badge badge-light js-github" data-repo="azure-sdk-for-java" data-repo-language="java">Java</a>
                             <a href="#" class="badge badge-light js-github" data-repo="azure-sdk-for-python" data-repo-language="python">Python</a>
                             <a href="#" class="badge badge-light js-github" data-repo="azure-sdk-for-c" data-repo-language="c">C</a>