Make response tab collapsible

Author: jcenturion

dist/scripts/api-console.js

@@ -1298,6 +1298,12 @@
             $scope.showRequestMetadata = true;
           }
         };
+
+        $scope.showResponseMetadata = true;
+
+        $scope.toggleResponseMetadata = function () {
+          $scope.showResponseMetadata = !$scope.showResponseMetadata;
+        };
       }
     };
   };
@@ -5298,10 +5304,14 @@ angular.module('ramlConsoleApp').run(['$templateCache', function($templateCache)
     "\n" +
     "            <section class=\"raml-console-side-bar-try-it-description\">\n" +
     "              <header class=\"raml-console-sidebar-row raml-console-sidebar-header\">\n" +
-    "                <h3 class=\"raml-console-sidebar-head\">Response</h3>\n" +
+    "                <h3 class=\"raml-console-sidebar-head\">\n" +
+    "                  <button ng-class=\"{'raml-console-is-open':showResponseMetadata, 'raml-console-is-collapsed':!showResponseMetadata}\" class=\"raml-console-sidebar-expand-btn\" ng-click=\"toggleResponseMetadata()\">\n" +
+    "                    Response\n" +
+    "                  </button>\n" +
+    "                </h3>\n" +
     "              </header>\n" +
     "\n" +
-    "              <div class=\"raml-console-sidebar-row sidebar-response\" ng-class=\"{'raml-console-is-active':requestEnd}\">\n" +
+    "              <div class=\"raml-console-sidebar-row raml-console-sidebar-response\" ng-class=\"{'raml-console-is-active':showResponseMetadata}\">\n" +
     "                <h3 class=\"raml-console-sidebar-response-head\">Status</h3>\n" +
     "                <p class=\"raml-console-sidebar-response-item\">{{response.status}}</p>\n" +
     "\n" +

src/app/directives/sidebar.js

@@ -438,6 +438,12 @@
             $scope.showRequestMetadata = true;
           }
         };
+
+        $scope.showResponseMetadata = true;
+
+        $scope.toggleResponseMetadata = function () {
+          $scope.showResponseMetadata = !$scope.showResponseMetadata;
+        };
       }
     };
   };

src/app/directives/sidebar.tpl.html

@@ -151,10 +151,14 @@ <h3 class="raml-console-sidebar-response-head raml-console-sidebar-response-head
 
             <section class="raml-console-side-bar-try-it-description">
               <header class="raml-console-sidebar-row raml-console-sidebar-header">
-                <h3 class="raml-console-sidebar-head">Response</h3>
+                <h3 class="raml-console-sidebar-head">
+                  <button ng-class="{'raml-console-is-open':showResponseMetadata, 'raml-console-is-collapsed':!showResponseMetadata}" class="raml-console-sidebar-expand-btn" ng-click="toggleResponseMetadata()">
+                    Response
+                  </button>
+                </h3>
               </header>
 
-              <div class="raml-console-sidebar-row sidebar-response" ng-class="{'raml-console-is-active':requestEnd}">
+              <div class="raml-console-sidebar-row raml-console-sidebar-response" ng-class="{'raml-console-is-active':showResponseMetadata}">
                 <h3 class="raml-console-sidebar-response-head">Status</h3>
                 <p class="raml-console-sidebar-response-item">{{response.status}}</p>