updated style, coverage script

Author: mac-s-g

.gitignore

@@ -4,4 +4,6 @@ example/example-react.js
 webpack.config.template.js
 
 # Coverage directory used by tools like istanbul
-coverage
+coverage
+
+.nyc_output

.npmignore

@@ -10,4 +10,6 @@ example/example-react.js
 webpack.config.template.js
 
 # Coverage directory used by tools like istanbul
-coverage
+coverage
+
+.nyc_output

docker/coverage.sh

@@ -6,8 +6,6 @@ echo "Running with NODE_ENV=$NODE_ENV"
 
 rm -rf ./coverage/*
 
-mkdir .nyc_output
-
 # run the workbench container
 docker run \
     -v $(pwd)/src:/react/src \
@@ -22,5 +20,3 @@ docker run \
     --entrypoint=/react/entrypoints/coverage.sh \
     -t react-json-view
 
-
-rm -rf .nyc_output

src/js/components/DataTypes/Object.js

@@ -61,10 +61,9 @@ class rjvObject extends React.Component {
     }
 
     getObjectContent = (depth, src, props) => {
-        const {indentWidth} = this.state;
         return (<div class="pushed-content object-container">
             <div class="object-content"
-            style={{marginLeft:(indentWidth*SINGLE_INDENT + "px")}}>
+            style={{marginLeft: '6px'}}>
                 {this.renderObjectContents(src, props)}
             </div>
         </div>);
@@ -92,21 +91,28 @@ class rjvObject extends React.Component {
         // `indentWidth` and `collapsed` props will
         // perpetuate to children via `...rest`
         const {
-            depth, src, namespace, name, type, parent_type, theme, jsvRoot,
+            depth, src, namespace, name, type,
+            parent_type, theme, jsvRoot,
             ...rest
         } = this.props;
         const {
             object_type, display_name, expanded
         } = this.state;
         //expanded/collapsed icon
-        let expanded_icon;
+        let expanded_icon, object_padding_left = 0;
+
         if (expanded) {
             expanded_icon = <CircleMinus {...Theme(theme, 'expanded-icon')} />
         } else {
             expanded_icon = <CirclePlus {...Theme(theme, 'collapsed-icon')} />
         }
 
-        return (<div {...Theme(theme, jsvRoot ? 'jsv-root' : 'object-key-val')}>
+        if (!jsvRoot) {
+            object_padding_left = this.props.indentWidth * SINGLE_INDENT;
+        }
+
+
+        return (<div {...Theme(theme, jsvRoot ? 'jsv-root' : 'objectKeyVal', object_padding_left)}>
             <span>
                 <span onClick={this.toggleCollapsed} {...Theme(theme, 'brace-row')}>
                     <span class="icon-container">{expanded_icon}</span>
@@ -131,7 +137,10 @@ class rjvObject extends React.Component {
                 : this.getElipsis()
             }
             <span class="brace-row">
-                <span {...Theme(theme, 'brace')} >
+                <span style={{
+                    ...Theme(theme, 'brace').style,
+                    paddingLeft:(expanded ? '3px' : '0px')
+                }} >
                     {object_type == 'array' ? ']' : '}'}
                 </span>
                 {expanded ? null : this.getObjectMetaData(src)}
@@ -170,12 +179,12 @@ class rjvObject extends React.Component {
                     />);
             } else {
                 elements.push(
-                <div {...Theme(props.theme, 'object-key-val')}
+                <div {...Theme(theme, 'objectKeyVal', this.props.indentWidth * SINGLE_INDENT)}
                 key={variable.name}>
                     {
                         this.props.type == 'array'
                         ? (
-                        <div {...Theme(props.theme, 'array-key')}
+                        <div {...Theme(theme, 'array-key')}
                         key={variable.name + '_' + namespace}>
                             {variable.name}
                             <div {...Theme(props.theme, 'colon')}>:</div>

src/js/themes/getStyle.js

@@ -25,7 +25,7 @@ const colorMap = theme => ({
     }
 });
 
-const getDefaultThemeStyling = theme => {
+const getDefaultThemeStyling = (theme, args) => {
     const colors = colorMap(theme);
 
     return {
@@ -62,15 +62,20 @@ const getDefaultThemeStyling = theme => {
             margin: styleConstants.keyMargin,
             color: colors.keyColor
         },
-        'object-key-val': {
-            padding: styleConstants.keyValPadding,
-            borderLeft: styleConstants.keyValBorderLeft
-                + ' ' + colors.objectBorder,
-            ':hover': {
-                padding: styleConstants.keyValPaddingHover,
-                borderLeft: styleConstants.keyValBorderHover
-                    + ' ' + colors.objectBorder
-            }
+        objectKeyVal: (component, paddingLeft) => {
+            return {style: {
+                paddingLeft: paddingLeft + 'px',
+                paddingTop: styleConstants.keyValPaddingTop,
+                paddingRight: styleConstants.keyValPaddingRight,
+                paddingBottom: styleConstants.keyValPaddingBottom,
+                borderLeft: styleConstants.keyValBorderLeft
+                    + ' ' + colors.objectBorder,
+                ':hover': {
+                    paddingLeft: (paddingLeft - 1)  + 'px',
+                    borderLeft: styleConstants.keyValBorderHover
+                        + ' ' + colors.objectBorder
+                }
+            }};
         },
         'object-key-val-no-border': {
             padding: styleConstants.keyValPadding
@@ -165,15 +170,17 @@ const getStyle = (theme) => {
     if (theme === false || theme === 'none') {
         rjv_theme = rjv_grey;
     }
+
     return createStyling(
         getDefaultThemeStyling,
-        {defaultBase16: rjv_theme},
+        {defaultBase16: rjv_theme}
     )(theme);
 }
 
-export default function style(theme, component) {
+export default function style(theme, component, args) {
     if (!theme) {
         console.error('theme has not been set')
     }
-    return getStyle(theme)(component);
+
+    return getStyle(theme)(component, args);
 }

src/js/themes/styleConstants.js

@@ -25,7 +25,9 @@ export default {
   keyOpacity: '0.85',
   keyOpacityHover: '1',
 
-  keyValPadding: '3px 5px 3px 5px',
+  keyValPaddingTop: '3px',
+  keyValPaddingBottom: '3px',
+  keyValPaddingRight: '5px',
   keyValBorderLeft: '1px solid',
   keyValBorderHover: '2px solid',
   keyValPaddingHover: '3px 5px 3px 4px',