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

feat: modify style

Browse Source
This commit is contained in:
QiShaoXuan
2022-10-18 00:28:39 +08:00
parent 249b5ab0f1
commit d7c6f7e8d5
20 changed files with 413 additions and 313 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/app/src/components/Header/icons.tsx
+11 -102
View File
@@ -1,24 +1,17 @@
import type { DOMAttributes, CSSProperties } from 'react';
type IconProps = {
color?: string;
style?: CSSProperties;
} & DOMAttributes<SVGElement>;
export const LogoIcon = ({
color,
style: propsStyle = {},
...props
}: IconProps) => {
const style = { fill: color, ...propsStyle };
export const LogoIcon = ({ style = {}, ...props }: IconProps) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="24"
height="24"
{...props}
fill="currentColor"
style={style}
{...props}
>
<path
fillRule="evenodd"
@@ -29,51 +22,16 @@ export const LogoIcon = ({
);
};
export const EdgelessIcon = ({
color,
style: propsStyle = {},
...props
}: IconProps) => {
const style = { fill: color, ...propsStyle };
export const MoonIcon = ({ style = {}, ...props }: IconProps) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="24"
height="24"
{...props}
fill="currentColor"
style={style}
>
<path
fillRule="evenodd"
d="M12 17.4a5.4 5.4 0 1 0 0-10.8 5.4 5.4 0 0 0 0 10.8Zm7-5.4a7 7 0 1 1-14 0 7 7 0 0 1 14 0Z"
clipRule="evenodd"
/>
<path
fillRule="evenodd"
d="M18.565 8a.8.8 0 0 1 .8-.8c.797 0 1.511.07 2.07.24.5.15 1.172.477 1.334 1.202v.004c.089.405-.026.776-.186 1.065a3.165 3.165 0 0 1-.652.782c-.52.471-1.265.947-2.15 1.407-1.783.927-4.28 1.869-7.077 2.62-2.796.752-5.409 1.184-7.381 1.266-.98.04-1.848-.003-2.516-.162-.333-.079-.662-.196-.937-.38-.282-.19-.547-.48-.639-.892v-.002c-.138-.63.202-1.173.518-1.532.343-.39.836-.768 1.413-1.129a.8.8 0 0 1 .848 1.357c-.515.322-.862.605-1.06.83a1.524 1.524 0 0 0-.078.096c.07.03.169.064.304.095.461.11 1.163.158 2.08.12 1.822-.075 4.314-.481 7.033-1.212 2.718-.73 5.1-1.635 6.753-2.494.832-.433 1.441-.835 1.814-1.173.127-.115.213-.21.268-.284a1.67 1.67 0 0 0-.153-.053c-.342-.104-.878-.171-1.606-.171a.8.8 0 0 1-.8-.8Zm2.692 1.097-.004-.004a.026.026 0 0 1 .004.004Zm-18.46 5 .001-.002v.002Z"
clipRule="evenodd"
/>
</svg>
);
};
export const MoonIcon = ({
color,
style: propsStyle = {},
...props
}: IconProps) => {
const style = { fill: color, ...propsStyle };
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="24"
height="24"
{...props}
style={style}
>
<path
fillRule="evenodd"
@@ -84,52 +42,17 @@ export const MoonIcon = ({
);
};
export const PaperIcon = ({
color,
style: propsStyle = {},
...props
}: IconProps) => {
const style = { fill: color, ...propsStyle };
export const SunIcon = ({ style = {}, ...props }: IconProps) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="24"
height="24"
{...props}
fill="currentColor"
style={style}
>
<path
fillRule="evenodd"
d="M17 9.8H7V8.2h10v1.6ZM12 12.8H7v-1.6h5v1.6Z"
clipRule="evenodd"
/>
<path d="m14 19 7-7h-5a2 2 0 0 0-2 2v5Z" />
<path
fillRule="evenodd"
d="M5 6.6h14c.22 0 .4.18.4.4v6.6L21 12V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h9l1.6-1.6H5a.4.4 0 0 1-.4-.4V7c0-.22.18-.4.4-.4Z"
clipRule="evenodd"
/>
</svg>
);
};
export const SunIcon = ({
color,
style: propsStyle = {},
...props
}: IconProps) => {
const style = { fill: color, ...propsStyle };
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="24"
height="24"
{...props}
style={style}
>
<path
fillRule="evenodd"
@@ -140,21 +63,14 @@ export const SunIcon = ({
);
};
export const MoreIcon = ({
color,
style: propsStyle = {},
...props
}: IconProps) => {
const style = { fill: color, ...propsStyle, transform: 'rotate(90deg)' };
export const MoreIcon = ({ style = {}, ...props }: IconProps) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="24"
height="24"
{...props}
style={style}
fill="currentColor"
>
<circle cx="12" cy="5.5" r="1.5" />
<circle cx="12" cy="12" r="1.5" />
@@ -162,26 +78,19 @@ export const MoreIcon = ({
</svg>
);
};
export const ExportIcon = ({
color,
style: propsStyle = {},
...props
}: IconProps) => {
const style = { fill: color, ...propsStyle };
export const ExportIcon = ({ style = {}, ...props }: IconProps) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="24"
height="24"
{...props}
style={style}
fill="currentColor"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M12 3.19995C12.2121 3.19995 12.4156 3.28424 12.5656 3.43427L16.5656 7.43427L15.4343 8.56564L12.8 5.93132V14H11.2V5.93132L8.56564 8.56564L7.43427 7.43427L11.4343 3.43427C11.5843 3.28424 11.7878 3.19995 12 3.19995ZM3.79995 12V16.7992C3.79995 17.3724 3.80057 17.7543 3.82454 18.0476C3.84775 18.3317 3.88879 18.4616 3.93074 18.544C4.04579 18.7698 4.22937 18.9533 4.45516 19.0684C4.5375 19.1103 4.66747 19.1514 4.9515 19.1746C5.24487 19.1985 5.6267 19.1992 6.19995 19.1992H17.8C18.3732 19.1992 18.755 19.1985 19.0484 19.1746C19.3324 19.1514 19.4624 19.1103 19.5447 19.0684C19.7705 18.9533 19.9541 18.7698 20.0692 18.544C20.1111 18.4616 20.1522 18.3317 20.1754 18.0476C20.1993 17.7543 20.2 17.3724 20.2 16.7992V12H21.8V16.8314C21.8 17.364 21.8 17.8116 21.77 18.1779C21.7388 18.5609 21.6708 18.9249 21.4948 19.2703C21.2263 19.7972 20.798 20.2255 20.2711 20.494C19.9256 20.67 19.5617 20.738 19.1787 20.7693C18.8124 20.7992 18.3648 20.7992 17.8322 20.7992H6.16775C5.63509 20.7992 5.18749 20.7992 4.82121 20.7693C4.43823 20.738 4.07426 20.67 3.72878 20.494C3.20193 20.2255 2.77358 19.7972 2.50513 19.2703C2.3291 18.9249 2.26115 18.5609 2.22986 18.1779C2.19993 17.8116 2.19994 17.364 2.19995 16.8313L2.19995 12H3.79995Z"
fill="#9096A5"
/>
</svg>
);
packages/app/src/components/Header/index.tsx
+27 -63
View File
@@ -1,8 +1,6 @@
import React, { useEffect, useState } from 'react';
import {
LogoIcon,
PaperIcon,
EdgelessIcon,
SunIcon,
MoonIcon,
MoreIcon,
@@ -13,56 +11,14 @@ import {
StyledTitle,
StyledTitleWrapper,
StyledLogo,
StyledModeSwitch,
StyledHeaderRightSide,
StyledMoreMenuItem,
IconButton,
} from './styles';
import { Popover } from '@/components/popover';
import { useTheme } from '@/styles';
import { useEditor } from '@/components/editor-provider';
import { AnimateRadio } from '@/components/animate-radio';
const PaperItem = ({ active }: { active?: boolean }) => {
const {
theme: {
colors: { highlight, disabled },
},
} = useTheme();
return <PaperIcon color={active ? highlight : disabled} />;
};
const EdgelessItem = ({ active }: { active?: boolean }) => {
const {
theme: {
colors: { highlight, disabled },
},
} = useTheme();
return <EdgelessIcon color={active ? highlight : disabled} />;
};
const EditorModeSwitch = ({ isHover }: { isHover: boolean }) => {
const handleModeSwitch = (mode: 'page' | 'edgeless') => {
const event = new CustomEvent('affine.switch-mode', { detail: mode });
window.dispatchEvent(event);
};
return (
<AnimateRadio
isHover={isHover}
labelLeft="Paper"
iconLeft={<PaperItem />}
labelRight="Edgeless"
iconRight={<EdgelessItem />}
style={{
marginRight: '12px',
}}
initialValue="left"
onChange={value => {
handleModeSwitch(value === 'left' ? 'page' : 'edgeless');
}}
/>
);
};
import EditorModeSwitch from '@/components/editor-mode-switch';
const DarkModeSwitch = () => {
const { changeMode, mode } = useTheme();
@@ -71,16 +27,14 @@ const DarkModeSwitch = () => {
<>
{mode === 'dark' ? (
<SunIcon
color="#9096A5"
style={{ cursor: 'pointer' }}
style={{ cursor: 'pointer', color: '#9096A5' }}
onClick={() => {
changeMode('light');
}}
></SunIcon>
) : (
<MoonIcon
color="#9096A5"
style={{ cursor: 'pointer' }}
style={{ cursor: 'pointer', color: '#9096A5' }}
onClick={() => {
changeMode('dark');
}}
@@ -130,26 +84,36 @@ export const Header = () => {
}, [editor]);
return (
<StyledHeader
onMouseEnter={() => {
setIsHover(true);
}}
onMouseLeave={() => {
setIsHover(false);
}}
>
<StyledHeader>
<StyledLogo>
<LogoIcon color={'#6880FF'} onClick={() => {}} />
<LogoIcon style={{ color: '#6880FF' }} onClick={() => {}} />
</StyledLogo>
<StyledTitle>
<EditorModeSwitch isHover={isHover} />
<StyledTitle
onMouseEnter={() => {
setIsHover(true);
}}
onMouseLeave={() => {
setIsHover(false);
}}
>
<EditorModeSwitch
isHover={isHover}
style={{
marginRight: '12px',
}}
/>
<StyledTitleWrapper>{title}</StyledTitleWrapper>
</StyledTitle>
<StyledHeaderRightSide>
<DarkModeSwitch />
<Popover popoverContent={<PopoverContent />}>
<MoreIcon color="#9096A5" style={{ marginLeft: '20px' }} />
<Popover
popoverContent={<PopoverContent />}
style={{ marginLeft: '20px' }}
>
<IconButton>
<MoreIcon />
</IconButton>
</Popover>
</StyledHeaderRightSide>
</StyledHeader>
packages/app/src/components/Header/styles.ts
+17
View File
@@ -71,3 +71,20 @@ export const StyledMoreMenuItem = styled('div')({
},
},
});
export const IconButton = styled('div')(({ theme }) => {
return {
width: '32px',
height: '32px',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
color: theme.colors.disabled,
background: 'transparent',
borderRadius: '5px',
':hover': {
color: theme.colors.highlight,
background: '#F1F3FF',
},
};
});