From e3d5f0c9cf524e1e1f5d8cbb1e71da402209b752 Mon Sep 17 00:00:00 2001 From: Henry Heino <46334387+personalizedrefrigerator@users.noreply.github.com> Date: Fri, 11 Oct 2024 14:03:41 -0700 Subject: [PATCH] Chore: Desktop: Use SCSS instead of styled-components for plugin dialogs and toolbar buttons (#11189) --- .eslintignore | 1 - .gitignore | 1 - .../gui/NoteEditor/NoteTitle/NoteTitleBar.tsx | 32 +++---------------- .../app-desktop/gui/NoteEditor/style.scss | 2 ++ .../styles/note-title-info-group.scss | 11 +++++++ .../NoteEditor/styles/note-title-wrapper.scss | 12 +++++++ .../gui/ToolbarButton/ToolbarButton.tsx | 9 ++++-- .../gui/ToolbarButton/styles/index.ts | 19 ----------- .../gui/styles/dialog-anchor-node.scss | 4 +++ packages/app-desktop/gui/styles/index.scss | 3 ++ .../app-desktop/gui/styles/toolbar-icon.scss | 11 +++++++ .../styles/user-webview-dialog-container.scss | 11 +++++++ .../services/plugins/UserWebview.tsx | 30 ++++++----------- .../services/plugins/UserWebviewDialog.tsx | 10 ++---- .../plugins/UserWebviewDialogButtonBar.tsx | 14 ++------ .../services/plugins/styles/index.scss | 3 ++ .../plugins/styles/plugin-user-webview.scss | 17 ++++++++++ .../styles/user-dialog-button-bar.scss | 8 +++++ .../plugins/styles/user-dialog-wrapper.scss | 5 +++ packages/app-desktop/style.scss | 5 +-- 20 files changed, 114 insertions(+), 94 deletions(-) create mode 100644 packages/app-desktop/gui/NoteEditor/styles/note-title-info-group.scss create mode 100644 packages/app-desktop/gui/NoteEditor/styles/note-title-wrapper.scss delete mode 100644 packages/app-desktop/gui/ToolbarButton/styles/index.ts create mode 100644 packages/app-desktop/gui/styles/dialog-anchor-node.scss create mode 100644 packages/app-desktop/gui/styles/toolbar-icon.scss create mode 100644 packages/app-desktop/gui/styles/user-webview-dialog-container.scss create mode 100644 packages/app-desktop/services/plugins/styles/index.scss create mode 100644 packages/app-desktop/services/plugins/styles/plugin-user-webview.scss create mode 100644 packages/app-desktop/services/plugins/styles/user-dialog-button-bar.scss create mode 100644 packages/app-desktop/services/plugins/styles/user-dialog-wrapper.scss diff --git a/.eslintignore b/.eslintignore index a4fa65b1b..659a3627c 100644 --- a/.eslintignore +++ b/.eslintignore @@ -442,7 +442,6 @@ packages/app-desktop/gui/ToggleEditorsButton/ToggleEditorsButton.js packages/app-desktop/gui/ToggleEditorsButton/styles/index.js packages/app-desktop/gui/ToolbarBase.js packages/app-desktop/gui/ToolbarButton/ToolbarButton.js -packages/app-desktop/gui/ToolbarButton/styles/index.js packages/app-desktop/gui/ToolbarSpace.js packages/app-desktop/gui/TrashNotification/TrashNotification.js packages/app-desktop/gui/UpdateNotification/UpdateNotification.js diff --git a/.gitignore b/.gitignore index 3698426c8..51bb0ad32 100644 --- a/.gitignore +++ b/.gitignore @@ -419,7 +419,6 @@ packages/app-desktop/gui/ToggleEditorsButton/ToggleEditorsButton.js packages/app-desktop/gui/ToggleEditorsButton/styles/index.js packages/app-desktop/gui/ToolbarBase.js packages/app-desktop/gui/ToolbarButton/ToolbarButton.js -packages/app-desktop/gui/ToolbarButton/styles/index.js packages/app-desktop/gui/ToolbarSpace.js packages/app-desktop/gui/TrashNotification/TrashNotification.js packages/app-desktop/gui/UpdateNotification/UpdateNotification.js diff --git a/packages/app-desktop/gui/NoteEditor/NoteTitle/NoteTitleBar.tsx b/packages/app-desktop/gui/NoteEditor/NoteTitle/NoteTitleBar.tsx index 91b537bd9..a863efc30 100644 --- a/packages/app-desktop/gui/NoteEditor/NoteTitle/NoteTitleBar.tsx +++ b/packages/app-desktop/gui/NoteEditor/NoteTitle/NoteTitleBar.tsx @@ -5,30 +5,6 @@ import { ChangeEvent, useCallback, useRef } from 'react'; import NoteToolbar from '../../NoteToolbar/NoteToolbar'; import { buildStyle } from '@joplin/lib/theme'; import time from '@joplin/lib/time'; -import styled from 'styled-components'; - -const StyledRoot = styled.div` - display: flex; - flex-direction: row; - align-items: center; - padding-left: ${props => props.theme.editorPaddingLeft}px; - - @media (max-width: 800px) { - flex-direction: column; - align-items: flex-start; - } -`; - -const InfoGroup = styled.div` - display: flex; - flex-direction: row; - align-items: center; - - @media (max-width: 800px) { - border-top: 1px solid ${props => props.theme.dividerColor}; - width: 100%; - } -`; interface Props { themeId: number; @@ -130,7 +106,7 @@ export default function NoteTitleBar(props: Props) { } return ( - +
- +
{renderTitleBarDate()} {renderNoteToolbar()} - - +
+
); } diff --git a/packages/app-desktop/gui/NoteEditor/style.scss b/packages/app-desktop/gui/NoteEditor/style.scss index 6901cdbc6..6fe97444d 100644 --- a/packages/app-desktop/gui/NoteEditor/style.scss +++ b/packages/app-desktop/gui/NoteEditor/style.scss @@ -1,3 +1,5 @@ @use "./styles/warning-banner.scss"; @use "./styles/warning-banner-link.scss"; +@use "./styles/note-title-info-group.scss"; +@use "./styles/note-title-wrapper.scss"; diff --git a/packages/app-desktop/gui/NoteEditor/styles/note-title-info-group.scss b/packages/app-desktop/gui/NoteEditor/styles/note-title-info-group.scss new file mode 100644 index 000000000..70886d143 --- /dev/null +++ b/packages/app-desktop/gui/NoteEditor/styles/note-title-info-group.scss @@ -0,0 +1,11 @@ + +.note-title-info-group { + display: flex; + flex-direction: row; + align-items: center; + + @media (max-width: 800px) { + border-top: 1px solid var(--joplin-divider-color); + width: 100%; + } +} \ No newline at end of file diff --git a/packages/app-desktop/gui/NoteEditor/styles/note-title-wrapper.scss b/packages/app-desktop/gui/NoteEditor/styles/note-title-wrapper.scss new file mode 100644 index 000000000..4119c51f5 --- /dev/null +++ b/packages/app-desktop/gui/NoteEditor/styles/note-title-wrapper.scss @@ -0,0 +1,12 @@ + +.note-title-wrapper { + display: flex; + flex-direction: row; + align-items: center; + padding-left: var(--joplin-editor-padding-left); + + @media (max-width: 800px) { + flex-direction: column; + align-items: flex-start; + } +} \ No newline at end of file diff --git a/packages/app-desktop/gui/ToolbarButton/ToolbarButton.tsx b/packages/app-desktop/gui/ToolbarButton/ToolbarButton.tsx index 3f6d6d8c2..5c8233b69 100644 --- a/packages/app-desktop/gui/ToolbarButton/ToolbarButton.tsx +++ b/packages/app-desktop/gui/ToolbarButton/ToolbarButton.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; import { ToolbarButtonInfo } from '@joplin/lib/services/commands/ToolbarButtonUtils'; -import { StyledIconSpan, StyledIconI } from './styles'; interface Props { readonly themeId: number; @@ -36,8 +35,12 @@ export default function ToolbarButton(props: Props) { let icon = null; const iconName = getProp(props, 'iconName'); if (iconName) { - const IconClass = isFontAwesomeIcon(iconName) ? StyledIconI : StyledIconSpan; - icon = ; + const iconProps: React.HTMLProps = { + 'aria-label': '', + role: 'img', + className: `toolbar-icon ${title ? '-has-title' : ''} ${iconName}`, + }; + icon = isFontAwesomeIcon(iconName) ? : ; } // Keep this for legacy compatibility but for consistency we should use "disabled" prop diff --git a/packages/app-desktop/gui/ToolbarButton/styles/index.ts b/packages/app-desktop/gui/ToolbarButton/styles/index.ts deleted file mode 100644 index 1756304b7..000000000 --- a/packages/app-desktop/gui/ToolbarButton/styles/index.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { ThemeStyle } from '@joplin/lib/theme'; - -const styled = require('styled-components').default; -const { css } = require('styled-components'); - -interface IconProps { - readonly theme: ThemeStyle; - readonly hasTitle: boolean; -} - -const iconStyle = css` - font-size: ${(props: IconProps) => props.theme.toolbarIconSize}px; - color: ${(props: IconProps) => props.theme.color3}; - margin-right: ${(props: IconProps) => props.hasTitle ? 5 : 0}px; - pointer-events: none; /* Need this to get button tooltip to work */ -`; - -export const StyledIconI = styled.i`${iconStyle}`; -export const StyledIconSpan = styled.span`${iconStyle}`; diff --git a/packages/app-desktop/gui/styles/dialog-anchor-node.scss b/packages/app-desktop/gui/styles/dialog-anchor-node.scss new file mode 100644 index 000000000..899908b39 --- /dev/null +++ b/packages/app-desktop/gui/styles/dialog-anchor-node.scss @@ -0,0 +1,4 @@ + +.dialog-anchor-node { + display: none; +} \ No newline at end of file diff --git a/packages/app-desktop/gui/styles/index.scss b/packages/app-desktop/gui/styles/index.scss index 71a4d1665..1b6eed19c 100644 --- a/packages/app-desktop/gui/styles/index.scss +++ b/packages/app-desktop/gui/styles/index.scss @@ -5,4 +5,7 @@ @use './flat-button.scss'; @use './help-text.scss'; @use './toolbar-button.scss'; +@use './toolbar-icon.scss'; @use './editor-toolbar.scss'; +@use './user-webview-dialog-container.scss'; +@use './dialog-anchor-node.scss'; diff --git a/packages/app-desktop/gui/styles/toolbar-icon.scss b/packages/app-desktop/gui/styles/toolbar-icon.scss new file mode 100644 index 000000000..64b9c7c4f --- /dev/null +++ b/packages/app-desktop/gui/styles/toolbar-icon.scss @@ -0,0 +1,11 @@ + +.toolbar-icon { + font-size: var(--joplin-toolbar-icon-size); + color: var(--joplin-color3); + margin-right: 0px; + pointer-events: none; /* Need this to get button tooltip to work */ + + &.-has-title { + margin-right: 5px; + } +} diff --git a/packages/app-desktop/gui/styles/user-webview-dialog-container.scss b/packages/app-desktop/gui/styles/user-webview-dialog-container.scss new file mode 100644 index 000000000..c1785b7c8 --- /dev/null +++ b/packages/app-desktop/gui/styles/user-webview-dialog-container.scss @@ -0,0 +1,11 @@ + +.user-webview-dialog-container { + display: flex; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1000; + box-sizing: border-box; +} \ No newline at end of file diff --git a/packages/app-desktop/services/plugins/UserWebview.tsx b/packages/app-desktop/services/plugins/UserWebview.tsx index bf6e501f7..fd4142609 100644 --- a/packages/app-desktop/services/plugins/UserWebview.tsx +++ b/packages/app-desktop/services/plugins/UserWebview.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { useRef, useImperativeHandle, forwardRef, useEffect } from 'react'; +import { useRef, useImperativeHandle, forwardRef, useEffect, useMemo } from 'react'; import useViewIsReady from './hooks/useViewIsReady'; import useThemeCss from './hooks/useThemeCss'; import useContentSize from './hooks/useContentSize'; @@ -8,14 +8,10 @@ import useHtmlLoader from './hooks/useHtmlLoader'; import useWebviewToPluginMessages from './hooks/useWebviewToPluginMessages'; import useScriptLoader from './hooks/useScriptLoader'; import Logger from '@joplin/utils/Logger'; -import styled from 'styled-components'; import { focus } from '@joplin/lib/utils/focusHandler'; const logger = Logger.create('UserWebview'); -// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied -type StyleProps = any; - export interface Props { html: string; scripts: string[]; @@ -36,15 +32,6 @@ export interface Props { onReady?: Function; } -const StyledFrame = styled.iframe<{ fitToContent: boolean; borderBottom: boolean }>` - padding: 0; - margin: 0; - width: ${(props: StyleProps) => props.fitToContent ? `${props.width}px` : '100%'}; - height: ${(props: StyleProps) => props.fitToContent ? `${props.height}px` : '100%'}; - border: none; - border-bottom: ${(props: StyleProps) => props.borderBottom ? `1px solid ${props.theme.dividerColor}` : 'none'}; -`; - // eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied function serializeForm(form: any) { // eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied @@ -153,15 +140,18 @@ function UserWebview(props: Props, ref: any) { cssFilePath, ); - return ({ + '--content-width': `${contentSize.width}px`, + '--content-height': `${contentSize.height}px`, + } as React.CSSProperties), [contentSize.width, contentSize.height]); + + return ; } export default forwardRef(UserWebview); diff --git a/packages/app-desktop/services/plugins/UserWebviewDialog.tsx b/packages/app-desktop/services/plugins/UserWebviewDialog.tsx index 942d63da4..6c74eb419 100644 --- a/packages/app-desktop/services/plugins/UserWebviewDialog.tsx +++ b/packages/app-desktop/services/plugins/UserWebviewDialog.tsx @@ -7,18 +7,12 @@ import UserWebview, { Props as UserWebviewProps } from './UserWebview'; import UserWebviewDialogButtonBar from './UserWebviewDialogButtonBar'; import { focus } from '@joplin/lib/utils/focusHandler'; import Dialog from '../../gui/Dialog'; -const styled = require('styled-components').default; interface Props extends UserWebviewProps { buttons: ButtonSpec[]; fitToContent: boolean; } -const UserWebViewWrapper = styled.div` - display: flex; - flex: 1; -`; - function defaultButtons(): ButtonSpec[] { return [ { @@ -84,7 +78,7 @@ export default function UserWebviewDialog(props: Props) { return ( - +
- +
); diff --git a/packages/app-desktop/services/plugins/UserWebviewDialogButtonBar.tsx b/packages/app-desktop/services/plugins/UserWebviewDialogButtonBar.tsx index 0dc646e1e..6bd321903 100644 --- a/packages/app-desktop/services/plugins/UserWebviewDialogButtonBar.tsx +++ b/packages/app-desktop/services/plugins/UserWebviewDialogButtonBar.tsx @@ -5,20 +5,10 @@ import { ButtonSpec } from '@joplin/lib/services/plugins/api/types'; const styled = require('styled-components').default; const { space } = require('styled-system'); -// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied -type StyleProps = any; - interface Props { buttons: ButtonSpec[]; } -const StyledRoot = styled.div` - display: flex; - width: 100%; - box-sizing: border-box; - justify-content: flex-end; - padding-top: ${(props: StyleProps) => props.theme.mainPadding}px; -`; const StyledButton = styled(Button)`${space}`; @@ -48,8 +38,8 @@ export default function UserWebviewDialogButtonBar(props: Props) { } return ( - +
{renderButtons()} - +
); } diff --git a/packages/app-desktop/services/plugins/styles/index.scss b/packages/app-desktop/services/plugins/styles/index.scss new file mode 100644 index 000000000..fc2b12270 --- /dev/null +++ b/packages/app-desktop/services/plugins/styles/index.scss @@ -0,0 +1,3 @@ +@use './plugin-user-webview.scss'; +@use './user-dialog-wrapper.scss'; +@use './user-dialog-button-bar.scss'; diff --git a/packages/app-desktop/services/plugins/styles/plugin-user-webview.scss b/packages/app-desktop/services/plugins/styles/plugin-user-webview.scss new file mode 100644 index 000000000..43a8e732c --- /dev/null +++ b/packages/app-desktop/services/plugins/styles/plugin-user-webview.scss @@ -0,0 +1,17 @@ + +.plugin-user-webview { + padding: 0; + margin: 0; + border: none; + width: 100%; + height: 100%; + + &.-border-bottom { + border-bottom: 1px solid var(--joplin-divider-color); + } + + &.-fit-to-content { + width: var(--content-width); + height: var(--content-height); + } +} diff --git a/packages/app-desktop/services/plugins/styles/user-dialog-button-bar.scss b/packages/app-desktop/services/plugins/styles/user-dialog-button-bar.scss new file mode 100644 index 000000000..5e2dcfe44 --- /dev/null +++ b/packages/app-desktop/services/plugins/styles/user-dialog-button-bar.scss @@ -0,0 +1,8 @@ + +.user-dialog-button-bar { + display: flex; + width: 100%; + box-sizing: border-box; + justify-content: flex-end; + padding-top: var(--joplin-main-padding); +} \ No newline at end of file diff --git a/packages/app-desktop/services/plugins/styles/user-dialog-wrapper.scss b/packages/app-desktop/services/plugins/styles/user-dialog-wrapper.scss new file mode 100644 index 000000000..d001e28d7 --- /dev/null +++ b/packages/app-desktop/services/plugins/styles/user-dialog-wrapper.scss @@ -0,0 +1,5 @@ + +.user-dialog-wrapper { + display: flex; + flex: 1; +} diff --git a/packages/app-desktop/style.scss b/packages/app-desktop/style.scss index c42a35503..3765576fd 100644 --- a/packages/app-desktop/style.scss +++ b/packages/app-desktop/style.scss @@ -11,6 +11,7 @@ @use 'gui/UpdateNotification/style.scss' as update-notification; @use 'gui/TrashNotification/style.scss' as trash-notification; @use 'gui/Sidebar/style.scss' as sidebar-styles; -@use 'gui/styles/index.scss'; -@use 'gui/NoteEditor/style.scss'; +@use 'gui/NoteEditor/style.scss' as note-editor-styles; +@use 'services/plugins/styles/index.scss' as plugins-styles; +@use 'gui/styles/index.scss' as gui-styles; @use 'main.scss' as main;