Skip to content

Add :hover styleRule for modebar.bgcolor #3397

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jan 7, 2019
Merged

Conversation

etpinard
Copy link
Contributor

@etpinard etpinard commented Jan 4, 2019

... and a .ease-bg class to match modebar button opacity transition.

fixes #3388 - for example:

Plotly.newPlot('graph', [{
  y: [1, 2, 1]
}], {
  width: 500,
  paper_bgcolor: '#d3d3d3',
  margin: {t: 0},
  modebar: {bgcolor: 'red'}
}, {
  watermark: true
})

peek 2019-01-04 12-58

cc @plotly/plotly_js - I would appreciate if modebar-expert @antoinerg would test this one out. Thanks!

... and .ease-bg class to match modebar button opacity
    transition
@etpinard etpinard added bug something broken status: reviewable labels Jan 4, 2019
@etpinard
Copy link
Contributor Author

etpinard commented Jan 7, 2019

Ping @antoinerg - could you take a look at this today? I'll ❤️ to include this in 1.43.2. Thanks!

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);
Lib.addRelatedStyleRule(modeBarId, bgSelector + '#' + modeBarId, 'background-color: ' + style.bgcolor);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would this work without bgSelector? modeBarId should already be unique so this might not be necessary.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe there's a way (not a CSS expert here), but I think that :hover pseudo-class must be tagged onto the graph div class.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok thanks for the explanation. This makes sense!

});

it('changes background color (displayModeBar: true)', function(done) {
function getStyleRule() {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nonblocking but this function is the same as the one above. Could be DRYed for bonus points!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good call. Done in -> a4fb8cd

@antoinerg
Copy link
Contributor

Thanks for the fix and the nice tests @etpinard 💃

@etpinard etpinard merged commit 673b542 into master Jan 7, 2019
@etpinard etpinard deleted the modebar-bg-hover-fix branch January 7, 2019 22:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug something broken
Projects
None yet
Development

Successfully merging this pull request may close these issues.

the toolbar's background is always visible, not just on hover
2 participants