1 files changed, 58 insertions, 4 deletions

diff --git a/ui/app/components/layout/index.js b/ui/app/components/layout/index.js
index 8e7c4b58..b32961a7 100644
--- a/ui/app/components/layout/index.js
+++ b/ui/app/components/layout/index.js
@@ -4,7 +4,8 @@ import './layout.less'
 
 class HorizontalLayout extends React.Component {
   static get defaultProps() {return{
-    equalWidths: false
+    equalWidths: false,
+    className: ''
   }}
 
   constructor(props) {
@@ -12,7 +13,7 @@ class HorizontalLayout extends React.Component {
   }
 
   render() {
-    let className = "horizontal-layout"
+    let className = "horizontal-layout " + this.props.className
     if (this.props.equalWidths) {
       className = className + " equal" + this.props.children.length
     }
@@ -25,17 +26,70 @@ class HorizontalLayout extends React.Component {
 }
 
 class Column extends React.Component {
+  static get defaultProps() {return{
+    className: ''
+  }}
+
+  constructor(props) {
+    super(props)
+  }
+
+  render() {
+    let className = "layout-column " + this.props.className
+    return (
+      <div className={className}>
+        {this.props.children}
+      </div>
+    )
+  }
+}
+
+class VerticalLayout extends React.Component {
+  static get defaultProps() {return{
+    equalWidths: false,
+    className: ''
+  }}
+
   constructor(props) {
     super(props)
   }
 
   render() {
+    let className = "vertical-layout " + this.props.className
+    if (this.props.equalWidths) {
+      className = className + " equal" + this.props.children.length
+    }
+    return (
+      <div className={className}>
+        {this.props.children}
+      </div>
+    )
+  }
+}
+
+class Row extends React.Component {
+  static get defaultProps() {return{
+    className: '',
+    size: 'expand',
+    gutter: ''
+  }}
+
+  constructor(props) {
+    super(props)
+  }
+
+  render() {
+    let style = {}
+    if (this.props.gutter) {
+      style = {marginBottom: this.props.gutter}
+    }
+    let className = ["layout-row", this.props.className, this.props.size].join(" ")
     return (
-      <div className="layout-column">
+      <div style={style} className={className}>
         {this.props.children}
       </div>
     )
   }
 }
 
-export {HorizontalLayout, Column}
\ No newline at end of file
+export {HorizontalLayout, VerticalLayout, Column, Row}
\ No newline at end of file