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.

Sign up for GitHub

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

Add :hover styleRule for modebar.bgcolor #3397

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a512163
add :hover styleRule for modebar.bgcolor
etpinard Jan 4, 2019
460ece0
return Plotly.relayout promise in modebar_test.js
etpinard Jan 4, 2019
a4fb8cd
DRY modebar tests
etpinard Jan 7, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions build/plotcss.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ var rules = {
"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;",
"X .ease-bg": "-webkit-transition:background-color 0.3s ease 0s;-moz-transition:background-color 0.3s ease 0s;-ms-transition:background-color 0.3s ease 0s;-o-transition:background-color 0.3s ease 0s;transition:background-color 0.3s ease 0s;",
"X .modebar--hover>:not(.watermark)": "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 .modebar-group": "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;",
Expand Down
18 changes: 9 additions & 9 deletions src/components/modebar/modebar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,21 +52,22 @@ proto.update = function(graphInfo, buttons) {
this.element.setAttribute('id', modeBarId);
this._uid = modeBarId;

if(context.displayModeBar === 'hover') {
this.element.className = 'modebar modebar--hover';
}
else this.element.className = 'modebar';
this.element.className = 'modebar';
if(context.displayModeBar === 'hover') this.element.className += ' modebar--hover ease-bg';

if(fullLayout.modebar.orientation === 'v') {
this.element.className += ' vertical';
buttons = buttons.reverse();
}

var style = fullLayout.modebar;
var bgSelector = context.displayModeBar === 'hover' ? '.js-plotly-plot .plotly:hover ' : '';

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);
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!

Lib.addRelatedStyleRule(modeBarId, '#' + modeBarId + ' .modebar-btn .icon path', 'fill: ' + style.color);
Lib.addRelatedStyleRule(modeBarId, '#' + modeBarId + ' .modebar-btn:hover .icon path', 'fill: ' + style.activecolor);
Lib.addRelatedStyleRule(modeBarId, '#' + modeBarId + ' .modebar-btn.active .icon path', 'fill: ' + style.activecolor);

// if buttons or logo have changed, redraw modebar interior
var needsNewButtons = !this.hasButtons(buttons);
Expand Down Expand Up @@ -135,7 +136,6 @@ proto.updateButtons = function(buttons) {
proto.createGroup = function() {
var group = document.createElement('div');
group.className = 'modebar-group';

return group;
};

Expand Down
4 changes: 4 additions & 0 deletions src/css/_modebar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,10 @@
z-index: 1001;
}

.ease-bg {
@include vendor('transition', background-color 0.3s ease 0s);
}

.modebar--hover > :not(.watermark) {
opacity: 0;
@include vendor('transition', opacity 0.3s ease 0s);
Expand Down
47 changes: 43 additions & 4 deletions test/jasmine/tests/modebar_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1313,7 +1313,7 @@ describe('ModeBar', function() {
button = selectButton(gd._fullLayout._modeBar, targetBtn);
checkButtonColor(button, colors[0]);
})
.then(function() {Plotly.relayout(gd, 'modebar.color', colors[1]);})
.then(function() { return Plotly.relayout(gd, 'modebar.color', colors[1]); })
.then(function() {
checkButtonColor(button, colors[1]);
})
Expand All @@ -1336,16 +1336,55 @@ describe('ModeBar', function() {
.then(done);
});

it('changes background color', function(done) {
it('changes background color (displayModeBar: hover)', function(done) {
function getStyleRule() {
var uid = gd._fullLayout._uid;
var ownerNode = document.getElementById('plotly.js-style-modebar-' + uid);
var styleSheets = document.styleSheets;
for(var i = 0; i < styleSheets.length; i++) {
var ss = styleSheets[i];
if(ss.ownerNode === ownerNode) return ss;
}
}

Plotly.plot(gd, [], {modebar: { bgcolor: colors[0]}})
.then(function() {
style = window.getComputedStyle(gd._fullLayout._modeBar.element);
expect(style.backgroundColor).toBe('rgba(0, 0, 0, 0)');
expect(getStyleRule().rules[3].style.backgroundColor).toBe(colors[0]);
})
.then(function() { return Plotly.relayout(gd, 'modebar.bgcolor', colors[1]); })
.then(function() {
style = window.getComputedStyle(gd._fullLayout._modeBar.element);
expect(style.backgroundColor).toBe('rgba(0, 0, 0, 0)');
expect(getStyleRule().rules[3].style.backgroundColor).toBe(colors[1]);
})
.catch(failTest)
.then(done);
});

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

var uid = gd._fullLayout._uid;
var ownerNode = document.getElementById('plotly.js-style-modebar-' + uid);
var styleSheets = document.styleSheets;
for(var i = 0; i < styleSheets.length; i++) {
var ss = styleSheets[i];
if(ss.ownerNode === ownerNode) return ss;
}
}

Plotly.plot(gd, [], {modebar: {bgcolor: colors[0]}}, {displayModeBar: true})
.then(function() {
style = window.getComputedStyle(gd._fullLayout._modeBar.element);
expect(style.backgroundColor).toBe(colors[0]);
expect(getStyleRule().rules[3].style.backgroundColor).toBe(colors[0]);
})
.then(function() {Plotly.relayout(gd, 'modebar.bgcolor', colors[1]);})
.then(function() { return Plotly.relayout(gd, 'modebar.bgcolor', colors[1]); })
.then(function() {
style = window.getComputedStyle(gd._fullLayout._modeBar.element);
expect(style.backgroundColor).toBe(colors[1]);
expect(getStyleRule().rules[3].style.backgroundColor).toBe(colors[1]);
})
.catch(failTest)
.then(done);
Expand All @@ -1360,7 +1399,7 @@ describe('ModeBar', function() {
size = modeBarEl.getBoundingClientRect();
expect(size.width < size.height).toBeTruthy();
})
.then(function() {Plotly.relayout(gd, 'modebar.orientation', 'h');})
.then(function() { return Plotly.relayout(gd, 'modebar.orientation', 'h'); })
.catch(failTest)
.then(function() {
size = modeBarEl.getBoundingClientRect();
Expand Down