mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-11 20:08:37 +00:00
fix: ui issues (#1023)
This commit is contained in:
Qi
@@ -1,15 +1,16 @@
|
||||
import { LocalWorkspaceIcon, CloudWorkspaceIcon } from '@blocksuite/icons';
|
||||
import { useAppState } from '@/providers/app-state-provider';
|
||||
import { styled, Tooltip } from '@affine/component';
|
||||
import { displayFlex, styled, Tooltip, IconButton } from '@affine/component';
|
||||
import { useTranslation } from '@affine/i18n';
|
||||
import { useModal } from '@/store/globalModal';
|
||||
|
||||
const IconWrapper = styled.div(() => {
|
||||
return {
|
||||
width: '20px',
|
||||
height: '20px',
|
||||
width: '32px',
|
||||
height: '32px',
|
||||
marginRight: '12px',
|
||||
fontSize: '20px',
|
||||
fontSize: '22px',
|
||||
...displayFlex('center', 'center'),
|
||||
};
|
||||
});
|
||||
export const SyncUser = () => {
|
||||
@@ -24,14 +25,14 @@ export const SyncUser = () => {
|
||||
content={t('Saved then enable AFFiNE Cloud')}
|
||||
placement="bottom-end"
|
||||
>
|
||||
<IconWrapper
|
||||
<IconButton
|
||||
onClick={() => {
|
||||
triggerEnableWorkspaceModal();
|
||||
}}
|
||||
style={{ cursor: 'pointer' }}
|
||||
style={{ marginRight: '12px' }}
|
||||
>
|
||||
<LocalWorkspaceIcon />
|
||||
</IconWrapper>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,7 +2,6 @@ import { useState } from 'react';
|
||||
import { useTheme } from '@/providers/ThemeProvider';
|
||||
import { MoonIcon, SunIcon } from './Icons';
|
||||
import { StyledThemeModeSwitch, StyledSwitchItem } from './style';
|
||||
|
||||
export const ThemeModeSwitch = () => {
|
||||
const { mode, changeMode } = useTheme();
|
||||
const [isHover, setIsHover] = useState(false);
|
||||
|
||||
@@ -9,7 +9,7 @@ const ANIMATE_DURATION = 400;
|
||||
export const StyledThemeModeSwitch = styled('div')({
|
||||
width: '32px',
|
||||
height: '32px',
|
||||
borderRadius: '5px',
|
||||
borderRadius: '6px',
|
||||
overflow: 'hidden',
|
||||
backgroundColor: 'transparent',
|
||||
position: 'relative',
|
||||
@@ -62,5 +62,9 @@ export const StyledSwitchItem = styled('div')<{
|
||||
...displayFlex('center', 'center'),
|
||||
cursor: 'pointer',
|
||||
...activeStyle,
|
||||
svg: {
|
||||
width: '24px',
|
||||
height: '24px',
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
@@ -25,7 +25,11 @@ export const ContactIcon = () => {
|
||||
fill="currentColor"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M3.8 11C3.8 6.47126 7.47126 2.8 12 2.8V1.2C6.58761 1.2 2.2 5.58761 2.2 11H3.8ZM12 2.8C16.5287 2.8 20.2 6.47126 20.2 11H21.8C21.8 5.58761 17.4124 1.2 12 1.2V2.8ZM3 11.8H5V10.2H3V11.8ZM6.2 13V15H7.8V13H6.2ZM5 16.2H4V17.8H5V16.2ZM4 16.2C3.88954 16.2 3.8 16.1105 3.8 16H2.2C2.2 16.9941 3.00589 17.8 4 17.8V16.2ZM6.2 15C6.2 15.6627 5.66274 16.2 5 16.2V17.8C6.5464 17.8 7.8 16.5464 7.8 15H6.2ZM5 11.8C5.66274 11.8 6.2 12.3373 6.2 13H7.8C7.8 11.4536 6.5464 10.2 5 10.2V11.8ZM21 10.2H19V11.8H21V10.2ZM16.2 13V15H17.8V13H16.2ZM19 17.8H20V16.2H19V17.8ZM20 17.8C20.9941 17.8 21.8 16.9941 21.8 16H20.2C20.2 16.1105 20.1105 16.2 20 16.2V17.8ZM16.2 15C16.2 16.5464 17.4536 17.8 19 17.8V16.2C18.3373 16.2 17.8 15.6627 17.8 15H16.2ZM19 10.2C17.4536 10.2 16.2 11.4536 16.2 13H17.8C17.8 12.3373 18.3373 11.8 19 11.8V10.2ZM4.2 17V18H5.8V17H4.2ZM7 20.8H9V19.2H7V20.8ZM4.2 18C4.2 19.5464 5.4536 20.8 7 20.8V19.2C6.33726 19.2 5.8 18.6627 5.8 18H4.2ZM10.5 19.3H11.5V17.7H10.5V19.3ZM11.5 20.7H10.5V22.3H11.5V20.7ZM10.5 20.7C10.1134 20.7 9.8 20.3866 9.8 20H8.2C8.2 21.2703 9.22974 22.3 10.5 22.3V20.7ZM12.2 20C12.2 20.3866 11.8866 20.7 11.5 20.7V22.3C12.7703 22.3 13.8 21.2703 13.8 20H12.2ZM11.5 19.3C11.8866 19.3 12.2 19.6134 12.2 20H13.8C13.8 18.7297 12.7703 17.7 11.5 17.7V19.3ZM10.5 17.7C9.22974 17.7 8.2 18.7297 8.2 20H9.8C9.8 19.6134 10.1134 19.3 10.5 19.3V17.7ZM2.2 11V16H3.8V11H2.2ZM20.2 11V16H21.8V11H20.2Z" />
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M7.16957 3.25H14.8304C15.3646 3.24999 15.8104 3.24998 16.1747 3.27974C16.5546 3.31078 16.9112 3.37789 17.2485 3.54973C17.7659 3.81338 18.1866 4.23408 18.4503 4.75153C18.6221 5.08879 18.6892 5.44545 18.7203 5.82533C18.75 6.18956 18.75 6.6354 18.75 7.16955V8.36732C18.9209 8.40912 19.0869 8.46741 19.2485 8.54973C19.7659 8.81339 20.1866 9.23408 20.4503 9.75153C20.6221 10.0888 20.6892 10.4454 20.7203 10.8253C20.75 11.1896 20.75 11.6354 20.75 12.1695V20C20.75 20.2766 20.5978 20.5307 20.3539 20.6613C20.11 20.7918 19.8141 20.7775 19.584 20.624L17.3901 19.1615C17.069 18.9474 16.9819 18.8925 16.8945 18.8544C16.8046 18.8151 16.7104 18.7866 16.6138 18.7694C16.52 18.7527 16.4171 18.75 16.0311 18.75H11.1695C10.6354 18.75 10.1896 18.75 9.82533 18.7203C9.44545 18.6892 9.08879 18.6221 8.75153 18.4503C8.23408 18.1866 7.81339 17.7659 7.54973 17.2485C7.52446 17.1989 7.50144 17.1488 7.48046 17.0983L4.33541 18.6708C4.10292 18.7871 3.82681 18.7746 3.6057 18.638C3.38459 18.5013 3.25 18.2599 3.25 18L3.25 7.16957C3.24999 6.63541 3.24998 6.18956 3.27974 5.82533C3.31078 5.44545 3.37789 5.08879 3.54973 4.75153C3.81338 4.23408 4.23408 3.81338 4.75153 3.54973C5.08879 3.37789 5.44545 3.31078 5.82533 3.27974C6.18956 3.24998 6.63541 3.24999 7.16957 3.25ZM7.25322 15.5349C7.25 15.318 7.25 15.0803 7.25 14.8211L7.25 12.1696C7.24999 11.6354 7.24998 11.1896 7.27974 10.8253C7.31078 10.4454 7.37789 10.0888 7.54973 9.75153C7.81339 9.23408 8.23408 8.81339 8.75153 8.54973C9.08879 8.37789 9.44545 8.31078 9.82533 8.27974C10.1896 8.24998 10.6354 8.24999 11.1696 8.25H16.8304C16.9769 8.25 17.1167 8.24999 17.25 8.25061V7.2C17.25 6.62757 17.2494 6.24336 17.2252 5.94748C17.2018 5.66036 17.1599 5.52307 17.1138 5.43251C16.9939 5.19731 16.8027 5.00608 16.5675 4.88624C16.4769 4.8401 16.3396 4.79822 16.0525 4.77476C15.7566 4.75058 15.3724 4.75 14.8 4.75H7.2C6.62757 4.75 6.24336 4.75058 5.94748 4.77476C5.66036 4.79822 5.52307 4.8401 5.43251 4.88624C5.19731 5.00608 5.00608 5.19731 4.88624 5.43251C4.8401 5.52307 4.79822 5.66036 4.77476 5.94748C4.75058 6.24336 4.75 6.62757 4.75 7.2V16.7865L7.25322 15.5349ZM9.94748 9.77476C9.66036 9.79822 9.52307 9.8401 9.43251 9.88624C9.19731 10.0061 9.00608 10.1973 8.88624 10.4325C8.8401 10.5231 8.79822 10.6604 8.77476 10.9475C8.75058 11.2434 8.75 11.6276 8.75 12.2V14.8C8.75 15.3018 8.7503 15.6608 8.7673 15.9461C8.78877 16.3064 8.83405 16.465 8.88624 16.5675C9.00608 16.8027 9.19731 16.9939 9.43251 17.1138C9.52307 17.1599 9.66036 17.2018 9.94748 17.2252C10.2434 17.2494 10.6276 17.25 11.2 17.25H16.0311C16.049 17.25 16.0666 17.25 16.084 17.25C16.3929 17.2499 16.6362 17.2497 16.877 17.2927C17.0895 17.3306 17.2968 17.3933 17.4947 17.4797C17.7189 17.5775 17.9213 17.7126 18.1782 17.884C18.1927 17.8937 18.2073 17.9035 18.2222 17.9134L19.25 18.5986V12.2C19.25 11.6276 19.2494 11.2434 19.2252 10.9475C19.2018 10.6604 19.1599 10.5231 19.1138 10.4325C18.9939 10.1973 18.8027 10.0061 18.5675 9.88624C18.4769 9.8401 18.3396 9.79822 18.0525 9.77476C17.7566 9.75058 17.3724 9.75 16.8 9.75H11.2C10.6276 9.75 10.2434 9.75058 9.94748 9.77476Z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
@@ -43,17 +47,3 @@ export const KeyboardIcon = () => {
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export const CloseIcon = () => {
|
||||
return (
|
||||
<svg
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 12 12"
|
||||
fill="currentColor"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M6.88173 5.9864L11.8557 1.0257C11.954 0.911231 12.0054 0.76398 11.9996 0.613378C11.9937 0.462776 11.9311 0.319916 11.8243 0.213345C11.7174 0.106774 11.5742 0.0443419 11.4232 0.0385248C11.2722 0.0327077 11.1245 0.0839342 11.0097 0.181967L6.03573 5.14266L1.06173 0.175983C0.948744 0.063303 0.795507 0 0.635726 0C0.475945 0 0.322708 0.063303 0.209726 0.175983C0.0967439 0.288663 0.0332711 0.44149 0.0332711 0.600844C0.0332711 0.760197 0.0967439 0.913024 0.209726 1.0257L5.18973 5.9864L0.209726 10.9471C0.146917 11.0007 0.0959048 11.0668 0.0598909 11.141C0.0238769 11.2152 0.00363881 11.2961 0.000447115 11.3785C-0.00274458 11.4609 0.0111787 11.5431 0.0413434 11.6199C0.0715082 11.6967 0.117263 11.7664 0.175736 11.8247C0.234209 11.8831 0.304137 11.9287 0.381132 11.9588C0.458127 11.9889 0.540527 12.0027 0.623158 11.9996C0.70579 11.9964 0.786869 11.9762 0.861308 11.9403C0.935747 11.9044 1.00194 11.8535 1.05573 11.7908L6.03573 6.83014L11.0097 11.7908C11.1245 11.8889 11.2722 11.9401 11.4232 11.9343C11.5742 11.9285 11.7174 11.866 11.8243 11.7595C11.9311 11.6529 11.9937 11.51 11.9996 11.3594C12.0054 11.2088 11.954 11.0616 11.8557 10.9471L6.88173 5.9864Z" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -5,13 +5,14 @@ import {
|
||||
StyledAnimateWrapper,
|
||||
StyledTriggerWrapper,
|
||||
} from './style';
|
||||
import { CloseIcon, ContactIcon, HelpIcon, KeyboardIcon } from './Icons';
|
||||
import { ContactIcon, HelpIcon, KeyboardIcon } from './Icons';
|
||||
import { Tooltip } from '@affine/component';
|
||||
|
||||
import { useTranslation } from '@affine/i18n';
|
||||
import { useModal } from '@/store/globalModal';
|
||||
import { MuiFade } from '@affine/component';
|
||||
import { useGlobalState } from '@/store/app';
|
||||
import { CloseIcon } from '@blocksuite/icons';
|
||||
export type IslandItemNames = 'contact' | 'shortcuts';
|
||||
export const HelpIsland = ({
|
||||
showList = ['contact', 'shortcuts'],
|
||||
@@ -76,11 +77,13 @@ export const HelpIsland = ({
|
||||
)}
|
||||
</StyledAnimateWrapper>
|
||||
|
||||
<MuiFade in={!spread} data-testid="faq-icon">
|
||||
<StyledTriggerWrapper>
|
||||
<HelpIcon />
|
||||
</StyledTriggerWrapper>
|
||||
</MuiFade>
|
||||
<Tooltip content={t('Help and Feedback')} placement="left-end">
|
||||
<MuiFade in={!spread} data-testid="faq-icon">
|
||||
<StyledTriggerWrapper>
|
||||
<HelpIcon />
|
||||
</StyledTriggerWrapper>
|
||||
</MuiFade>
|
||||
</Tooltip>
|
||||
<MuiFade in={spread}>
|
||||
<StyledTriggerWrapper>
|
||||
<CloseIcon />
|
||||
|
||||
@@ -64,11 +64,8 @@ export const StyledTriggerWrapper = styled('div')(({ theme }) => {
|
||||
backgroundColor: theme.colors.pageBackground,
|
||||
color: theme.colors.iconColor,
|
||||
borderRadius: '5px',
|
||||
fontSize: '24px',
|
||||
...displayFlex('center', 'center'),
|
||||
...positionAbsolute({ left: '4px', bottom: '4px' }),
|
||||
':hover': {
|
||||
color: theme.colors.primaryColor,
|
||||
backgroundColor: theme.colors.hoverBackground,
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
@@ -16,7 +16,7 @@ export const LocalWorkspaceIcon = () => {
|
||||
};
|
||||
|
||||
export const CloudWorkspaceIcon = () => {
|
||||
return <DefaultCloudWorkspaceIcon style={{ color: '##60A5FA' }} />;
|
||||
return <DefaultCloudWorkspaceIcon style={{ color: '#60A5FA' }} />;
|
||||
};
|
||||
|
||||
export const LocalDataIcon = () => {
|
||||
@@ -24,5 +24,5 @@ export const LocalDataIcon = () => {
|
||||
};
|
||||
|
||||
export const PublishIcon = () => {
|
||||
return <DefaultPublishIcon style={{ color: '##8699FF' }} />;
|
||||
return <DefaultPublishIcon style={{ color: '#8699FF' }} />;
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user