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

Co-authored-by: Himself65 <himself65@outlook.com>

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

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

apps/web/src/components/affine/pinboard/styles.ts

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

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 <StyledCollapseItem disable={true}>{t('No item')}</StyledCollapseItem>;
+  return (
+    <StyledCollapseItem disable={true} textWrap={true}>
+      {t('Favorite pages for easy access')}
+    </StyledCollapseItem>
+  );
 };
 
 export default EmptyItem;

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

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

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

@@ -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
       ? {}

packages/i18n/src/resources/en.json

@@ -212,6 +212,8 @@
   "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.",
+  "Organize pages to build knowledge": "Organize pages to build knowledge",
+  "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</1>.",