Skip to content

Commit

Permalink
chore: adjust find in page modal style
Browse files Browse the repository at this point in the history
  • Loading branch information
JimmFly committed May 28, 2024
1 parent 99d1948 commit f2d3096
Show file tree
Hide file tree
Showing 2 changed files with 99 additions and 48 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ export const container = style({
position: 'fixed',
right: '28px',
top: '80px',
transform: `translateX(calc(${panelWidthVar} * -1))`,
});

export const leftContent = style({
Expand All @@ -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({
Expand All @@ -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',
},
Expand All @@ -68,6 +86,7 @@ export const arrowButton = style({
flexShrink: 0,
border: '1px solid',
borderColor: cssVar('borderColor'),
color: cssVar('iconColor'),
alignItems: 'baseline',
background: 'transparent',
selectors: {
Expand All @@ -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',
});
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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';

Expand All @@ -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 = ({
Expand Down Expand Up @@ -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<HTMLInputElement>(null);
const [active, setActive] = useState(false);

const handleValueChange = useCallback(
(v: string) => {
Expand All @@ -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 || '');
Expand Down Expand Up @@ -148,9 +162,6 @@ export const FindInPageModal = () => {
},
[handleBackWard, handleForward]
);
const panelWidth = assignInlineVars({
[styles.panelWidthVar]: open ? `${rightSidebarWidth}px` : '0',
});

return (
<Modal
Expand All @@ -162,35 +173,43 @@ export const FindInPageModal = () => {
minHeight={48}
contentOptions={{
className: styles.container,
style: panelWidth,
}}
>
<div className={styles.leftContent}>
<div className={styles.inputContainer}>
<input
type="text"
autoFocus
value={value}
ref={inputRef}
style={{
visibility: isSearching ? 'hidden' : 'visible',
}}
className={styles.input}
onKeyDown={handleKeydown}
onChange={e => handleValueChange(e.target.value)}
/>
<CanvasText className={styles.inputHack} text={value} />
</div>
<div className={styles.count}>
{value.length > 0 && result && result.matches !== 0 ? (
<>
<span>{result?.activeMatchOrdinal || 0}</span>
<span>/</span>
<span>{result?.matches || 0}</span>
</>
) : value.length ? (
<span>No matches</span>
) : null}
<div
className={clsx(styles.inputContainer, {
active: active,
})}
>
<SearchIcon className={styles.searchIcon} />
<div className={styles.inputMain}>
<input
type="text"
autoFocus
value={value}
ref={inputRef}
style={{
visibility: isSearching ? 'hidden' : 'visible',
}}
onBlur={handleBlur}
onFocus={handleFocus}
className={styles.input}
onKeyDown={handleKeydown}
onChange={e => handleValueChange(e.target.value)}
/>
<CanvasText className={styles.inputHack} text={value} />
</div>
<div className={styles.count}>
{value.length > 0 && result && result.matches !== 0 ? (
<>
<span>{result?.activeMatchOrdinal || 0}</span>
<span>/</span>
<span>{result?.matches || 0}</span>
</>
) : value.length ? (
<span>No matches</span>
) : null}
</div>
</div>

<Button
Expand All @@ -206,9 +225,13 @@ export const FindInPageModal = () => {
<ArrowDownSmallIcon />
</Button>
</div>
<Button type="primary" onClick={handleDone}>
Done
</Button>
<IconButton
className={styles.closeButton}
type="plain"
onClick={handleDone}
>
<CloseIcon />
</IconButton>
</Modal>
);
};

0 comments on commit f2d3096

Please sign in to comment.