Allow changing the active tool color via props. (#168)

* Allow changing the active tool color via props.

* Document the changes.

* Visualize the changes in the viewer storyboard.

Author: leweohlsen

docs/documentation.md

@@ -47,6 +47,7 @@
 | toolbarProps.position   | `right`      | one of `none`, `top`, `right`, `bottom`, `left` | Toolbar position |
 | toolbarProps.SVGAlignX | `left` | one of `left`, `center`, `right` | X Alignment used for "Fit to Viewer" action |
 | toolbarProps.SVGAlignY | `top` | one of `top`, `center`, `bottom` | Y Alignment used for "Fit to Viewer" action |
+| toolbarProps.activeToolColor | `#1CA6FC` | String | Color of active and hovered tool icons |
 
 \* handler available only with the tool `none` or `auto`
 

src/ui-toolbar/toolbar-button.jsx

@@ -35,7 +35,7 @@ export default class ToolbarButton extends React.Component {
       width: "24px",
       height: "24px",
       margin: [POSITION_TOP, POSITION_BOTTOM].indexOf(this.props.toolbarPosition) >= 0 ? "2px 1px" : "1px 2px",
-      color: this.props.active || this.state.hover ? '#1CA6FC' : '#FFF',
+      color: this.props.active || this.state.hover ? this.props.activeColor : '#FFF',
       transition: "color 200ms ease",
       background: "none",
       padding: "0px",
@@ -72,6 +72,7 @@ ToolbarButton.propTypes = {
   title: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
   toolbarPosition: PropTypes.string.isRequired,
+  activeColor: PropTypes.string.isRequired,
   onClick: PropTypes.func.isRequired,
   active: PropTypes.bool.isRequired
 };

src/ui-toolbar/toolbar.jsx

@@ -14,7 +14,7 @@ import IconZoomOut from './icon-zoom-out';
 import IconFit from './icon-fit';
 import ToolbarButton from './toolbar-button';
 
-export default function Toolbar({tool, value, onChangeValue, onChangeTool, position, SVGAlignX, SVGAlignY}) {
+export default function Toolbar({tool, value, onChangeValue, onChangeTool, activeToolColor, position, SVGAlignX, SVGAlignY}) {
 
   let handleChangeTool = (event, tool) => {
     onChangeTool(tool);
@@ -52,6 +52,7 @@ export default function Toolbar({tool, value, onChangeValue, onChangeTool, posit
       <ToolbarButton
         toolbarPosition={position}
         active={tool === TOOL_NONE}
+        activeColor={activeToolColor}
         name="unselect-tools"
         title="Selection"
         onClick={ event => handleChangeTool(event, TOOL_NONE) }>
@@ -61,6 +62,7 @@ export default function Toolbar({tool, value, onChangeValue, onChangeTool, posit
       <ToolbarButton
         toolbarPosition={position}
         active={tool === TOOL_PAN}
+        activeColor={activeToolColor}
         name="select-tool-pan"
         title="Pan"
         onClick={ event => handleChangeTool(event, TOOL_PAN) }>
@@ -70,6 +72,7 @@ export default function Toolbar({tool, value, onChangeValue, onChangeTool, posit
       <ToolbarButton
         toolbarPosition={position}
         active={tool === TOOL_ZOOM_IN}
+        activeColor={activeToolColor}
         name="select-tool-zoom-in"
         title="Zoom in"
         onClick={ event => handleChangeTool(event, TOOL_ZOOM_IN) }>
@@ -79,6 +82,7 @@ export default function Toolbar({tool, value, onChangeValue, onChangeTool, posit
       <ToolbarButton
         toolbarPosition={position}
         active={tool === TOOL_ZOOM_OUT}
+        activeColor={activeToolColor}
         name="select-tool-zoom-out"
         title="Zoom out"
         onClick={ event => handleChangeTool(event, TOOL_ZOOM_OUT) }>
@@ -88,6 +92,7 @@ export default function Toolbar({tool, value, onChangeValue, onChangeTool, posit
       <ToolbarButton
         toolbarPosition={position}
         active={false}
+        activeColor={activeToolColor}
         name="fit-to-viewer"
         title="Fit to viewer"
         onClick={ event => handleFit(event) }>
@@ -107,10 +112,12 @@ Toolbar.propTypes = {
   position: PropTypes.oneOf([POSITION_TOP, POSITION_RIGHT, POSITION_BOTTOM, POSITION_LEFT]),
   SVGAlignX: PropTypes.oneOf([ALIGN_CENTER, ALIGN_LEFT, ALIGN_RIGHT]),
   SVGAlignY: PropTypes.oneOf([ALIGN_CENTER, ALIGN_TOP, ALIGN_BOTTOM]),
+  activeToolColor: PropTypes.string
 };
 
 Toolbar.defaultProps = {
   position: POSITION_RIGHT,
   SVGAlignX: ALIGN_LEFT,
-  SVGAlignY: ALIGN_TOP
+  SVGAlignY: ALIGN_TOP,
+  activeToolColor: '#1CA6FC'
 };

src/viewer.js

@@ -597,6 +597,7 @@ ReactSVGPanZoom.propTypes = {
     position: PropTypes.oneOf([POSITION_NONE, POSITION_TOP, POSITION_RIGHT, POSITION_BOTTOM, POSITION_LEFT]),
     SVGAlignX: PropTypes.oneOf([ALIGN_CENTER, ALIGN_LEFT, ALIGN_RIGHT]),
     SVGAlignY: PropTypes.oneOf([ALIGN_CENTER, ALIGN_TOP, ALIGN_BOTTOM]),
+    activeToolColor: PropTypes.string,
   }),
 
   /**************************************************************************/

storybook/stories/ViewerStory.jsx

@@ -138,6 +138,8 @@ export default class MainStory extends Component {
               [ALIGN_CENTER]: ALIGN_CENTER,
               [ALIGN_BOTTOM]: ALIGN_BOTTOM
             }, ALIGN_TOP),
+
+            activeToolColor: color('toolbarProps.activeToolColor', '#1CA6FC'),
           }}
 
           miniatureProps={{