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

feat: modify empty text & style of favorite & pinboard (#1977)

Browse Source 
Co-authored-by: Himself65 <himself65@outlook.com>
This commit is contained in:
Qi
2023-04-17 13:41:07 +08:00
committed by GitHub
parent f534e4a6dd
commit 19894aad5a
6 changed files with 76 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/web/src/components/affine/pinboard/pinboard-render/EmptyItem.tsx
View File

@@ -5,8 +5,8 @@ import { StyledPinboard } from '../styles';
export const EmptyItem = () => {
const { t } = useTranslation();
return (
<StyledPinboard disable={true} style={{ paddingLeft: '32px' }}>
{t('No item')}
<StyledPinboard disable={true} textWrap={true}>
{t('Organize pages to build knowledge')}
</StyledPinboard>
);
};

92
apps/web/src/components/affine/pinboard/styles.ts
View File

@@ -38,44 +38,62 @@ export const StyledPinboard = styled('div')<{
active?: boolean;
isOver?: boolean;
disableCollapse?: boolean;
}>(({ disableCollapse, disable = false, active = false, theme, isOver }) => {
return {
width: '100%',
height: '32px',
borderRadius: '8px',
...displayFlex('flex-start', 'center'),
padding: disableCollapse ? '0 5px' : '0 2px 0 16px',
position: 'relative',
color: disable
? theme.colors.disableColor
: active
? theme.colors.primaryColor
: theme.colors.textColor,
cursor: disable ? 'not-allowed' : 'pointer',
background: isOver ? alpha(theme.colors.primaryColor, 0.06) : '',
fontSize: theme.font.base,
userSelect: 'none',
span: {
flexGrow: '1',
textAlign: 'left',
...textEllipsis(1),
},
'.path-icon': {
fontSize: '16px',
transform: 'translateY(-4px)',
},
'.mode-icon': {
fontSize: '20px',
marginRight: '8px',
flexShrink: '0',
color: active ? theme.colors.primaryColor : theme.colors.iconColor,
},
textWrap?: boolean;
}>(
({
disableCollapse,
disable = false,
active = false,
theme,
isOver,
textWrap = false,
}) => {
return {
width: '100%',
lineHeight: '1.5',
minHeight: '32px',
borderRadius: '8px',
...displayFlex('flex-start', 'center'),
padding: disableCollapse ? '0 5px' : '0 2px 0 16px',
position: 'relative',
color: disable
? theme.colors.disableColor
: active
? theme.colors.primaryColor
: theme.colors.textColor,
cursor: disable ? 'not-allowed' : 'pointer',
background: isOver ? alpha(theme.colors.primaryColor, 0.06) : '',
fontSize: theme.font.base,
userSelect: 'none',
...(textWrap
? {
wordBreak: 'break-all',
whiteSpace: 'pre-wrap',
}
: {}),
':hover': {
backgroundColor: disable ? '' : theme.colors.hoverBackground,
},
};
});
span: {
flexGrow: '1',
textAlign: 'left',
...textEllipsis(1),
},
'.path-icon': {
fontSize: '16px',
transform: 'translateY(-4px)',
},
'.mode-icon': {
fontSize: '20px',
marginRight: '8px',
flexShrink: '0',
color: active ? theme.colors.primaryColor : theme.colors.iconColor,
},
':hover': {
backgroundColor: disable ? '' : theme.colors.hoverBackground,
},
};
}
);
export const StyledOperationButton = styled(IconButton, {
shouldForwardProp: prop => {

6
apps/web/src/components/pure/workspace-slider-bar/favorite/empty-item.tsx
View File

@@ -4,7 +4,11 @@ import { StyledCollapseItem } from '../shared-styles';
export const EmptyItem = () => {
const { t } = useTranslation();
return <StyledCollapseItem disable={true}>{t('No item')}</StyledCollapseItem>;
return (
<StyledCollapseItem disable={true} textWrap={true}>
{t('Favorite pages for easy access')}
</StyledCollapseItem>
);
};
export default EmptyItem;

2
apps/web/src/components/pure/workspace-slider-bar/favorite/favorite-list.tsx
View File

@@ -54,7 +54,7 @@ export const FavoriteList = ({
) : (
<PageIcon />
)}
{pageMeta.title || 'Untitled'}
<span>{pageMeta.title || 'Untitled'}</span>
</StyledCollapseItem>
</div>
);

18
apps/web/src/components/pure/workspace-slider-bar/shared-styles.ts
View File

@@ -70,13 +70,15 @@ export const StyledCollapseItem = styled('div')<{
disable?: boolean;
active?: boolean;
isOver?: boolean;
}>(({ disable = false, active = false, theme, isOver }) => {
textWrap?: boolean;
}>(({ disable = false, active = false, theme, isOver, textWrap = false }) => {
return {
width: '100%',
height: '32px',
lineHeight: '1.5',
minHeight: '32px',
borderRadius: '8px',
...displayFlex('flex-start', 'center'),
padding: '0 2px 0 16px',
paddingRight: '2px',
position: 'relative',
color: disable
? theme.colors.disableColor
@@ -86,7 +88,12 @@ export const StyledCollapseItem = styled('div')<{
cursor: disable ? 'not-allowed' : 'pointer',
background: isOver ? alpha(theme.colors.primaryColor, 0.06) : '',
userSelect: 'none',
...(textWrap
? {
wordBreak: 'break-all',
whiteSpace: 'pre-wrap',
}
: {}),
span: {
flexGrow: '1',
textAlign: 'left',
@@ -98,9 +105,6 @@ export const StyledCollapseItem = styled('div')<{
flexShrink: '0',
color: active ? theme.colors.primaryColor : theme.colors.iconColor,
},
'.operation-button': {
visibility: 'hidden',
},
':hover': disable
? {}