Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-07-12 07:36:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: refactor button with new design (#3343)

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
packages/component/src/components/app-sidebar/sidebar-header/index.tsx
-2
View File
@@ -23,7 +23,6 @@ export const SidebarHeader = (props: SidebarHeaderProps) => {
<>
{environment.isMacOs && <div style={{ flex: 1 }} />}
<IconButton
size="middle"
data-testid="app-sidebar-arrow-button-back"
disabled={props.router?.history.current === 0}
onClick={() => {
@@ -33,7 +32,6 @@ export const SidebarHeader = (props: SidebarHeaderProps) => {
<ArrowLeftSmallIcon />
</IconButton>
<IconButton
size="middle"
data-testid="app-sidebar-arrow-button-forward"
disabled={
props.router
packages/component/src/components/image-preview-modal/index.tsx
+10 -19
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>
packages/component/src/components/page-list/components/favorite-tag.tsx
+1 -6
View File
@@ -19,12 +19,7 @@ export const FavoriteTag = forwardRef<
>
<IconButton
ref={ref}
iconSize={[20, 20]}
style={{
color: active
? 'var(--affine-primary-color)'
: 'var(--affine-icon-color)',
}}
active={active}
onClick={e => {
e.stopPropagation();
onClick?.(e);
packages/component/src/components/page-list/operation-cell.tsx
+1 -3
View File
@@ -147,8 +147,6 @@ export const TrashOperationCell: React.FC<TrashOperationCellProps> = ({
onClick={() => {
setOpen(true);
}}
hoverBackground="var(--affine-background-error-color)"
hoverColor="var(--affine-error-color)"
>
<DeletePermanentlyIcon />
</IconButton>
@@ -157,7 +155,7 @@ export const TrashOperationCell: React.FC<TrashOperationCellProps> = ({
title={t['Delete permanently?']()}
content={t['TrashButtonGroupDescription']()}
confirmText={t['Delete']()}
confirmType="danger"
confirmType="error"
open={open}
onConfirm={() => {
onPermanentlyDeletePage();
packages/component/src/components/page-list/operation-menu-items/move-to-trash.tsx
+1 -1
View File
@@ -44,7 +44,7 @@ const ConfirmModal = ({
title: title || 'Untitled',
})}
confirmText={t.Delete()}
confirmType="danger"
confirmType="error"
{...confirmModalProps}
/>
);
packages/component/src/components/page-list/view/collection-list.tsx
-4
View File
@@ -207,9 +207,7 @@ export const CollectionList = ({
}
>
<Button
size="small"
className={clsx(styles.viewButton)}
hoverColor="var(--affine-icon-color)"
data-testid="collection-select"
>
<Tooltip
@@ -235,8 +233,6 @@ export const CollectionList = ({
<Button
icon={<FilteredIcon />}
className={clsx(styles.filterButton)}
size="small"
hoverColor="var(--affine-icon-color)"
data-testid="create-first-filter"
>
{t['com.affine.filter']()}
packages/component/src/components/page-list/view/create-collection.tsx
+2 -7
View File
@@ -56,12 +56,7 @@ export const EditCollectionModel = ({
background: 'var(--affine-background-primary-color)',
}}
>
<ModalCloseButton
top={12}
right={12}
onClick={onClose}
hoverColor="var(--affine-icon-color)"
/>
<ModalCloseButton top={12} right={12} onClick={onClose} />
{init ? (
<EditCollection
propertiesMeta={propertiesMeta}
@@ -283,7 +278,7 @@ export const SaveCollectionButton = ({
<Button
className={styles.saveButton}
onClick={() => changeShow(true)}
size="middle"
size="large"
data-testid="save-as-collection"
>
<div className={styles.saveButtonContainer}>
packages/component/src/components/share-menu/disable-public-link/index.tsx
+5 -5
View File
@@ -1,10 +1,9 @@
import { useAFFiNEI18N } from '@affine/i18n/hooks';
import { Modal, ModalCloseButton } from '../../..';
import { Button } from '../../../ui/button';
import {
StyledButton,
StyledButtonContent,
StyledDangerButton,
StyledModalHeader,
StyledModalWrapper,
StyledTextContent,
@@ -33,8 +32,9 @@ export const PublicLinkDisableModal = ({
</StyledTextContent>
<StyledButtonContent>
<StyledButton onClick={onClose}>{t['Cancel']()}</StyledButton>
<StyledDangerButton
<Button onClick={onClose}>{t['Cancel']()}</Button>
<Button
type="error"
data-testid="disable-public-link-confirm-button"
onClick={() => {
onConfirmDisable();
@@ -43,7 +43,7 @@ export const PublicLinkDisableModal = ({
style={{ marginLeft: '24px' }}
>
{t['Disable']()}
</StyledDangerButton>
</Button>
</StyledButtonContent>
</StyledModalWrapper>
</Modal>
packages/component/src/components/share-menu/disable-public-link/style.ts
+1 -22
View File
@@ -1,4 +1,4 @@
import { styled, TextButton } from '../../..';
import { styled } from '../../..';
export const StyledModalWrapper = styled('div')(() => {
return {
@@ -40,24 +40,3 @@ export const StyledButtonContent = styled('div')(() => {
justifyContent: 'center',
};
});
export const StyledButton = styled(TextButton)(() => {
return {
color: 'var(--affine-primary-color)',
height: '32px',
background: '#F3F0FF',
border: 'none',
borderRadius: '8px',
padding: '4px 20px',
};
});
export const StyledDangerButton = styled(TextButton)(() => {
return {
color: '#FF631F',
height: '32px',
background:
'linear-gradient(0deg, rgba(255, 99, 31, 0.1), rgba(255, 99, 31, 0.1)), #FFFFFF;',
border: 'none',
borderRadius: '8px',
padding: '4px 20px',
};
});
packages/component/src/components/share-menu/share-menu.tsx
+5 -4
View File
@@ -9,12 +9,13 @@ import type { FC } from 'react';
import { useRef } from 'react';
import { useCallback, useState } from 'react';
import { Button } from '../../ui/button';
import { Menu } from '../../ui/menu/menu';
import { Export } from './export';
import { containerStyle, indicatorContainerStyle, tabStyle } from './index.css';
import { SharePage } from './share-page';
import { ShareWorkspace } from './share-workspace';
import { StyledIndicator, StyledShareButton, TabItem } from './styles';
import { StyledIndicator, TabItem } from './styles';
type SharePanel = 'SharePage' | 'Export' | 'ShareWorkspace';
const MenuItems: Record<SharePanel, FC<ShareMenuProps>> = {
SharePage: SharePage,
@@ -134,15 +135,15 @@ export const ShareMenu: FC<ShareMenuProps> = props => {
setOpen(false);
}}
>
<StyledShareButton
<Button
data-testid="share-menu-button"
onClick={() => {
setOpen(!open);
}}
isShared={isPublic}
type={isPublic ? 'primary' : undefined}
>
<div>{isPublic ? 'Shared' : 'Share'}</div>
</StyledShareButton>
</Button>
</Menu>
);
};
packages/component/src/components/share-menu/share-page.tsx
+9 -13
View File
@@ -7,7 +7,7 @@ import type { FC } from 'react';
import { useState } from 'react';
import { useCallback, useMemo } from 'react';
import { toast } from '../..';
import { Button, toast } from '../..';
import { PublicLinkDisableModal } from './disable-public-link';
import {
descriptionStyle,
@@ -15,26 +15,22 @@ import {
menuItemStyle,
} from './index.css';
import type { ShareMenuProps } from './share-menu';
import {
StyledButton,
StyledDisableButton,
StyledInput,
StyledLinkSpan,
} from './styles';
import { StyledDisableButton, StyledInput, StyledLinkSpan } from './styles';
export const LocalSharePage: FC<ShareMenuProps> = props => {
const t = useAFFiNEI18N();
return (
<div className={menuItemStyle}>
<div className={descriptionStyle}>{t['Shared Pages Description']()}</div>
<StyledButton
<Button
type="primary"
data-testid="share-menu-enable-affine-cloud-button"
onClick={() => {
props.onEnableAffineCloud(props.workspace as LocalWorkspace);
}}
>
{t['Enable AFFiNE Cloud']()}
</StyledButton>
</Button>
</div>
);
};
@@ -74,20 +70,20 @@ export const AffineSharePage: FC<ShareMenuProps> = props => {
value={isPublic ? sharingUrl : 'https://app.affine.pro/xxxx'}
/>
{!isPublic && (
<StyledButton
<Button
data-testid="affine-share-create-link"
onClick={onClickCreateLink}
>
{t['Create']()}
</StyledButton>
</Button>
)}
{isPublic && (
<StyledButton
<Button
data-testid="affine-share-copy-link"
onClick={onClickCopyLink}
>
{t['Copy Link']()}
</StyledButton>
</Button>
)}
</div>
<div className={descriptionStyle}>
packages/component/src/components/share-menu/share-workspace.tsx
+5 -5
View File
@@ -6,9 +6,9 @@ import { WorkspaceFlavour } from '@affine/env/workspace';
import { useAFFiNEI18N } from '@affine/i18n/hooks';
import type { FC } from 'react';
import { Button } from '../../ui/button';
import { descriptionStyle, menuItemStyle } from './index.css';
import type { ShareMenuProps } from './share-menu';
import { StyledButton } from './styles';
const ShareLocalWorkspace: FC<ShareMenuProps<LocalWorkspace>> = props => {
const t = useAFFiNEI18N();
@@ -17,14 +17,14 @@ const ShareLocalWorkspace: FC<ShareMenuProps<LocalWorkspace>> = props => {
<div className={descriptionStyle}>
{t['Share Menu Public Workspace Description1']()}
</div>
<StyledButton
<Button
data-testid="share-menu-enable-affine-cloud-button"
onClick={() => {
props.onOpenWorkspaceSettings(props.workspace);
}}
>
{t['Open Workspace Settings']()}
</StyledButton>
</Button>
</div>
);
};
@@ -42,14 +42,14 @@ const ShareAffineWorkspace: FC<
? t['Share Menu Public Workspace Description2']()
: t['Share Menu Public Workspace Description1']()}
</div>
<StyledButton
<Button
data-testid="share-menu-publish-to-web-button"
onClick={() => {
props.onOpenWorkspaceSettings(props.workspace);
}}
>
{t['Open Workspace Settings']()}
</StyledButton>
</Button>
</div>
);
};
packages/component/src/components/share-menu/styles.ts
+1 -41
View File
@@ -1,34 +1,4 @@
import { Button, displayFlex, styled, TextButton } from '../..';
export const StyledShareButton = styled(TextButton, {
shouldForwardProp: (prop: string) => prop !== 'isShared',
})<{ isShared?: boolean }>(({ isShared }) => {
return {
padding: '4px 8px',
marginLeft: '4px',
marginRight: '16px',
border: `1px solid ${
isShared ? 'var(--affine-primary-color)' : 'var(--affine-icon-color)'
}`,
color: isShared
? 'var(--affine-primary-color)'
: 'var(--affine-icon-color)',
borderRadius: '8px',
':hover': {
border: `1px solid ${'var(--affine-primary-color)'}`,
},
span: {
...displayFlex('center', 'center'),
},
};
});
export const StyledTabsWrapper = styled('div')(() => {
return {
...displayFlex('space-around', 'center'),
position: 'relative',
};
});
import { Button, displayFlex, styled } from '../..';
export const TabItem = styled('li')<{ isActive?: boolean }>(({ isActive }) => {
{
@@ -99,16 +69,6 @@ export const StyledInput = styled('input')(() => {
marginRight: '10px',
};
});
export const StyledButton = styled(TextButton)(() => {
return {
color: 'var(--affine-primary-color)',
height: '32px',
background: '#F3F0FF',
border: 'none',
borderRadius: '8px',
padding: '4px 20px',
};
});
export const StyledDisableButton = styled(Button)(() => {
return {
color: '#FF631F',