feat: refactor button with new design (#3343)

This commit is contained in:
Qi
2023-07-21 19:07:28 +08:00
committed by GitHub
parent a4f60f22cf
commit 439ef1ba90
42 changed files with 665 additions and 473 deletions

View File

@@ -342,9 +342,8 @@ const ImagePreviewModalImpl = (
<Button
data-testid="previous-image-button"
icon={<ArrowLeftSmallIcon className={buttonIconStyle} />}
noBorder={true}
type="plain"
className={buttonStyle}
hoverColor={'-moz-initial'}
onClick={() => {
assertExists(blockId);
previousImageHandler(blockId);
@@ -355,9 +354,8 @@ const ImagePreviewModalImpl = (
<Button
data-testid="next-image-button"
icon={<ArrowRightSmallIcon className={buttonIconStyle} />}
noBorder={true}
className={buttonStyle}
hoverColor={'-moz-initial'}
type="plain"
onClick={() => {
assertExists(blockId);
nextImageHandler(blockId);
@@ -374,8 +372,7 @@ const ImagePreviewModalImpl = (
<Button
data-testid="fit-to-screen-button"
icon={<ViewBarIcon className={buttonIconStyle} />}
noBorder={true}
hoverColor={'-moz-initial'}
type="plain"
className={buttonStyle}
onClick={() => resetZoom()}
/>
@@ -384,19 +381,17 @@ const ImagePreviewModalImpl = (
<Button
data-testid="zoom-out-button"
icon={<MinusIcon className={buttonIconStyle} />}
noBorder={true}
className={buttonStyle}
hoverColor={'-moz-initial'}
type="plain"
onClick={zoomOut}
/>
</Tooltip>
<Tooltip content={'Reset Scale'} disablePortal={false}>
<Button
data-testid="reset-scale-button"
noBorder={true}
size={'middle'}
type="plain"
size={'large'}
className={scaleIndicatorButtonStyle}
hoverColor={'-moz-initial'}
onClick={resetScale}
>
{`${(currentScale * 100).toFixed(0)}%`}
@@ -406,9 +401,8 @@ const ImagePreviewModalImpl = (
<Button
data-testid="zoom-in-button"
icon={<PlusIcon className={buttonIconStyle} />}
noBorder={true}
className={buttonStyle}
hoverColor={'-moz-initial'}
type="plain"
onClick={() => zoomIn()}
/>
</Tooltip>
@@ -417,9 +411,8 @@ const ImagePreviewModalImpl = (
<Button
data-testid="download-button"
icon={<DownloadIcon className={buttonIconStyle} />}
noBorder={true}
type="plain"
className={buttonStyle}
hoverColor={'-moz-initial'}
onClick={() => {
assertExists(blockId);
downloadHandler(blockId).catch(err => {
@@ -432,9 +425,8 @@ const ImagePreviewModalImpl = (
<Button
data-testid="copy-to-clipboard-button"
icon={<CopyIcon className={buttonIconStyle} />}
noBorder={true}
type="plain"
className={buttonStyle}
hoverColor={'-moz-initial'}
onClick={() => {
if (!imageRef.current) {
return;
@@ -474,10 +466,9 @@ const ImagePreviewModalImpl = (
<Button
data-testid="delete-button"
icon={<DeleteIcon className={buttonIconStyle} />}
noBorder={true}
type="plain"
className={buttonStyle}
onClick={() => blockId && deleteHandler(blockId)}
hoverColor="var(--affine-error-color)"
/>
</Tooltip>
</div>