From 211cf2c38a5f4981614a7751badeb2237415f020 Mon Sep 17 00:00:00 2001
From: Roman Gotsiy <gotsijroman@gmail.com>
Date: Sun, 18 Oct 2015 12:29:18 +0300
Subject: [PATCH] Change param-list to a table

---
 lib/components/ParamsList/params-list.css  | 26 ++++++++++---
 lib/components/ParamsList/params-list.html | 45 +++++++++++++---------
 lib/components/ParamsList/params-list.js   |  2 -
 3 files changed, 47 insertions(+), 26 deletions(-)

diff --git a/lib/components/ParamsList/params-list.css b/lib/components/ParamsList/params-list.css
index 1138f3e6..f237a84a 100644
--- a/lib/components/ParamsList/params-list.css
+++ b/lib/components/ParamsList/params-list.css
@@ -4,13 +4,26 @@ h4 {
   color: black;
 }
 
-.param {
-  padding: 10px 0;
+table {
+  border-collapse: collapse;
 }
 
-.param > span {
-  padding: 5px 10px;
+td, th {
   vertical-align: top;
+  padding: 10px 15px;
+  font-size: 12px;
+}
+
+th {
+  background-color: #DCDCDC;
+  color: black;
+  padding: 5px 15px;
+  text-align: left;
+  border-bottom: 2px solid #afafaf;
+}
+
+td {
+  border-bottom: 1px solid #afafaf;
 }
 
 .param-name {
@@ -20,10 +33,11 @@ h4 {
 .param-type {
   background-color: #EAEAEA;
   border: silver 1px solid;
+  padding: 5px 10px;
+  line-height: 14px;
+  font-family: monospace;
 }
 
 .body-schema {
   display: inline-block;
-  vertical-align: top;
-  padding: 0 10px;
 }
diff --git a/lib/components/ParamsList/params-list.html b/lib/components/ParamsList/params-list.html
index 13b1114b..a58adefe 100644
--- a/lib/components/ParamsList/params-list.html
+++ b/lib/components/ParamsList/params-list.html
@@ -1,21 +1,30 @@
 <h4> Parameters </h4>
 <small class="no-params" *ng-if="data.noParams"> No parameters </small>
 <!-- General parameters -->
-<div *ng-for="#param of data.params">
-  <div class="param">
-    <span class="param-name">{{param.name}}</span>
-    <span class="param-type" [ng-class]="param.type">{{param.type}}</span>
-    <span class="param-description">{{param.description}}</span>
-  </div>
-</div>
-<!-- in-body parameter -->
-<div class="param body-param" *ng-if="data.bodyParam">
-  <span class="param-name">{{data.bodyParam.name}}</span>
-  <div class="body-schema">
-    <schema
-      [title]="data.bodyParam.type"
-      [description]="data.bodyParam.description"
-      pointer="{{data.bodyParam.pointer}}/schema">
-    </schema>
-  </div>
-</div>
+<table *ng-if="!data.noParams">
+  <thead>
+    <tr>
+      <th> Name </th>
+      <th> Type </th>
+      <th> Description </th>
+    </tr>
+  </thead>
+  <tr *ng-for="#param of data.params">
+    <!--<div class="param">-->
+      <td class="param-name">{{param.name}}</td>
+      <td>
+        <span class="param-type" [ng-class]="param.type">{{param.type}}</span>
+      </td>
+      <td class="param-description">{{param.description}}</td>
+    <!--</div>-->
+  </tr>
+  <!-- in-body parameter -->
+  <tr class="param body-param" *ng-if="data.bodyParam">
+    <td class="param-name">{{data.bodyParam.name}}</td>
+    <td>
+      <schema class="body-schema param-type" pointer="{{data.bodyParam.pointer}}/schema">
+      </schema>
+    </td>
+    <td class="param-description">{{data.bodyParam.description}}</td>
+  </tr>
+</table>
diff --git a/lib/components/ParamsList/params-list.js b/lib/components/ParamsList/params-list.js
index c613fd7c..f8adaf12 100644
--- a/lib/components/ParamsList/params-list.js
+++ b/lib/components/ParamsList/params-list.js
@@ -35,8 +35,6 @@ export class ParamsList extends BaseComponent {
     // temporary handle body param
     if (params.length && params[params.length - 1].in === 'body') {
       let bodyParam = params.pop();
-      bodyParam.type = bodyParam.schema.type
-        || JsonPointer.baseName(bodyParam.schema.$ref);
       bodyParam.pointer = bodyParam.$$pointer;
       this.data.bodyParam = bodyParam;
     }