From bf42b9c4608b27bb3189196d2ca8b72e3022cff1 Mon Sep 17 00:00:00 2001 From: Tilman Vatteroth Date: Sun, 3 Jan 2021 00:19:10 +0100 Subject: [PATCH] Minor fixes (#911) * Replace full links Signed-off-by: Tilman Vatteroth * Use dark mode hook Signed-off-by: Tilman Vatteroth * Add overflow for graphviz and abc Signed-off-by: Tilman Vatteroth * Cap max height of toc overlay Signed-off-by: Tilman Vatteroth * Remove extension from css import Signed-off-by: Tilman Vatteroth * Fix hook Signed-off-by: Tilman Vatteroth --- cypress/support/config.ts | 2 +- public/api/v2/config | 2 +- src/components/editor/app-bar/dark-mode-button.tsx | 5 ++--- src/components/editor/app-bar/navbar-branding.tsx | 5 ++--- .../editor/document-bar/revisions/revision-modal.tsx | 3 ++- .../tool-bar/emoji-picker/emoji-picker.tsx | 5 ++--- .../editor/table-of-contents/table-of-contents.scss | 1 + .../replace-components/abc/abc-frame.tsx | 2 +- .../replace-components/flow/flowchart/flowchart.tsx | 6 ++---- .../replace-components/graphviz/graphviz-frame.tsx | 2 +- .../replace-components/image/image-frame.tsx | 6 +++--- .../image/{frame.tsx => lightboxedImageFrame.tsx} | 5 ++--- src/hooks/common/use-apply-dark-mode.ts | 5 ++--- src/hooks/common/use-is-dark-mode-activated.ts | 12 ++++++++++++ src/style/index.scss | 6 +++++- 15 files changed, 39 insertions(+), 28 deletions(-) rename src/components/markdown-renderer/replace-components/image/{frame.tsx => lightboxedImageFrame.tsx} (88%) create mode 100644 src/hooks/common/use-is-dark-mode-activated.ts diff --git a/cypress/support/config.ts b/cypress/support/config.ts index 3398d8037..0d12cf015 100644 --- a/cypress/support/config.ts +++ b/cypress/support/config.ts @@ -11,7 +11,7 @@ export const banner = { export const branding = { name: 'ACME Corp', - logo: 'http://localhost:3001/img/acme.png' + logo: '/img/acme.png' } beforeEach(() => { diff --git a/public/api/v2/config b/public/api/v2/config index 4693cdd2f..385209e10 100644 --- a/public/api/v2/config +++ b/public/api/v2/config @@ -16,7 +16,7 @@ "allowRegister": true, "branding": { "name": "ACME Corp", - "logo": "http://localhost:3001/img/acme.png" + "logo": "/img/acme.png" }, "banner": { "text": "This is the test banner text", diff --git a/src/components/editor/app-bar/dark-mode-button.tsx b/src/components/editor/app-bar/dark-mode-button.tsx index b7b82448c..6f1e25e60 100644 --- a/src/components/editor/app-bar/dark-mode-button.tsx +++ b/src/components/editor/app-bar/dark-mode-button.tsx @@ -7,14 +7,13 @@ SPDX-License-Identifier: AGPL-3.0-only import React from 'react' import { ToggleButton, ToggleButtonGroup } from 'react-bootstrap' import { useTranslation } from 'react-i18next' -import { useSelector } from 'react-redux' -import { ApplicationState } from '../../../redux' +import { useIsDarkModeActivated } from '../../../hooks/common/use-is-dark-mode-activated' import { setDarkMode } from '../../../redux/dark-mode/methods' import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon' const DarkModeButton: React.FC = () => { const { t } = useTranslation() - const darkModeEnabled = useSelector((state: ApplicationState) => state.darkMode.darkMode) + const darkModeEnabled = useIsDarkModeActivated() return ( { - const darkModeActivated = useSelector((state: ApplicationState) => state.darkMode.darkMode) + const darkModeActivated = useIsDarkModeActivated() return ( diff --git a/src/components/editor/document-bar/revisions/revision-modal.tsx b/src/components/editor/document-bar/revisions/revision-modal.tsx index 09c98216b..9504e1ba3 100644 --- a/src/components/editor/document-bar/revisions/revision-modal.tsx +++ b/src/components/editor/document-bar/revisions/revision-modal.tsx @@ -13,6 +13,7 @@ import { useParams } from 'react-router' import { getAllRevisions, getRevision } from '../../../../api/revisions' import { Revision, RevisionListEntry } from '../../../../api/revisions/types' import { UserResponse } from '../../../../api/users/types' +import { useIsDarkModeActivated } from '../../../../hooks/common/use-is-dark-mode-activated' import { ApplicationState } from '../../../../redux' import { CommonModal, CommonModalProps } from '../../../common/modals/common-modal' import { ShowIf } from '../../../common/show-if/show-if' @@ -27,7 +28,7 @@ export const RevisionModal: React.FC = ({ show, onHide, icon, const [selectedRevision, setSelectedRevision] = useState(null) const [error, setError] = useState(false) const revisionAuthorListMap = useRef(new Map()) - const darkModeEnabled = useSelector((state: ApplicationState) => state.darkMode.darkMode) + const darkModeEnabled = useIsDarkModeActivated() const { id } = useParams<{ id: string }>() useEffect(() => { diff --git a/src/components/editor/editor-pane/tool-bar/emoji-picker/emoji-picker.tsx b/src/components/editor/editor-pane/tool-bar/emoji-picker/emoji-picker.tsx index 19421b997..2fce17ab7 100644 --- a/src/components/editor/editor-pane/tool-bar/emoji-picker/emoji-picker.tsx +++ b/src/components/editor/editor-pane/tool-bar/emoji-picker/emoji-picker.tsx @@ -7,9 +7,8 @@ SPDX-License-Identifier: AGPL-3.0-only import { Picker } from 'emoji-picker-element' import { CustomEmoji, EmojiClickEvent, EmojiClickEventDetail } from 'emoji-picker-element/shared' import React, { useEffect, useRef } from 'react' -import { useSelector } from 'react-redux' import { useClickAway } from 'react-use' -import { ApplicationState } from '../../../../../redux' +import { useIsDarkModeActivated } from '../../../../../hooks/common/use-is-dark-mode-activated' import './emoji-picker.scss' import forkawesomeIcon from './forkawesome.png' import { ForkAwesomeIcons } from './icon-names' @@ -41,7 +40,7 @@ const twemojiStyle = (): HTMLStyleElement => { } export const EmojiPicker: React.FC = ({ show, onEmojiSelected, onDismiss }) => { - const darkModeEnabled = useSelector((state: ApplicationState) => state.darkMode.darkMode) + const darkModeEnabled = useIsDarkModeActivated() const pickerContainerRef = useRef(null) const pickerRef = useRef() diff --git a/src/components/editor/table-of-contents/table-of-contents.scss b/src/components/editor/table-of-contents/table-of-contents.scss index 3646baff7..428441682 100644 --- a/src/components/editor/table-of-contents/table-of-contents.scss +++ b/src/components/editor/table-of-contents/table-of-contents.scss @@ -7,6 +7,7 @@ .markdown-toc { width: 100%; max-width: 200px; + max-height: 100vh; overflow-y: auto; overflow-x: hidden; diff --git a/src/components/markdown-renderer/replace-components/abc/abc-frame.tsx b/src/components/markdown-renderer/replace-components/abc/abc-frame.tsx index def662287..a2984db79 100644 --- a/src/components/markdown-renderer/replace-components/abc/abc-frame.tsx +++ b/src/components/markdown-renderer/replace-components/abc/abc-frame.tsx @@ -23,5 +23,5 @@ export const AbcFrame: React.FC = ({ code }) => { }).catch(() => { console.error('error while loading abcjs') }) }, [code]) - return
+ return
} diff --git a/src/components/markdown-renderer/replace-components/flow/flowchart/flowchart.tsx b/src/components/markdown-renderer/replace-components/flow/flowchart/flowchart.tsx index 771a77d0d..743682e02 100644 --- a/src/components/markdown-renderer/replace-components/flow/flowchart/flowchart.tsx +++ b/src/components/markdown-renderer/replace-components/flow/flowchart/flowchart.tsx @@ -7,8 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only import React, { useEffect, useRef, useState } from 'react' import { Alert } from 'react-bootstrap' import { Trans, useTranslation } from 'react-i18next' -import { useSelector } from 'react-redux' -import { ApplicationState } from '../../../../../redux' +import { useIsDarkModeActivated } from '../../../../../hooks/common/use-is-dark-mode-activated' export interface FlowChartProps { code: string @@ -17,8 +16,7 @@ export interface FlowChartProps { export const FlowChart: React.FC = ({ code }) => { const diagramRef = useRef(null) const [error, setError] = useState(false) - - const darkModeActivated = useSelector((state: ApplicationState) => state.darkMode.darkMode) + const darkModeActivated = useIsDarkModeActivated() useTranslation() diff --git a/src/components/markdown-renderer/replace-components/graphviz/graphviz-frame.tsx b/src/components/markdown-renderer/replace-components/graphviz/graphviz-frame.tsx index a4722f0ef..413fe3794 100644 --- a/src/components/markdown-renderer/replace-components/graphviz/graphviz-frame.tsx +++ b/src/components/markdown-renderer/replace-components/graphviz/graphviz-frame.tsx @@ -55,7 +55,7 @@ export const GraphvizFrame: React.FC = ({ code }) => { {error} -
+
} diff --git a/src/components/markdown-renderer/replace-components/image/image-frame.tsx b/src/components/markdown-renderer/replace-components/image/image-frame.tsx index f9acb0480..243b400a2 100644 --- a/src/components/markdown-renderer/replace-components/image/image-frame.tsx +++ b/src/components/markdown-renderer/replace-components/image/image-frame.tsx @@ -8,7 +8,7 @@ import React, { useEffect, useState } from 'react' import { useSelector } from 'react-redux' import { getProxiedUrl } from '../../../../api/media' import { ApplicationState } from '../../../../redux' -import { Frame } from './frame' +import { LightboxedImageFrame } from './lightboxedImageFrame' export const ImageFrame: React.FC> = ({ src, title, alt, ...props }) => { const [imageUrl, setImageUrl] = useState('') @@ -25,11 +25,11 @@ export const ImageFrame: React.FC> = ( if (imageProxyEnabled) { return ( - + ) } return ( - + ) } diff --git a/src/components/markdown-renderer/replace-components/image/frame.tsx b/src/components/markdown-renderer/replace-components/image/lightboxedImageFrame.tsx similarity index 88% rename from src/components/markdown-renderer/replace-components/image/frame.tsx rename to src/components/markdown-renderer/replace-components/image/lightboxedImageFrame.tsx index 2b95271e1..b3a7c1e42 100644 --- a/src/components/markdown-renderer/replace-components/image/frame.tsx +++ b/src/components/markdown-renderer/replace-components/image/lightboxedImageFrame.tsx @@ -8,7 +8,7 @@ import React, { Fragment, useState } from 'react' import { Modal } from 'react-bootstrap' import { ForkAwesomeIcon } from '../../../common/fork-awesome/fork-awesome-icon' -export const Frame: React.FC> = ({ alt, ...props }) => { +export const LightboxedImageFrame: React.FC> = ({ alt, ...props }) => { const [showFullscreenImage, setShowFullscreenImage] = useState(false) return ( @@ -20,8 +20,7 @@ export const Frame: React.FC> = ({ alt dialogClassName={'text-dark'} show={showFullscreenImage} onHide={() => setShowFullscreenImage(false)} - size={'xl'} - > + size={'xl'}> diff --git a/src/hooks/common/use-apply-dark-mode.ts b/src/hooks/common/use-apply-dark-mode.ts index 5af9ff930..e30c4194d 100644 --- a/src/hooks/common/use-apply-dark-mode.ts +++ b/src/hooks/common/use-apply-dark-mode.ts @@ -5,11 +5,10 @@ */ import { useEffect } from 'react' -import { useSelector } from 'react-redux' -import { ApplicationState } from '../../redux' +import { useIsDarkModeActivated } from './use-is-dark-mode-activated' export const useApplyDarkMode = ():void => { - const darkModeActivated = useSelector((state: ApplicationState) => state.darkMode.darkMode) + const darkModeActivated = useIsDarkModeActivated() useEffect(() => { if (darkModeActivated) { diff --git a/src/hooks/common/use-is-dark-mode-activated.ts b/src/hooks/common/use-is-dark-mode-activated.ts new file mode 100644 index 000000000..cc9187e76 --- /dev/null +++ b/src/hooks/common/use-is-dark-mode-activated.ts @@ -0,0 +1,12 @@ +/* + * SPDX-FileCopyrightText: 2020 The HedgeDoc developers (see AUTHORS file) + * + * SPDX-License-Identifier: AGPL-3.0-only + */ + +import { useSelector } from 'react-redux' +import { ApplicationState } from '../../redux' + +export const useIsDarkModeActivated = (): boolean => { + return useSelector((state: ApplicationState) => state.darkMode.darkMode) +} diff --git a/src/style/index.scss b/src/style/index.scss index ee45dd40e..f41578a84 100644 --- a/src/style/index.scss +++ b/src/style/index.scss @@ -7,7 +7,7 @@ @import "variables.light"; @import "../../node_modules/bootstrap/scss/bootstrap"; @import '../../node_modules/react-bootstrap-typeahead/css/Typeahead'; -@import "~@fontsource/source-sans-pro/index.css"; +@import "~@fontsource/source-sans-pro/index"; @import "fonts/twemoji/twemoji"; @import '../../node_modules/fork-awesome/css/fork-awesome.min'; @@ -79,3 +79,7 @@ body { content: initial; } } + +.overflow-x-auto { + overflow-x: auto !important; +}