Integrated master/detail, refactor Icon, add base router

2018-05-12 12:36:39 -07:00
parent 84babf0e4b
commit 6fae5ef5d6
61 changed files with 1203 additions and 1620 deletions
--- a/website/src/ui/Header.js
+++ b/website/src/ui/Header.js
@@ -0,0 +1,169 @@
+import React, { Component } from "react"
+import Radium from "radium"
+import PropTypes from "prop-types"
+import { Icon, Image, Box, Row } from "."
+import { colorInfo, sizeInfo, fontInfo } from "./style"
+
+export class Header extends Component {
+  static propTypes = {
+    history: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
+    location: PropTypes.object,
+    left: PropTypes.arrayOf(PropTypes.object),
+    right: PropTypes.arrayOf(PropTypes.object),
+  }
+
+  render() {
+    const { location } = this.props
+
+    const renderHeaderitem = (item, index) => {
+      if (item.image) {
+        return (
+          <Header.Button
+            key={index}
+            image={item.image}
+            onClick={() => this.props.history.push(item.path)}
+          />
+        )
+      } else if (item.icon) {
+        return (
+          <Header.Button
+            key={index}
+            icon={item.icon}
+            onClick={() => this.props.history.push(item.path)}
+          />
+        )
+      } else if (item.text) {
+        return (
+          <Header.TextButton
+            key={index}
+            active={location.pathname.endsWith(item.path)}
+            text={item.text}
+            onClick={() => this.props.history.push(item.path)}
+          />
+        )
+      }
+    }
+
+    return (
+      <Box
+        background={colorInfo.headerButtonBackground}
+        borderBottom={{
+          width: sizeInfo.headerBorderWidth,
+          color: colorInfo.headerBorder,
+        }}
+        style={{ boxSizing: "content" }}>
+        <Row fillParent>
+          <Row.Item>{this.props.left.map(renderHeaderitem)}</Row.Item>
+          <Row.Item grow />
+          <Row.Item>{this.props.right.map(renderHeaderitem)}</Row.Item>
+        </Row>
+      </Box>
+    )
+  }
+}
+
+Header.Button = Radium(
+  class HeaderButton extends Component {
+    static propTypes = {
+      onClick: PropTypes.func,
+      icon: PropTypes.string,
+      image: PropTypes.string,
+    }
+
+    static style = {
+      background: colorInfo.headerButtonBackground,
+      verticalAlign: "middle",
+      borderWidth: 0,
+      padding: "0 0 0 0",
+      outline: "none",
+      ":hover": {
+        background: colorInfo.headerButtonBackgroundHover,
+      },
+      ":active": {
+        background: colorInfo.headerButtonBackgroundActive,
+      },
+    }
+
+    render() {
+      // Times two to account for zooming
+      const size = sizeInfo.headerHeight - sizeInfo.headerBorderWidth
+      const { onClick, icon, image } = this.props
+      let content = null
+
+      if (image) {
+        content = (
+          <Image
+            source={image}
+            width={size}
+            height={size}
+            margin={sizeInfo.headerButtonMargin}
+          />
+        )
+      } else if (icon) {
+        content = (
+          <Icon name={icon} size={size} margin={sizeInfo.headerButtonMargin} />
+        )
+      }
+
+      return (
+        <button
+          type="button"
+          style={[{ height: size, width: size }, HeaderButton.style]}
+          onClick={onClick}>
+          {content}
+        </button>
+      )
+    }
+  }
+)
+
+Header.TextButton = Radium(
+  class HeaderTextButton extends Component {
+    static propTypes = {
+      active: PropTypes.bool,
+      text: PropTypes.string,
+      onClick: PropTypes.func,
+    }
+
+    static style = {
+      display: "inline-block",
+      fontSize: fontInfo.size.header,
+      fontFamily: fontInfo.family,
+      color: fontInfo.color.normal,
+      textAlign: "left",
+      outline: "none",
+      background: "transparent",
+      verticalAlign: "middle",
+      borderWidth: 0,
+      paddingLeft: sizeInfo.headerSpacing,
+      paddingRight: sizeInfo.headerSpacing,
+      paddingTop: 0,
+      paddingBottom: 0,
+      ":hover": {
+        background: colorInfo.headerButtonBackgroundHover,
+      },
+      ":active": {
+        background: colorInfo.headerButtonBackgroundActive,
+      },
+    }
+
+    render() {
+      const height = sizeInfo.headerHeight - sizeInfo.headerBorderWidth
+      const { text, active, onClick } = this.props
+
+      return (
+        <button
+          type="button"
+          style={[{ height }, HeaderTextButton.style]}
+          onClick={onClick}>
+          <div
+            style={{
+              textDecoration: active ? "underline" : "initial",
+            }}>
+            {text}
+          </div>
+        </button>
+      )
+    }
+  }
+)