|
3 | 3 | - SPDX-License-Identifier: AGPL-3.0-or-later |
4 | 4 | --> |
5 | 5 | <template> |
6 | | - <div ref="editor" class="viewer__image-editor" v-bind="themeDataAttr" /> |
| 6 | + <div> |
| 7 | + <div ref="editor" class="viewer__image-editor" v-bind="themeDataAttr" /> |
| 8 | + </div> |
7 | 9 | </template> |
8 | 10 | <script> |
9 | | -import { basename, dirname, extname, join } from 'path' |
| 11 | +import { showError, showSuccess, DialogBuilder } from '@nextcloud/dialogs' |
10 | 12 | import { emit } from '@nextcloud/event-bus' |
11 | 13 | import { Node } from '@nextcloud/files' |
12 | | -import { showError, showSuccess, DialogBuilder } from '@nextcloud/dialogs' |
| 14 | +import { linkTo } from '@nextcloud/router' |
13 | 15 | import axios from '@nextcloud/axios' |
14 | | -
|
15 | | -import logger from '../services/logger.js' |
| 16 | +import { basename, dirname, extname, join } from 'path' |
16 | 17 | import translations from '../models/editorTranslations.js' |
17 | 18 | import { rawStat } from '../services/FileInfo.ts' |
| 19 | +import logger from '../services/logger.js' |
18 | 20 |
|
19 | 21 | let TABS, TOOLS |
20 | 22 |
|
@@ -95,6 +97,16 @@ export default { |
95 | 97 | fontFamily: 'var(--font-face)', |
96 | 98 | }, |
97 | 99 | }, |
| 100 | +
|
| 101 | + Text: { |
| 102 | + // this must be the value of one of the fonts |
| 103 | + fontFamily: '"NotoSans", "Noto Sans", "Arial", "Roboto"', |
| 104 | + fonts: [ |
| 105 | + { label: 'Sans-serif', value: '"NotoSans", "Noto Sans", "Arial", "Roboto"' }, |
| 106 | + { label: 'Serif', value: '"PTSerif", "Georgia", "Times New Roman"' }, |
| 107 | + { label: 'Comic', value: '"Comic Neue", "Comic Sans"' }, |
| 108 | + ], |
| 109 | + }, |
98 | 110 | } |
99 | 111 | }, |
100 | 112 |
|
@@ -122,6 +134,41 @@ export default { |
122 | 134 | }, |
123 | 135 | }, |
124 | 136 |
|
| 137 | + created() { |
| 138 | + // we need to apply our fonts on the root, but we cannot do this from Vue as we can only access the component. |
| 139 | + // so we do this manually |
| 140 | + if (document.getElementById('oca-viewer_image-editor-fonts')) { |
| 141 | + return |
| 142 | + } |
| 143 | +
|
| 144 | + const styleElement = document.createElement('style') |
| 145 | + styleElement.id = 'oca-viewer_image-editor-fonts' |
| 146 | + styleElement.appendChild(document.createTextNode(` |
| 147 | + @font-face { |
| 148 | + font-display: swap; |
| 149 | + font-family: 'Comic Neue'; |
| 150 | + font-style: normal; |
| 151 | + font-weight: 400; |
| 152 | + src: url('${linkTo('viewer', 'css/fonts/comic-neue-regular.woff2')}') format('woff2'); |
| 153 | + } |
| 154 | + @font-face { |
| 155 | + font-display: swap; |
| 156 | + font-family: 'NotoSans'; |
| 157 | + font-style: normal; |
| 158 | + font-weight: 400; |
| 159 | + src: url('${linkTo('core', 'fonts/NotoSans-Regular-latin.woff2')}') format('woff2'); |
| 160 | + } |
| 161 | + @font-face { |
| 162 | + font-display: swap; |
| 163 | + font-family: 'PTSerif'; |
| 164 | + font-style: normal; |
| 165 | + font-weight: 400; |
| 166 | + src: url('${linkTo('viewer', 'css/fonts/pt-serif-regular.woff2')}') format('woff2'); |
| 167 | + } |
| 168 | + `)) |
| 169 | + document.head.appendChild(styleElement) |
| 170 | + }, |
| 171 | +
|
125 | 172 | async mounted() { |
126 | 173 | // Lazy load the image editor |
127 | 174 | const FilerobotImageEditor = (await import(/* webpackChunkName: 'filerobot' */'filerobot-image-editor')).default |
@@ -328,7 +375,6 @@ export default { |
328 | 375 | width: 100%; |
329 | 376 | height: 100vh; |
330 | 377 | } |
331 | | -
|
332 | 378 | </style> |
333 | 379 |
|
334 | 380 | <style lang="scss"> |
@@ -644,5 +690,4 @@ export default { |
644 | 690 |
|
645 | 691 | filter: var(--background-invert-if-dark); |
646 | 692 | } |
647 | | -
|
648 | 693 | </style> |
0 commit comments