Merge pull request #2867 from nextcloud/feat/print_css

Add printing style sheet, enables printing of text files
nextcloud · Sep 13, 2022 · e11b016 · e11b016
2 parents f771eff + 01274f7
commit e11b016
Show file tree

Hide file tree

Showing 20 changed files with 210 additions and 87 deletions.
diff --git a/css/print.scss b/css/print.scss
@@ -0,0 +1,84 @@
+@media print {
+	@page {
+		size: A4;
+		margin: 2.5cm 2cm 2cm 2.5cm; 
+	}
+
+	body {
+		// position: fixed does not support scrolling and as such only prints one page
+		position: absolute;
+		overflow: visible!important;
+	}
+
+	#viewer[data-handler='text'] {
+		// Hide top border
+		border: none;
+		width: 100%!important;
+		// NcModal uses fixed, which will be cropped when printed
+		position: absolute!important;
+
+		.modal-header {
+			// Hide modal header (close button)
+			display: none!important;
+		}
+		.modal-container {
+			// Make sure top aligned as we hided the menubar */
+			top: 0px;
+			height: fit-content;
+		}
+	}
+
+	.text-editor {
+		.text-menubar {
+			// Hide menu bar
+			display: none!important;
+		}
+		.action-item {
+			// Hide table settings
+			display: none!important;
+		}
+		.editor__content {
+			// Margins set by page rule
+			max-width: 100%;
+		}
+		.text-editor__wrapper {
+			height: fit-content;
+			position: unset;
+		}
+
+		div.ProseMirror {
+			h1, h2, h3, h4, h5 {
+				// orphaned headlines are ugly
+				break-after: avoid;
+			}
+			.image, img, table {
+				// try no page breaks within tables or images
+				break-inside: avoid-page;
+				// Some more indention
+				max-width: 90%!important;
+				margin: 5vw auto 5vw 5%!important;
+			}
+
+			// Add some borders below header and between columns
+			th {
+				color: black!important;
+				font-weight: bold!important;
+				border-width: 0 1px 2px 0!important;
+				border-color: gray!important;
+				border-style: none solid solid none!important;
+			}
+			th:last-of-type {
+				border-width: 0 0 2px 0!important;
+			}
+
+			td {
+				border-style: none solid none none!important;
+				border-width: 1px!important;
+				border-color: gray!important;
+			}
+			td:last-of-type {
+				border: none!important;
+			}
+		}
+	}
+}
diff --git a/css/prosemirror.scss b/css/prosemirror.scss
@@ -1,4 +1,4 @@
-@use "sass:selector";
+@use 'sass:selector';
 
 /* Document rendering styles */
 div.ProseMirror {
@@ -153,7 +153,7 @@ div.ProseMirror {
 	}
 
 	hr:after {
-		content: "";
+		content: '';
 		display: block;
 		height: 1px;
 		background-color: var(--color-border-dark);

diff --git a/css/style.scss b/css/style.scss
@@ -5,100 +5,110 @@
 }
 
 .modal-container .text-editor {
-  position: absolute;
+	position: absolute;
 }
 
-.ProseMirror-hideselection *::selection { background: transparent; color: var(--color-main-text); }
-.ProseMirror-hideselection *::-moz-selection { background: transparent; color: var(--color-main-text); }
-.ProseMirror-hideselection { caret-color: transparent; color: var(--color-main-text); }
+.ProseMirror-hideselection {
+	caret-color: transparent;
+	color: var(--color-main-text);
+
+	*::selection {
+		background: transparent;
+		color: var(--color-main-text);
+	}
+
+	*::-moz-selection {
+		background: transparent;
+		color: var(--color-main-text);
+	}
+}
 
 .ProseMirror-selectednode {
-  outline: 2px solid #8cf;
+	outline: 2px solid #8cf;
 }
 
 /* Make sure li selections wrap around markers */
 li.ProseMirror-selectednode {
-  outline: none;
-}
-
-li.ProseMirror-selectednode:after {
-  content: "";
-  position: absolute;
-  left: -32px;
-  right: -2px; top: -2px; bottom: -2px;
-  border: 2px solid #8cf;
-  pointer-events: none;
+	outline: none;
+
+	&:after {
+		content: '';
+		position: absolute;
+		left: -32px;
+		right: -2px; top: -2px; bottom: -2px;
+		border: 2px solid #8cf;
+		pointer-events: none;
+	}
 }
 
 .has-conflicts,
 .text-editor__wrapper.icon-loading {
-  .ProseMirror-menubar {
-    display: none;
-  }
+	.ProseMirror-menubar {
+		display: none;
+	}
 }
 
 .ProseMirror-gapcursor {
-  display: none;
-  pointer-events: none;
-  position: absolute;
-}
-
-.ProseMirror-gapcursor:after {
-  content: "";
-  display: block;
-  position: absolute;
-  top: -2px;
-  width: 20px;
-  border-top: 1px solid var(--color-main-text);
-  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
+	display: none;
+	pointer-events: none;
+	position: absolute;
+
+	&:after {
+		content: '';
+		display: block;
+		position: absolute;
+		top: -2px;
+		width: 20px;
+		border-top: 1px solid var(--color-main-text);
+		animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
+	}
 }
 
 @keyframes ProseMirror-cursor-blink {
-  to {
-    visibility: hidden;
-  }
+	to {
+		visibility: hidden;
+	}
 }
 
 .animation-rotate {
 	animation: rotate var(--animation-duration, 0.8s) linear infinite;
 }
 
-[data-handler="text"] {
-  background-color: var(--color-main-background);
-  border-top: 3px solid var(--color-primary-element);
-  .modal-title {
-    font-weight: bold;
-  }
+[data-handler='text'] {
+	background-color: var(--color-main-background);
+	border-top: 3px solid var(--color-primary-element);
+	.modal-title {
+		font-weight: bold;
+	}
 }
 
 // from https://github.com/animate-css/animate.css/blob/main/source/fading_entrances/fadeInDown.css
 @keyframes fadeInDown {
-  from {
-    opacity: 0;
-    transform: translate3d(0, -100%, 0);
-  }
-
-  to {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
+	from {
+		opacity: 0;
+		transform: translate3d(0, -100%, 0);
+	}
+
+	to {
+		opacity: 1;
+		transform: translate3d(0, 0, 0);
+	}
 }
 
 
 // from https://github.com/animate-css/animate.css/blob/main/source/fading_entrances/fadeInLeft.css
 @keyframes fadeInLeft {
-  from {
-    opacity: 0;
-    transform: translate3d(-100%, 0, 0);
-  }
-
-  to {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
+	from {
+		opacity: 0;
+		transform: translate3d(-100%, 0, 0);
+	}
+
+	to {
+		opacity: 1;
+		transform: translate3d(0, 0, 0);
+	}
 }
 
 .fadeInLeft {
-  animation-name: fadeInLeft;
+	animation-name: fadeInLeft;
 }
-
diff --git a/js/editor-rich.js b/js/editor-rich.js
diff --git a/js/editor-rich.js.map b/js/editor-rich.js.map
diff --git a/js/editor.js b/js/editor.js
diff --git a/js/editor.js.map b/js/editor.js.map
diff --git a/js/files-modal.js b/js/files-modal.js
diff --git a/js/files-modal.js.map b/js/files-modal.js.map
diff --git a/js/text-files.js b/js/text-files.js
diff --git a/js/text-files.js.map b/js/text-files.js.map
diff --git a/js/text-public.js b/js/text-public.js
diff --git a/js/text-public.js.map b/js/text-public.js.map
diff --git a/js/text-text.js b/js/text-text.js
diff --git a/js/text-text.js.map b/js/text-text.js.map
diff --git a/js/text-viewer.js b/js/text-viewer.js
diff --git a/js/text-viewer.js.map b/js/text-viewer.js.map
diff --git a/package.json b/package.json
@@ -23,8 +23,8 @@
     "build:package": "vite build",
     "lint": "eslint --ext .js,.vue src cypress",
     "lint:fix": "eslint --ext .js,.vue src cypress --fix",
-    "stylelint": "stylelint src/**/*.vue src/**/*.scss src/**/*.css",
-    "stylelint:fix": "stylelint src/**/*.vue src/**/*.scss src/**/*.css --fix",
+    "stylelint": "stylelint src/**/*.vue src/**/*.scss src/**/*.css css/*.scss",
+    "stylelint:fix": "stylelint src/**/*.vue src/**/*.scss src/**/*.css css/*.scss --fix",
     "test": "NODE_ENV=test jest",
     "test:cypress": "cd cypress && ./runLocal.sh run",
     "test:cypress:open": "cd cypress && ./runLocal.sh open",

diff --git a/src/components/Editor.vue b/src/components/Editor.vue
@@ -3,7 +3,7 @@
   -
   - @author Julius Härtl <[email protected]>
   -
-  - @license GNU AGPL version 3 or any later version
+  - @license AGPL-3.0-or-later
   -
   - This program is free software: you can redistribute it and/or modify
   - it under the terms of the GNU Affero General Public License as
@@ -286,6 +286,12 @@ export default {
 		if (this.active && (this.hasDocumentParameters)) {
 			this.initSession()
 		}
+		if (!this.richWorkspace) {
+			/* If the editor is shown in the viewer we need to hide the content,
+			   if richt workspace is used we **must** not hide the content */
+			window.addEventListener('beforeprint', this.preparePrinting)
+			window.addEventListener('afterprint', this.preparePrinting)
+		}
 		this.$parent.$emit('update:loaded', true)
 	},
 	created() {
@@ -639,6 +645,9 @@ export default {
 
 		async close() {
 			clearInterval(this.saveStatusPolling)
+			window.removeEventListener('beforeprint', this.preparePrinting)
+			window.removeEventListener('afterprint', this.preparePrinting)
+
 			if (this.currentSession && this.$syncService) {
 				try {
 					await this.$syncService.close()
@@ -660,6 +669,17 @@ export default {
 			}
 			return true
 		},
+
+		/** @param {Event} event */
+		preparePrinting(event) {
+			const content = document.getElementById('content')
+			// Hide Content behind modal, this also hides the sidebar if open
+			if (content && event.type === 'beforeprint') {
+				content.style.display = 'none'
+			} else if (content) {
+				content.style.display = ''
+			}
+		},
 	},
 }
 </script>
@@ -725,6 +745,7 @@ export default {
 
 <style lang="scss">
 	@import './../../css/style';
+	@import './../../css/print';
 
 	.text-editor__wrapper {
 		@import './../../css/prosemirror';

diff --git a/src/components/RichTextReader.vue b/src/components/RichTextReader.vue
@@ -3,7 +3,7 @@
   -
   - @author Julius Härtl <[email protected]>
   -
-  - @license GNU AGPL version 3 or any later version
+  - @license AGPL-3.0-or-later
   -
   - This program is free software: you can redistribute it and/or modify
   - it under the terms of the GNU Affero General Public License as
@@ -79,4 +79,12 @@ export default {
 
 <style lang="scss">
 	@import './../../css/prosemirror';
+	@import './../../css/print';
+
+	@media print {
+		// Hide Content behind modal, this also hides the sidebar if open
+		#content {
+			display: none;
+		}
+	}
 </style>