summaryrefslogtreecommitdiff
path: root/ui/app/components/main_panel/section_layout.js
diff options
context:
space:
mode:
Diffstat (limited to 'ui/app/components/main_panel/section_layout.js')
-rw-r--r--ui/app/components/main_panel/section_layout.js59
1 files changed, 59 insertions, 0 deletions
diff --git a/ui/app/components/main_panel/section_layout.js b/ui/app/components/main_panel/section_layout.js
new file mode 100644
index 00000000..e7c6f2ab
--- /dev/null
+++ b/ui/app/components/main_panel/section_layout.js
@@ -0,0 +1,59 @@
+//
+// This is the layout for a service section in the main window.
+// It does not do anything except for arrange items using css and html.
+//
+
+import React from 'react'
+
+export default class SectionLayout extends React.Component {
+
+ static get defaultProps() {return{
+ icon: null,
+ buttons: null,
+ status: null,
+ className: "",
+ style: {}
+ }}
+
+ constructor(props) {
+ super(props)
+ }
+
+ render() {
+ let className = ["service-section", this.props.className].join(' ')
+ let status = null
+ let icon = null
+ let buttons = null
+
+ if (this.props.status) {
+ status = (
+ <div className="status">
+ <img src={'img/' + this.props.status + '.svg' } />
+ </div>
+ )
+ }
+ if (this.props.icon) {
+ icon = (
+ <div className="icon">
+ <img src={'img/' + this.props.icon + '.svg'} />
+ </div>
+ )
+ }
+ if (this.props.buttons)
+ buttons = (
+ <div className="buttons">
+ {this.props.buttons}
+ </div>
+ )
+ return(
+ <div className={className} style={this.props.style}>
+ {icon}
+ <div className="body">
+ {this.props.children}
+ </div>
+ {buttons}
+ {status}
+ </div>
+ )
+ }
+}