modeBar styling

build/plotcss.js

@@ -31,17 +31,14 @@ var rules = {
     "X .cursor-n-resize": "cursor:n-resize;",
     "X .cursor-ne-resize": "cursor:ne-resize;",
     "X .cursor-grab": "cursor:-webkit-grab;cursor:grab;",
-    "X .modebar": "position:absolute;top:2px;right:2px;z-index:1001;background:rgba(255,255,255,0.7);",
+    "X .modebar": "position:absolute;top:2px;right:2px;z-index:1001;",
     "X .modebar--hover": "opacity:0;-webkit-transition:opacity 0.3s ease 0s;-moz-transition:opacity 0.3s ease 0s;-ms-transition:opacity 0.3s ease 0s;-o-transition:opacity 0.3s ease 0s;transition:opacity 0.3s ease 0s;",
     "X:hover .modebar--hover": "opacity:1;",
     "X .modebar-group": "float:left;display:inline-block;box-sizing:border-box;margin-left:8px;position:relative;vertical-align:middle;white-space:nowrap;",
-    "X .modebar-group:first-child": "margin-left:0px;",
-    "X .modebar-btn": "position:relative;font-size:16px;padding:3px 4px;cursor:pointer;line-height:normal;box-sizing:border-box;",
+    "X .modebar-btn": "position:relative;font-size:16px;padding:3px 4px;height:22px;cursor:pointer;line-height:normal;box-sizing:border-box;",
     "X .modebar-btn svg": "position:relative;top:2px;",
-    "X .modebar-btn path": "fill:rgba(0,31,95,0.3);",
-    "X .modebar-btn.active path,X .modebar-btn:hover path": "fill:rgba(0,22,72,0.5);",
-    "X .modebar-btn.modebar-btn--logo": "padding:3px 1px;",
-    "X .modebar-btn.modebar-btn--logo path": "fill:#447adb !important;",
+    "X .modebar.vertical .modebar-group": "display:block;float:none;margin-left:0px;margin-top:8px;",
+    "X .modebar.vertical .modebar-group .modebar-btn": "display:block;text-align:center;",
     "X [data-title]:before,X [data-title]:after": "position:absolute;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);-o-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);display:none;opacity:0;z-index:1001;pointer-events:none;top:110%;right:50%;",
     "X [data-title]:hover:before,X [data-title]:hover:after": "display:block;opacity:1;",
     "X [data-title]:before": "content:'';position:absolute;background:transparent;border:6px solid transparent;z-index:1002;margin-top:-12px;border-bottom-color:#69738a;margin-right:-6px;",

build/ploticon.js

@@ -32,13 +32,13 @@ module.exports = {
         'transform': 'matrix(1 0 0 -1 0 850)'
     },
     'zoom_plus': {
-        'width': 1000,
+        'width': 875,
         'height': 1000,
         'path': 'm1 787l0-875 875 0 0 875-875 0z m687-500l-187 0 0-187-125 0 0 187-188 0 0 125 188 0 0 187 125 0 0-187 187 0 0-125z',
         'transform': 'matrix(1 0 0 -1 0 850)'
     },
     'zoom_minus': {
-        'width': 1000,
+        'width': 875,
         'height': 1000,
         'path': 'm0 788l0-876 875 0 0 876-875 0z m688-500l-500 0 0 125 500 0 0-125z',
         'transform': 'matrix(1 0 0 -1 0 850)'
@@ -120,5 +120,9 @@ module.exports = {
         'height': 1000,
         'path': 'M512 409c0-57-46-104-103-104-57 0-104 47-104 104 0 57 47 103 104 103 57 0 103-46 103-103z m-327-39l92 0 0 92-92 0z m-185 0l92 0 0 92-92 0z m370-186l92 0 0 93-92 0z m0-184l92 0 0 92-92 0z',
         'transform': 'matrix(1.5 0 0 -1.5 0 850)'
+    },
+    'newplotlylogo': {
+        'name': 'newplotlylogo',
+        'svg': '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 132 132\'><defs><style>&#xD;\n      .cls-1 {&#xD;\n        fill: #119dff;&#xD;\n      }&#xD;\n&#xD;\n      .cls-2 {&#xD;\n        fill: #25fefd;&#xD;\n      }&#xD;\n&#xD;\n      .cls-3 {&#xD;\n        fill: #fff;&#xD;\n      }&#xD;\n    </style></defs><title>plotly-logomark</title><g id=\'symbol\'><rect class=\'cls-1\' width=\'132\' height=\'132\' rx=\'6\' ry=\'6\'/><circle class=\'cls-2\' cx=\'78\' cy=\'54\' r=\'6\'/><circle class=\'cls-2\' cx=\'102\' cy=\'30\' r=\'6\'/><circle class=\'cls-2\' cx=\'78\' cy=\'30\' r=\'6\'/><circle class=\'cls-2\' cx=\'54\' cy=\'30\' r=\'6\'/><circle class=\'cls-2\' cx=\'30\' cy=\'30\' r=\'6\'/><circle class=\'cls-2\' cx=\'30\' cy=\'54\' r=\'6\'/><path class=\'cls-3\' d=\'M30,72a6,6,0,0,0-6,6v24a6,6,0,0,0,12,0V78A6,6,0,0,0,30,72Z\'/><path class=\'cls-3\' d=\'M78,72a6,6,0,0,0-6,6v24a6,6,0,0,0,12,0V78A6,6,0,0,0,78,72Z\'/><path class=\'cls-3\' d=\'M54,48a6,6,0,0,0-6,6v48a6,6,0,0,0,12,0V54A6,6,0,0,0,54,48Z\'/><path class=\'cls-3\' d=\'M102,48a6,6,0,0,0-6,6v48a6,6,0,0,0,12,0V54A6,6,0,0,0,102,48Z\'/></g></svg>'
     }
 };

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
@@ -46,12 +46,19 @@ proto.update = function(graphInfo, buttons) {
     this.graphInfo = graphInfo;
 
     var context = this.graphInfo._context;
+    var fullLayout = this.graphInfo._fullLayout;
 
     if(context.displayModeBar === 'hover') {
         this.element.className = 'modebar modebar--hover';
     }
     else this.element.className = 'modebar';
 
+    if(fullLayout.modeBarStyle.orientation === 'v') {
+        this.element.className += ' vertical';
+        buttons = buttons.reverse();
+    }
+    this.element.style.backgroundColor = fullLayout.modeBarStyle.bgcolor;
+
     // if buttons or logo have changed, redraw modebar interior
     var needsNewButtons = !this.hasButtons(buttons);
     var needsNewLogo = (this.hasLogo !== context.displaylogo);
@@ -62,18 +69,23 @@ proto.update = function(graphInfo, buttons) {
     if(needsNewButtons || needsNewLogo || needsNewLocale) {
         this.removeAllButtons();
 
-        this.updateButtons(buttons);
+        this.updateButtons(buttons, fullLayout.modeBarStyle.iconColor);
 
         if(context.displaylogo) {
-            this.element.appendChild(this.getLogo());
+            if(fullLayout.modeBarStyle.orientation === 'v') {
+                this.element.prepend(this.getLogo());
+            } else {
+                this.element.appendChild(this.getLogo());
+            }
+
             this.hasLogo = true;
         }
     }
 
     this.updateActiveButton();
 };
 
-proto.updateButtons = function(buttons) {
+proto.updateButtons = function(buttons, iconColor) {
     var _this = this;
 
     this.buttons = buttons;
@@ -93,6 +105,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 +174,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 +187,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 +300,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);
-    }
+    &.modebar-btn--logo {
 
-    &.active path, &:hover path {
-        fill: rgba(0,22,72,0.5);
     }
+}
 
-    &.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/plots/layout_attributes.js

@@ -224,5 +224,30 @@ module.exports = {
             'or a logo image, for example. To omit one of these items on the plot,',
             'make an item with matching `templateitemname` and `visible: false`.'
         ].join(' ')
+    },
+    modeBarStyle: {
+        orientation: {
+            valType: 'enumerated',
+            values: ['v', 'h'],
+            dflt: 'h',
+            role: 'info',
+            editType: 'modebar',
+            description: 'Sets the orientation of the modebar.'
+        },
+        bgcolor: {
+            valType: 'color',
+            role: 'style',
+            dflt: 'rgba(255, 255, 255, 0.7)',
+            editType: 'modebar',
+            description: 'Sets the background color of the modebar.'
+        },
+        iconColor: {
+            valType: 'color',
+            role: 'style',
+            dflt: 'rgba(0, 31, 95, 0.3)',
+            editType: 'modebar',
+            description: 'Sets the color of the icons in the modebar.'
+        },
+        editType: 'modebar'
     }
 };

src/plots/plots.js

@@ -1334,6 +1334,10 @@ plots.supplyLayoutGlobalDefaults = function(layoutIn, layoutOut, formatObj) {
 
     coerce('datarevision');
 
+    coerce('modeBarStyle.orientation');
+    coerce('modeBarStyle.bgcolor');
+    coerce('modeBarStyle.iconColor');
+
     Registry.getComponentMethod(
         'calendars',
         'handleDefaults'

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

@@ -32,7 +32,12 @@ describe('ModeBar', function() {
                 dragmode: 'zoom',
                 _paperdiv: d3.select(getMockContainerTree()),
                 _has: Plots._hasPlotType,
-                _subplots: {xaxis: xaxes || [], yaxis: yaxes || []}
+                _subplots: {xaxis: xaxes || [], yaxis: yaxes || []},
+                modeBarStyle: {
+                    orientation: 'h',
+                    bgcolor: 'rgba(255,255,255,0.7)',
+                    iconColor: 'rgba(0, 31, 95, 0.3)'
+                }
             },
             _fullData: [],
             _context: {