Merge pull request #462 from outline/jori/print

Added ability to print a document

app/components/Actions/Actions.js

@@ -29,6 +29,10 @@ const Actions = styled(Flex)`
   border-radius: 3px;
   background: rgba(255, 255, 255, 0.9);
   -webkit-backdrop-filter: blur(20px);
+
+  @media print {
+    display: none;
+  }
 `;
 
 export default Actions;

app/components/DropdownMenu/DropdownMenu.js

@@ -96,6 +96,10 @@ const Menu = styled.div`
   overflow: hidden;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 8px rgba(0, 0, 0, 0.08),
     0 2px 4px rgba(0, 0, 0, 0.08);
+
+  @media print {
+    display: none;
+  }
 `;
 
 export default DropdownMenu;

app/components/Editor/Editor.js

@@ -238,6 +238,10 @@ const Header = styled(Flex)`
   flex-shrink: 0;
   align-items: flex-end;
   ${({ readOnly }) => !readOnly && 'cursor: text;'};
+
+  @media print {
+    display: none;
+  }
 `;
 
 const StyledEditor = styled(Editor)`

app/components/Editor/components/Contents.js

@@ -92,6 +92,10 @@ const Wrapper = styled.div`
   right: 0;
   top: 150px;
   z-index: 100;
+
+  @media print {
+    display: none;
+  }
 `;
 
 const Anchor = styled.a`

app/components/Editor/components/Toolbar/BlockToolbar.js

@@ -182,6 +182,10 @@ const Bar = styled(Flex)`
     left: auto;
     right: -100%;
   }
+
+  @media print {
+    display: none;
+  }
 `;
 
 const HiddenInput = styled.input`

app/components/Editor/components/Toolbar/Toolbar.js

@@ -150,4 +150,8 @@ const Menu = styled.div`
     transform: translateY(-6px) scale(1);
     opacity: 1;
   `};
+
+  @media print {
+    display: none;
+  }
 `;

app/components/Layout/Layout.js

@@ -124,6 +124,10 @@ const Container = styled(Flex)`
 const Content = styled(Flex)`
   margin-left: ${props => (props.editMode ? 0 : layout.sidebarWidth)};
   transition: margin-left 200ms ease-in-out;
+
+  @media print {
+    margin-left: 0;
+  }
 `;
 
 export default withRouter(inject('user', 'auth', 'ui', 'documents')(Layout));

app/components/Sidebar/Sidebar.js

@@ -106,6 +106,11 @@ const Container = styled(Flex)`
   width: ${layout.sidebarWidth};
   background: ${color.smoke};
   transition: left 200ms ease-in-out;
+
+  @media print {
+    display: none;
+    left: 0;
+  }
 `;
 
 const Section = styled(Flex)`

app/menus/DocumentMenu.js

@@ -67,6 +67,7 @@ class DocumentMenu extends Component {
         <DropdownMenuItem onClick={this.handleExport}>
           Download
         </DropdownMenuItem>
+        <DropdownMenuItem onClick={window.print}>Print</DropdownMenuItem>
         <DropdownMenuItem onClick={this.handleMove}>Move…</DropdownMenuItem>
         {allowDelete && (
           <DropdownMenuItem onClick={this.handleDelete}>