From 696d0abdbe43ed15abcf3ae50afe85d730d9e93b Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Mon, 17 Apr 2023 11:40:42 +0800 Subject: [PATCH 1/3] feat: modify empty text & style of favorite & pinboard --- .../pinboard/pinboard-render/EmptyItem.tsx | 8 +- .../src/components/affine/pinboard/styles.ts | 92 +++++++++++-------- .../favorite/empty-item.tsx | 6 +- .../favorite/favorite-list.tsx | 2 +- .../workspace-slider-bar/shared-styles.ts | 18 ++-- packages/i18n/src/resources/en.json | 4 +- 6 files changed, 81 insertions(+), 49 deletions(-) diff --git a/apps/web/src/components/affine/pinboard/pinboard-render/EmptyItem.tsx b/apps/web/src/components/affine/pinboard/pinboard-render/EmptyItem.tsx index 6d8e45ab850fd..1ef38617d4d67 100644 --- a/apps/web/src/components/affine/pinboard/pinboard-render/EmptyItem.tsx +++ b/apps/web/src/components/affine/pinboard/pinboard-render/EmptyItem.tsx @@ -5,8 +5,12 @@ import { StyledPinboard } from '../styles'; export const EmptyItem = () => { const { t } = useTranslation(); return ( - - {t('No item')} + + {t('Organize pages to build knowledge')} ); }; diff --git a/apps/web/src/components/affine/pinboard/styles.ts b/apps/web/src/components/affine/pinboard/styles.ts index b8443a383802f..3512db185e779 100644 --- a/apps/web/src/components/affine/pinboard/styles.ts +++ b/apps/web/src/components/affine/pinboard/styles.ts @@ -33,44 +33,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 => { diff --git a/apps/web/src/components/pure/workspace-slider-bar/favorite/empty-item.tsx b/apps/web/src/components/pure/workspace-slider-bar/favorite/empty-item.tsx index eccc4f49e6754..abd3b6c676449 100644 --- a/apps/web/src/components/pure/workspace-slider-bar/favorite/empty-item.tsx +++ b/apps/web/src/components/pure/workspace-slider-bar/favorite/empty-item.tsx @@ -4,7 +4,11 @@ import { StyledCollapseItem } from '../shared-styles'; export const EmptyItem = () => { const { t } = useTranslation(); - return {t('No item')}; + return ( + + {t('Favorite pages for easy access')} + + ); }; export default EmptyItem; diff --git a/apps/web/src/components/pure/workspace-slider-bar/favorite/favorite-list.tsx b/apps/web/src/components/pure/workspace-slider-bar/favorite/favorite-list.tsx index 7236ee254ca71..3a6f2d607df25 100644 --- a/apps/web/src/components/pure/workspace-slider-bar/favorite/favorite-list.tsx +++ b/apps/web/src/components/pure/workspace-slider-bar/favorite/favorite-list.tsx @@ -54,7 +54,7 @@ export const FavoriteList = ({ ) : ( )} - {pageMeta.title || 'Untitled'} + {pageMeta.title || 'Untitled'} ); diff --git a/apps/web/src/components/pure/workspace-slider-bar/shared-styles.ts b/apps/web/src/components/pure/workspace-slider-bar/shared-styles.ts index 7f79450a9b6f5..3aa995499b7c7 100644 --- a/apps/web/src/components/pure/workspace-slider-bar/shared-styles.ts +++ b/apps/web/src/components/pure/workspace-slider-bar/shared-styles.ts @@ -64,13 +64,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 @@ -80,7 +82,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', @@ -92,9 +99,6 @@ export const StyledCollapseItem = styled('div')<{ flexShrink: '0', color: active ? theme.colors.primaryColor : theme.colors.iconColor, }, - '.operation-button': { - visibility: 'hidden', - }, ':hover': disable ? {} diff --git a/packages/i18n/src/resources/en.json b/packages/i18n/src/resources/en.json index f4ae78c87335e..eb1b81775cec4 100644 --- a/packages/i18n/src/resources/en.json +++ b/packages/i18n/src/resources/en.json @@ -210,5 +210,7 @@ "Disable": "Disable", "Disable Public Link ?": "Disable Public Link ?", "Disable Public Link Description": "Disabling this public link will prevent anyone with the link from accessing this page.", - "Export Shared Pages Description": "Download a static copy of your page to share with others." + "Export Shared Pages Description": "Download a static copy of your page to share with others.", + "Organize pages to build knowledge": "Organize pages to build knowledge", + "Favorite pages for easy access": "Favorite pages for easy access" } From 9bcb832b39755941fbb025a0bd5fa63aaf5d00d1 Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Mon, 17 Apr 2023 11:43:53 +0800 Subject: [PATCH 2/3] feat: modify style --- .../affine/pinboard/pinboard-render/EmptyItem.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/apps/web/src/components/affine/pinboard/pinboard-render/EmptyItem.tsx b/apps/web/src/components/affine/pinboard/pinboard-render/EmptyItem.tsx index 1ef38617d4d67..f898be113447f 100644 --- a/apps/web/src/components/affine/pinboard/pinboard-render/EmptyItem.tsx +++ b/apps/web/src/components/affine/pinboard/pinboard-render/EmptyItem.tsx @@ -5,11 +5,7 @@ import { StyledPinboard } from '../styles'; export const EmptyItem = () => { const { t } = useTranslation(); return ( - + {t('Organize pages to build knowledge')} ); From cae955b9dd4b8310e7780e1364eced255c7aa522 Mon Sep 17 00:00:00 2001 From: Himself65 Date: Sun, 16 Apr 2023 23:27:03 -0500 Subject: [PATCH 3/3] Update packages/i18n/src/resources/en.json --- packages/i18n/src/resources/en.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/i18n/src/resources/en.json b/packages/i18n/src/resources/en.json index b0b7c7f7f0707..286036d9aa4b5 100644 --- a/packages/i18n/src/resources/en.json +++ b/packages/i18n/src/resources/en.json @@ -213,7 +213,7 @@ "Disable Public Link Description": "Disabling this public link will prevent anyone with the link from accessing this page.", "Export Shared Pages Description": "Download a static copy of your page to share with others.", "Organize pages to build knowledge": "Organize pages to build knowledge", - "Favorite pages for easy access": "Favorite pages for easy access" + "Favorite pages for easy access": "Favorite pages for easy access", "Shared Pages Description": "Sharing page publicly requires AFFiNE Cloud service.", "Create Shared Link Description": "Create a link you can easily share with anyone.", "Shared Pages In Public Workspace Description": "The entire Workspace is published on the web and can be edited via <1>Workspace Settings.",