Skip to content

Commit e11b016

Browse files
author
Vinicius Reis
authored
Merge pull request #2867 from nextcloud/feat/print_css
Add printing style sheet, enables printing of text files
2 parents f771eff + 01274f7 commit e11b016

20 files changed

Lines changed: 210 additions & 87 deletions

‎css/print.scss‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
@media print {
2+
@page {
3+
size: A4;
4+
margin: 2.5cm 2cm 2cm 2.5cm;
5+
}
6+
7+
body {
8+
// position: fixed does not support scrolling and as such only prints one page
9+
position: absolute;
10+
overflow: visible!important;
11+
}
12+
13+
#viewer[data-handler='text'] {
14+
// Hide top border
15+
border: none;
16+
width: 100%!important;
17+
// NcModal uses fixed, which will be cropped when printed
18+
position: absolute!important;
19+
20+
.modal-header {
21+
// Hide modal header (close button)
22+
display: none!important;
23+
}
24+
.modal-container {
25+
// Make sure top aligned as we hided the menubar */
26+
top: 0px;
27+
height: fit-content;
28+
}
29+
}
30+
31+
.text-editor {
32+
.text-menubar {
33+
// Hide menu bar
34+
display: none!important;
35+
}
36+
.action-item {
37+
// Hide table settings
38+
display: none!important;
39+
}
40+
.editor__content {
41+
// Margins set by page rule
42+
max-width: 100%;
43+
}
44+
.text-editor__wrapper {
45+
height: fit-content;
46+
position: unset;
47+
}
48+
49+
div.ProseMirror {
50+
h1, h2, h3, h4, h5 {
51+
// orphaned headlines are ugly
52+
break-after: avoid;
53+
}
54+
.image, img, table {
55+
// try no page breaks within tables or images
56+
break-inside: avoid-page;
57+
// Some more indention
58+
max-width: 90%!important;
59+
margin: 5vw auto 5vw 5%!important;
60+
}
61+
62+
// Add some borders below header and between columns
63+
th {
64+
color: black!important;
65+
font-weight: bold!important;
66+
border-width: 0 1px 2px 0!important;
67+
border-color: gray!important;
68+
border-style: none solid solid none!important;
69+
}
70+
th:last-of-type {
71+
border-width: 0 0 2px 0!important;
72+
}
73+
74+
td {
75+
border-style: none solid none none!important;
76+
border-width: 1px!important;
77+
border-color: gray!important;
78+
}
79+
td:last-of-type {
80+
border: none!important;
81+
}
82+
}
83+
}
84+
}

‎css/prosemirror.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@use "sass:selector";
1+
@use 'sass:selector';
22

33
/* Document rendering styles */
44
div.ProseMirror {
@@ -153,7 +153,7 @@ div.ProseMirror {
153153
}
154154

155155
hr:after {
156-
content: "";
156+
content: '';
157157
display: block;
158158
height: 1px;
159159
background-color: var(--color-border-dark);

‎css/style.scss‎

Lines changed: 70 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -5,100 +5,110 @@
55
}
66

77
.modal-container .text-editor {
8-
position: absolute;
8+
position: absolute;
99
}
1010

11-
.ProseMirror-hideselection *::selection { background: transparent; color: var(--color-main-text); }
12-
.ProseMirror-hideselection *::-moz-selection { background: transparent; color: var(--color-main-text); }
13-
.ProseMirror-hideselection { caret-color: transparent; color: var(--color-main-text); }
11+
.ProseMirror-hideselection {
12+
caret-color: transparent;
13+
color: var(--color-main-text);
14+
15+
*::selection {
16+
background: transparent;
17+
color: var(--color-main-text);
18+
}
19+
20+
*::-moz-selection {
21+
background: transparent;
22+
color: var(--color-main-text);
23+
}
24+
}
1425

1526
.ProseMirror-selectednode {
16-
outline: 2px solid #8cf;
27+
outline: 2px solid #8cf;
1728
}
1829

1930
/* Make sure li selections wrap around markers */
2031
li.ProseMirror-selectednode {
21-
outline: none;
22-
}
23-
24-
li.ProseMirror-selectednode:after {
25-
content: "";
26-
position: absolute;
27-
left: -32px;
28-
right: -2px; top: -2px; bottom: -2px;
29-
border: 2px solid #8cf;
30-
pointer-events: none;
32+
outline: none;
33+
34+
&:after {
35+
content: '';
36+
position: absolute;
37+
left: -32px;
38+
right: -2px; top: -2px; bottom: -2px;
39+
border: 2px solid #8cf;
40+
pointer-events: none;
41+
}
3142
}
3243

3344
.has-conflicts,
3445
.text-editor__wrapper.icon-loading {
35-
.ProseMirror-menubar {
36-
display: none;
37-
}
46+
.ProseMirror-menubar {
47+
display: none;
48+
}
3849
}
3950

4051
.ProseMirror-gapcursor {
41-
display: none;
42-
pointer-events: none;
43-
position: absolute;
44-
}
45-
46-
.ProseMirror-gapcursor:after {
47-
content: "";
48-
display: block;
49-
position: absolute;
50-
top: -2px;
51-
width: 20px;
52-
border-top: 1px solid var(--color-main-text);
53-
animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
52+
display: none;
53+
pointer-events: none;
54+
position: absolute;
55+
56+
&:after {
57+
content: '';
58+
display: block;
59+
position: absolute;
60+
top: -2px;
61+
width: 20px;
62+
border-top: 1px solid var(--color-main-text);
63+
animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
64+
}
5465
}
5566

5667
@keyframes ProseMirror-cursor-blink {
57-
to {
58-
visibility: hidden;
59-
}
68+
to {
69+
visibility: hidden;
70+
}
6071
}
6172

6273
.animation-rotate {
6374
animation: rotate var(--animation-duration, 0.8s) linear infinite;
6475
}
6576

66-
[data-handler="text"] {
67-
background-color: var(--color-main-background);
68-
border-top: 3px solid var(--color-primary-element);
69-
.modal-title {
70-
font-weight: bold;
71-
}
77+
[data-handler='text'] {
78+
background-color: var(--color-main-background);
79+
border-top: 3px solid var(--color-primary-element);
80+
.modal-title {
81+
font-weight: bold;
82+
}
7283
}
7384

7485
// from https://github.com/animate-css/animate.css/blob/main/source/fading_entrances/fadeInDown.css
7586
@keyframes fadeInDown {
76-
from {
77-
opacity: 0;
78-
transform: translate3d(0, -100%, 0);
79-
}
80-
81-
to {
82-
opacity: 1;
83-
transform: translate3d(0, 0, 0);
84-
}
87+
from {
88+
opacity: 0;
89+
transform: translate3d(0, -100%, 0);
90+
}
91+
92+
to {
93+
opacity: 1;
94+
transform: translate3d(0, 0, 0);
95+
}
8596
}
8697

8798

8899
// from https://github.com/animate-css/animate.css/blob/main/source/fading_entrances/fadeInLeft.css
89100
@keyframes fadeInLeft {
90-
from {
91-
opacity: 0;
92-
transform: translate3d(-100%, 0, 0);
93-
}
94-
95-
to {
96-
opacity: 1;
97-
transform: translate3d(0, 0, 0);
98-
}
101+
from {
102+
opacity: 0;
103+
transform: translate3d(-100%, 0, 0);
104+
}
105+
106+
to {
107+
opacity: 1;
108+
transform: translate3d(0, 0, 0);
109+
}
99110
}
100111

101112
.fadeInLeft {
102-
animation-name: fadeInLeft;
113+
animation-name: fadeInLeft;
103114
}
104-

‎js/editor-rich.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎js/editor-rich.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎js/editor.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎js/editor.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎js/files-modal.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎js/files-modal.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎js/text-files.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)