From 45086e246c4ff3ef4bf9a54b030b55f520a14918 Mon Sep 17 00:00:00 2001 From: dzannotti Date: Fri, 7 Aug 2015 02:49:47 +0100 Subject: [PATCH 01/49] Initial addition of JSON Tree Inspector --- package.json | 2 + src/react/JSONTree/JSONArrayNode.js | 109 +++++++++++++++++ src/react/JSONTree/JSONArrow.js | 32 +++++ src/react/JSONTree/JSONBooleanNode.js | 34 ++++++ src/react/JSONTree/JSONNullNode.js | 33 ++++++ src/react/JSONTree/JSONNumberNode.js | 33 ++++++ src/react/JSONTree/JSONObjectNode.js | 111 ++++++++++++++++++ src/react/JSONTree/JSONStringNode.js | 33 ++++++ src/react/JSONTree/grab-node.js | 28 +++++ src/react/JSONTree/index.js | 50 ++++++++ .../JSONTree/mixins/expanded-state-handler.js | 15 +++ src/react/JSONTree/mixins/index.js | 2 + .../JSONTree/mixins/squash-click-event.js | 5 + src/react/JSONTree/obj-type.js | 3 + src/react/LogMonitorEntry.js | 3 +- 15 files changed, 492 insertions(+), 1 deletion(-) create mode 100644 src/react/JSONTree/JSONArrayNode.js create mode 100644 src/react/JSONTree/JSONArrow.js create mode 100644 src/react/JSONTree/JSONBooleanNode.js create mode 100644 src/react/JSONTree/JSONNullNode.js create mode 100644 src/react/JSONTree/JSONNumberNode.js create mode 100644 src/react/JSONTree/JSONObjectNode.js create mode 100644 src/react/JSONTree/JSONStringNode.js create mode 100644 src/react/JSONTree/grab-node.js create mode 100644 src/react/JSONTree/index.js create mode 100644 src/react/JSONTree/mixins/expanded-state-handler.js create mode 100644 src/react/JSONTree/mixins/index.js create mode 100644 src/react/JSONTree/mixins/squash-click-event.js create mode 100644 src/react/JSONTree/obj-type.js diff --git a/package.json b/package.json index 97971303..4ec3f1ae 100644 --- a/package.json +++ b/package.json @@ -47,6 +47,8 @@ "redux": "^1.0.0 || 1.0.0-rc" }, "dependencies": { + "lodash.assign": "^3.2.0", + "react-mixin": "^1.7.0", "react-redux": "^0.2.2", "redux": "^1.0.0-rc" } diff --git a/src/react/JSONTree/JSONArrayNode.js b/src/react/JSONTree/JSONArrayNode.js new file mode 100644 index 00000000..1b1e305c --- /dev/null +++ b/src/react/JSONTree/JSONArrayNode.js @@ -0,0 +1,109 @@ +import React from 'react'; +import reactMixin from 'react-mixin'; +import { ExpandedStateHandlerMixin } from './mixins'; +import JSONArrow from './JSONArrow'; +import grabNode from './grab-node'; +import assign from 'lodash.assign'; + +const styles = { + base: { + paddingTop: 2, + paddingBottom: 2, + paddingRight: 4, + letterSpacing: 1, + marginLeft: 10 + }, + label: { + margin: 0, + padding: 0, + display: 'inline-block', + color: '#8fa1b2' + }, + span: { + color: '#C042DF', + fontSize: 12, + cursor: 'default' + }, + spanExpanded: { + color: '#D7D5D8' + }, + spanType: { + marginLeft: 5, + marginRight: 5, + fontSize: 16 + } +}; + +@reactMixin.decorate(ExpandedStateHandlerMixin) +export default class JSONArrayNode extends React.Component { + defaultProps = { + data: [], + initialExpanded: false + }; + + // flag to see if we still need to render our child nodes + needsChildNodes = true; + + // cache store for our child nodes + renderedChildren = []; + + // cache store for the number of items string we display + itemString = false; + + constructor(props) { + super(props); + this.state = { + expanded: this.props.initialExpanded, + createdChildNodes: false + }; + } + + // Returns the child nodes for each element in the array. If we have + // generated them previously, we return from cache, otherwise we create + // them. + getChildNodes() { + let childNodes = []; + if (this.state.expanded && this.needsChildNodes) { + this.props.data.forEach((element, idx) => { + childNodes.push(grabNode(idx, element)); + }); + this.needsChildNodes = false; + this.renderedChildren = childNodes; + } + return this.renderedChildren; + } + + // Returns the "n Items" string for this node, generating and + // caching it if it hasn't been created yet. + getItemString() { + if (!this.itemString) { + this.itemString = this.props.data.length + ' Item' + (this.props.data.length > 1 ? 's' : ''); + } + return this.itemString; + } + + render() { + const childNodes = this.getChildNodes(); + const childListStyle = { + padding: 0, + margin: 0, + listStyle: 'none', + display: (this.state.expanded) ? 'block' : 'none' + }; + let containerStyle = assign({}, styles.base, styles.parentNode); + let spanStyle = assign({}, styles.span, this.state.expanded ? styles.spanExpanded : {}); + return ( +
  • + + + + [] + {this.getItemString()} + +
      + {childNodes} +
    +
    • + ); + } +} diff --git a/src/react/JSONTree/JSONArrow.js b/src/react/JSONTree/JSONArrow.js new file mode 100644 index 00000000..c7df7871 --- /dev/null +++ b/src/react/JSONTree/JSONArrow.js @@ -0,0 +1,32 @@ +import React from 'react'; +import assign from 'lodash.assign'; + +const styles = { + base: { + display: 'inline-block', + marginLeft: -15, + 'float': 'left', + transition: '150ms', + marginTop: 7, + WebkitTransition: '150ms', + MozTransition: '150ms', + borderLeft: '5px solid transparent', + borderRight: '5px solid transparent', + borderTop: '5px solid #39ace6', + WebkitTransform: 'rotateZ(-90deg)', + MozTransform: 'rotateZ(-90deg)', + transform: 'rotateZ(-90deg)' + }, + open: { + WebkitTransform: 'rotateZ(0deg)', + MozTransform: 'rotateZ(0deg)', + transform: 'rotateZ(0deg)' + } +}; + +export default class JSONArrow extends React.Component { + render() { + const style = assign({}, styles.base, this.props.open ? styles.open : {}); + return
    ; + } +} diff --git a/src/react/JSONTree/JSONBooleanNode.js b/src/react/JSONTree/JSONBooleanNode.js new file mode 100644 index 00000000..04d42339 --- /dev/null +++ b/src/react/JSONTree/JSONBooleanNode.js @@ -0,0 +1,34 @@ +import React from 'react'; +import reactMixin from 'react-mixin'; +import { SquashClickEventMixin } from './mixins'; + +const styles = { + base: { + paddingTop: 2, + paddingBottom: 2, + paddingRight: 4, + letterSpacing: 1, + marginLeft: 10 + }, + label: { + display: 'inline-block', + marginRight: 5, + color: '#8fa1b2' + }, + value: { + color: '#08c6eE' + } +}; + +@reactMixin.decorate(SquashClickEventMixin) +export default class JSONBooleanNode extends React.Component { + render() { + const truthString = (this.props.value) ? 'true' : 'false'; + return ( +
  • + + {truthString} +
    • + ); + } +} diff --git a/src/react/JSONTree/JSONNullNode.js b/src/react/JSONTree/JSONNullNode.js new file mode 100644 index 00000000..f1c76971 --- /dev/null +++ b/src/react/JSONTree/JSONNullNode.js @@ -0,0 +1,33 @@ +import React from 'react'; +import reactMixin from 'react-mixin'; +import { SquashClickEventMixin } from './mixins'; + +const styles = { + base: { + paddingTop: 2, + paddingBottom: 2, + paddingRight: 4, + letterSpacing: 1, + marginLeft: 10 + }, + label: { + display: 'inline-block', + marginRight: 5, + color: '#8fa1b2' + }, + value: { + color: '#DF113A' + } +}; + +@reactMixin.decorate(SquashClickEventMixin) +export default class JSONNullNode extends React.Component { + render() { + return ( +
  • + + null +
    • + ); + } +} diff --git a/src/react/JSONTree/JSONNumberNode.js b/src/react/JSONTree/JSONNumberNode.js new file mode 100644 index 00000000..e5d33108 --- /dev/null +++ b/src/react/JSONTree/JSONNumberNode.js @@ -0,0 +1,33 @@ +import React from 'react'; +import reactMixin from 'react-mixin'; +import { SquashClickEventMixin } from './mixins'; + +const styles = { + base: { + paddingTop: 2, + paddingBottom: 2, + paddingRight: 4, + letterSpacing: 1, + marginLeft: 10 + }, + label: { + display: 'inline-block', + marginRight: 5, + color: '#8fa1b2' + }, + value: { + color: '#0B75F5' + } +}; + +@reactMixin.decorate(SquashClickEventMixin) +export default class JSONNumberNode extends React.Component { + render() { + return ( +
  • + + {this.props.value} +
    • + ); + } +} diff --git a/src/react/JSONTree/JSONObjectNode.js b/src/react/JSONTree/JSONObjectNode.js new file mode 100644 index 00000000..b86ad962 --- /dev/null +++ b/src/react/JSONTree/JSONObjectNode.js @@ -0,0 +1,111 @@ +import React from 'react'; +import reactMixin from 'react-mixin'; +import { ExpandedStateHandlerMixin } from './mixins'; +import JSONArrow from './JSONArrow'; +import assign from 'lodash.assign'; +import grabNode from './grab-node'; + +const styles = { + base: { + paddingTop: 2, + paddingBottom: 2, + paddingRight: 4, + letterSpacing: 1, + marginLeft: 10 + }, + label: { + margin: 0, + padding: 0, + display: 'inline-block', + color: '#8fa1b2' + }, + span: { + color: '#049977', + fontSize: 12, + cursor: 'default' + }, + spanExpanded: { + color: '#D7D5D8' + }, + spanType: { + marginLeft: 5, + marginRight: 5, + fontSize: 16 + } +}; + +@reactMixin.decorate(ExpandedStateHandlerMixin) +export default class JSONObjectNode extends React.Component { + defaultProps = { + data: [], + initialExpanded: false + }; + // cache store for the number of items string we display + itemString = false; + + // flag to see if we still need to render our child nodes + needsChildNodes = true; + + // cache store for our child nodes + renderedChildren = []; + + constructor(props) { + super(props); + this.state = { + expanded: this.props.initialExpanded, + createdChildNodes: false + }; + } + + // Returns the child nodes for each element in the object. If we have + // generated them previously, we return from cache, otherwise we create + // them. + getChildNodes() { + if (this.state.expanded && this.needsChildNodes) { + const obj = this.props.data; + let childNodes = []; + for (let k in obj) { + if (obj.hasOwnProperty(k)) { + childNodes.push(grabNode(k, obj[k])); + } + } + this.needsChildNodes = false; + this.renderedChildren = childNodes; + } + return this.renderedChildren; + } + + // Returns the "n Items" string for this node, generating and + // caching it if it hasn't been created yet. + getItemString() { + if (!this.itemString) { + const len = Object.keys(this.props.data).length; + this.itemString = len + ' Item' + (len > 1 ? 's' : ''); + } + return this.itemString; + } + + render() { + let childListStyle = { + padding: 0, + margin: 0, + listStyle: 'none', + display: (this.state.expanded) ? 'block' : 'none' + }; + let containerStyle = assign({}, styles.base, styles.parentNode); + let spanStyle = assign({}, styles.span, this.state.expanded ? styles.spanExpanded : {}); + return ( +
  • + + + + {} + {this.getItemString()} + +
      + {this.getChildNodes()} +
    +
    • + ); + } +} diff --git a/src/react/JSONTree/JSONStringNode.js b/src/react/JSONTree/JSONStringNode.js new file mode 100644 index 00000000..249e0e2a --- /dev/null +++ b/src/react/JSONTree/JSONStringNode.js @@ -0,0 +1,33 @@ +import React from 'react'; +import reactMixin from 'react-mixin'; +import { SquashClickEventMixin } from './mixins'; + +const styles = { + base: { + paddingTop: 2, + paddingBottom: 2, + paddingRight: 4, + letterSpacing: 1, + marginLeft: 10 + }, + label: { + display: 'inline-block', + marginRight: 5, + color: '#8fa1b2' + }, + value: { + color: '#717c93' + } +}; + +@reactMixin.decorate(SquashClickEventMixin) +export default class JSONStringNode extends React.Component { + render() { + return ( +
  • + + {this.props.value} +
    • + ); + } +} diff --git a/src/react/JSONTree/grab-node.js b/src/react/JSONTree/grab-node.js new file mode 100644 index 00000000..ea2d6790 --- /dev/null +++ b/src/react/JSONTree/grab-node.js @@ -0,0 +1,28 @@ +import React from 'react'; +import objType from './obj-type'; +import JSONObjectNode from './JSONObjectNode'; +import JSONArrayNode from './JSONArrayNode'; +import JSONStringNode from './JSONStringNode'; +import JSONNumberNode from './JSONNumberNode'; +import JSONBooleanNode from './JSONBooleanNode'; +import JSONNullNode from './JSONNullNode'; + +export default function(key, value) { + const nodeType = objType(value); + const aKey = key + Date.now(); + if (nodeType === 'Object') { + return ; + } else if (nodeType === 'Array') { + return ; + } else if (nodeType === 'String') { + return ; + } else if (nodeType === 'Number') { + return ; + } else if (nodeType === 'Boolean') { + return ; + } else if (nodeType === 'Null') { + return ; + } + console.error('Unknown node type:', nodeType); + return false; +} diff --git a/src/react/JSONTree/index.js b/src/react/JSONTree/index.js new file mode 100644 index 00000000..9808ad33 --- /dev/null +++ b/src/react/JSONTree/index.js @@ -0,0 +1,50 @@ +// ES6 + inline style port of JSONViewer https://bitbucket.org/davevedder/react-json-viewer/ +// all credits and original code to the author +// Dave Vedder http://www.eskimospy.com/ +// port by Daniele Zannotti http://www.github.com/dzannotti + +import React from 'react'; +import objectType from './obj-type'; +import JSONObjectNode from './JSONObjectNode'; +import JSONArrayNode from './JSONArrayNode'; + +const styles = { + tree: { + border: 0, + padding: 0, + margin: 0, + fontSize: 14, + listStyle: 'none', + fontFamily: '"Helvetica Neue", Helvetica, Arial, freesans, sans-serif', + MozUserSelect: 'none', + WebkitUserSelect: 'none' + } +}; + +export default class JSONTree extends React.Component { + static propTypes = { + data: React.PropTypes.oneOfType([ + React.PropTypes.array, + React.PropTypes.object + ]).isRequired + }; + + constructor(props) { + super(props); + } + + render() { + const nodeType = objectType(this.props.data); + let rootNode = false; + if (nodeType === 'Object') { + rootNode = ; + } else if (nodeType === 'Array') { + rootNode = ; + } + return ( +
      + {rootNode} +
    + ); + } +} diff --git a/src/react/JSONTree/mixins/expanded-state-handler.js b/src/react/JSONTree/mixins/expanded-state-handler.js new file mode 100644 index 00000000..87dd49fd --- /dev/null +++ b/src/react/JSONTree/mixins/expanded-state-handler.js @@ -0,0 +1,15 @@ +export default { + handleClick(e) { + e.stopPropagation(); + this.setState({ + expanded: !this.state.expanded + }); + }, + + componentWillReceiveProps() { + // resets our caches and flags we need to build child nodes again + this.renderedChildren = []; + this.itemString = false; + this.needsChildNodes = true; + } +}; diff --git a/src/react/JSONTree/mixins/index.js b/src/react/JSONTree/mixins/index.js new file mode 100644 index 00000000..6ee2b386 --- /dev/null +++ b/src/react/JSONTree/mixins/index.js @@ -0,0 +1,2 @@ +export { default as SquashClickEventMixin } from './squash-click-event'; +export { default as ExpandedStateHandlerMixin } from './expanded-state-handler'; diff --git a/src/react/JSONTree/mixins/squash-click-event.js b/src/react/JSONTree/mixins/squash-click-event.js new file mode 100644 index 00000000..233a9864 --- /dev/null +++ b/src/react/JSONTree/mixins/squash-click-event.js @@ -0,0 +1,5 @@ +export default { + handleClick(e) { + e.stopPropagation(); + } +}; diff --git a/src/react/JSONTree/obj-type.js b/src/react/JSONTree/obj-type.js new file mode 100644 index 00000000..e0b964c1 --- /dev/null +++ b/src/react/JSONTree/obj-type.js @@ -0,0 +1,3 @@ +export default function(obj) { + return Object.prototype.toString.call(obj).slice(8, -1); +} diff --git a/src/react/LogMonitorEntry.js b/src/react/LogMonitorEntry.js index 25b4cc83..e8bb4377 100644 --- a/src/react/LogMonitorEntry.js +++ b/src/react/LogMonitorEntry.js @@ -1,4 +1,5 @@ import React, { PropTypes } from 'react'; +import JSONTree from './JSONTree'; function hsvToRgb(h, s, v) { const i = Math.floor(h); @@ -49,7 +50,7 @@ export default class LogMonitorEntry { let errorText = error; if (!errorText) { try { - return JSON.stringify(this.props.select(state)); + return } catch (err) { errorText = 'Error selecting state.'; } From 50212f88a07d750796d8658e261d0e49a74b7138 Mon Sep 17 00:00:00 2001 From: dzannotti Date: Fri, 7 Aug 2015 16:20:13 +0100 Subject: [PATCH 02/49] beautified devtools look and removed lodash.assign as dep --- package.json | 1 - src/react/DebugPanel.js | 8 ++- src/react/JSONTree/JSONArrayNode.js | 11 +++- src/react/JSONTree/JSONArrow.js | 9 ++- src/react/JSONTree/JSONObjectNode.js | 11 +++- src/react/JSONTree/index.js | 9 +-- src/react/LogMonitor.js | 92 +++++++++++++--------------- src/react/LogMonitorButton.js | 63 +++++++++++++++++++ src/react/LogMonitorEntry.js | 73 +++++++++------------- src/react/LogMonitorEntryAction.js | 38 ++++++++++++ 10 files changed, 206 insertions(+), 109 deletions(-) create mode 100644 src/react/LogMonitorButton.js create mode 100644 src/react/LogMonitorEntryAction.js diff --git a/package.json b/package.json index cd694136..c66dd0d4 100644 --- a/package.json +++ b/package.json @@ -47,7 +47,6 @@ "redux": "^1.0.0 || 1.0.0-rc" }, "dependencies": { - "lodash.assign": "^3.2.0", "react-mixin": "^1.7.0", "react-redux": "^0.2.2", "redux": "^1.0.0-rc" diff --git a/src/react/DebugPanel.js b/src/react/DebugPanel.js index c87fff6c..c81a91f9 100644 --- a/src/react/DebugPanel.js +++ b/src/react/DebugPanel.js @@ -13,9 +13,9 @@ export function getDefaultStyle(props) { position: 'fixed', zIndex: 999, fontSize: 17, - overflow: 'auto', + overflow: 'hidden', opacity: 0.92, - background: 'black', + background: '#181d20', color: 'white', left: left ? 0 : undefined, right: right ? 0 : undefined, @@ -23,7 +23,9 @@ export function getDefaultStyle(props) { bottom: bottom ? 0 : undefined, maxHeight: (bottom && top) ? '100%' : '20%', maxWidth: (left && right) ? '100%' : '20%', - wordWrap: 'break-word' + minWidth: 260, + wordWrap: 'break-word', + boxSizing: 'border-box' }; } diff --git a/src/react/JSONTree/JSONArrayNode.js b/src/react/JSONTree/JSONArrayNode.js index 1b1e305c..e7075453 100644 --- a/src/react/JSONTree/JSONArrayNode.js +++ b/src/react/JSONTree/JSONArrayNode.js @@ -3,7 +3,6 @@ import reactMixin from 'react-mixin'; import { ExpandedStateHandlerMixin } from './mixins'; import JSONArrow from './JSONArrow'; import grabNode from './grab-node'; -import assign from 'lodash.assign'; const styles = { base: { @@ -90,8 +89,14 @@ export default class JSONArrayNode extends React.Component { listStyle: 'none', display: (this.state.expanded) ? 'block' : 'none' }; - let containerStyle = assign({}, styles.base, styles.parentNode); - let spanStyle = assign({}, styles.span, this.state.expanded ? styles.spanExpanded : {}); + let containerStyle = {...styles.base, ...styles.parentNode}; + let spanStyle = { ...styles.span }; + if (this.state.expanded) { + spanStyle = { + ...spanStyle, + ...styles.spanExpanded + }; + } return (
  • diff --git a/src/react/JSONTree/JSONArrow.js b/src/react/JSONTree/JSONArrow.js index c7df7871..6a18cc37 100644 --- a/src/react/JSONTree/JSONArrow.js +++ b/src/react/JSONTree/JSONArrow.js @@ -1,5 +1,4 @@ import React from 'react'; -import assign from 'lodash.assign'; const styles = { base: { @@ -26,7 +25,13 @@ const styles = { export default class JSONArrow extends React.Component { render() { - const style = assign({}, styles.base, this.props.open ? styles.open : {}); + let style = { ...styles.base }; + if (this.props.open) { + style = { + ...style, + ...styles.open + }; + } return
    ; } } diff --git a/src/react/JSONTree/JSONObjectNode.js b/src/react/JSONTree/JSONObjectNode.js index b86ad962..9adaf263 100644 --- a/src/react/JSONTree/JSONObjectNode.js +++ b/src/react/JSONTree/JSONObjectNode.js @@ -2,7 +2,6 @@ import React from 'react'; import reactMixin from 'react-mixin'; import { ExpandedStateHandlerMixin } from './mixins'; import JSONArrow from './JSONArrow'; -import assign from 'lodash.assign'; import grabNode from './grab-node'; const styles = { @@ -92,8 +91,14 @@ export default class JSONObjectNode extends React.Component { listStyle: 'none', display: (this.state.expanded) ? 'block' : 'none' }; - let containerStyle = assign({}, styles.base, styles.parentNode); - let spanStyle = assign({}, styles.span, this.state.expanded ? styles.spanExpanded : {}); + let containerStyle = {...styles.base, ...styles.parentNode}; + let spanStyle = { ...styles.span }; + if (this.state.expanded) { + spanStyle = { + ...spanStyle, + ...styles.spanExpanded + }; + } return (
  • diff --git a/src/react/JSONTree/index.js b/src/react/JSONTree/index.js index 9808ad33..f40005cd 100644 --- a/src/react/JSONTree/index.js +++ b/src/react/JSONTree/index.js @@ -13,9 +13,9 @@ const styles = { border: 0, padding: 0, margin: 0, - fontSize: 14, + fontSize: '0.90em', listStyle: 'none', - fontFamily: '"Helvetica Neue", Helvetica, Arial, freesans, sans-serif', + fontFamily: 'monospace', MozUserSelect: 'none', WebkitUserSelect: 'none' } @@ -36,10 +36,11 @@ export default class JSONTree extends React.Component { render() { const nodeType = objectType(this.props.data); let rootNode = false; + const keyName = this.props.keyName || 'root'; if (nodeType === 'Object') { - rootNode = ; + rootNode = ; } else if (nodeType === 'Array') { - rootNode = ; + rootNode = ; } return (
      diff --git a/src/react/LogMonitor.js b/src/react/LogMonitor.js index 99691c9b..28954757 100644 --- a/src/react/LogMonitor.js +++ b/src/react/LogMonitor.js @@ -1,5 +1,28 @@ import React, { PropTypes, findDOMNode } from 'react'; import LogMonitorEntry from './LogMonitorEntry'; +import LogMonitorButton from './LogMonitorButton'; + +const styles = { + container: { + fontFamily: 'monospace', + position: 'relative', + overflowY: 'hidden' + }, + buttonBarWrapper: { + backgroundColor: '#343c45', + borderBottom: '1px solid #3f464d', + marginBottom: 1 + }, + buttonBar: { + paddingLeft: 2 + }, + bordering: { + 'float': 'left', + height: 1, + border: '1px solid #20262c', + width: '100%' + } +} export default class LogMonitor { constructor() { @@ -24,11 +47,11 @@ export default class LogMonitor { static defaultProps = { select: (state) => state, - monitorState: { isVisible: true } + monitorState: { isVisible: true }, }; componentWillReceiveProps(nextProps) { - const node = findDOMNode(this); + const node = findDOMNode(this.refs.elements); if (!node) { this.scrollDown = true; } else if ( @@ -46,7 +69,7 @@ export default class LogMonitor { } componentDidUpdate() { - const node = findDOMNode(this); + const node = findDOMNode(this.refs.elements); if (!node) { return; } @@ -95,7 +118,6 @@ export default class LogMonitor { render() { const elements = []; const { monitorState, skippedActions, stagedActions, computedStates, select } = this.props; - if (!monitorState.isVisible) { return null; } @@ -117,52 +139,26 @@ export default class LogMonitor { } return ( -
      -
      -
      - Press Ctrl+H to hide. -
      -
      - - Reset - +
      +
      +
      + Reset + {computedStates.length > 1 && + Revert + } + {Object.keys(skippedActions).some(key => skippedActions[key]) && + Sweep + } + {computedStates.length > 1 && + Commit + }
      - {elements} -
      - {computedStates.length > 1 && - - Rollback - - } - {Object.keys(skippedActions).some(key => skippedActions[key]) && - - {' • '} - - Sweep - - - } - {computedStates.length > 1 && - - - {' • '} - - - Commit - - - } +
      + {elements}
      ); diff --git a/src/react/LogMonitorButton.js b/src/react/LogMonitorButton.js new file mode 100644 index 00000000..e1831000 --- /dev/null +++ b/src/react/LogMonitorButton.js @@ -0,0 +1,63 @@ +import React from 'react'; + +const styles = { + base: { + paddingTop: 3, + paddingBottom: 3, + paddingLeft: 6, + paddingRight: 6, + marginTop: 2, + display: 'inline-block', + fontSize: "0.8em" + }, + active: { + backgroundColor: "#252c33" + } +} + +export default class LogMonitorButton extends React.Component { + constructor(props) { + super(props); + this.state = { + hovered: false, + active: false + } + } + + handleMouseEnter() { + this.setState({ hovered: true }); + } + + handleMouseLeave() { + this.setState({ hovered: false }); + } + + handleMouseDown() { + this.setState({ active: true }); + } + + handleMouseUp() { + this.setState({ active: false }); + } + + render() { + let style = { + ...styles.base, + }; + if (this.state.hovered) { + style = { + ...style, + ...styles.active + }; + } + return ( + + {this.props.children} + + ); + } +} diff --git a/src/react/LogMonitorEntry.js b/src/react/LogMonitorEntry.js index e8bb4377..bb47b3be 100644 --- a/src/react/LogMonitorEntry.js +++ b/src/react/LogMonitorEntry.js @@ -1,5 +1,6 @@ import React, { PropTypes } from 'react'; import JSONTree from './JSONTree'; +import LogMonitorEntryAction from "./LogMonitorEntryAction"; function hsvToRgb(h, s, v) { const i = Math.floor(h); @@ -35,6 +36,13 @@ function colorFromString(token) { return hsvToRgb(h, s, v); } +const styles = { + entry: { + display: 'block', + WebkitUserSelect: 'none' + } +}; + export default class LogMonitorEntry { static propTypes = { index: PropTypes.number.isRequired, @@ -50,14 +58,14 @@ export default class LogMonitorEntry { let errorText = error; if (!errorText) { try { - return + return } catch (err) { errorText = 'Error selecting state.'; } } - return ( ({errorText}) @@ -73,49 +81,24 @@ export default class LogMonitorEntry { } render() { - const { index, error, action, state, collapsed } = this.props; - const { r, g, b } = colorFromString(action.type); - - return ( -
      - 0) ? 'pointer' : 'default', - WebkitUserSelect: 'none' - }}> - {JSON.stringify(action)} - - - {!collapsed && -

      - ⇧ -

      - } - - {!collapsed && -
      - {this.printState(state, error)} -
      - } - -
      + const { index, error, action, state, collapsed } = this.props; + const { r, g, b } = colorFromString(action.type); + const styleEntry = { + opacity: collapsed ? 0.5 : 1, + color: `rgb(${r}, ${g}, ${b})`, + cursor: (index > 0) ? 'pointer' : 'default' + }; + return ( +
      + + {!collapsed && +
      + {this.printState(state, error)} +
      + }
      ); } diff --git a/src/react/LogMonitorEntryAction.js b/src/react/LogMonitorEntryAction.js new file mode 100644 index 00000000..48911304 --- /dev/null +++ b/src/react/LogMonitorEntryAction.js @@ -0,0 +1,38 @@ +import React from "react"; +import JSONTree from './JSONTree'; + +const styles = { + wrapper: { + backgroundColor: '#343c45', + borderTop: '1px solid #3f464d', + borderBottom: '1px solid #3f464d' + }, + actionBar: { + paddingTop: 4, + paddingBottom: 4, + paddingLeft: 10, + marginBottom: 1 + }, + payload: { + backgroundColor: '#252c33', + paddingLeft: 15 + } +} +export default class LogMonitorAction extends React.Component { + renderPayload(payload) { + return ( +
      + { Object.keys(payload).length > 0 ? : "" } +
      + ); + } + render() { + const { type, ...payload } = this.props.action; + return ( +
      +
      {type}
      + {!this.props.collapsed ? '' : ''} +
      + ); + } +} \ No newline at end of file From 42d4c3f8904da0a1875b7d032939ff5140f2746a Mon Sep 17 00:00:00 2001 From: dzannotti Date: Fri, 7 Aug 2015 17:36:36 +0100 Subject: [PATCH 03/49] added theming --- src/react/DebugPanel.js | 1 - src/react/JSONTree/JSONArrayNode.js | 27 +++++++------ src/react/JSONTree/JSONArrow.js | 8 +++- src/react/JSONTree/JSONBooleanNode.js | 15 +++---- src/react/JSONTree/JSONNullNode.js | 15 +++---- src/react/JSONTree/JSONNumberNode.js | 15 +++---- src/react/JSONTree/JSONObjectNode.js | 27 +++++++------ src/react/JSONTree/JSONStringNode.js | 15 +++---- src/react/JSONTree/grab-node.js | 14 +++---- src/react/JSONTree/index.js | 4 +- src/react/LogMonitor.js | 57 ++++++++++++++++----------- src/react/LogMonitorButton.js | 5 +-- src/react/LogMonitorEntry.js | 46 ++++++--------------- src/react/LogMonitorEntryAction.js | 17 +++++--- src/react/theme.js | 5 +++ src/react/themes/index.js | 5 +++ src/react/themes/ocean.js | 20 ++++++++++ 17 files changed, 165 insertions(+), 131 deletions(-) create mode 100644 src/react/theme.js create mode 100644 src/react/themes/index.js create mode 100644 src/react/themes/ocean.js diff --git a/src/react/DebugPanel.js b/src/react/DebugPanel.js index c81a91f9..44f629ac 100644 --- a/src/react/DebugPanel.js +++ b/src/react/DebugPanel.js @@ -15,7 +15,6 @@ export function getDefaultStyle(props) { fontSize: 17, overflow: 'hidden', opacity: 0.92, - background: '#181d20', color: 'white', left: left ? 0 : undefined, right: right ? 0 : undefined, diff --git a/src/react/JSONTree/JSONArrayNode.js b/src/react/JSONTree/JSONArrayNode.js index e7075453..bbd21411 100644 --- a/src/react/JSONTree/JSONArrayNode.js +++ b/src/react/JSONTree/JSONArrayNode.js @@ -15,17 +15,12 @@ const styles = { label: { margin: 0, padding: 0, - display: 'inline-block', - color: '#8fa1b2' + display: 'inline-block' }, span: { - color: '#C042DF', fontSize: 12, cursor: 'default' }, - spanExpanded: { - color: '#D7D5D8' - }, spanType: { marginLeft: 5, marginRight: 5, @@ -64,7 +59,7 @@ export default class JSONArrayNode extends React.Component { let childNodes = []; if (this.state.expanded && this.needsChildNodes) { this.props.data.forEach((element, idx) => { - childNodes.push(grabNode(idx, element)); + childNodes.push(grabNode(idx, element, this.props.theme)); }); this.needsChildNodes = false; this.renderedChildren = childNodes; @@ -89,18 +84,26 @@ export default class JSONArrayNode extends React.Component { listStyle: 'none', display: (this.state.expanded) ? 'block' : 'none' }; - let containerStyle = {...styles.base, ...styles.parentNode}; - let spanStyle = { ...styles.span }; + let containerStyle = { ...styles.base, ...styles.parentNode }; + let spanStyle = { + ...styles.span, + color: this.props.theme.base0E + }; if (this.state.expanded) { spanStyle = { ...spanStyle, - ...styles.spanExpanded + color: this.props.theme.base05 }; } return (
    • - - + + [] {this.getItemString()} diff --git a/src/react/JSONTree/JSONArrow.js b/src/react/JSONTree/JSONArrow.js index 6a18cc37..1eb964d4 100644 --- a/src/react/JSONTree/JSONArrow.js +++ b/src/react/JSONTree/JSONArrow.js @@ -11,7 +11,8 @@ const styles = { MozTransition: '150ms', borderLeft: '5px solid transparent', borderRight: '5px solid transparent', - borderTop: '5px solid #39ace6', + borderTopWidth: 5, + borderTopStyle: 'solid', WebkitTransform: 'rotateZ(-90deg)', MozTransform: 'rotateZ(-90deg)', transform: 'rotateZ(-90deg)' @@ -25,7 +26,10 @@ const styles = { export default class JSONArrow extends React.Component { render() { - let style = { ...styles.base }; + let style = { + ...styles.base, + borderTopColor: this.props.theme.base0C + }; if (this.props.open) { style = { ...style, diff --git a/src/react/JSONTree/JSONBooleanNode.js b/src/react/JSONTree/JSONBooleanNode.js index 04d42339..e007272f 100644 --- a/src/react/JSONTree/JSONBooleanNode.js +++ b/src/react/JSONTree/JSONBooleanNode.js @@ -12,11 +12,7 @@ const styles = { }, label: { display: 'inline-block', - marginRight: 5, - color: '#8fa1b2' - }, - value: { - color: '#08c6eE' + marginRight: 5 } }; @@ -26,8 +22,13 @@ export default class JSONBooleanNode extends React.Component { const truthString = (this.props.value) ? 'true' : 'false'; return (
    • - - {truthString} + + {truthString}
      • ); } diff --git a/src/react/JSONTree/JSONNullNode.js b/src/react/JSONTree/JSONNullNode.js index f1c76971..3898ebd9 100644 --- a/src/react/JSONTree/JSONNullNode.js +++ b/src/react/JSONTree/JSONNullNode.js @@ -12,11 +12,7 @@ const styles = { }, label: { display: 'inline-block', - marginRight: 5, - color: '#8fa1b2' - }, - value: { - color: '#DF113A' + marginRight: 5 } }; @@ -25,8 +21,13 @@ export default class JSONNullNode extends React.Component { render() { return (
    • - - null + + null
      • ); } diff --git a/src/react/JSONTree/JSONNumberNode.js b/src/react/JSONTree/JSONNumberNode.js index e5d33108..3e1fb929 100644 --- a/src/react/JSONTree/JSONNumberNode.js +++ b/src/react/JSONTree/JSONNumberNode.js @@ -12,11 +12,7 @@ const styles = { }, label: { display: 'inline-block', - marginRight: 5, - color: '#8fa1b2' - }, - value: { - color: '#0B75F5' + marginRight: 5 } }; @@ -25,8 +21,13 @@ export default class JSONNumberNode extends React.Component { render() { return (
    • - - {this.props.value} + + {this.props.value}
      • ); } diff --git a/src/react/JSONTree/JSONObjectNode.js b/src/react/JSONTree/JSONObjectNode.js index 9adaf263..9ee33012 100644 --- a/src/react/JSONTree/JSONObjectNode.js +++ b/src/react/JSONTree/JSONObjectNode.js @@ -15,17 +15,12 @@ const styles = { label: { margin: 0, padding: 0, - display: 'inline-block', - color: '#8fa1b2' + display: 'inline-block' }, span: { - color: '#049977', fontSize: 12, cursor: 'default' }, - spanExpanded: { - color: '#D7D5D8' - }, spanType: { marginLeft: 5, marginRight: 5, @@ -65,7 +60,7 @@ export default class JSONObjectNode extends React.Component { let childNodes = []; for (let k in obj) { if (obj.hasOwnProperty(k)) { - childNodes.push(grabNode(k, obj[k])); + childNodes.push(grabNode(k, obj[k], this.props.theme)); } } this.needsChildNodes = false; @@ -91,18 +86,26 @@ export default class JSONObjectNode extends React.Component { listStyle: 'none', display: (this.state.expanded) ? 'block' : 'none' }; - let containerStyle = {...styles.base, ...styles.parentNode}; - let spanStyle = { ...styles.span }; + let containerStyle = { ...styles.base, ...styles.parentNode }; + let spanStyle = { + ...styles.span, + color: this.props.theme.base0B + }; if (this.state.expanded) { spanStyle = { ...spanStyle, - ...styles.spanExpanded + color: this.props.theme.base05 }; } return (
    • - - + + {} {this.getItemString()} diff --git a/src/react/JSONTree/JSONStringNode.js b/src/react/JSONTree/JSONStringNode.js index 249e0e2a..c775f1d7 100644 --- a/src/react/JSONTree/JSONStringNode.js +++ b/src/react/JSONTree/JSONStringNode.js @@ -12,11 +12,7 @@ const styles = { }, label: { display: 'inline-block', - marginRight: 5, - color: '#8fa1b2' - }, - value: { - color: '#717c93' + marginRight: 5 } }; @@ -25,8 +21,13 @@ export default class JSONStringNode extends React.Component { render() { return (
    • - - {this.props.value} + + {this.props.value}
      • ); } diff --git a/src/react/JSONTree/grab-node.js b/src/react/JSONTree/grab-node.js index ea2d6790..ca4f7006 100644 --- a/src/react/JSONTree/grab-node.js +++ b/src/react/JSONTree/grab-node.js @@ -7,21 +7,21 @@ import JSONNumberNode from './JSONNumberNode'; import JSONBooleanNode from './JSONBooleanNode'; import JSONNullNode from './JSONNullNode'; -export default function(key, value) { +export default function(key, value, theme) { const nodeType = objType(value); const aKey = key + Date.now(); if (nodeType === 'Object') { - return ; + return ; } else if (nodeType === 'Array') { - return ; + return ; } else if (nodeType === 'String') { - return ; + return ; } else if (nodeType === 'Number') { - return ; + return ; } else if (nodeType === 'Boolean') { - return ; + return ; } else if (nodeType === 'Null') { - return ; + return ; } console.error('Unknown node type:', nodeType); return false; diff --git a/src/react/JSONTree/index.js b/src/react/JSONTree/index.js index f40005cd..97d0f774 100644 --- a/src/react/JSONTree/index.js +++ b/src/react/JSONTree/index.js @@ -38,9 +38,9 @@ export default class JSONTree extends React.Component { let rootNode = false; const keyName = this.props.keyName || 'root'; if (nodeType === 'Object') { - rootNode = ; + rootNode = ; } else if (nodeType === 'Array') { - rootNode = ; + rootNode = ; } return (
        diff --git a/src/react/LogMonitor.js b/src/react/LogMonitor.js index 28954757..4c6d512b 100644 --- a/src/react/LogMonitor.js +++ b/src/react/LogMonitor.js @@ -1,26 +1,21 @@ import React, { PropTypes, findDOMNode } from 'react'; import LogMonitorEntry from './LogMonitorEntry'; import LogMonitorButton from './LogMonitorButton'; +import themes from "./themes"; const styles = { container: { fontFamily: 'monospace', position: 'relative', - overflowY: 'hidden' + overflowY: 'hidden', + width: '100%', + height: '100%' }, buttonBarWrapper: { - backgroundColor: '#343c45', - borderBottom: '1px solid #3f464d', marginBottom: 1 }, buttonBar: { paddingLeft: 2 - }, - bordering: { - 'float': 'left', - height: 1, - border: '1px solid #20262c', - width: '100%' } } @@ -48,6 +43,7 @@ export default class LogMonitor { static defaultProps = { select: (state) => state, monitorState: { isVisible: true }, + theme: 'ocean' }; componentWillReceiveProps(nextProps) { @@ -77,7 +73,6 @@ export default class LogMonitor { if (this.scrollDown) { const scrollableNode = node.parentElement; const { offsetHeight, scrollHeight } = scrollableNode; - scrollableNode.scrollTop = scrollHeight - offsetHeight; this.scrollDown = false; } @@ -118,6 +113,17 @@ export default class LogMonitor { render() { const elements = []; const { monitorState, skippedActions, stagedActions, computedStates, select } = this.props; + let theme; + if (typeof this.props.theme === 'string') { + if (typeof themes[this.props.theme] !== 'undefined') { + theme = themes[this.props.theme] + } else { + console.warn('DevTools theme ' + this.props.theme + ' not found, defaulting to ocean'); + theme = themes.ocean + } + } else { + theme = this.props.theme; + } if (!monitorState.isVisible) { return null; } @@ -129,6 +135,7 @@ export default class LogMonitor { elements.push( -
        -
        - Reset - {computedStates.length > 1 && - Revert - } - {Object.keys(skippedActions).some(key => skippedActions[key]) && - Sweep - } - {computedStates.length > 1 && - Commit - } -
        +
        +
        + Reset + {computedStates.length > 1 && + Revert + } + {Object.keys(skippedActions).some(key => skippedActions[key]) && + Sweep + } + {computedStates.length > 1 && + Commit + }
        sum + char.charCodeAt(0), - 0 - ) * Math.abs(Math.sin(token.length)); - - const h = Math.round((number * (180 / Math.PI) * token.length) % 360); - const s = number % 100 / 100; - const v = 1; - - return hsvToRgb(h, s, v); + const number = (parseInt(finalToken, 36) + finalToken.length) % 8; + const themeNumber = 'base0' + (number + 8).toString(16).toUpperCase(); + return theme[themeNumber]; } const styles = { @@ -58,7 +32,7 @@ export default class LogMonitorEntry { let errorText = error; if (!errorText) { try { - return + return } catch (err) { errorText = 'Error selecting state.'; } @@ -82,15 +56,19 @@ export default class LogMonitorEntry { render() { const { index, error, action, state, collapsed } = this.props; - const { r, g, b } = colorFromString(action.type); const styleEntry = { opacity: collapsed ? 0.5 : 1, - color: `rgb(${r}, ${g}, ${b})`, + color: colorFromString(this.props.theme, action.type), cursor: (index > 0) ? 'pointer' : 'default' }; return (
        - + {!collapsed &&
        - { Object.keys(payload).length > 0 ? : "" } + { Object.keys(payload).length > 0 ? : "" }
        ); } render() { const { type, ...payload } = this.props.action; return ( -
        +
        {type}
        {!this.props.collapsed ? '' : ''}
        diff --git a/src/react/theme.js b/src/react/theme.js new file mode 100644 index 00000000..de78238c --- /dev/null +++ b/src/react/theme.js @@ -0,0 +1,5 @@ +export default { + ocean: { + + } +}; diff --git a/src/react/themes/index.js b/src/react/themes/index.js new file mode 100644 index 00000000..c0b1124d --- /dev/null +++ b/src/react/themes/index.js @@ -0,0 +1,5 @@ +import ocean from "./ocean"; + +export default { + ocean, +}; diff --git a/src/react/themes/ocean.js b/src/react/themes/ocean.js new file mode 100644 index 00000000..e67bd93f --- /dev/null +++ b/src/react/themes/ocean.js @@ -0,0 +1,20 @@ +export default { + scheme: 'Ocean', + author: 'Chris Kempson (http://chriskempson.com)', + base00: '#2b303b', + base01: '#343d46', + base02: '#4f5b66', + base03: '#65737e', + base04: '#a7adba', + base05: '#c0c5ce', + base06: '#dfe1e8', + base07: '#eff1f5', + base08: '#bf616a', + base09: '#d08770', + base0A: '#ebcb8b', + base0B: '#a3be8c', + base0C: '#96b5b4', + base0D: '#8fa1b3', + base0E: '#b48ead', + base0F: '#ab7967' +} From e28a543d4fd7575ebc50dc17d2a3ecb37b7d5ccd Mon Sep 17 00:00:00 2001 From: dzannotti Date: Fri, 7 Aug 2015 17:44:54 +0100 Subject: [PATCH 04/49] added monokai theme --- src/react/DebugPanel.js | 2 +- src/react/LogMonitor.js | 4 ++-- src/react/themes/index.js | 7 ++----- src/react/themes/monokai.js | 20 ++++++++++++++++++++ 4 files changed, 25 insertions(+), 8 deletions(-) create mode 100644 src/react/themes/monokai.js diff --git a/src/react/DebugPanel.js b/src/react/DebugPanel.js index 44f629ac..f8209fe6 100644 --- a/src/react/DebugPanel.js +++ b/src/react/DebugPanel.js @@ -14,7 +14,7 @@ export function getDefaultStyle(props) { zIndex: 999, fontSize: 17, overflow: 'hidden', - opacity: 0.92, + opacity: 0.95, color: 'white', left: left ? 0 : undefined, right: right ? 0 : undefined, diff --git a/src/react/LogMonitor.js b/src/react/LogMonitor.js index 4c6d512b..555d02ac 100644 --- a/src/react/LogMonitor.js +++ b/src/react/LogMonitor.js @@ -1,7 +1,7 @@ import React, { PropTypes, findDOMNode } from 'react'; import LogMonitorEntry from './LogMonitorEntry'; import LogMonitorButton from './LogMonitorButton'; -import themes from "./themes"; +import * as themes from "./themes"; const styles = { container: { @@ -43,7 +43,7 @@ export default class LogMonitor { static defaultProps = { select: (state) => state, monitorState: { isVisible: true }, - theme: 'ocean' + theme: 'monokai' }; componentWillReceiveProps(nextProps) { diff --git a/src/react/themes/index.js b/src/react/themes/index.js index c0b1124d..c8d51ad4 100644 --- a/src/react/themes/index.js +++ b/src/react/themes/index.js @@ -1,5 +1,2 @@ -import ocean from "./ocean"; - -export default { - ocean, -}; +export { default as ocean } from "./ocean"; +export { default as monokai } from "./monokai"; diff --git a/src/react/themes/monokai.js b/src/react/themes/monokai.js new file mode 100644 index 00000000..3350e5a6 --- /dev/null +++ b/src/react/themes/monokai.js @@ -0,0 +1,20 @@ +export default { + scheme: "Monokai", + author: "Wimer Hazenberg (http://www.monokai.nl)", + base00: "#272822", + base01: "#383830", + base02: "#49483e", + base03: "#75715e", + base04: "#a59f85", + base05: "#f8f8f2", + base06: "#f5f4f1", + base07: "#f9f8f5", + base08: "#f92672", + base09: "#fd971f", + base0A: "#f4bf75", + base0B: "#a6e22e", + base0C: "#a1efe4", + base0D: "#66d9ef", + base0E: "#ae81ff", + base0F: "#cc6633" +}; From 244b897a2eae1dd4d9c1c072e4d66d33216ef41f Mon Sep 17 00:00:00 2001 From: dzannotti Date: Fri, 7 Aug 2015 17:48:34 +0100 Subject: [PATCH 05/49] set ocean as default theme --- src/react/LogMonitor.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/react/LogMonitor.js b/src/react/LogMonitor.js index 555d02ac..01307916 100644 --- a/src/react/LogMonitor.js +++ b/src/react/LogMonitor.js @@ -43,7 +43,7 @@ export default class LogMonitor { static defaultProps = { select: (state) => state, monitorState: { isVisible: true }, - theme: 'monokai' + theme: 'ocean' }; componentWillReceiveProps(nextProps) { From 46e71e7bb34f1db0efb18c3c3fb68ea3d2ac652b Mon Sep 17 00:00:00 2001 From: dzannotti Date: Fri, 7 Aug 2015 17:55:59 +0100 Subject: [PATCH 06/49] linting --- src/react/LogMonitor.js | 8 ++--- src/react/LogMonitorButton.js | 8 ++--- src/react/LogMonitorEntry.js | 50 +++++++++++++++--------------- src/react/LogMonitorEntryAction.js | 13 +++++--- src/react/themes/index.js | 4 +-- src/react/themes/monokai.js | 36 ++++++++++----------- src/react/themes/ocean.js | 2 +- 7 files changed, 62 insertions(+), 59 deletions(-) diff --git a/src/react/LogMonitor.js b/src/react/LogMonitor.js index 01307916..5365af09 100644 --- a/src/react/LogMonitor.js +++ b/src/react/LogMonitor.js @@ -1,7 +1,7 @@ import React, { PropTypes, findDOMNode } from 'react'; import LogMonitorEntry from './LogMonitorEntry'; import LogMonitorButton from './LogMonitorButton'; -import * as themes from "./themes"; +import * as themes from './themes'; const styles = { container: { @@ -17,7 +17,7 @@ const styles = { buttonBar: { paddingLeft: 2 } -} +}; export default class LogMonitor { constructor() { @@ -116,10 +116,10 @@ export default class LogMonitor { let theme; if (typeof this.props.theme === 'string') { if (typeof themes[this.props.theme] !== 'undefined') { - theme = themes[this.props.theme] + theme = themes[this.props.theme]; } else { console.warn('DevTools theme ' + this.props.theme + ' not found, defaulting to ocean'); - theme = themes.ocean + theme = themes.ocean; } } else { theme = this.props.theme; diff --git a/src/react/LogMonitorButton.js b/src/react/LogMonitorButton.js index 6ad9119a..81714bfc 100644 --- a/src/react/LogMonitorButton.js +++ b/src/react/LogMonitorButton.js @@ -8,9 +8,9 @@ const styles = { paddingRight: 6, marginTop: 2, display: 'inline-block', - fontSize: "0.8em" + fontSize: '0.8em' } -} +}; export default class LogMonitorButton extends React.Component { constructor(props) { @@ -18,7 +18,7 @@ export default class LogMonitorButton extends React.Component { this.state = { hovered: false, active: false - } + }; } handleMouseEnter() { @@ -39,7 +39,7 @@ export default class LogMonitorButton extends React.Component { render() { let style = { - ...styles.base, + ...styles.base }; if (this.state.hovered) { style = { diff --git a/src/react/LogMonitorEntry.js b/src/react/LogMonitorEntry.js index adcd2e20..c516656d 100644 --- a/src/react/LogMonitorEntry.js +++ b/src/react/LogMonitorEntry.js @@ -1,11 +1,11 @@ import React, { PropTypes } from 'react'; import JSONTree from './JSONTree'; -import LogMonitorEntryAction from "./LogMonitorEntryAction"; +import LogMonitorEntryAction from './LogMonitorEntryAction'; function colorFromString(theme, token) { const splitToken = token.split(''); const finalToken = splitToken.concat(splitToken.reverse()); - const number = (parseInt(finalToken, 36) + finalToken.length) % 8; + const number = (parseInt(finalToken, 36) + finalToken.length) % 8; const themeNumber = 'base0' + (number + 8).toString(16).toUpperCase(); return theme[themeNumber]; } @@ -32,7 +32,7 @@ export default class LogMonitorEntry { let errorText = error; if (!errorText) { try { - return + return ; } catch (err) { errorText = 'Error selecting state.'; } @@ -55,28 +55,28 @@ export default class LogMonitorEntry { } render() { - const { index, error, action, state, collapsed } = this.props; - const styleEntry = { - opacity: collapsed ? 0.5 : 1, - color: colorFromString(this.props.theme, action.type), - cursor: (index > 0) ? 'pointer' : 'default' - }; - return ( -
        - - {!collapsed && -
        - {this.printState(state, error)} -
        - } + const { index, error, action, state, collapsed } = this.props; + const styleEntry = { + opacity: collapsed ? 0.5 : 1, + color: colorFromString(this.props.theme, action.type), + cursor: (index > 0) ? 'pointer' : 'default' + }; + return ( +
        + + {!collapsed && +
        + {this.printState(state, error)} +
        + }
        ); } diff --git a/src/react/LogMonitorEntryAction.js b/src/react/LogMonitorEntryAction.js index 680dc0f9..c22d64a5 100644 --- a/src/react/LogMonitorEntryAction.js +++ b/src/react/LogMonitorEntryAction.js @@ -1,4 +1,4 @@ -import React from "react"; +import React from 'react'; import JSONTree from './JSONTree'; const styles = { @@ -6,7 +6,7 @@ const styles = { borderTopWidth: 1, borderBottomWidth: 1, borderTopStyle: 'solid', - borderBottomStyle: 'solid', + borderBottomStyle: 'solid' }, actionBar: { paddingTop: 4, @@ -18,15 +18,18 @@ const styles = { backgroundColor: '#252c33', paddingLeft: 15 } -} +}; + export default class LogMonitorAction extends React.Component { + renderPayload(payload) { return (
        - { Object.keys(payload).length > 0 ? : "" } + { Object.keys(payload).length > 0 ? : '' }
        ); } + render() { const { type, ...payload } = this.props.action; return ( @@ -42,4 +45,4 @@ export default class LogMonitorAction extends React.Component {
        ); } -} \ No newline at end of file +} diff --git a/src/react/themes/index.js b/src/react/themes/index.js index c8d51ad4..f54bc639 100644 --- a/src/react/themes/index.js +++ b/src/react/themes/index.js @@ -1,2 +1,2 @@ -export { default as ocean } from "./ocean"; -export { default as monokai } from "./monokai"; +export { default as ocean } from './ocean'; +export { default as monokai } from './monokai'; diff --git a/src/react/themes/monokai.js b/src/react/themes/monokai.js index 3350e5a6..654e49df 100644 --- a/src/react/themes/monokai.js +++ b/src/react/themes/monokai.js @@ -1,20 +1,20 @@ export default { - scheme: "Monokai", - author: "Wimer Hazenberg (http://www.monokai.nl)", - base00: "#272822", - base01: "#383830", - base02: "#49483e", - base03: "#75715e", - base04: "#a59f85", - base05: "#f8f8f2", - base06: "#f5f4f1", - base07: "#f9f8f5", - base08: "#f92672", - base09: "#fd971f", - base0A: "#f4bf75", - base0B: "#a6e22e", - base0C: "#a1efe4", - base0D: "#66d9ef", - base0E: "#ae81ff", - base0F: "#cc6633" + scheme: 'Monokai', + author: 'Wimer Hazenberg (http://www.monokai.nl)', + base00: '#272822', + base01: '#383830', + base02: '#49483e', + base03: '#75715e', + base04: '#a59f85', + base05: '#f8f8f2', + base06: '#f5f4f1', + base07: '#f9f8f5', + base08: '#f92672', + base09: '#fd971f', + base0A: '#f4bf75', + base0B: '#a6e22e', + base0C: '#a1efe4', + base0D: '#66d9ef', + base0E: '#ae81ff', + base0F: '#cc6633' }; diff --git a/src/react/themes/ocean.js b/src/react/themes/ocean.js index e67bd93f..67da4c04 100644 --- a/src/react/themes/ocean.js +++ b/src/react/themes/ocean.js @@ -17,4 +17,4 @@ export default { base0D: '#8fa1b3', base0E: '#b48ead', base0F: '#ab7967' -} +}; From f0c7d3fe6138c865333b834eeb50f3892a42052c Mon Sep 17 00:00:00 2001 From: dzannotti Date: Fri, 7 Aug 2015 20:06:59 +0100 Subject: [PATCH 07/49] added all base16 themes --- src/react/themes/apathy.js | 20 +++++++++++++++ src/react/themes/ashes.js | 20 +++++++++++++++ src/react/themes/atelier-dune.js | 20 +++++++++++++++ src/react/themes/atelier-forest.js | 20 +++++++++++++++ src/react/themes/atelier-heath.js | 20 +++++++++++++++ src/react/themes/atelier-lakeside.js | 20 +++++++++++++++ src/react/themes/atelier-seaside.js | 20 +++++++++++++++ src/react/themes/bespin.js | 20 +++++++++++++++ src/react/themes/brewer.js | 20 +++++++++++++++ src/react/themes/bright.js | 20 +++++++++++++++ src/react/themes/chalk.js | 20 +++++++++++++++ src/react/themes/codeschool.js | 20 +++++++++++++++ src/react/themes/colors.js | 20 +++++++++++++++ src/react/themes/default.js | 20 +++++++++++++++ src/react/themes/eighties.js | 20 +++++++++++++++ src/react/themes/embers.js | 20 +++++++++++++++ src/react/themes/flat.js | 20 +++++++++++++++ src/react/themes/google.js | 20 +++++++++++++++ src/react/themes/grayscale.js | 20 +++++++++++++++ src/react/themes/greenscreen.js | 20 +++++++++++++++ src/react/themes/harmonic.js | 20 +++++++++++++++ src/react/themes/hopscotch.js | 20 +++++++++++++++ src/react/themes/index.js | 37 +++++++++++++++++++++++++++- src/react/themes/isotope.js | 20 +++++++++++++++ src/react/themes/marrakesh.js | 20 +++++++++++++++ src/react/themes/mocha.js | 20 +++++++++++++++ src/react/themes/monokai.js | 4 +-- src/react/themes/ocean.js | 4 +-- src/react/themes/paraiso.js | 20 +++++++++++++++ src/react/themes/pop.js | 20 +++++++++++++++ src/react/themes/railscasts.js | 20 +++++++++++++++ src/react/themes/shapeshifter.js | 20 +++++++++++++++ src/react/themes/solarized.js | 20 +++++++++++++++ src/react/themes/summerfruit.js | 20 +++++++++++++++ src/react/themes/threezerotwofour.js | 20 +++++++++++++++ src/react/themes/tomorrow.js | 20 +++++++++++++++ src/react/themes/tube.js | 20 +++++++++++++++ src/react/themes/twilight.js | 20 +++++++++++++++ 38 files changed, 740 insertions(+), 5 deletions(-) create mode 100644 src/react/themes/apathy.js create mode 100644 src/react/themes/ashes.js create mode 100644 src/react/themes/atelier-dune.js create mode 100644 src/react/themes/atelier-forest.js create mode 100644 src/react/themes/atelier-heath.js create mode 100644 src/react/themes/atelier-lakeside.js create mode 100644 src/react/themes/atelier-seaside.js create mode 100644 src/react/themes/bespin.js create mode 100644 src/react/themes/brewer.js create mode 100644 src/react/themes/bright.js create mode 100644 src/react/themes/chalk.js create mode 100644 src/react/themes/codeschool.js create mode 100644 src/react/themes/colors.js create mode 100644 src/react/themes/default.js create mode 100644 src/react/themes/eighties.js create mode 100644 src/react/themes/embers.js create mode 100644 src/react/themes/flat.js create mode 100644 src/react/themes/google.js create mode 100644 src/react/themes/grayscale.js create mode 100644 src/react/themes/greenscreen.js create mode 100644 src/react/themes/harmonic.js create mode 100644 src/react/themes/hopscotch.js create mode 100644 src/react/themes/isotope.js create mode 100644 src/react/themes/marrakesh.js create mode 100644 src/react/themes/mocha.js create mode 100644 src/react/themes/paraiso.js create mode 100644 src/react/themes/pop.js create mode 100644 src/react/themes/railscasts.js create mode 100644 src/react/themes/shapeshifter.js create mode 100644 src/react/themes/solarized.js create mode 100644 src/react/themes/summerfruit.js create mode 100644 src/react/themes/threezerotwofour.js create mode 100644 src/react/themes/tomorrow.js create mode 100644 src/react/themes/tube.js create mode 100644 src/react/themes/twilight.js diff --git a/src/react/themes/apathy.js b/src/react/themes/apathy.js new file mode 100644 index 00000000..e020afdd --- /dev/null +++ b/src/react/themes/apathy.js @@ -0,0 +1,20 @@ +export default { + scheme: 'apathy', + author: 'jannik siebert (https://github.com/janniks)', + base00: '#031A16', + base01: '#0B342D', + base02: '#184E45', + base03: '#2B685E', + base04: '#5F9C92', + base05: '#81B5AC', + base06: '#A7CEC8', + base07: '#D2E7E4', + base08: '#3E9688', + base09: '#3E7996', + base0A: '#3E4C96', + base0B: '#883E96', + base0C: '#963E4C', + base0D: '#96883E', + base0E: '#4C963E', + base0F: '#3E965B' +}; diff --git a/src/react/themes/ashes.js b/src/react/themes/ashes.js new file mode 100644 index 00000000..e297377c --- /dev/null +++ b/src/react/themes/ashes.js @@ -0,0 +1,20 @@ +export default { + scheme: 'ashes', + author: 'jannik siebert (https://github.com/janniks)', + base00: '#1C2023', + base01: '#393F45', + base02: '#565E65', + base03: '#747C84', + base04: '#ADB3BA', + base05: '#C7CCD1', + base06: '#DFE2E5', + base07: '#F3F4F5', + base08: '#C7AE95', + base09: '#C7C795', + base0A: '#AEC795', + base0B: '#95C7AE', + base0C: '#95AEC7', + base0D: '#AE95C7', + base0E: '#C795AE', + base0F: '#C79595' +}; diff --git a/src/react/themes/atelier-dune.js b/src/react/themes/atelier-dune.js new file mode 100644 index 00000000..0ab20e7e --- /dev/null +++ b/src/react/themes/atelier-dune.js @@ -0,0 +1,20 @@ +export default { + scheme: 'atelier dune', + author: 'bram de haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/dune)', + base00: '#20201d', + base01: '#292824', + base02: '#6e6b5e', + base03: '#7d7a68', + base04: '#999580', + base05: '#a6a28c', + base06: '#e8e4cf', + base07: '#fefbec', + base08: '#d73737', + base09: '#b65611', + base0A: '#cfb017', + base0B: '#60ac39', + base0C: '#1fad83', + base0D: '#6684e1', + base0E: '#b854d4', + base0F: '#d43552' +}; diff --git a/src/react/themes/atelier-forest.js b/src/react/themes/atelier-forest.js new file mode 100644 index 00000000..50ea1369 --- /dev/null +++ b/src/react/themes/atelier-forest.js @@ -0,0 +1,20 @@ +export default { + scheme: 'atelier forest', + author: 'bram de haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/forest)', + base00: '#1b1918', + base01: '#2c2421', + base02: '#68615e', + base03: '#766e6b', + base04: '#9c9491', + base05: '#a8a19f', + base06: '#e6e2e0', + base07: '#f1efee', + base08: '#f22c40', + base09: '#df5320', + base0A: '#d5911a', + base0B: '#5ab738', + base0C: '#00ad9c', + base0D: '#407ee7', + base0E: '#6666ea', + base0F: '#c33ff3' +}; diff --git a/src/react/themes/atelier-heath.js b/src/react/themes/atelier-heath.js new file mode 100644 index 00000000..1faabf7f --- /dev/null +++ b/src/react/themes/atelier-heath.js @@ -0,0 +1,20 @@ +export default { + scheme: 'atelier heath', + author: 'bram de haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/heath)', + base00: '#1b181b', + base01: '#292329', + base02: '#695d69', + base03: '#776977', + base04: '#9e8f9e', + base05: '#ab9bab', + base06: '#d8cad8', + base07: '#f7f3f7', + base08: '#ca402b', + base09: '#a65926', + base0A: '#bb8a35', + base0B: '#379a37', + base0C: '#159393', + base0D: '#516aec', + base0E: '#7b59c0', + base0F: '#cc33cc' +}; diff --git a/src/react/themes/atelier-lakeside.js b/src/react/themes/atelier-lakeside.js new file mode 100644 index 00000000..66185731 --- /dev/null +++ b/src/react/themes/atelier-lakeside.js @@ -0,0 +1,20 @@ +export default { + scheme: 'atelier lakeside', + author: 'bram de haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/lakeside/)', + base00: '#161b1d', + base01: '#1f292e', + base02: '#516d7b', + base03: '#5a7b8c', + base04: '#7195a8', + base05: '#7ea2b4', + base06: '#c1e4f6', + base07: '#ebf8ff', + base08: '#d22d72', + base09: '#935c25', + base0A: '#8a8a0f', + base0B: '#568c3b', + base0C: '#2d8f6f', + base0D: '#257fad', + base0E: '#5d5db1', + base0F: '#b72dd2' +}; diff --git a/src/react/themes/atelier-seaside.js b/src/react/themes/atelier-seaside.js new file mode 100644 index 00000000..b789a499 --- /dev/null +++ b/src/react/themes/atelier-seaside.js @@ -0,0 +1,20 @@ +export default { + scheme: 'atelier seaside', + author: 'bram de haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/seaside/)', + base00: '#131513', + base01: '#242924', + base02: '#5e6e5e', + base03: '#687d68', + base04: '#809980', + base05: '#8ca68c', + base06: '#cfe8cf', + base07: '#f0fff0', + base08: '#e6193c', + base09: '#87711d', + base0A: '#c3c322', + base0B: '#29a329', + base0C: '#1999b3', + base0D: '#3d62f5', + base0E: '#ad2bee', + base0F: '#e619c3' +}; diff --git a/src/react/themes/bespin.js b/src/react/themes/bespin.js new file mode 100644 index 00000000..bfb7a6bc --- /dev/null +++ b/src/react/themes/bespin.js @@ -0,0 +1,20 @@ +export default { + scheme: 'bespin', + author: 'jan t. sott', + base00: '#28211c', + base01: '#36312e', + base02: '#5e5d5c', + base03: '#666666', + base04: '#797977', + base05: '#8a8986', + base06: '#9d9b97', + base07: '#baae9e', + base08: '#cf6a4c', + base09: '#cf7d34', + base0A: '#f9ee98', + base0B: '#54be0d', + base0C: '#afc4db', + base0D: '#5ea6ea', + base0E: '#9b859d', + base0F: '#937121' +}; diff --git a/src/react/themes/brewer.js b/src/react/themes/brewer.js new file mode 100644 index 00000000..53c17391 --- /dev/null +++ b/src/react/themes/brewer.js @@ -0,0 +1,20 @@ +export default { + scheme: 'brewer', + author: 'timothée poisot (http://github.com/tpoisot)', + base00: '#0c0d0e', + base01: '#2e2f30', + base02: '#515253', + base03: '#737475', + base04: '#959697', + base05: '#b7b8b9', + base06: '#dadbdc', + base07: '#fcfdfe', + base08: '#e31a1c', + base09: '#e6550d', + base0A: '#dca060', + base0B: '#31a354', + base0C: '#80b1d3', + base0D: '#3182bd', + base0E: '#756bb1', + base0F: '#b15928' +}; diff --git a/src/react/themes/bright.js b/src/react/themes/bright.js new file mode 100644 index 00000000..2b76fabd --- /dev/null +++ b/src/react/themes/bright.js @@ -0,0 +1,20 @@ +export default { + scheme: 'bright', + author: 'chris kempson (http://chriskempson.com)', + base00: '#000000', + base01: '#303030', + base02: '#505050', + base03: '#b0b0b0', + base04: '#d0d0d0', + base05: '#e0e0e0', + base06: '#f5f5f5', + base07: '#ffffff', + base08: '#fb0120', + base09: '#fc6d24', + base0A: '#fda331', + base0B: '#a1c659', + base0C: '#76c7b7', + base0D: '#6fb3d2', + base0E: '#d381c3', + base0F: '#be643c' +}; diff --git a/src/react/themes/chalk.js b/src/react/themes/chalk.js new file mode 100644 index 00000000..3d4359bb --- /dev/null +++ b/src/react/themes/chalk.js @@ -0,0 +1,20 @@ +export default { + scheme: 'chalk', + author: 'chris kempson (http://chriskempson.com)', + base00: '#151515', + base01: '#202020', + base02: '#303030', + base03: '#505050', + base04: '#b0b0b0', + base05: '#d0d0d0', + base06: '#e0e0e0', + base07: '#f5f5f5', + base08: '#fb9fb1', + base09: '#eda987', + base0A: '#ddb26f', + base0B: '#acc267', + base0C: '#12cfc0', + base0D: '#6fc2ef', + base0E: '#e1a3ee', + base0F: '#deaf8f' +}; diff --git a/src/react/themes/codeschool.js b/src/react/themes/codeschool.js new file mode 100644 index 00000000..4911e9e8 --- /dev/null +++ b/src/react/themes/codeschool.js @@ -0,0 +1,20 @@ +export default { + scheme: 'codeschool', + author: 'brettof86', + base00: '#232c31', + base01: '#1c3657', + base02: '#2a343a', + base03: '#3f4944', + base04: '#84898c', + base05: '#9ea7a6', + base06: '#a7cfa3', + base07: '#b5d8f6', + base08: '#2a5491', + base09: '#43820d', + base0A: '#a03b1e', + base0B: '#237986', + base0C: '#b02f30', + base0D: '#484d79', + base0E: '#c59820', + base0F: '#c98344' +}; diff --git a/src/react/themes/colors.js b/src/react/themes/colors.js new file mode 100644 index 00000000..17e96fee --- /dev/null +++ b/src/react/themes/colors.js @@ -0,0 +1,20 @@ +export default { + scheme: 'colors', + author: 'mrmrs (http://clrs.cc)', + base00: '#111111', + base01: '#333333', + base02: '#555555', + base03: '#777777', + base04: '#999999', + base05: '#bbbbbb', + base06: '#dddddd', + base07: '#ffffff', + base08: '#ff4136', + base09: '#ff851b', + base0A: '#ffdc00', + base0B: '#2ecc40', + base0C: '#7fdbff', + base0D: '#0074d9', + base0E: '#b10dc9', + base0F: '#85144b' +}; diff --git a/src/react/themes/default.js b/src/react/themes/default.js new file mode 100644 index 00000000..c8831510 --- /dev/null +++ b/src/react/themes/default.js @@ -0,0 +1,20 @@ +export default { + scheme: 'default', + author: 'chris kempson (http://chriskempson.com)', + base00: '#181818', + base01: '#282828', + base02: '#383838', + base03: '#585858', + base04: '#b8b8b8', + base05: '#d8d8d8', + base06: '#e8e8e8', + base07: '#f8f8f8', + base08: '#ab4642', + base09: '#dc9656', + base0A: '#f7ca88', + base0B: '#a1b56c', + base0C: '#86c1b9', + base0D: '#7cafc2', + base0E: '#ba8baf', + base0F: '#a16946' +}; diff --git a/src/react/themes/eighties.js b/src/react/themes/eighties.js new file mode 100644 index 00000000..0dfc3a7d --- /dev/null +++ b/src/react/themes/eighties.js @@ -0,0 +1,20 @@ +export default { + scheme: 'eighties', + author: 'chris kempson (http://chriskempson.com)', + base00: '#2d2d2d', + base01: '#393939', + base02: '#515151', + base03: '#747369', + base04: '#a09f93', + base05: '#d3d0c8', + base06: '#e8e6df', + base07: '#f2f0ec', + base08: '#f2777a', + base09: '#f99157', + base0A: '#ffcc66', + base0B: '#99cc99', + base0C: '#66cccc', + base0D: '#6699cc', + base0E: '#cc99cc', + base0F: '#d27b53' +}; diff --git a/src/react/themes/embers.js b/src/react/themes/embers.js new file mode 100644 index 00000000..14398a09 --- /dev/null +++ b/src/react/themes/embers.js @@ -0,0 +1,20 @@ +export default { + scheme: 'embers', + author: 'jannik siebert (https://github.com/janniks)', + base00: '#16130F', + base01: '#2C2620', + base02: '#433B32', + base03: '#5A5047', + base04: '#8A8075', + base05: '#A39A90', + base06: '#BEB6AE', + base07: '#DBD6D1', + base08: '#826D57', + base09: '#828257', + base0A: '#6D8257', + base0B: '#57826D', + base0C: '#576D82', + base0D: '#6D5782', + base0E: '#82576D', + base0F: '#825757' +}; diff --git a/src/react/themes/flat.js b/src/react/themes/flat.js new file mode 100644 index 00000000..333e8a48 --- /dev/null +++ b/src/react/themes/flat.js @@ -0,0 +1,20 @@ +export default { + scheme: 'flat', + author: 'chris kempson (http://chriskempson.com)', + base00: '#2C3E50', + base01: '#34495E', + base02: '#7F8C8D', + base03: '#95A5A6', + base04: '#BDC3C7', + base05: '#e0e0e0', + base06: '#f5f5f5', + base07: '#ECF0F1', + base08: '#E74C3C', + base09: '#E67E22', + base0A: '#F1C40F', + base0B: '#2ECC71', + base0C: '#1ABC9C', + base0D: '#3498DB', + base0E: '#9B59B6', + base0F: '#be643c' +}; diff --git a/src/react/themes/google.js b/src/react/themes/google.js new file mode 100644 index 00000000..c2f1d57a --- /dev/null +++ b/src/react/themes/google.js @@ -0,0 +1,20 @@ +export default { + scheme: 'google', + author: 'seth wright (http://sethawright.com)', + base00: '#1d1f21', + base01: '#282a2e', + base02: '#373b41', + base03: '#969896', + base04: '#b4b7b4', + base05: '#c5c8c6', + base06: '#e0e0e0', + base07: '#ffffff', + base08: '#CC342B', + base09: '#F96A38', + base0A: '#FBA922', + base0B: '#198844', + base0C: '#3971ED', + base0D: '#3971ED', + base0E: '#A36AC7', + base0F: '#3971ED' +}; diff --git a/src/react/themes/grayscale.js b/src/react/themes/grayscale.js new file mode 100644 index 00000000..2aeec11d --- /dev/null +++ b/src/react/themes/grayscale.js @@ -0,0 +1,20 @@ +export default { + scheme: 'grayscale', + author: 'alexandre gavioli (https://github.com/alexx2/)', + base00: '#101010', + base01: '#252525', + base02: '#464646', + base03: '#525252', + base04: '#ababab', + base05: '#b9b9b9', + base06: '#e3e3e3', + base07: '#f7f7f7', + base08: '#7c7c7c', + base09: '#999999', + base0A: '#a0a0a0', + base0B: '#8e8e8e', + base0C: '#868686', + base0D: '#686868', + base0E: '#747474', + base0F: '#5e5e5e' +}; diff --git a/src/react/themes/greenscreen.js b/src/react/themes/greenscreen.js new file mode 100644 index 00000000..75e2430e --- /dev/null +++ b/src/react/themes/greenscreen.js @@ -0,0 +1,20 @@ +export default { + scheme: 'green screen', + author: 'chris kempson (http://chriskempson.com)', + base00: '#001100', + base01: '#003300', + base02: '#005500', + base03: '#007700', + base04: '#009900', + base05: '#00bb00', + base06: '#00dd00', + base07: '#00ff00', + base08: '#007700', + base09: '#009900', + base0A: '#007700', + base0B: '#00bb00', + base0C: '#005500', + base0D: '#009900', + base0E: '#00bb00', + base0F: '#005500' +}; diff --git a/src/react/themes/harmonic.js b/src/react/themes/harmonic.js new file mode 100644 index 00000000..665d0476 --- /dev/null +++ b/src/react/themes/harmonic.js @@ -0,0 +1,20 @@ +export default { + scheme: 'harmonic16', + author: 'jannik siebert (https://github.com/janniks)', + base00: '#0b1c2c', + base01: '#223b54', + base02: '#405c79', + base03: '#627e99', + base04: '#aabcce', + base05: '#cbd6e2', + base06: '#e5ebf1', + base07: '#f7f9fb', + base08: '#bf8b56', + base09: '#bfbf56', + base0A: '#8bbf56', + base0B: '#56bf8b', + base0C: '#568bbf', + base0D: '#8b56bf', + base0E: '#bf568b', + base0F: '#bf5656' +}; diff --git a/src/react/themes/hopscotch.js b/src/react/themes/hopscotch.js new file mode 100644 index 00000000..4eca7b8c --- /dev/null +++ b/src/react/themes/hopscotch.js @@ -0,0 +1,20 @@ +export default { + scheme: 'hopscotch', + author: 'jan t. sott', + base00: '#322931', + base01: '#433b42', + base02: '#5c545b', + base03: '#797379', + base04: '#989498', + base05: '#b9b5b8', + base06: '#d5d3d5', + base07: '#ffffff', + base08: '#dd464c', + base09: '#fd8b19', + base0A: '#fdcc59', + base0B: '#8fc13e', + base0C: '#149b93', + base0D: '#1290bf', + base0E: '#c85e7c', + base0F: '#b33508' +}; diff --git a/src/react/themes/index.js b/src/react/themes/index.js index f54bc639..2b8a635e 100644 --- a/src/react/themes/index.js +++ b/src/react/themes/index.js @@ -1,2 +1,37 @@ -export { default as ocean } from './ocean'; +export { default as threezerotwofour } from './threezerotwofour'; +export { default as apathy } from './apathy'; +export { default as ashes } from './ashes'; +export { default as atelierDune } from './atelier-dune'; +export { default as atelierForest } from './atelier-forest'; +export { default as atelierHeath } from './atelier-heath'; +export { default as atelierLakeside } from './atelier-lakeside'; +export { default as atelierSeaside } from './atelier-seaside'; +export { default as bespin } from './bespin'; +export { default as brewer } from './brewer'; +export { default as bright } from './bright'; +export { default as chalk } from './chalk'; +export { default as codeschool } from './codeschool'; +export { default as colors } from './colors'; +export { default as default } from './default'; +export { default as eighties } from './eighties'; +export { default as embers } from './embers'; +export { default as flat } from './flat'; +export { default as google } from './google'; +export { default as grayscale } from './grayscale'; +export { default as greenscreen } from './greenscreen'; +export { default as harmonic } from './harmonic'; +export { default as hopscotch } from './hopscotch'; +export { default as isotope } from './isotope'; +export { default as marrakesh } from './marrakesh'; +export { default as mocha } from './mocha'; export { default as monokai } from './monokai'; +export { default as ocean } from './ocean'; +export { default as paraiso } from './paraiso'; +export { default as pop } from './pop'; +export { default as railscasts } from './railscasts'; +export { default as shapeshifter } from './shapeshifter'; +export { default as solarized } from './solarized'; +export { default as summerfruit } from './summerfruit'; +export { default as tomorrow } from './tomorrow'; +export { default as tube } from './tube'; +export { default as twilight } from './twilight'; diff --git a/src/react/themes/isotope.js b/src/react/themes/isotope.js new file mode 100644 index 00000000..484524f0 --- /dev/null +++ b/src/react/themes/isotope.js @@ -0,0 +1,20 @@ +export default { + scheme: 'isotope', + author: 'jan t. sott', + base00: '#000000', + base01: '#404040', + base02: '#606060', + base03: '#808080', + base04: '#c0c0c0', + base05: '#d0d0d0', + base06: '#e0e0e0', + base07: '#ffffff', + base08: '#ff0000', + base09: '#ff9900', + base0A: '#ff0099', + base0B: '#33ff00', + base0C: '#00ffff', + base0D: '#0066ff', + base0E: '#cc00ff', + base0F: '#3300ff' +}; diff --git a/src/react/themes/marrakesh.js b/src/react/themes/marrakesh.js new file mode 100644 index 00000000..ca2ef0df --- /dev/null +++ b/src/react/themes/marrakesh.js @@ -0,0 +1,20 @@ +export default { + scheme: 'marrakesh', + author: 'alexandre gavioli (http://github.com/alexx2/)', + base00: '#201602', + base01: '#302e00', + base02: '#5f5b17', + base03: '#6c6823', + base04: '#86813b', + base05: '#948e48', + base06: '#ccc37a', + base07: '#faf0a5', + base08: '#c35359', + base09: '#b36144', + base0A: '#a88339', + base0B: '#18974e', + base0C: '#75a738', + base0D: '#477ca1', + base0E: '#8868b3', + base0F: '#b3588e' +}; diff --git a/src/react/themes/mocha.js b/src/react/themes/mocha.js new file mode 100644 index 00000000..9c86e910 --- /dev/null +++ b/src/react/themes/mocha.js @@ -0,0 +1,20 @@ +export default { + scheme: 'mocha', + author: 'chris kempson (http://chriskempson.com)', + base00: '#3B3228', + base01: '#534636', + base02: '#645240', + base03: '#7e705a', + base04: '#b8afad', + base05: '#d0c8c6', + base06: '#e9e1dd', + base07: '#f5eeeb', + base08: '#cb6077', + base09: '#d28b71', + base0A: '#f4bc87', + base0B: '#beb55b', + base0C: '#7bbda4', + base0D: '#8ab3b5', + base0E: '#a89bb9', + base0F: '#bb9584' +}; diff --git a/src/react/themes/monokai.js b/src/react/themes/monokai.js index 654e49df..298fc861 100644 --- a/src/react/themes/monokai.js +++ b/src/react/themes/monokai.js @@ -1,6 +1,6 @@ export default { - scheme: 'Monokai', - author: 'Wimer Hazenberg (http://www.monokai.nl)', + scheme: 'monokai', + author: 'wimer hazenberg (http://www.monokai.nl)', base00: '#272822', base01: '#383830', base02: '#49483e', diff --git a/src/react/themes/ocean.js b/src/react/themes/ocean.js index 67da4c04..d3143b29 100644 --- a/src/react/themes/ocean.js +++ b/src/react/themes/ocean.js @@ -1,6 +1,6 @@ export default { - scheme: 'Ocean', - author: 'Chris Kempson (http://chriskempson.com)', + scheme: 'ocean', + author: 'chris kempson (http://chriskempson.com)', base00: '#2b303b', base01: '#343d46', base02: '#4f5b66', diff --git a/src/react/themes/paraiso.js b/src/react/themes/paraiso.js new file mode 100644 index 00000000..4d89e01a --- /dev/null +++ b/src/react/themes/paraiso.js @@ -0,0 +1,20 @@ +export default { + scheme: 'paraiso', + author: 'jan t. sott', + base00: '#2f1e2e', + base01: '#41323f', + base02: '#4f424c', + base03: '#776e71', + base04: '#8d8687', + base05: '#a39e9b', + base06: '#b9b6b0', + base07: '#e7e9db', + base08: '#ef6155', + base09: '#f99b15', + base0A: '#fec418', + base0B: '#48b685', + base0C: '#5bc4bf', + base0D: '#06b6ef', + base0E: '#815ba4', + base0F: '#e96ba8' +}; diff --git a/src/react/themes/pop.js b/src/react/themes/pop.js new file mode 100644 index 00000000..29daefeb --- /dev/null +++ b/src/react/themes/pop.js @@ -0,0 +1,20 @@ +export default { + scheme: 'pop', + author: 'chris kempson (http://chriskempson.com)', + base00: '#000000', + base01: '#202020', + base02: '#303030', + base03: '#505050', + base04: '#b0b0b0', + base05: '#d0d0d0', + base06: '#e0e0e0', + base07: '#ffffff', + base08: '#eb008a', + base09: '#f29333', + base0A: '#f8ca12', + base0B: '#37b349', + base0C: '#00aabb', + base0D: '#0e5a94', + base0E: '#b31e8d', + base0F: '#7a2d00' +}; diff --git a/src/react/themes/railscasts.js b/src/react/themes/railscasts.js new file mode 100644 index 00000000..2f914042 --- /dev/null +++ b/src/react/themes/railscasts.js @@ -0,0 +1,20 @@ +export default { + scheme: 'railscasts', + author: 'ryan bates (http://railscasts.com)', + base00: '#2b2b2b', + base01: '#272935', + base02: '#3a4055', + base03: '#5a647e', + base04: '#d4cfc9', + base05: '#e6e1dc', + base06: '#f4f1ed', + base07: '#f9f7f3', + base08: '#da4939', + base09: '#cc7833', + base0A: '#ffc66d', + base0B: '#a5c261', + base0C: '#519f50', + base0D: '#6d9cbe', + base0E: '#b6b3eb', + base0F: '#bc9458' +}; diff --git a/src/react/themes/shapeshifter.js b/src/react/themes/shapeshifter.js new file mode 100644 index 00000000..f6d99e02 --- /dev/null +++ b/src/react/themes/shapeshifter.js @@ -0,0 +1,20 @@ +export default { + scheme: 'shapeshifter', + author: 'tyler benziger (http://tybenz.com)', + base00: '#000000', + base01: '#040404', + base02: '#102015', + base03: '#343434', + base04: '#555555', + base05: '#ababab', + base06: '#e0e0e0', + base07: '#f9f9f9', + base08: '#e92f2f', + base09: '#e09448', + base0A: '#dddd13', + base0B: '#0ed839', + base0C: '#23edda', + base0D: '#3b48e3', + base0E: '#f996e2', + base0F: '#69542d' +}; diff --git a/src/react/themes/solarized.js b/src/react/themes/solarized.js new file mode 100644 index 00000000..b601e859 --- /dev/null +++ b/src/react/themes/solarized.js @@ -0,0 +1,20 @@ +export default { + scheme: 'solarized', + author: 'ethan schoonover (http://ethanschoonover.com/solarized)', + base00: '#002b36', + base01: '#073642', + base02: '#586e75', + base03: '#657b83', + base04: '#839496', + base05: '#93a1a1', + base06: '#eee8d5', + base07: '#fdf6e3', + base08: '#dc322f', + base09: '#cb4b16', + base0A: '#b58900', + base0B: '#859900', + base0C: '#2aa198', + base0D: '#268bd2', + base0E: '#6c71c4', + base0F: '#d33682' +}; diff --git a/src/react/themes/summerfruit.js b/src/react/themes/summerfruit.js new file mode 100644 index 00000000..ff9fe944 --- /dev/null +++ b/src/react/themes/summerfruit.js @@ -0,0 +1,20 @@ +export default { + scheme: 'summerfruit', + author: 'christopher corley (http://cscorley.github.io/)', + base00: '#151515', + base01: '#202020', + base02: '#303030', + base03: '#505050', + base04: '#B0B0B0', + base05: '#D0D0D0', + base06: '#E0E0E0', + base07: '#FFFFFF', + base08: '#FF0086', + base09: '#FD8900', + base0A: '#ABA800', + base0B: '#00C918', + base0C: '#1faaaa', + base0D: '#3777E6', + base0E: '#AD00A1', + base0F: '#cc6633' +}; diff --git a/src/react/themes/threezerotwofour.js b/src/react/themes/threezerotwofour.js new file mode 100644 index 00000000..f0c7de32 --- /dev/null +++ b/src/react/themes/threezerotwofour.js @@ -0,0 +1,20 @@ +export default { + scheme: 'threezerotwofour', + author: 'jan t. sott (http://github.com/idleberg)', + base00: '#090300', + base01: '#3a3432', + base02: '#4a4543', + base03: '#5c5855', + base04: '#807d7c', + base05: '#a5a2a2', + base06: '#d6d5d4', + base07: '#f7f7f7', + base08: '#db2d20', + base09: '#e8bbd0', + base0A: '#fded02', + base0B: '#01a252', + base0C: '#b5e4f4', + base0D: '#01a0e4', + base0E: '#a16a94', + base0F: '#cdab53' +}; diff --git a/src/react/themes/tomorrow.js b/src/react/themes/tomorrow.js new file mode 100644 index 00000000..9dd69015 --- /dev/null +++ b/src/react/themes/tomorrow.js @@ -0,0 +1,20 @@ +export default { + scheme: 'tomorrow', + author: 'chris kempson (http://chriskempson.com)', + base00: '#1d1f21', + base01: '#282a2e', + base02: '#373b41', + base03: '#969896', + base04: '#b4b7b4', + base05: '#c5c8c6', + base06: '#e0e0e0', + base07: '#ffffff', + base08: '#cc6666', + base09: '#de935f', + base0A: '#f0c674', + base0B: '#b5bd68', + base0C: '#8abeb7', + base0D: '#81a2be', + base0E: '#b294bb', + base0F: '#a3685a' +}; diff --git a/src/react/themes/tube.js b/src/react/themes/tube.js new file mode 100644 index 00000000..d0bfe87c --- /dev/null +++ b/src/react/themes/tube.js @@ -0,0 +1,20 @@ +export default { + scheme: 'london tube', + author: 'jan t. sott', + base00: '#231f20', + base01: '#1c3f95', + base02: '#5a5758', + base03: '#737171', + base04: '#959ca1', + base05: '#d9d8d8', + base06: '#e7e7e8', + base07: '#ffffff', + base08: '#ee2e24', + base09: '#f386a1', + base0A: '#ffd204', + base0B: '#00853e', + base0C: '#85cebc', + base0D: '#009ddc', + base0E: '#98005d', + base0F: '#b06110' +}; diff --git a/src/react/themes/twilight.js b/src/react/themes/twilight.js new file mode 100644 index 00000000..d0423a2c --- /dev/null +++ b/src/react/themes/twilight.js @@ -0,0 +1,20 @@ +export default { + scheme: 'twilight', + author: 'david hart (http://hart-dev.com)', + base00: '#1e1e1e', + base01: '#323537', + base02: '#464b50', + base03: '#5f5a60', + base04: '#838184', + base05: '#a7a7a7', + base06: '#c3c3c3', + base07: '#ffffff', + base08: '#cf6a4c', + base09: '#cda869', + base0A: '#f9ee98', + base0B: '#8f9d6a', + base0C: '#afc4db', + base0D: '#7587a6', + base0E: '#9b859d', + base0F: '#9b703f' +}; From 4ca436fdf28aa5501be7a86e7b44234939cb0e40 Mon Sep 17 00:00:00 2001 From: dzannotti Date: Fri, 7 Aug 2015 20:14:44 +0100 Subject: [PATCH 08/49] cleaned up json tree items font sizing --- src/react/JSONTree/JSONArrayNode.js | 4 ++-- src/react/JSONTree/JSONObjectNode.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/react/JSONTree/JSONArrayNode.js b/src/react/JSONTree/JSONArrayNode.js index bbd21411..47077486 100644 --- a/src/react/JSONTree/JSONArrayNode.js +++ b/src/react/JSONTree/JSONArrayNode.js @@ -18,13 +18,13 @@ const styles = { display: 'inline-block' }, span: { - fontSize: 12, + fontSize: '0.85em', cursor: 'default' }, spanType: { marginLeft: 5, marginRight: 5, - fontSize: 16 + fontSize: '1em' } }; diff --git a/src/react/JSONTree/JSONObjectNode.js b/src/react/JSONTree/JSONObjectNode.js index 9ee33012..7f8f4c5d 100644 --- a/src/react/JSONTree/JSONObjectNode.js +++ b/src/react/JSONTree/JSONObjectNode.js @@ -18,13 +18,13 @@ const styles = { display: 'inline-block' }, span: { - fontSize: 12, + fontSize: '0.85em', cursor: 'default' }, spanType: { marginLeft: 5, marginRight: 5, - fontSize: 16 + fontSize: '1em' } }; From a19d7d6e9ded0623f1fca68552d46a5dd0ed978d Mon Sep 17 00:00:00 2001 From: dzannotti Date: Fri, 7 Aug 2015 20:25:41 +0100 Subject: [PATCH 09/49] readded scroll and removed no longer used style --- src/react/LogMonitor.js | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/src/react/LogMonitor.js b/src/react/LogMonitor.js index 5365af09..f119d0e7 100644 --- a/src/react/LogMonitor.js +++ b/src/react/LogMonitor.js @@ -11,11 +11,19 @@ const styles = { width: '100%', height: '100%' }, - buttonBarWrapper: { - marginBottom: 1 - }, buttonBar: { + height: 26, + marginBottom: 1, paddingLeft: 2 + }, + elements: { + position: 'absolute', + left: 0, + right: 0, + top: 27, + bottom: 0, + overflowX: 'hidden', + overflowY: 'auto' } }; @@ -163,10 +171,7 @@ export default class LogMonitor { Commit }
        -
        +
        {elements}
        From 2b2724c34f7ea765c62a2b07ee1292cfe9567681 Mon Sep 17 00:00:00 2001 From: dzannotti Date: Fri, 7 Aug 2015 20:30:51 +0100 Subject: [PATCH 10/49] restored scroll functionality to default --- src/react/LogMonitor.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/react/LogMonitor.js b/src/react/LogMonitor.js index f119d0e7..30370001 100644 --- a/src/react/LogMonitor.js +++ b/src/react/LogMonitor.js @@ -61,8 +61,7 @@ export default class LogMonitor { } else if ( this.props.stagedActions.length < nextProps.stagedActions.length ) { - const scrollableNode = node.parentElement; - const { scrollTop, offsetHeight, scrollHeight } = scrollableNode; + const { scrollTop, offsetHeight, scrollHeight } = node; this.scrollDown = Math.abs( scrollHeight - (scrollTop + offsetHeight) @@ -79,9 +78,8 @@ export default class LogMonitor { } if (this.scrollDown) { - const scrollableNode = node.parentElement; - const { offsetHeight, scrollHeight } = scrollableNode; - scrollableNode.scrollTop = scrollHeight - offsetHeight; + const { offsetHeight, scrollHeight } = node; + node.scrollTop = scrollHeight - offsetHeight; this.scrollDown = false; } } From 61250b5562306fef265d0c6f910b74b599b65365 Mon Sep 17 00:00:00 2001 From: dzannotti Date: Fri, 7 Aug 2015 20:50:05 +0100 Subject: [PATCH 11/49] fixed error display --- src/react/LogMonitorEntry.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/react/LogMonitorEntry.js b/src/react/LogMonitorEntry.js index c516656d..20cb1a3b 100644 --- a/src/react/LogMonitorEntry.js +++ b/src/react/LogMonitorEntry.js @@ -39,8 +39,11 @@ export default class LogMonitorEntry { } return ( ({errorText}) From fb83a1861404cb0b77b9fba5bae2d698ffbf7e83 Mon Sep 17 00:00:00 2001 From: dzannotti Date: Fri, 7 Aug 2015 23:52:42 +0100 Subject: [PATCH 12/49] tentative diff highlight --- src/react/DebugPanel.js | 2 +- src/react/JSONTree/JSONArrayNode.js | 22 +++++++++++++++++++--- src/react/JSONTree/JSONBooleanNode.js | 8 +++++++- src/react/JSONTree/JSONNullNode.js | 8 +++++++- src/react/JSONTree/JSONNumberNode.js | 8 +++++++- src/react/JSONTree/JSONObjectNode.js | 20 ++++++++++++++++++-- src/react/JSONTree/JSONStringNode.js | 8 +++++++- src/react/JSONTree/grab-node.js | 14 +++++++------- src/react/JSONTree/index.js | 4 ++-- src/react/LogMonitor.js | 7 +++++-- src/react/LogMonitorEntry.js | 2 +- src/utils/hexToRgb.js | 8 ++++++++ src/utils/shallowEqual.js | 23 +++++++++++++++++++++++ 13 files changed, 112 insertions(+), 22 deletions(-) create mode 100644 src/utils/hexToRgb.js create mode 100644 src/utils/shallowEqual.js diff --git a/src/react/DebugPanel.js b/src/react/DebugPanel.js index f8209fe6..4b3b2670 100644 --- a/src/react/DebugPanel.js +++ b/src/react/DebugPanel.js @@ -14,7 +14,7 @@ export function getDefaultStyle(props) { zIndex: 999, fontSize: 17, overflow: 'hidden', - opacity: 0.95, + opacity: 0.9, color: 'white', left: left ? 0 : undefined, right: right ? 0 : undefined, diff --git a/src/react/JSONTree/JSONArrayNode.js b/src/react/JSONTree/JSONArrayNode.js index 47077486..d0b3c512 100644 --- a/src/react/JSONTree/JSONArrayNode.js +++ b/src/react/JSONTree/JSONArrayNode.js @@ -3,6 +3,7 @@ import reactMixin from 'react-mixin'; import { ExpandedStateHandlerMixin } from './mixins'; import JSONArrow from './JSONArrow'; import grabNode from './grab-node'; +import hexToRgb from '../../utils/hexToRgb'; const styles = { base: { @@ -56,10 +57,14 @@ export default class JSONArrayNode extends React.Component { // generated them previously, we return from cache, otherwise we create // them. getChildNodes() { - let childNodes = []; if (this.state.expanded && this.needsChildNodes) { + let childNodes = []; this.props.data.forEach((element, idx) => { - childNodes.push(grabNode(idx, element, this.props.theme)); + let prevData; + if (typeof this.props.previousData !== 'undefined') { + prevData = this.props.previousData[idx]; + } + childNodes.push(grabNode(idx, element, prevData, this.props.theme)); }); this.needsChildNodes = false; this.renderedChildren = childNodes; @@ -84,11 +89,22 @@ export default class JSONArrayNode extends React.Component { listStyle: 'none', display: (this.state.expanded) ? 'block' : 'none' }; - let containerStyle = { ...styles.base, ...styles.parentNode }; + let backgroundColor = 'transparent'; + let containerStyle; let spanStyle = { ...styles.span, color: this.props.theme.base0E }; + if (typeof this.props.previousData !== 'undefined' && this.props.previousData === this.data) { + const bgColor = hexToRgb(this.props.theme.base08); + backgroundColor = `rgba(${bgColor.r}, ${bgColor.g}, ${bgColor.b}, 0.04)`; + } + containerStyle = { + ...styles.base, + ...styles.parentNode, + backgroundColor + } + if (this.state.expanded) { spanStyle = { ...spanStyle, diff --git a/src/react/JSONTree/JSONBooleanNode.js b/src/react/JSONTree/JSONBooleanNode.js index e007272f..1af6e045 100644 --- a/src/react/JSONTree/JSONBooleanNode.js +++ b/src/react/JSONTree/JSONBooleanNode.js @@ -1,6 +1,7 @@ import React from 'react'; import reactMixin from 'react-mixin'; import { SquashClickEventMixin } from './mixins'; +import hexToRgb from '../../utils/hexToRgb'; const styles = { base: { @@ -20,8 +21,13 @@ const styles = { export default class JSONBooleanNode extends React.Component { render() { const truthString = (this.props.value) ? 'true' : 'false'; + let backgroundColor = 'transparent'; + if (this.props.previousValue !== this.props.value) { + const bgColor = hexToRgb(this.props.theme.base08); + backgroundColor = `rgba(${bgColor.r}, ${bgColor.g}, ${bgColor.b}, 0.04)`; + } return ( -
      • +