print stylesheet (#3670)

* hide headers and nav when printing

* add margin

* Update ExplicitSize to watch for window and print media query changes, use to ensure Dashboard is resized when printing

* increase contrast and remove superfluous styling

* only important things are important kyle

* re-add borders

* border contrast

frontend/src/metabase/components/ExplicitSize.jsx

@@ -12,11 +12,26 @@ export default ComposedComponent => class extends Component {
         };
     }
 
+    componentWillMount() {
+        window.addEventListener("resize", this._updateSize);
+        this._mql = window.matchMedia("print");
+        this._mql.addListener(this._updateSize);
+    }
+
+    componentWillUnmount() {
+        window.removeEventListener("resize", this._updateSize);
+        this._mql.removeListener(this._updateSize);
+    }
+
     componentDidMount() {
-        this.componentDidUpdate();
+        this._updateSize();
     }
 
     componentDidUpdate() {
+        this._updateSize();
+    }
+
+    _updateSize = () => {
         const { width, height } = ReactDOM.findDOMNode(this).getBoundingClientRect();
         if (this.state.width !== width || this.state.height !== height) {
             this.setState({ width, height });

frontend/src/metabase/css/dashboard.css

@@ -477,5 +477,36 @@
 
 @media screen and (min-width: 1540px) {
   .Dashboard.Dashboard--fullscreen { font-size: 1.6em; }
+}
+
 
+/* what for to print the dashboards */
+@media print {
+    header,
+    nav {
+        display: none;
+    }
+    .DashCard .Card {
+      box-shadow: none;
+      border-color: #a1a1a1;
+    }
+    /* improve label contrast */
+    .dc-chart .axis .tick text,
+    .dc-chart .x-axis-label,
+    .dc-chart .y-axis-label {
+      fill: #222222;
+    }
 }
+
+@media print and (orientation: portrait) {
+    html {
+        width: 8.5in;
+    }
+}
+@media print and (orientation: landscape) {
+    html {
+        width: 11in;
+    }
+}
+
+@page { margin: 1cm; }

frontend/src/metabase/dashboard/components/DashboardGrid.jsx

@@ -5,6 +5,7 @@ import GridLayout from "./grid/GridLayout.jsx";
 import DashCard from "./DashCard.jsx";
 
 import Modal from "metabase/components/Modal.jsx";
+import ExplicitSize from "metabase/components/ExplicitSize.jsx";
 import RemoveFromDashboardModal from "./RemoveFromDashboardModal.jsx";
 import AddSeriesModal from "./AddSeriesModal.jsx";
 
@@ -23,6 +24,7 @@ import cx from "classnames";
 
 const MOBILE_ASPECT_RATIO = 3 / 2;
 
+@ExplicitSize
 export default class DashboardGrid extends Component {
     constructor(props, context) {
         super(props, context);
@@ -32,11 +34,10 @@ export default class DashboardGrid extends Component {
             dashcards: this.getSortedDashcards(props),
             removeModalDashCard: null,
             addSeriesModalDashCard: null,
-            width: 0,
             isDragging: false
         };
 
-        _.bindAll(this, "calculateSizing", "onDashCardMouseDown");
+        _.bindAll(this, "onDashCardMouseDown");
     }
 
     static propTypes = {
@@ -57,7 +58,12 @@ export default class DashboardGrid extends Component {
         onChangeLocation: PropTypes.func.isRequired
     };
 
+    static defaultProps = {
+        width: 0
+    };
+
     shouldComponentUpdate(nextProps, nextState) {
+        console.log("shouldComponentUpdate", !_.isEqual(this.props, nextProps), !_.isEqual(this.state, nextState));
         return !(_.isEqual(this.props, nextProps) && _.isEqual(this.state, nextState));
     }
 
@@ -148,27 +154,6 @@ export default class DashboardGrid extends Component {
         );
     }
 
-    // make grid square by getting the container width, then dividing by 6
-    calculateSizing() {
-        let width = ReactDOM.findDOMNode(this).offsetWidth;
-        if (this.state.width !== width) {
-            this.setState({ width });
-        }
-    }
-
-    componentDidMount() {
-        window.addEventListener('resize', this.calculateSizing);
-        this.calculateSizing();
-    }
-
-    componentWillUnmount() {
-        window.removeEventListener('resize', this.calculateSizing);
-    }
-
-    componentDidUpdate() {
-        this.calculateSizing();
-    }
-
     // we need to track whether or not we're dragging so we can disable pointer events on action buttons :-/
     onDrag() {
         if (!this.state.isDragging) {
@@ -216,8 +201,8 @@ export default class DashboardGrid extends Component {
     }
 
     renderMobile() {
-        const { isEditing, isEditingParameter } = this.props;
-        const { width, dashcards } = this.state;
+        const { isEditing, isEditingParameter, width } = this.props;
+        const { dashcards } = this.state;
         return (
             <div
                 className={cx("DashboardGrid", { "Dash--editing": isEditing, "Dash--editingParameter": isEditingParameter, "Dash--dragging": this.state.isDragging })}
@@ -233,8 +218,7 @@ export default class DashboardGrid extends Component {
     }
 
     renderGrid() {
-        const { dashboard, isEditing, isEditingParameter } = this.props;
-        const { width } = this.state;
+        const { dashboard, isEditing, isEditingParameter, width } = this.props;
         const rowHeight = Math.floor(width / GRID_WIDTH / GRID_ASPECT_RATIO);
         return (
             <GridLayout
@@ -258,7 +242,7 @@ export default class DashboardGrid extends Component {
     }
 
     render() {
-        const { width } = this.state;
+        const { width } = this.props;
         return (
             <div className="flex layout-centered">
                 { width === 0 ?