github/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-01-22 23:01:46 +00:00
Code Issues Projects Releases Packages Wiki Activity

Import emojis from scss and work around emoji bug on macos

Browse source 
Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Tilman Vatteroth 2021-12-30 21:26:56 +01:00
parent 1a9a5e815a
commit 4de82b774b
8 changed files with 27 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
global-styles/index.scss
View file

@ -4,7 +4,7 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/
@import "variables";
@import "variables.module";
@import "variables.light";
@import "bootstrap-vendor/bootstrap";
@import '~react-bootstrap-typeahead/css/Typeahead';

5
global-styles/markdown-tweaks.scss
View file

@ -6,8 +6,11 @@
.markdown-body {
position: relative;
font-family: 'Source Sans Pro', "Twemoji", sans-serif;
word-break: break-word;
& {
@import "./variables.module.scss";
font-family: $font-family-base;
}
.svg-container {
overflow-x: auto;

13
global-styles/variables.module.scss Normal file
View file

@ -0,0 +1,13 @@
/*
* SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
$font-family-emojis: "Apple Color Emoji", "Twemoji";
$font-family-base: "Source Sans Pro", Helvetica, Arial, $font-family-emojis, sans-serif;
:export {
font-family-emojis: $font-family-emojis;
font-family-base: $font-family-base;
}

8
global-styles/variables.scss
View file

@ -1,8 +0,0 @@
/*
* SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
$font-family-base: "Source Sans Pro", Helvetica, Arial, "Twemoji", sans-serif;

5
src/components/editor-page/editor-pane/extended-codemirror/codemirror.module.scss
View file

@ -15,7 +15,10 @@
@import './hints';
.CodeMirror {
font-family: "Fira Code", "Twemoji", Consolas, monaco, monospace;
& {
@import '../../../../../global-styles/variables.module';
font-family: "Fira Code", $font-family-emojis, Consolas, monaco, monospace;
}
letter-spacing: 0.025em;
line-height: 1.25;
font-size: 18px;

3
src/components/editor-page/editor-pane/tool-bar/emoji-picker/emoji-picker.tsx
View file

@ -12,6 +12,7 @@ import { useIsDarkModeActivated } from '../../../../../hooks/common/use-is-dark-
import styles from './emoji-picker.module.scss'
import forkawesomeIcon from './forkawesome.png'
import { ForkAwesomeIcons } from '../../../../common/fork-awesome/fork-awesome-icons'
import fontStyles from '../../../../../../global-styles/variables.module.scss'
export interface EmojiPickerProps {
show: boolean
@ -35,7 +36,7 @@ export const emojiPickerConfig = {
const twemojiStyle = (): HTMLStyleElement => {
const style = document.createElement('style')
style.textContent = 'section.picker { --font-family: "Twemoji" !important; }'
style.textContent = `section.picker { --font-family: ${fontStyles['font-family-emojis']} !important; }`
return style
}

3
src/components/markdown-renderer/markdown-extension/abcjs/abc.module.scss
View file

@ -6,8 +6,6 @@
.abcjs-score {
@import "../../../../../global-styles/variables";
:global(.markdown-body) & {
overflow-x: auto !important;
}
@ -17,6 +15,7 @@
}
&, text {
@import "../../../../../global-styles/variables.module";
font-family: $font-family-base;
}
}

3
src/components/markdown-renderer/markdown-extension/flowchart/flowchart.tsx
View file

@ -10,6 +10,7 @@ import { Trans, useTranslation } from 'react-i18next'
import { useIsDarkModeActivated } from '../../../../hooks/common/use-is-dark-mode-activated'
import { Logger } from '../../../../utils/logger'
import { cypressId } from '../../../../utils/cypress-attribute'
import fontStyles from '../../../../../global-styles/variables.module.scss'
const log = new Logger('FlowChart')
@ -40,7 +41,7 @@ export const FlowChart: React.FC<FlowChartProps> = ({ code }) => {
'line-color': darkModeActivated ? '#ffffff' : '#000000',
'element-color': darkModeActivated ? '#ffffff' : '#000000',
'font-color': darkModeActivated ? '#ffffff' : '#000000',
'font-family': 'Source Sans Pro, "Twemoji", monospace'
'font-family': fontStyles['font-family-base']
})
setError(false)
} catch (error) {