tabs added

dist/swagger-ui.js.map

@@ -1 +1 @@
-{"version":3,"file":"swagger-ui.js","sources":["webpack:///swagger-ui.js"],"mappings":"AAAA;;;;;;AA21CA;AAoyHA;AAmyHA;AAokGA;AA+9BA;AA0hCA;AAgjCA;AAu5BA","sourceRoot":""}
+{"version":3,"file":"swagger-ui.js","sources":["webpack:///swagger-ui.js"],"mappings":"AAAA;;;;;;AAm2CA;AAoyHA;AAmyHA;AAokGA;AA89BA;AAwhCA;AA2kCA;AAu5BA","sourceRoot":""}

src/core/components/parameters.jsx

@@ -7,6 +7,15 @@ const eachMap = (iterable, fn) => iterable.valueSeq().filter(Im.Map.isMap).map(f
 
 export default class Parameters extends Component {
 
+  constructor(props) {
+   super(props)
+   this.state = {
+     callbackVisible: false,
+     parametersVisible: true
+   }
+   //this.toggleTab = this.toggleTab.bind(this)
+ }
+
   static propTypes = {
     parameters: ImPropTypes.list.isRequired,
     specActions: PropTypes.object.isRequired,
@@ -48,6 +57,14 @@ export default class Parameters extends Component {
     changeConsumesValue(onChangeKey, val)
   }
 
+  // toggleTab = (tab) => {
+  //   if(tab === "parameters"){
+  //     this.setState({parametersVisible: true})
+  //   }else if(tab === "callbacks"){
+  //     this.setState({callbackVisible: true})
+  //   }
+  // }
+
   render(){
 
     let {
@@ -71,11 +88,19 @@ export default class Parameters extends Component {
     return (
       <div className="opblock-section">
         <div className="opblock-section-header">
-          <h4 className="opblock-title">Parameters</h4>
+          <div className="tab-header">
+            <div onClick={this.toggleTab("parameters")} className={this.state.parametersVisible ? "tab-item active" : "tab-item"}>
+              <h4 className="opblock-title"><span>Parameters</span></h4>
+            </div>
+            <div onClick={this.toggleTab("callbacks")} className="tab-item">
+              <h4 className="opblock-title"><span>Callbacks</span></h4>
+            </div>
+          </div>
             { allowTryItOut ? (
               <TryItOutButton enabled={ tryItOutEnabled } onCancelClick={ onCancelClick } onTryoutClick={ onTryoutClick } />
             ) : null }
         </div>
+        {this.state.parametersVisible ? <div className="parameters-container">
           { !parameters.count() ? <div className="opblock-description-wrapper"><p>No parameters</p></div> :
             <div className="table-container">
               <table className="parameters">
@@ -103,6 +128,9 @@ export default class Parameters extends Component {
               </table>
             </div>
           }
+        </div> : "" }
+
+        {this.state.callbackVisible ? <div className="callbacks-container"></div> : "" }
       </div>
     )
   }

src/style/_layout.scss

@@ -75,6 +75,11 @@ body
     {
         border-color: $color;
     }
+
+    .tab-header .tab-item.active h4 span:after
+    {
+        background: $color;
+    }
 }
 
 
@@ -142,6 +147,51 @@ body
     border-radius: 4px;
     box-shadow: 0 0 3px rgba(#000,.19);
 
+    .tab-header
+    {
+        display: flex;
+
+        flex: 1;
+
+        .tab-item
+        {
+            padding: 0 40px;
+
+            cursor: pointer;
+
+            &:first-of-type
+            {
+                padding: 0 40px 0 0;
+            }
+            &.active
+            {
+                h4
+                {
+                    span
+                    {
+                        position: relative;
+
+
+                        &:after
+                        {
+                            position: absolute;
+                            bottom: -15px;
+                            left: 50%;
+
+                            width: 120%;
+                            height: 4px;
+
+                            content: '';
+                            transform: translateX(-50%);
+
+                            background: #888;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
 
     &.is-open
     {
@@ -186,7 +236,6 @@ body
 
             margin: 0;
 
-            flex: 1;
             @include text_headline();
         }
     }