From d5afc37dd719655290dc6ba22fdd379ad330dd33 Mon Sep 17 00:00:00 2001 From: Gregory Schier Date: Mon, 26 Feb 2024 17:07:09 -0800 Subject: [PATCH] Fix find/replace CM styling --- src-web/components/DialogContext.tsx | 2 -- src-web/components/Sidebar.tsx | 16 ++++++++-- src-web/components/core/Dialog.tsx | 2 +- src-web/components/core/Dropdown.tsx | 15 +++++----- src-web/components/core/Editor/Editor.css | 36 ++++++++++++++--------- src-web/hooks/useHotKey.ts | 9 +++--- src-web/main.tsx | 2 +- 7 files changed, 50 insertions(+), 32 deletions(-) diff --git a/src-web/components/DialogContext.tsx b/src-web/components/DialogContext.tsx index d52585be..d03086ee 100644 --- a/src-web/components/DialogContext.tsx +++ b/src-web/components/DialogContext.tsx @@ -1,5 +1,4 @@ import React, { createContext, useContext, useMemo, useState } from 'react'; -import { useHotKey } from '../hooks/useHotKey'; import { trackEvent } from '../lib/analytics'; import type { DialogProps } from './core/Dialog'; import { Dialog } from './core/Dialog'; @@ -60,7 +59,6 @@ export const DialogProvider = ({ children }: { children: React.ReactNode }) => { function DialogInstance({ id, render, ...props }: DialogEntry) { const { actions } = useContext(DialogContext); const children = render({ hide: () => actions.hide(id) }); - useHotKey('popup.close', () => actions.hide(id)); return ( actions.hide(id)} {...props}> {children} diff --git a/src-web/components/Sidebar.tsx b/src-web/components/Sidebar.tsx index f9e33996..6193d37e 100644 --- a/src-web/components/Sidebar.tsx +++ b/src-web/components/Sidebar.tsx @@ -58,7 +58,7 @@ interface TreeNode { } export function Sidebar({ className }: Props) { - const { hidden } = useSidebarHidden(); + const { hidden, show, hide } = useSidebarHidden(); const sidebarRef = useRef(null); const activeRequest = useActiveRequest(); const activeEnvironmentId = useActiveEnvironmentId(); @@ -242,8 +242,18 @@ export function Sidebar({ className }: Props) { useKeyPressEvent('Backspace', handleDeleteKey); useKeyPressEvent('Delete', handleDeleteKey); - useHotKey('sidebar.focus', () => { - if (hidden || hasFocus) return; + useHotKey('sidebar.focus', async () => { + // Hide the sidebar if it's already focused + if (!hidden && hasFocus) { + await hide(); + return; + } + + // Show the sidebar if it's hidden + if (hidden) { + await show(); + } + // Select 0 index on focus if none selected focusActiveRequest( selectedTree != null && selectedId != null diff --git a/src-web/components/core/Dialog.tsx b/src-web/components/core/Dialog.tsx index ce8848d5..0e24c738 100644 --- a/src-web/components/core/Dialog.tsx +++ b/src-web/components/core/Dialog.tsx @@ -36,7 +36,7 @@ export function Dialog({ [description], ); - useHotKey('popup.close', onClose); + useHotKey('popup.close', onClose, { enable: open }); return ( diff --git a/src-web/components/core/Dropdown.tsx b/src-web/components/core/Dropdown.tsx index 36999c8e..7941a186 100644 --- a/src-web/components/core/Dropdown.tsx +++ b/src-web/components/core/Dropdown.tsx @@ -244,13 +244,14 @@ const Menu = forwardRef, MenuPro } }; - useHotKey('popup.close', () => { - if (filter !== '') { - setFilter(''); - } else { - handleClose(); - } - }); + useHotKey( + 'popup.close', + () => { + if (filter !== '') setFilter(''); + else handleClose(); + }, + { enable: isOpen }, + ); const handlePrev = useCallback(() => { setSelectedIndex((currIndex) => { diff --git a/src-web/components/core/Editor/Editor.css b/src-web/components/core/Editor/Editor.css index 7e08af15..090479b3 100644 --- a/src-web/components/core/Editor/Editor.css +++ b/src-web/components/core/Editor/Editor.css @@ -4,11 +4,6 @@ .cm-editor { @apply w-full block text-base; - * { - @apply cursor-text; - @apply caret-transparent !important; - } - .cm-cursor { @apply border-gray-800 !important; } @@ -32,6 +27,11 @@ .cm-scroller { /* Inherit line-height from outside */ line-height: inherit; + + * { + @apply cursor-text; + @apply caret-transparent !important; + } } /* Don't show selection on blurred input */ @@ -103,10 +103,10 @@ @apply font-mono text-[0.75rem]; /* - * Round corners or they'll stick out of the editor bounds of editor is rounded. - * Could potentially be pushed up from the editor like we do with bg color but this - * is probably fine. - */ + * Round corners or they'll stick out of the editor bounds of editor is rounded. + * Could potentially be pushed up from the editor like we do with bg color but this + * is probably fine. + */ @apply rounded-lg; } } @@ -167,8 +167,8 @@ @apply h-full flex items-center; /* Break characters on line wrapping mode, useful for URL field. - * We can make this dynamic if we need it to be configurable later - */ + * We can make this dynamic if we need it to be configurable later + */ &.cm-lineWrapping { @apply break-all; @@ -272,7 +272,7 @@ } .cm-editor .cm-panels { - @apply bg-transparent border-0 text-gray-800 z-50; + @apply bg-gray-100 p-1 border-0 text-gray-800 z-20 rounded-md; input, button { @@ -280,11 +280,19 @@ } button { - @apply appearance-none bg-none bg-gray-800 text-gray-100 focus:bg-gray-900 cursor-default; + @apply appearance-none bg-none bg-gray-200 hocus:bg-gray-300 hocus:text-gray-950 border-0 text-gray-800 cursor-default; + } + + button[name='close'] { + @apply text-gray-600 hocus:text-gray-900 px-2 -mr-1.5 !important; } input { - @apply bg-gray-50 border border-highlight focus:border-focus outline-none; + @apply bg-gray-50 border border-gray-500/50 focus:border-focus outline-none; + } + + label { + @apply focus-within:text-gray-950; } /* Hide the "All" button */ diff --git a/src-web/hooks/useHotKey.ts b/src-web/hooks/useHotKey.ts index 029ecf7f..908e93e7 100644 --- a/src-web/hooks/useHotKey.ts +++ b/src-web/hooks/useHotKey.ts @@ -63,13 +63,17 @@ export function useHotKey( options: Options = {}, ) { useAnyHotkey((hkAction, e) => { + // Triggered hotkey! if (hkAction === action) { + e.preventDefault(); + e.stopPropagation(); + console.log('TRIGGERED HOTKEY', hkAction, options); callback(e); } }, options); } -export function useAnyHotkey( +function useAnyHotkey( callback: (action: HotkeyAction, e: KeyboardEvent) => void, options: Options, ) { @@ -100,9 +104,6 @@ export function useAnyHotkey( keys.length === currentKeys.current.size && keys.every((key) => currentKeys.current.has(key)) ) { - // Triggered hotkey! - e.preventDefault(); - e.stopPropagation(); callbackRef.current(hkAction, e); } } diff --git a/src-web/main.tsx b/src-web/main.tsx index 899910d7..12f3f754 100644 --- a/src-web/main.tsx +++ b/src-web/main.tsx @@ -20,7 +20,7 @@ if (osType !== 'Darwin') { const settings = await getSettings(); setAppearanceOnDocument(settings.appearance as Appearance); -document.addEventListener('keydown', (e) => { +window.addEventListener('keypress', (e) => { // Don't go back in history on backspace if (e.key === 'Backspace') e.preventDefault(); });