mirror of https://github.com/apache/superset.git
Highlight affected slices for filter change in dashboard view (#1439)
* Highlight affected slices for filter change in dashboard view Done: - When user adds/deletes a filter in dashboard, affected slices will have their header highlighted for 2 seconds * Modified highlight to a more subtle box shadow * Added slice-cell class for highlight transition * Changed class name to slice-cell-highlight
This commit is contained in:
parent
c7ba143d03
commit
7307ddad3c
|
@ -201,6 +201,11 @@ function dashboardContainer(dashboardData) {
|
||||||
this.slices.forEach(function (slice) {
|
this.slices.forEach(function (slice) {
|
||||||
if (slice.data.slice_id !== sliceId && immune.indexOf(slice.data.slice_id) === -1) {
|
if (slice.data.slice_id !== sliceId && immune.indexOf(slice.data.slice_id) === -1) {
|
||||||
slice.render();
|
slice.render();
|
||||||
|
const sliceSeletor = $(`#${slice.data.token}-cell`);
|
||||||
|
sliceSeletor.addClass('slice-cell-highlight');
|
||||||
|
setTimeout(function () {
|
||||||
|
sliceSeletor.removeClass('slice-cell-highlight');
|
||||||
|
}, 1200);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
|
@ -8,7 +8,7 @@ const propTypes = {
|
||||||
|
|
||||||
function SliceCell({ expandedSlices, removeSlice, slice }) {
|
function SliceCell({ expandedSlices, removeSlice, slice }) {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div className="slice-cell" id={`${slice.token}-cell`}>
|
||||||
<div className="chart-header">
|
<div className="chart-header">
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<div className="col-md-12 header">
|
<div className="col-md-12 header">
|
||||||
|
|
|
@ -81,6 +81,16 @@ div.widget .chart-controls {
|
||||||
.slice-grid div.separator.widget h1,h2,h3,h4 {
|
.slice-grid div.separator.widget h1,h2,h3,h4 {
|
||||||
margin-top: 0px;
|
margin-top: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.slice-cell {
|
||||||
|
box-shadow: 0px 0px 20px 5px rgba(0,0,0,0);
|
||||||
|
transition: box-shadow 1s ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slice-cell-highlight {
|
||||||
|
box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.2);
|
||||||
|
}
|
||||||
|
|
||||||
.dashboard .separator.widget .slice_container {
|
.dashboard .separator.widget .slice_container {
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
|
|
Loading…
Reference in New Issue