From f2d3096539a895bbbd750b1a6311100556d1a14a Mon Sep 17 00:00:00 2001 From: JimmFly <447268514@qq.com> Date: Tue, 28 May 2024 12:50:39 +0800 Subject: [PATCH] chore: adjust find in page modal style --- .../view/find-in-page-modal.css.ts | 38 +++++- .../find-in-page/view/find-in-page-modal.tsx | 109 +++++++++++------- 2 files changed, 99 insertions(+), 48 deletions(-) diff --git a/packages/frontend/core/src/modules/find-in-page/view/find-in-page-modal.css.ts b/packages/frontend/core/src/modules/find-in-page/view/find-in-page-modal.css.ts index 5d8da4f34f377..46740b8b4c3a0 100644 --- a/packages/frontend/core/src/modules/find-in-page/view/find-in-page-modal.css.ts +++ b/packages/frontend/core/src/modules/find-in-page/view/find-in-page-modal.css.ts @@ -14,7 +14,6 @@ export const container = style({ position: 'fixed', right: '28px', top: '80px', - transform: `translateX(calc(${panelWidthVar} * -1))`, }); export const leftContent = style({ @@ -23,15 +22,35 @@ export const leftContent = style({ flex: 1, }); +export const searchIcon = style({ + fontSize: '20px', + color: cssVar('iconColor'), + verticalAlign: 'middle', +}); + export const inputContainer = style({ display: 'flex', - alignSelf: 'stretch', alignItems: 'center', gap: '8px', flex: 1, height: '32px', position: 'relative', - margin: '0 8px', + padding: '0 8px', + borderRadius: '4px', + background: cssVar('white10'), + border: `1px solid ${cssVar('borderColor')}`, + selectors: { + '&.active': { + borderColor: cssVar('primaryColor'), + }, + }, +}); +export const inputMain = style({ + display: 'flex', + alignItems: 'center', + flex: 1, + height: '32px', + position: 'relative', }); export const input = style({ @@ -41,14 +60,13 @@ export const input = style({ height: '100%', width: '100%', color: 'transparent', - background: cssVar('white10'), }); export const inputHack = style([ input, { '::placeholder': { - color: cssVar('iconColor'), + color: cssVar('textPrimaryColor'), }, pointerEvents: 'none', }, @@ -68,6 +86,7 @@ export const arrowButton = style({ flexShrink: 0, border: '1px solid', borderColor: cssVar('borderColor'), + color: cssVar('iconColor'), alignItems: 'baseline', background: 'transparent', selectors: { @@ -81,3 +100,12 @@ export const arrowButton = style({ }, }, }); +export const closeButton = style({ + padding: '4px', + fontSize: '20px', + width: '24px', + height: '24px', + flexShrink: 0, + color: cssVar('iconColor'), + marginLeft: '8px', +}); diff --git a/packages/frontend/core/src/modules/find-in-page/view/find-in-page-modal.tsx b/packages/frontend/core/src/modules/find-in-page/view/find-in-page-modal.tsx index 0b544b02926da..181873c272ff0 100644 --- a/packages/frontend/core/src/modules/find-in-page/view/find-in-page-modal.tsx +++ b/packages/frontend/core/src/modules/find-in-page/view/find-in-page-modal.tsx @@ -1,10 +1,12 @@ -import { Button, Modal } from '@affine/component'; -import { rightSidebarWidthAtom } from '@affine/core/atoms'; -import { ArrowDownSmallIcon, ArrowUpSmallIcon } from '@blocksuite/icons'; +import { Button, IconButton, Modal } from '@affine/component'; +import { + ArrowDownSmallIcon, + ArrowUpSmallIcon, + CloseIcon, + SearchIcon, +} from '@blocksuite/icons'; import { useLiveData, useService } from '@toeverything/infra'; -import { assignInlineVars } from '@vanilla-extract/dynamic'; import clsx from 'clsx'; -import { useAtomValue } from 'jotai'; import { type KeyboardEventHandler, useCallback, @@ -13,7 +15,6 @@ import { useState, } from 'react'; -import { RightSidebarService } from '../../right-sidebar'; import { FindInPageService } from '../services/find-in-page'; import * as styles from './find-in-page-modal.css'; @@ -26,12 +27,20 @@ const drawText = (canvas: HTMLCanvasElement, text: string) => { const dpr = window.devicePixelRatio || 1; canvas.width = canvas.getBoundingClientRect().width * dpr; canvas.height = canvas.getBoundingClientRect().height * dpr; + + const rootStyles = getComputedStyle(document.documentElement); + const textColor = rootStyles + .getPropertyValue('--affine-text-primary-color') + .trim(); + ctx.scale(dpr, dpr); ctx.clearRect(0, 0, canvas.width, canvas.height); + ctx.fillStyle = textColor; ctx.font = '15px Inter'; + ctx.fillText(text, 0, 22); ctx.textAlign = 'left'; - ctx.textBaseline = 'ideographic'; + ctx.textBaseline = 'middle'; }; const CanvasText = ({ @@ -69,11 +78,8 @@ export const FindInPageModal = () => { const result = useLiveData(findInPage.result$); const isSearching = useLiveData(findInPage.isSearching$); - const rightSidebarWidth = useAtomValue(rightSidebarWidthAtom); - const rightSidebar = useService(RightSidebarService).rightSidebar; - const frontView = useLiveData(rightSidebar.front$); - const open = useLiveData(rightSidebar.isOpen$) && frontView !== undefined; const inputRef = useRef(null); + const [active, setActive] = useState(false); const handleValueChange = useCallback( (v: string) => { @@ -87,6 +93,14 @@ export const FindInPageModal = () => { [findInPage] ); + const handleFocus = useCallback(() => { + setActive(true); + }, []); + + const handleBlur = useCallback(() => { + setActive(false); + }, []); + useEffect(() => { if (visible) { setValue(findInPage.searchText$.value || ''); @@ -148,9 +162,6 @@ export const FindInPageModal = () => { }, [handleBackWard, handleForward] ); - const panelWidth = assignInlineVars({ - [styles.panelWidthVar]: open ? `${rightSidebarWidth}px` : '0', - }); return ( { minHeight={48} contentOptions={{ className: styles.container, - style: panelWidth, }} >
-
- handleValueChange(e.target.value)} - /> - -
-
- {value.length > 0 && result && result.matches !== 0 ? ( - <> - {result?.activeMatchOrdinal || 0} - / - {result?.matches || 0} - - ) : value.length ? ( - No matches - ) : null} +
+ +
+ handleValueChange(e.target.value)} + /> + +
+
+ {value.length > 0 && result && result.matches !== 0 ? ( + <> + {result?.activeMatchOrdinal || 0} + / + {result?.matches || 0} + + ) : value.length ? ( + No matches + ) : null} +
- + + + ); };