Merge pull request #28 from chiefpansancolt/26-bug-file-view-not-chan…

…ging-per-row

Various Fixes and Additions version 2.1

.ruby-version

@@ -1 +1 @@
-3.1.1
+3.1.2

CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## Version [2.1.0](https://github.com/chiefpansancolt/simplecov-tailwindcss/releases/tag/2.1.0)
+
+### Features
+
+- Touch up Color contrast on file views ([#22](https://github.com/chiefpansancolt/simplecov-tailwindcss/issues/22))
+- Add File Details for slideover view of File ([#27](https://github.com/chiefpansancolt/simplecov-tailwindcss/issues/27))
+
+### Updates
+
+- Updated view of File list to show Percent covered better ([#29](https://github.com/chiefpansancolt/simplecov-tailwindcss/issues/29))
+
+### Bug Fixes
+
+- Fixed View not changing per row ([#26](https://github.com/chiefpansancolt/simplecov-tailwindcss/issues/26))
+- Fix bottom of small file views ([#23](https://github.com/chiefpansancolt/simplecov-tailwindcss/issues/23))
+
 ## Version [2.0.0](https://github.com/chiefpansancolt/simplecov-tailwindcss/releases/tag/2.0.0)
 
 ### Features

README.md

@@ -22,7 +22,7 @@ Generates a HTML Tailwind Design report generated from Simplecov using ruby 2.5
 
 ## Installing
 
-Add the below to your Gemfile to make Simplecov Material available as a formatter for your application
+Add the below to your Gemfile to make Simplecov Material available as a formatter for your application.
 
 ### Ruby Gems Host
 

lib/simplecov-tailwindcss.rb

@@ -163,6 +163,23 @@ def line_coverage_class(status)
         end
       end
 
+      def code_coverage_class(status)
+        case status
+        when "covered", "missed", "skipped"
+          "text-slate-900"
+        else
+          "text-slate-900 dark:text-slate-200"
+        end
+      end
+
+      def branch_enabled_class
+        if branchable_result?
+          "mb-16"
+        else
+          "mb-12"
+        end
+      end
+
       def id(source_file)
         Digest::SHA1.hexdigest(source_file.filename)
       end

lib/simplecov-tailwindcss/version.rb

@@ -3,7 +3,7 @@
 module SimpleCov
   module Formatter
     class TailwindFormatter
-      VERSION = "2.0.0"
+      VERSION = "2.1.0"
     end
   end
 end

package.json

@@ -1,6 +1,6 @@
 {
   "name": "simplecov-tailwind",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "HTML tailwind Design View for Simplecov formatter",
   "scripts": {
     "build": "npm-run-all build:*",

views/dialog.erb

@@ -1,31 +1,33 @@
-<div class="bg-blue-700 py-6 px-4 sm:px-6 hidden" id="<%= id(file) %>">
-  <div class="flex">
-    <h2 class="text-lg font-medium text-slate-100">
-      <%= shortened_filename file %>
-    </h2>
-  </div>
-  <div class="mt-1 flex divide-x divide-slate-300">
-    <p class="flex items-center text-sm pr-2">
-      <span class="pr-2 text-slate-100">% Covered:</span>
-      <span class="font-bold <%= coverage_class(file.covered_percent) %>">
-        <%= file.covered_percent.round(2).to_s %>%
-      </span>
-    </p>
-    <% if branchable_result? %>
-      <p class="flex items-center text-sm pl-2">
-        <span class="pr-2 text-slate-100">% Branches Covered:</span>
-        <span class="font-bold <%= coverage_class(file.branches_coverage_percent) %>">
-          <%= file.branches_coverage_percent.round(2).to_s %>%
-        </span>
-      </p>
-      <% end %>
+<div class="flex h-full flex-col overflow-y-scroll bg-gray-50 dark:bg-slate-900 shadow-xl hidden" id="<%= id(file) %>">
+  <div class="bg-blue-700 py-6 px-4 sm:px-6 sticky top-0 z-40">
+    <div class="flex items-center justify-between">
+      <h2 class="text-lg font-medium text-slate-100">
+        <%= shortened_filename file %>
+      </h2>
+    </div>
+    <div class="mt-1">
+      <div class="mt-1 flex divide-x divide-slate-300">
+        <p class="flex items-center text-sm pr-2">
+          <span class="pr-2 text-slate-100">% Covered:</span>
+          <span class="font-bold <%= coverage_class(file.covered_percent) %>">
+            <%= file.covered_percent.round(2).to_s %>%
+          </span>
+        </p>
+        <% if branchable_result? %>
+          <p class="flex items-center text-sm pl-2">
+            <span class="pr-2 text-slate-100">% Branches Covered:</span>
+            <span class="font-bold <%= coverage_class(file.branches_coverage_percent) %>">
+              <%= file.branches_coverage_percent.round(2).to_s %>%
+            </span>
+          </p>
+          <% end %>
+      </div>
+    </div>
   </div>
-</div>
-<div class="flex h-full flex-col overflow-y-scroll bg-gray-50 dark:bg-slate-900 shadow-xl z-50">
-  <div class="relative flex-1">
+  <div class="bg-blue-700 relative flex-1">
     <div class="absolute inset-0">
-      <pre class="bg-blue-700 text-white whitespace-normal w-full text-xs pb-14">
-        <ol class="list-decimal ml-12 mb-12 text-slate-300">
+      <pre class="bg-blue-700 text-white whitespace-normal w-full text-xs pb-2">
+        <ol class="list-decimal ml-12 text-slate-300 <%= branch_enabled_class %>">
           <% file.lines.each do |line| %>
             <li class="bg-white border-l-4 border-gray-700 py-2 pl-2 pr-4 <%= line_coverage_class(line.status) %>" data-hits="<%= line.coverage ? line.coverage : '' %>" data-linenumber="<%= line.number %>">
               <% if line.covered? %>
@@ -41,11 +43,55 @@
                   </span>
                 <% end %>
               <% end %>
-              <code class="text-gray-900 whitespace-pre-wrap"><%= CGI.escapeHTML(line.src.chomp) %></code>
+              <code class="whitespace-pre-wrap <%= code_coverage_class(line.status) %>"><%= CGI.escapeHTML(line.src.chomp) %></code>
             </li>
           <% end %>
         </ol>
       </pre>
     </div>
   </div>
+  <div class="bg-blue-700 py-2 px-4 sm:px-6 fixed bottom-0 z-40 w-full">
+    <div class="mt-1 flex divide-x divide-slate-300">
+      <p class="flex items-center text-sm pr-2">
+        <span class="font-bold text-slate-100">
+          <%= file.lines_of_code %>
+        </span>
+        <span class="pl-2 text-slate-100">Relevant Lines</span>
+      </p>
+      <p class="flex items-center text-sm pr-2 pl-2">
+        <span class="font-bold text-green-500">
+          <%= format_number(file.covered_lines.count) %>
+        </span>
+        <span class="pl-2 text-slate-100">Lines Covered</span>
+      </p>
+      <p class="flex items-center text-sm pr-2 pl-2">
+        <span class="font-bold text-red-500">
+          <%= format_number(file.missed_lines.count) %>
+        </span>
+        <span class="pl-2 text-slate-100">Lines Missed</span>
+      </p>
+    </div>
+    <% if branchable_result? %>
+      <div class="mt-1 flex divide-x divide-slate-300">
+        <p class="flex items-center text-sm pr-2">
+          <span class="font-bold text-slate-100">
+            <%= file.total_branches.count %>
+          </span>
+          <span class="pl-2 text-slate-100">Total Branches</span>
+        </p>
+        <p class="flex items-center text-sm pr-2 pl-2">
+          <span class="font-bold text-green-500">
+            <%= format_number(file.covered_branches.count) %>
+          </span>
+          <span class="pl-2 text-slate-100">Branches Covered</span>
+        </p>
+        <p class="flex items-center text-sm pr-2 pl-2">
+          <span class="font-bold text-red-500">
+            <%= format_number(file.missed_branches.count) %>
+          </span>
+          <span class="pl-2 text-slate-100">Branches Missed</span>
+        </p>
+      </div>
+    <% end %>
+  </div>
 </div>

views/file_detail.erb

@@ -6,60 +6,62 @@
     data-file-name="<%= shortened_filename(file) %>">
   <a href="#<%= id(file) %>" class="block" data-action="click->slideover#openEvent" data-index="<%= id(file) %>">
     <div class="flex items-center px-4 py-4 sm:px-6 justify-between">
-      <div class="min-w-0 flex-1 justify-between items-center mr-4">
-        <div class="flex-1 flex items-center justify-between">
-          <p class="text-sm font-medium text-blue-700 truncate">
-            <%= shortened_filename(file) %>
-          </p>
-          <div class="ml-2 flex-shrink-0 flex">
-            <p class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full <%= coverage_badge_class(file.covered_percent) %>">
-              <%= sprintf("%.2f", file.covered_percent.round(2)) %>%
-            </p>
+      <div class="flex-1 flex items-center justify-between pr-4">
+        <div>
+          <div class="min-w-0 flex-1 justify-between items-center mr-4">
+            <div class="text-sm font-medium text-blue-700 truncate">
+              <%= shortened_filename(file) %>
+            </div>
+            <div class="mt-2">
+              <div class="lg:flex">
+                <p class="flex items-center text-sm">
+                  <span class="font-bold pr-2">Lines:</span>
+                  <%= format_number(file.lines.count) %>
+                </p>
+                <p class="mt-2 flex items-center text-sm lg:mt-0 lg:ml-6">
+                  <span class="font-bold pr-2">Relevent Lines:</span>
+                  <%= format_number(file.covered_lines.count + file.missed_lines.count) %>
+                </p>
+                <p class="mt-2 flex items-center text-sm lg:mt-0 lg:ml-6">
+                  <span class="font-bold pr-2">Covered Lines:</span>
+                  <%= format_number(file.covered_lines.count) %>
+                </p>
+                <p class="mt-2 flex items-center text-sm lg:mt-0 lg:ml-6">
+                  <span class="font-bold pr-2">Missed Lines:</span>
+                  <%= format_number(file.missed_lines.count) %>
+                </p>
+                <p class="mt-2 flex items-center text-sm lg:mt-0 lg:ml-6">
+                  <span class="font-bold pr-2">AVG Hits/Lines:</span>
+                  <%= format_number(file.covered_strength.round(2)) %>
+                </p>
+              </div>
+              <% if branchable_result? %>
+                <div class="lg:flex mt-2">
+                  <p class="flex items-center text-sm lg:mt-0">
+                    <span class="font-bold pr-2">% Covered Branches:</span>
+                    <%= sprintf("%.2f", file.branches_coverage_percent.round(2)) %>%
+                  </p>
+                  <p class="mt-2 flex items-center text-sm lg:mt-0 lg:ml-6">
+                    <span class="font-bold pr-2">Branches:</span>
+                    <%= format_number(file.total_branches.count) %>
+                  </p>
+                  <p class="mt-2 flex items-center text-sm lg:mt-0 lg:ml-6">
+                    <span class="font-bold pr-2">Covered Branches:</span>
+                    <%= format_number(file.covered_branches.count) %>
+                  </p>
+                  <p class="mt-2 flex items-center text-sm lg:mt-0 lg:ml-6">
+                    <span class="font-bold pr-2">Missed Branches:</span>
+                    <%= format_number(file.missed_branches.count) %>
+                  </p>
+                </div>
+              <% end %>
+            </div>
           </div>
         </div>
-        <div class="mt-2">
-          <div class="lg:flex">
-            <p class="flex items-center text-sm">
-              <span class="font-bold pr-2">Lines:</span>
-              <%= format_number(file.lines.count) %>
-            </p>
-            <p class="mt-2 flex items-center text-sm lg:mt-0 lg:ml-6">
-              <span class="font-bold pr-2">Relevent Lines:</span>
-              <%= format_number(file.covered_lines.count + file.missed_lines.count) %>
-            </p>
-            <p class="mt-2 flex items-center text-sm lg:mt-0 lg:ml-6">
-              <span class="font-bold pr-2">Covered Lines:</span>
-              <%= format_number(file.covered_lines.count) %>
-            </p>
-            <p class="mt-2 flex items-center text-sm lg:mt-0 lg:ml-6">
-              <span class="font-bold pr-2">Missed Lines:</span>
-              <%= format_number(file.missed_lines.count) %>
-            </p>
-            <p class="mt-2 flex items-center text-sm lg:mt-0 lg:ml-6">
-              <span class="font-bold pr-2">AVG Hits/Lines:</span>
-              <%= format_number(file.covered_strength.round(2)) %>
-            </p>
-          </div>
-          <% if branchable_result? %>
-            <div class="lg:flex mt-2">
-              <p class="flex items-center text-sm lg:mt-0">
-                <span class="font-bold pr-2">% Covered Branches:</span>
-                <%= sprintf("%.2f", file.branches_coverage_percent.round(2)) %>%
-              </p>
-              <p class="mt-2 flex items-center text-sm lg:mt-0 lg:ml-6">
-                <span class="font-bold pr-2">Branches:</span>
-                <%= format_number(file.total_branches.count) %>
-              </p>
-              <p class="mt-2 flex items-center text-sm lg:mt-0 lg:ml-6">
-                <span class="font-bold pr-2">Covered Branches:</span>
-                <%= format_number(file.covered_branches.count) %>
-              </p>
-              <p class="mt-2 flex items-center text-sm lg:mt-0 lg:ml-6">
-                <span class="font-bold pr-2">Missed Branches:</span>
-                <%= format_number(file.missed_branches.count) %>
-              </p>
-            </div>
-          <% end %>
+        <div class="flex-shrink-0 flex">
+          <p class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full <%= coverage_badge_class(file.covered_percent) %>">
+            <%= sprintf("%.2f", file.covered_percent.round(2)) %>%
+          </p>
         </div>
       </div>
       <div>

views/main.erb

@@ -36,7 +36,7 @@
                 </div>
               </div>
             </div>
-            <div class="relative ml-auto flex w-96 justify-end ml-6">
+            <div class="relative flex w-96 justify-end ml-6">
               <div class="relative z-0 inline-flex shadow-sm rounded-md">
                 <button data-action="click->search#orderEvent" data-search-target="asc" value="-1" type="button" class="relative inline-flex items-center px-2 py-2 rounded-l-md text-sm font-medium border border-slate-900/10 dark:border-slate-50/[0.2] focus:outline-none focus:ring-blue-700 focus:border-blue-700 dark:bg-slate-900 text-slate-500 dark:text-slate-400">
                   <span class="sr-only">ascending</span>