summaryrefslogtreecommitdiff
path: root/www/app/components/main_panel/section_layout.js
diff options
context:
space:
mode:
authorKali Kaneko (leap communications) <kali@leap.se>2016-09-01 01:44:34 -0400
committerKali Kaneko (leap communications) <kali@leap.se>2016-09-01 01:44:34 -0400
commit4728855b40d2d37da8e035c5081fab5819b07fd0 (patch)
treec8a7c727521fe06a2c4fe9221cb77d30e8f0c3b9 /www/app/components/main_panel/section_layout.js
parent4613e74ce4e2c8b125a6a61585a4aec5f5151969 (diff)
[refactor] move js to top-level folder
Diffstat (limited to 'www/app/components/main_panel/section_layout.js')
-rw-r--r--www/app/components/main_panel/section_layout.js59
1 files changed, 59 insertions, 0 deletions
diff --git a/www/app/components/main_panel/section_layout.js b/www/app/components/main_panel/section_layout.js
new file mode 100644
index 0000000..e7c6f2a
--- /dev/null
+++ b/www/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>
+ )
+ }
+}