HTML5 Report: add expansion indicator icon to scenarios and cases

TNG · May 4, 2015 · 07786d6 · 07786d6
1 parent f86e89e
commit 07786d6
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 3 deletions.
diff --git a/jgiven-html5-report/src/app/css/jgivenreport.css b/jgiven-html5-report/src/app/css/jgivenreport.css
@@ -22,6 +22,7 @@ h5 {
     font-size: 1.1rem;
     margin-top: 0.5rem;
     margin-bottom: 0;
+    margin-left: 0.5rem;
 }
 
 .header-fixed {
@@ -79,6 +80,18 @@ ul.tags {
     display: none;
 }
 
+.scenario-expand-icon, .case-expand-icon {
+    color: gray;
+}
+
+.scenario-expand-icon {
+    width: 0.8rem;
+}
+
+.case-expand-icon {
+    width: 1rem;
+}
+
 .scenario:hover .scenario-link-icon {
     display: inline;
     position: absolute;
@@ -90,7 +103,7 @@ ul.tags {
 .steps {
     list-style-type: none;
     padding-top: 0.5rem;
-    margin-left: 0.5rem;
+    margin-left: 1.3rem;
 }
 
 .has-tip {

diff --git a/jgiven-html5-report/src/app/css/print.css b/jgiven-html5-report/src/app/css/print.css
@@ -27,6 +27,14 @@
     page-break-after: auto;
 }
 
+.scenario-expand-icon, .case-expand-icon {
+    display: none !important;
+}
+
+.steps, h5 {
+    margin-left: 0;
+}
+
 a {
     text-decoration: none !important;
 }

diff --git a/jgiven-html5-report/src/app/index.html b/jgiven-html5-report/src/app/index.html
@@ -217,7 +217,7 @@ <h4 ng-hide="!currentPage.loading">Loading <i class="fa fa-circle-o-notch fa-spi
               <div class="row">
                 <div class="small-12 large-8 xlarge-6 column">
                   <a href="#scenario/{{scenario.className}}/{{scenario.testMethodName}}"><i class="fa fa-link scenario-link-icon" title="Direct link to this scenario"></i></a>
-                  <h4 class="toggle" ng-click="toggleScenario(scenario)">{{scenario.description.capitalize()}}
+                  <h4 class="toggle" ng-click="toggleScenario(scenario)"><i class="fa {{scenario.expanded ? 'fa-angle-down' : 'fa-angle-right'}} scenario-expand-icon"></i> {{scenario.description.capitalize()}}
                     <span ng-if="scenario.scenarioCases.length > 1" class="secondary radius label case-count">{{scenario.scenarioCases.length}}</span>
                     <i ng-if="scenario.executionStatus === 'SUCCESS'" class="check fa fa-check-square"></i>
                     <span ng-if="scenario.executionStatus === 'FAILED'" class="failed label radius alert">FAILED</span>
@@ -226,7 +226,8 @@ <h4 class="toggle" ng-click="toggleScenario(scenario)">{{scenario.description.ca
                   </h4>
                   <div ng-if="scenario.expanded || currentPage.print || currentPage.embed" id="scenario-{{$index}}" class="scenario-content">
                     <div ng-repeat="case in scenario.casesAsTable ? [scenario.scenarioCases[0]] : scenario.scenarioCases">
-                      <h5 class="toggle" ng-click="case.expanded = !case.expanded" ng-if="scenario.scenarioCases.length > 1 && !scenario.casesAsTable">Case {{case.caseNr}}:
+                      <h5 class="toggle" ng-click="case.expanded = !case.expanded" ng-if="scenario.scenarioCases.length > 1 && !scenario.casesAsTable">
+                        <i class="fa {{case.expanded ? 'fa-angle-down' : 'fa-angle-right'}} case-expand-icon"></i>Case {{case.caseNr}}:
                       <span ng-repeat="param in scenario.explicitParameters">
                         {{param}} = {{case.explicitArguments[$index]}}<span ng-if="$index != scenario.explicitParameters.length - 1">, </span>
                       </span>