toeverything/AFFiNE
1
1
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2024-12-18 05:31:31 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix: lighter box shadow

Browse Source
This commit is contained in:
alt0 2022-08-04 17:29:51 +08:00
parent a495ebb7a2
commit 37a7e36c45
11 changed files with 76 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/ligo-virgo/src/pages/workspace/docs/Page.tsx
View File

@ -200,7 +200,7 @@ const LigoLeftContainer = styled('div')({
position: 'relative',
});
const WorkspaceSidebar = styled('div')(({ hidden }) => ({
const WorkspaceSidebar = styled('div')(({ theme }) => ({
position: 'absolute',
bottom: '48px',
top: '12px',
@ -210,7 +210,7 @@ const WorkspaceSidebar = styled('div')(({ hidden }) => ({
width: 300,
minWidth: 300,
borderRadius: '0px 10px 10px 0px',
boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
boxShadow: theme.affine.shadows.shadowSxDownLg,
backgroundColor: '#FFFFFF',
transitionProperty: 'left',
transitionDuration: '0.35s',

34
libs/components/common/src/lib/text/plugins/link.tsx
View File

@ -121,11 +121,11 @@ const isLinkActive = (editor: ReactEditor) => {
const LinkStyledTooltip = styled(({ className, ...props }: MuiTooltipProps) => (
<Tooltip {...props} classes={{ popper: className }} />
))(() => ({
))(({ theme }) => ({
[`& .${muiTooltipClasses.tooltip}`]: {
backgroundColor: '#fff',
color: '#4C6275',
boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
boxShadow: theme.affine.shadows.shadowSxDownLg,
fontSize: '14px',
},
[`& .MuiTooltip-tooltipPlacementBottom`]: {
@ -412,8 +412,7 @@ export const LinkModal = memo((props: LinkModalProps) => {
visible && (
<>
<LinkBehavior onMousedown={handle_mouse_down} rects={rects} />
<div
className={styles('linkModalContainer')}
<LinkModalContainer
style={{
top: top + height + GAP_BETWEEN_CONTENT_AND_MODAL,
left,
@ -431,7 +430,7 @@ export const LinkModal = memo((props: LinkModalProps) => {
autoComplete="off"
ref={inputEl}
/>
</div>
</LinkModalContainer>
</>
),
body
@ -491,19 +490,20 @@ const LinkBehavior = (props: {
);
};
const LinkModalContainer = styled('div')(({ theme }) => ({
position: 'fixed',
width: '354px',
height: '40px',
padding: '12px',
display: 'flex',
borderRadius: '4px',
boxShadow: theme.affine.shadows.shadowSxDownLg,
backgroundColor: '#fff',
alignItems: 'center',
zIndex: '1',
}));
const styles = style9.create({
linkModalContainer: {
position: 'fixed',
width: '354px',
height: '40px',
padding: '12px',
display: 'flex',
borderRadius: '4px',
boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
backgroundColor: '#fff',
alignItems: 'center',
zIndex: '1',
},
linkModalContainerIcon: {
width: '16px',
margin: '0 16px 0 4px',

2
libs/components/editor-blocks/src/blocks/group/GroupView.tsx
View File

@ -69,7 +69,7 @@ const GroupContainer = styled('div')<{ isSelect?: boolean }>(
}
: {
'&:hover': {
boxShadow: '0px 1px 10px rgb(152 172 189 / 60%)',
boxShadow: theme.affine.shadows.shadowSxDownLg,
},
}),
})

4
libs/components/editor-blocks/src/blocks/group/components/Panel.tsx
View File

@ -2,11 +2,11 @@ import { styled } from '@toeverything/components/ui';
import type { ComponentPropsWithRef, MouseEvent } from 'react';
import { forwardRef } from 'react';
const StyledPanel = styled('div')(() => ({
const StyledPanel = styled('div')(({ theme }) => ({
position: 'absolute',
top: 50,
background: '#FFFFFF',
boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
boxShadow: theme.affine.shadows.shadowSxDownLg,
borderRadius: 10,
padding: '12px 24px',
}));

2
libs/components/editor-plugins/src/menu/command-menu/Container.tsx
View File

@ -31,7 +31,7 @@ const RootContainer = styled('div')(({ theme }) => {
width: 352,
maxHeight: 525,
borderRadius: '10px',
boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
boxShadow: theme.affine.shadows.shadowSxDownLg,
backgroundColor: '#fff',
padding: '8px 4px',
};

6
libs/components/editor-plugins/src/menu/inline-menu/Container.tsx
View File

@ -75,13 +75,13 @@ export const InlineMenuContainer = ({ editor }: InlineMenuContainerProps) => {
) : null;
};
const ToolbarContainer = styled('div')({
const ToolbarContainer = styled('div')(({ theme }) => ({
position: 'absolute',
zIndex: 1,
display: 'flex',
alignItems: 'center',
padding: '0 12px',
borderRadius: '10px',
boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
boxShadow: theme.affine.shadows.shadowSxDownLg,
backgroundColor: '#fff',
});
}));

41
libs/components/editor-plugins/src/menu/reference-menu/Container.tsx
View File

@ -8,6 +8,7 @@ import {
commonListContainer,
} from '@toeverything/components/common';
import { domToRect } from '@toeverything/utils';
import { styled } from '@toeverything/components/ui';
import { QueryResult } from '../../search';
@ -152,13 +153,12 @@ export const ReferenceMenuContainer = ({
}, [hooks, handle_key_down]);
return isShow ? (
<div
<RootContainer
ref={menu_ref}
className={styles('rootContainer')}
onKeyDownCapture={handle_key_down}
style={style}
>
<div className={styles('contentContainer')}>
<ContentContainer>
<CommonList
items={
searchBlocks?.map(
@ -169,24 +169,23 @@ export const ReferenceMenuContainer = ({
currentItem={current_item}
setCurrentItem={set_current_item}
/>
</div>
</div>
</ContentContainer>
</RootContainer>
) : null;
};
const styles = style9.create({
rootContainer: {
position: 'fixed',
zIndex: 1,
maxHeight: 525,
borderRadius: '10px',
boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
backgroundColor: '#fff',
padding: '8px 4px',
},
contentContainer: {
display: 'flex',
overflow: 'hidden',
maxHeight: 493,
},
});
const RootContainer = styled('div')(({ theme }) => ({
position: 'fixed',
zIndex: 1,
maxHeight: '525px',
borderRadius: '10px',
boxShadow: theme.affine.shadows.shadowSxDownLg,
backgroundColor: '#fff',
padding: '8px 4px',
}));
const ContentContainer = styled('div')(({ theme }) => ({
display: 'flex',
overflow: 'hidden',
maxHeight: '493px',
}));

52
libs/components/editor-plugins/src/search/Search.tsx
View File

@ -7,6 +7,7 @@ import {
TransitionsModal,
MuiBox as Box,
MuiBox,
styled,
} from '@toeverything/components/ui';
import { Virgo, BlockEditor } from '@toeverything/framework/virgo';
import { throttle } from '@toeverything/utils';
@ -21,26 +22,6 @@ const styles = style9.create({
display: 'flex',
flexDirection: 'column',
},
search: {
margin: '0.5em',
backgroundColor: 'white',
boxShadow: '0px 1px 10px rgb(152 172 189 / 60%)',
padding: '16px 32px',
borderRadius: '10px',
},
result: {
margin: '0.5em',
backgroundColor: 'white',
boxShadow: '0px 1px 10px rgb(152 172 189 / 60%)',
padding: '16px 32px',
borderRadius: '10px',
transitionProperty: 'max-height',
transitionDuration: '300ms',
transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
transitionDelay: '0ms',
overflowX: 'hidden',
overflowY: 'hidden',
},
resultItem: {
width: '100%',
},
@ -96,15 +77,14 @@ export const Search = (props: SearchProps) => {
}}
>
<Box className={styles('wrapper')}>
<input
className={styles('search')}
<SearchInput
autoFocus
value={search}
onChange={e => set_search(e.target.value)}
/>
<MuiBox
<ResultContainer
sx={{ maxHeight: `${result.length * 28 + 32 + 20}px` }}
className={styles('result', {
className={styles({
resultHide: !result.length,
})}
>
@ -119,8 +99,30 @@ export const Search = (props: SearchProps) => {
}}
/>
))}
</MuiBox>
</ResultContainer>
</Box>
</TransitionsModal>
);
};
const SearchInput = styled('input')(({ theme }) => ({
margin: '0.5em',
backgroundColor: 'white',
boxShadow: theme.affine.shadows.shadowSxDownLg,
padding: '16px 32px',
borderRadius: '10px',
}));
const ResultContainer = styled(MuiBox)(({ theme }) => ({
margin: '0.5em',
backgroundColor: 'white',
boxShadow: theme.affine.shadows.shadowSxDownLg,
padding: '16px 32px',
borderRadius: '10px',
transitionProperty: 'max-height',
transitionDuration: '300ms',
transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
transitionDelay: '0ms',
overflowX: 'hidden',
overflowY: 'hidden',
}));

2
libs/components/layout/src/header/EditorBoardSwitcher/StatusIcon.tsx
View File

@ -20,7 +20,7 @@ const IconWrapper = styled('div')<Pick<StatusIconProps, 'mode'>>(
width: '20px',
height: '20px',
borderRadius: '5px',
boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
boxShadow: theme.affine.shadows.shadowSxDownLg,
color: theme.affine.palette.primary,
cursor: 'pointer',
backgroundColor: theme.affine.palette.white,

2
libs/components/ui/src/cascader/Cascader.tsx
View File

@ -133,7 +133,7 @@ export function Cascader(props: CascaderProps) {
const MenuPaper = styled('div')(({ theme }) => ({
fontFamily: 'PingFang SC',
background: '#FFF',
boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
boxShadow: theme.affine.shadows.shadowSxDownLg,
borderRadius: '10px 0px 10px 10px',
color: '#4C6275',
fontWeight: '400',

2
libs/components/ui/src/theme/theme.ts
View File

@ -225,7 +225,7 @@ export const Theme = {
},
shadows: {
none: 'none',
shadowSxDownLg: '0px 1px 10px rgba(152, 172, 189, 0.6)',
shadowSxDownLg: '0px 1px 5px rgba(152, 172, 189, 0.2)',
},
border: ['none'],
spacing: {