modeBar styling

src/components/modebar/modebar.js

@@ -14,7 +14,7 @@ var isNumeric = require('fast-isnumeric');
 
 var Lib = require('../../lib');
 var Icons = require('../../../build/ploticon');
-
+var Parser = new DOMParser();
 
 /**
  * UI controller for interactive plots
@@ -52,6 +52,11 @@ proto.update = function(graphInfo, buttons) {
     }
     else this.element.className = 'modebar';
 
+    if(context.modeBarStyle.orientation === 'v') {
+        this.element.className += ' vertical';
+    }
+    this.element.style.backgroundColor = context.modeBarStyle.bgcolor;
+
     // if buttons or logo have changed, redraw modebar interior
     var needsNewButtons = !this.hasButtons(buttons);
     var needsNewLogo = (this.hasLogo !== context.displaylogo);
@@ -62,7 +67,7 @@ proto.update = function(graphInfo, buttons) {
     if(needsNewButtons || needsNewLogo || needsNewLocale) {
         this.removeAllButtons();
 
-        this.updateButtons(buttons);
+        this.updateButtons(buttons, context.modeBarStyle.iconColor);
 
         if(context.displaylogo) {
             this.element.appendChild(this.getLogo());
@@ -73,7 +78,7 @@ proto.update = function(graphInfo, buttons) {
     this.updateActiveButton();
 };
 
-proto.updateButtons = function(buttons) {
+proto.updateButtons = function(buttons, iconColor) {
     var _this = this;
 
     this.buttons = buttons;
@@ -93,6 +98,7 @@ proto.updateButtons = function(buttons) {
             }
             _this.buttonsNames.push(buttonName);
 
+            buttonConfig.color = iconColor;
             var button = _this.createButton(buttonConfig);
             _this.buttonElements.push(button);
             group.appendChild(button);
@@ -161,6 +167,7 @@ proto.createButton = function(config) {
         button.appendChild(icon());
     }
     else {
+        if(icon) icon.color = config.color;
         button.appendChild(this.createIcon(icon || Icons.question));
     }
     button.setAttribute('data-gravity', config.gravity || 'n');
@@ -173,31 +180,45 @@ proto.createButton = function(config) {
  * @Param {object} thisIcon
  * @Param {number} thisIcon.width
  * @Param {string} thisIcon.path
+ * @Param {string} thisIcon.color
  * @Return {HTMLelement}
  */
 proto.createIcon = function(thisIcon) {
     var iconHeight = isNumeric(thisIcon.height) ?
             Number(thisIcon.height) :
             thisIcon.ascent - thisIcon.descent,
         svgNS = 'http://www.w3.org/2000/svg',
-        icon = document.createElementNS(svgNS, 'svg'),
-        path = document.createElementNS(svgNS, 'path');
+        icon;
 
-    icon.setAttribute('height', '1em');
-    icon.setAttribute('width', (thisIcon.width / iconHeight) + 'em');
-    icon.setAttribute('viewBox', [0, 0, thisIcon.width, iconHeight].join(' '));
+    if(thisIcon.path) {
+        icon = document.createElementNS(svgNS, 'svg');
+        icon.setAttribute('viewBox', [0, 0, thisIcon.width, iconHeight].join(' '));
 
-    path.setAttribute('d', thisIcon.path);
+        var path = document.createElementNS(svgNS, 'path');
+        path.setAttribute('d', thisIcon.path);
 
-    if(thisIcon.transform) {
-        path.setAttribute('transform', thisIcon.transform);
+        if(thisIcon.transform) {
+            path.setAttribute('transform', thisIcon.transform);
+        }
+        else if(thisIcon.ascent !== undefined) {
+            // Legacy icon transform calculation
+            path.setAttribute('transform', 'matrix(1 0 0 -1 0 ' + thisIcon.ascent + ')');
+        }
+
+        if(thisIcon.color) {
+            path.setAttribute('fill', thisIcon.color);
+        }
+
+        icon.appendChild(path);
     }
-    else if(thisIcon.ascent !== undefined) {
-        // Legacy icon transform calculation
-        path.setAttribute('transform', 'matrix(1 0 0 -1 0 ' + thisIcon.ascent + ')');
+
+    if(thisIcon.svg) {
+        var svgDoc = Parser.parseFromString(thisIcon.svg, 'application/xml');
+        icon = svgDoc.childNodes[0];
     }
 
-    icon.appendChild(path);
+    icon.setAttribute('height', '1em');
+    icon.setAttribute('width', '1em');
 
     return icon;
 };
@@ -272,7 +293,7 @@ proto.getLogo = function() {
     a.setAttribute('data-title', Lib._(this.graphInfo, 'Produced with Plotly'));
     a.className = 'modebar-btn plotlyjsicon modebar-btn--logo';
 
-    a.appendChild(this.createIcon(Icons.plotlylogo));
+    a.appendChild(this.createIcon(Icons.newplotlylogo));
 
     group.appendChild(a);
     return group;

src/css/_modebar.scss

@@ -3,7 +3,6 @@
     top: 2px;
     right: 2px;
     z-index: 1001;
-    background: rgba(255,255,255,0.7);
 }
 
 .modebar--hover {
@@ -23,17 +22,13 @@
     position: relative;
     vertical-align: middle;
     white-space: nowrap;
-
-    &:first-child {
-        margin-left: 0px;
-    }
 }
 
-
 .modebar-btn {
     position: relative;
     font-size: 16px;
     padding: 3px 4px;
+    height: 22px;
     /* display: inline-block; including this breaks 3d interaction in .embed mode. Chrome bug? */
     cursor: pointer;
     line-height: normal;
@@ -44,19 +39,21 @@
         top: 2px;
     }
 
-    path {
-        fill: rgba(0,31,95,0.3);
-    }
-
-    &.active path, &:hover path {
-        fill: rgba(0,22,72,0.5);
+    &.modebar-btn--logo {
+        font-size: 20px;
     }
+}
 
-    &.modebar-btn--logo {
-        padding: 3px 1px;
+.modebar.vertical {
+    .modebar-group {
+        display: block;
+        float: none;
+        margin-left: 0px;
+        margin-top: 8px;
 
-        path {
-            fill: $color-brand-primary !important;
+        .modebar-btn {
+            display:block;
+            text-align: center;
         }
     }
 }

src/plot_api/plot_api.js

@@ -428,7 +428,7 @@ function setPlotContext(gd, config) {
         keys = Object.keys(config);
         for(i = 0; i < keys.length; i++) {
             key = keys[i];
-            if(key === 'editable' || key === 'edits') continue;
+            if(key === 'editable' || key === 'edits' || key === 'modeBarStyle') continue;
             if(key in context) {
                 if(key === 'setBackground' && config[key] === 'opaque') {
                     context[key] = opaqueSetBackground;
@@ -465,6 +465,15 @@ function setPlotContext(gd, config) {
                 }
             }
         }
+        if(config.modeBarStyle) {
+            keys = Object.keys(config.modeBarStyle);
+            for(i = 0; i < keys.length; i++) {
+                key = keys[i];
+                if(key in context.modeBarStyle) {
+                    context.modeBarStyle[key] = config.modeBarStyle[key];
+                }
+            }
+        }
     }
 
     // staticPlot forces a bunch of others:

src/plot_api/plot_config.js

@@ -102,6 +102,13 @@ module.exports = {
     // display the mode bar (true, false, or 'hover')
     displayModeBar: 'hover',
 
+    // mode bar style
+    modeBarStyle: {
+        orientation: 'h',
+        bgcolor: 'rgba(255,255,255,0.7)',
+        iconColor: 'rgba(0, 31, 95, 0.3)'
+    },
+
     /*
      * remove mode bar button by name
      * (see ../components/modebar/buttons.js for the list of names)

tasks/util/pull_font_svg.js

@@ -2,7 +2,7 @@ var fs = require('fs');
 var xml2js = require('xml2js');
 
 var parser = new xml2js.Parser();
-
+var builder = new xml2js.Builder({ headless: true, rootName: 'svg', renderOpts: {'newline': ''}});
 
 module.exports = function pullFontSVG(data, pathOut) {
     parser.parseString(data, function(err, result) {
@@ -28,6 +28,17 @@ module.exports = function pullFontSVG(data, pathOut) {
             };
         });
 
+        // Load SVG
+        var svgs = result.svg.defs[0].svg;
+        svgs.forEach(function(svg) {
+            var name = svg.$.id;
+            delete svg.$.id;
+            chars[name] = {
+                name: name,
+                svg: builder.buildObject(svg)
+            };
+        });
+
         // turn remaining double quotes into single
         var charStr = JSON.stringify(chars, null, 4).replace(/\"/g, '\'');
 

test/jasmine/tests/modebar_test.js

@@ -38,6 +38,11 @@ describe('ModeBar', function() {
             _context: {
                 displaylogo: true,
                 displayModeBar: true,
+                modeBarStyle: {
+                    orientation: 'h',
+                    bgcolor: 'rgba(255,255,255,0.7)',
+                    iconColor: 'rgba(0, 31, 95, 0.3)'
+                },
                 modeBarButtonsToRemove: [],
                 modeBarButtonsToAdd: [],
                 locale: 'en',