From 3def71bccca25b164e14bbab349d2b1fef918aba Mon Sep 17 00:00:00 2001
From: Kyle Doherty <kdoh@users.noreply.github.com>
Date: Tue, 8 Nov 2016 09:26:29 -0800
Subject: [PATCH] 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
---
.../src/metabase/components/ExplicitSize.jsx | 17 +++++++-
frontend/src/metabase/css/dashboard.css | 31 ++++++++++++++
.../dashboard/components/DashboardGrid.jsx | 40 ++++++-------------
3 files changed, 59 insertions(+), 29 deletions(-)
diff --git a/frontend/src/metabase/components/ExplicitSize.jsx b/frontend/src/metabase/components/ExplicitSize.jsx
index 27e39713d7d..6079ef70352 100644
--- a/frontend/src/metabase/components/ExplicitSize.jsx
+++ b/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 });
diff --git a/frontend/src/metabase/css/dashboard.css b/frontend/src/metabase/css/dashboard.css
index e8725e2587d..4058c262389 100644
--- a/frontend/src/metabase/css/dashboard.css
+++ b/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; }
diff --git a/frontend/src/metabase/dashboard/components/DashboardGrid.jsx b/frontend/src/metabase/dashboard/components/DashboardGrid.jsx
index 800ec0b7043..113cbd6003d 100644
--- a/frontend/src/metabase/dashboard/components/DashboardGrid.jsx
+++ b/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 ?
--
GitLab