modeBar styling #3068
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -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 | ||
|
|
@@ -45,13 +45,28 @@ var proto = ModeBar.prototype; | |
| proto.update = function(graphInfo, buttons) { | ||
| this.graphInfo = graphInfo; | ||
|
|
||
| var context = this.graphInfo._context, | ||
| fullLayout = this.graphInfo._fullLayout, | ||
| modeBarId = 'modebar-' + fullLayout._uid; | ||
|
|
||
| this.element.setAttribute('id', modeBarId); | ||
| this._uid = modeBarId; | ||
|
|
||
| if(context.displayModeBar === 'hover') { | ||
| this.element.className = 'modebar modebar--hover'; | ||
| } | ||
| else this.element.className = 'modebar'; | ||
|
|
||
| if(fullLayout.modebar.orientation === 'v') { | ||
| this.element.className += ' vertical'; | ||
| buttons = buttons.reverse(); | ||
| } | ||
|
|
||
| Lib.addRelatedStyleRule(modeBarId, '#' + modeBarId, 'background-color: ' + fullLayout.modebar.bgcolor); | ||
|
There was a problem hiding this comment. Do we have to use CSS here? Could we instead add plotly.js/src/components/updatemenus/draw.js Lines 219 to 221 in 30ed4a4 plotly.js/src/components/updatemenus/draw.js Lines 464 to 467 in 30ed4a4 that way we wouldn't have to hijack the There was a problem hiding this comment. We could use There was a problem hiding this comment.
Right, getting "active" to work would require some work. The modebar button click handlers would need to update their style attribute instead of appending/removing the Consider my comment non-blocking. |
||
| Lib.addRelatedStyleRule(modeBarId, '#' + modeBarId + ' .modebar-btn .icon path', 'fill: ' + fullLayout.modebar.color); | ||
| Lib.addRelatedStyleRule(modeBarId, '#' + modeBarId + ' .modebar-btn:hover .icon path', 'fill: ' + fullLayout.modebar.activecolor); | ||
| Lib.addRelatedStyleRule(modeBarId, '#' + modeBarId + ' .modebar-btn.active .icon path', 'fill: ' + fullLayout.modebar.activecolor); | ||
|
There was a problem hiding this comment. These don't appear to update properly on There was a problem hiding this comment.
moreover, There was a problem hiding this comment. Let me investigate As for the screen capture: the gray icons are the ones that are currently active (gray being the default There was a problem hiding this comment.
Ha I see. My mistake! There was a problem hiding this comment. Commit 97f25e2 fixes the issue with The new style rules were just appended to the same There was a problem hiding this comment. Cool. Let's 🔒 this down in a jasmine test though. There was a problem hiding this comment. In commit f5cc0e9, we test each new layout attributes and make sure they behave properly when using |
||
|
|
||
| // if buttons or logo have changed, redraw modebar interior | ||
| var needsNewButtons = !this.hasButtons(buttons); | ||
| var needsNewLogo = (this.hasLogo !== context.displaylogo); | ||
|
|
@@ -65,7 +80,12 @@ proto.update = function(graphInfo, buttons) { | |
| this.updateButtons(buttons); | ||
|
|
||
| if(context.displaylogo) { | ||
| if(fullLayout.modebar.orientation === 'v') { | ||
| this.element.prepend(this.getLogo()); | ||
| } else { | ||
| this.element.appendChild(this.getLogo()); | ||
| } | ||
|
|
||
| this.hasLogo = true; | ||
| } | ||
| } | ||
|
|
@@ -173,31 +193,42 @@ 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; | ||
|
|
||
| if(thisIcon.path) { | ||
| icon = document.createElementNS(svgNS, 'svg'); | ||
| icon.setAttribute('viewBox', [0, 0, thisIcon.width, iconHeight].join(' ')); | ||
| icon.setAttribute('class', 'icon'); | ||
|
|
||
| var path = document.createElementNS(svgNS, 'path'); | ||
| path.setAttribute('d', thisIcon.path); | ||
|
|
||
| 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 + ')'); | ||
| } | ||
|
|
||
| icon.appendChild(path); | ||
| } | ||
|
|
||
| if(thisIcon.svg) { | ||
| var svgDoc = Parser.parseFromString(thisIcon.svg, 'application/xml'); | ||
| icon = svgDoc.childNodes[0]; | ||
| } | ||
|
|
||
| icon.setAttribute('height', '1em'); | ||
| icon.setAttribute('width', '1em'); | ||
|
|
||
| return icon; | ||
| }; | ||
|
|
@@ -272,7 +303,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.newplotlylogo)); | ||
|
|
||
| group.appendChild(a); | ||
| return group; | ||
|
|
@@ -288,6 +319,7 @@ proto.removeAllButtons = function() { | |
|
|
||
| proto.destroy = function() { | ||
| Lib.removeElement(this.container.querySelector('.modebar')); | ||
| Lib.deleteRelatedStyleRule(this._uid); | ||
| }; | ||
|
|
||
| function createModeBar(gd, buttons) { | ||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Could we trim those
\nand spaces?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fixed by commit dc7877b