move modeBarStyle from config to layout options

Author: antoinerg

src/components/modebar/modebar.js

@@ -46,16 +46,18 @@ 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(context.modeBarStyle.orientation === 'v') {
+    if(fullLayout.modeBarStyle.orientation === 'v') {
         this.element.className += ' vertical';
+        buttons = buttons.reverse();
     }
-    this.element.style.backgroundColor = context.modeBarStyle.bgcolor;
+    this.element.style.backgroundColor = fullLayout.modeBarStyle.bgcolor;
 
     // if buttons or logo have changed, redraw modebar interior
     var needsNewButtons = !this.hasButtons(buttons);
@@ -67,10 +69,10 @@ proto.update = function(graphInfo, buttons) {
     if(needsNewButtons || needsNewLogo || needsNewLocale) {
         this.removeAllButtons();
 
-        this.updateButtons(buttons, context.modeBarStyle.iconColor);
+        this.updateButtons(buttons, fullLayout.modeBarStyle.iconColor);
 
         if(context.displaylogo) {
-            if(context.modeBarStyle.orientation === 'v') {
+            if(fullLayout.modeBarStyle.orientation === 'v') {
                 this.element.prepend(this.getLogo());
             } else {
                 this.element.appendChild(this.getLogo());

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' || key === 'modeBarStyle') continue;
+            if(key === 'editable' || key === 'edits') continue;
             if(key in context) {
                 if(key === 'setBackground' && config[key] === 'opaque') {
                     context[key] = opaqueSetBackground;
@@ -465,15 +465,6 @@ 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,13 +102,6 @@ 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)

src/plots/layout_attributes.js

@@ -224,5 +224,29 @@ 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.'
+        }
     }
 };

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'