Publishing editor

web/src/scripts/components/forms/FormHeader.jsx

@@ -17,50 +17,61 @@
 
 import React, { Component, } from 'react'
 
-const style = {
-  height: 30,
-  display: 'flex',
-  flexDirection: 'row',
-  alignItems: 'center',
-  paddingRight: 10,
-  paddingLeft: 10,
-  minWidth: 0,
+const styles = {
+  container: {
+    height: 30,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingRight: 10,
+    paddingLeft: 10,
+    minWidth: 0,
+  },
+  button: {
+    fontSize: 18,
+    fontWeight: 300,
+  }
 }
 
-const FormHeader = ({label, inset, labelWidth, disabled}) => {
+export default class extends Component {
 
-  // TODO consolidate styles - similar to formlabel
-  let labelStyle = {
-    lineHeight: '30px',
-    color: 'rgb(73,73,73)',
-    fontSize: 11,
-    paddingLeft: inset,
-    flex: labelWidth ? `0 0 ${labelWidth}px` : `1 1 auto`,
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    paddingRight: 5,
-    fontWeight: 'bold',
+  static defaultProps = {
+    inset: 0,
   }
 
-  if (disabled) {
-    labelStyle = Object.assign({}, labelStyle, {
-      color: 'rgb(170,170,170)',
-    })
-  }
+  render() {
+    const {children, label, inset, labelWidth, disabled} = this.props
 
-  return (
-    <div style={style}>
-      <div style={labelStyle}
-        title={label}>
-        {label}
-      </div>
-    </div>
-  )
-}
+    // TODO consolidate styles - similar to formlabel
+    let labelStyle = {
+      lineHeight: '30px',
+      color: 'rgb(73,73,73)',
+      fontSize: 11,
+      paddingLeft: inset,
+      flex: labelWidth ? `0 0 ${labelWidth}px` : `1 1 auto`,
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      fontWeight: 'bold',
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+    }
 
-FormHeader.defaultProps = {
-  inset: 0,
-}
+    if (disabled) {
+      labelStyle = Object.assign({}, labelStyle, {
+        color: 'rgb(170,170,170)',
+      })
+    }
 
-export default FormHeader
+    return (
+      <div style={styles.container}>
+        <div style={labelStyle}
+          title={label}>
+          {label}
+          {children}
+        </div>
+      </div>
+    )
+  }
+}

web/src/scripts/components/forms/FormHeaderPlusButton.jsx

@@ -0,0 +1,55 @@
+/**
+ *    Copyright (C) 2015 Deco Software Inc.
+ *
+ *    This program is free software: you can redistribute it and/or modify
+ *    it under the terms of the GNU Affero General Public License, version 3,
+ *    as published by the Free Software Foundation.
+ *
+ *    This program is distributed in the hope that it will be useful,
+ *    but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *    GNU Affero General Public License for more details.
+ *
+ *    You should have received a copy of the GNU Affero General Public License
+ *    along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import React, { Component, } from 'react'
+
+import SimpleButton from '../buttons/SimpleButton'
+
+const styles = {
+  button: {
+    position: 'relative',
+    top: -2,
+    fontSize: 16,
+    fontWeight: 300,
+    cursor: 'default',
+  },
+  default: {
+    opacity: 1,
+  },
+  hover: {
+    opacity: 0.7,
+  },
+  active: {
+    opacity: 0.85,
+  }
+}
+
+export default class extends Component {
+  render() {
+    return (
+      <SimpleButton
+        defaultStyle={styles.default}
+        activeStyle={styles.active}
+        hoverStyle={styles.hover}
+        innerStyle={styles.button}
+        {...this.props}
+      >
+        +
+      </SimpleButton>
+    )
+  }
+}

web/src/scripts/components/index.js

@@ -15,14 +15,37 @@
  *
  */
 
+// Buttons
+export SimpleButton from './buttons/SimpleButton'
+export LoginButton from './buttons/LoginButton'
+export InspectorButton from './buttons/InspectorButton'
+
+// Display
+export NoContent from './display/NoContent'
+export Callout from './display/Callout'
+
+// Forms
+export FormHeader from './forms/FormHeader'
+export FormHeaderPlusButton from './forms/FormHeaderPlusButton'
+export FormRow from './forms/FormRow'
+
+// Headers
+export PaneHeader from './headers/PaneHeader'
+
+// Input
+export FileSelectorInput from './input/FileSelectorInput'
+export StringInput from './input/StringInput'
+
+// Inspector
+export InspectorField from './inspector/InspectorField'
+export LiveValue from './inspector/LiveValue'
+export MetadataEditor from './inspector/MetadataEditor'
+export NameEditor from './inspector/NameEditor'
+
+// Menu
 export FilterableList from './menu/FilterableList'
 export ComponentMenuItem from './menu/ComponentMenuItem'
 export DraggableComponentMenuItem from './menu/DraggableComponentMenuItem'
 
-export SimpleButton from './buttons/SimpleButton'
-export LoginButton from './buttons/LoginButton'
-export InspectorButton from './buttons/InspectorButton'
-export PaneHeader from '../components/headers/PaneHeader'
-export NoContent from '../components/display/NoContent'
-export Callout from '../components/display/Callout'
-export UserDetailsBanner from '../components/user/UserDetailsBanner'
+// User
+export UserDetailsBanner from './user/UserDetailsBanner'

web/src/scripts/components/inspector/InspectorField.jsx

@@ -0,0 +1,93 @@
+/**
+ *    Copyright (C) 2015 Deco Software Inc.
+ *
+ *    This program is free software: you can redistribute it and/or modify
+ *    it under the terms of the GNU Affero General Public License, version 3,
+ *    as published by the Free Software Foundation.
+ *
+ *    This program is distributed in the hope that it will be useful,
+ *    but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *    GNU Affero General Public License for more details.
+ *
+ *    You should have received a copy of the GNU Affero General Public License
+ *    along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import _ from 'lodash'
+import React, { Component } from 'react'
+
+import FormRow from '../forms/FormRow'
+import Menu from '../menu/Menu'
+
+const INPUT_WIDTH = 115
+
+export default class extends Component {
+
+  static propTypes = {
+    inset: React.PropTypes.number,
+    width: React.PropTypes.number,
+    inputElement: React.PropTypes.any,
+    menuElement: React.PropTypes.element.isRequired,
+  }
+
+  static defaultProps = {
+    inset: 0,
+  }
+
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      showMenu: false,
+      menuPosition: { x: 0, y: 0 },
+    }
+
+    this.setMenuVisibility = this.setMenuVisibility.bind(this)
+    this.setMenuVisibility = _.throttle(this.setMenuVisibility, 100, {
+      leading: true,
+      trailing: false,
+    })
+  }
+
+  setMenuVisibility(visible) {
+    this.setState({
+      showMenu: visible
+    })
+  }
+
+  render() {
+    const {name, inset, width, inputElement, menuElement} = this.props
+    const {showMenu, caretOffset, menuPosition} = this.state
+
+    return (
+      <FormRow
+        label={name}
+        statefulLabel={true}
+        labelEnabled={showMenu}
+        labelWidth={width - INPUT_WIDTH}
+        inset={inset}
+        inputWidth={INPUT_WIDTH}
+        onLabelChange={() => this.setMenuVisibility(! showMenu)}
+        onLabelPositionChange={({x, y, width}) => {
+          this.setState({
+            menuPosition: { x: x - width / 2, y },
+            caretOffset: { x: Math.max(width / 2, 5), y: 0 },
+          })
+        }}
+      >
+        {inputElement}
+        <Menu show={showMenu}
+          caret={true}
+          caretOffset={caretOffset}
+          requestClose={this.setMenuVisibility.bind(null, false)}
+          anchorPosition={menuPosition}>
+          {showMenu && React.cloneElement(menuElement, {
+            requestClose: this.setMenuVisibility.bind(null, false),
+          })}
+        </Menu>
+      </FormRow>
+    )
+  }
+}