modeBar styling #3068
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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,29 @@ 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.deleteRelatedStyleRule(modeBarId); | ||
| Lib.addRelatedStyleRule(modeBarId, '#' + modeBarId, 'background-color: ' + fullLayout.modebar.bgcolor); | ||
| 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 +81,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 +194,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 +304,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 +320,7 @@ proto.removeAllButtons = function() { | |
|
|
||
| proto.destroy = function() { | ||
| Lib.removeElement(this.container.querySelector('.modebar')); | ||
| Lib.deleteRelatedStyleRule(this._uid); | ||
| }; | ||
|
|
||
| function createModeBar(gd, buttons) { | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.
Do we have to use CSS here? Could we instead add
mouseover/mouseouthandlers to the modebar buttons, similar to how we handle updatemenu buttons: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
<style>dynamically.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.
We could use
mouseover/mouseoutfor hover but I wasn't sure how to handle the active state. Since we already add/remove class nameactiveto the icons, I thought it made sense to just style those in CSS. @alexcjohnson wasn't against the idea but we can consider another strategy.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.
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
"active"class name.Consider my comment non-blocking.