chore: update filter style (#2617)

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

apps/web/src/components/blocksuite/block-suite-page-list/index.tsx

@@ -110,7 +110,7 @@ export const BlockSuitePageList: React.FC<BlockSuitePageListProps> = ({
             return true;
           }
           return filterByFilterList(view.filterList, {
-            Favorite: !!pageMeta.favorite,
+            'Is Favourited': !!pageMeta.favorite,
             Created: pageMeta.createDate,
             Updated: pageMeta.updatedDate ?? pageMeta.createDate,
           });

apps/web/src/components/blocksuite/workspace-header/styles.css.ts

@@ -149,7 +149,24 @@ export const pageListTitleWrapper = style({
   justifyContent: 'center',
   alignItems: 'center',
 });
-
+export const allPageListTitleWrapper = style({
+  fontSize: 'var(--affine-font-base)',
+  color: 'var(--affine-text-primary-color)',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  '::after': {
+    content: '""',
+    display: 'block',
+    width: '100%',
+    height: '1px',
+    background: 'var(--affine-border-color)',
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    margin: '0 1px',
+  },
+});
 export const pageListTitleIcon = style({
   fontSize: '20px',
   height: '1em',

apps/web/src/components/filter-container.css.ts

@@ -0,0 +1,18 @@
+import { style } from '@vanilla-extract/css';
+
+export const filterContainerStyle = style({
+  padding: '12px',
+  display: 'flex',
+  position: 'relative',
+  '::after': {
+    content: '""',
+    display: 'block',
+    width: '100%',
+    height: '1px',
+    background: 'var(--affine-border-color)',
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    margin: '0 1px',
+  },
+});

apps/web/src/components/pure/workspace-title/index.tsx

@@ -1,11 +1,11 @@
 import { RadioButton, RadioButtonGroup } from '@affine/component';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { useSetAtom } from 'jotai';
-import { useAtom } from "jotai";
+import { useAtom } from 'jotai';
 import type { ReactNode } from 'react';
 import type React from 'react';
 
-import { openQuickSearchModalAtom, pageModeSelectAtom } from "../../../atoms";
+import { openQuickSearchModalAtom, pageModeSelectAtom } from '../../../atoms';
 import type { HeaderProps } from '../../blocksuite/workspace-header/header';
 import { Header } from '../../blocksuite/workspace-header/header';
 import * as styles from '../../blocksuite/workspace-header/styles.css';
@@ -49,7 +49,7 @@ export const WorkspaceModeFilterTab = ({ ...props }: WorkspaceTitleProps) => {
   };
   return (
     <Header {...props}>
-      <div className={styles.pageListTitleWrapper}>
+      <div className={styles.allPageListTitleWrapper}>
         <RadioButtonGroup
           defaultValue={value}
           onValueChange={handleValueChange}

apps/web/src/components/workspace-header.tsx

@@ -15,6 +15,7 @@ import type { ReactElement } from 'react';
 import { NIL } from 'uuid';
 
 import { BlockSuiteEditorHeader } from './blocksuite/workspace-header';
+import { filterContainerStyle } from './filter-container.css';
 import { WorkspaceModeFilterTab, WorkspaceTitle } from './pure/workspace-title';
 
 export function WorkspaceHeader({
@@ -25,12 +26,9 @@ export function WorkspaceHeader({
   const t = useAFFiNEI18N();
   if ('subPath' in currentEntry) {
     if (currentEntry.subPath === WorkspaceSubPath.ALL) {
-      const leftSlot = config.enableAllPageFilter && (
+      const leftSlot = <ViewList setting={setting}></ViewList>;
-        <ViewList setting={setting}></ViewList>
+      const filterContainer = setting.currentView.filterList.length > 0 && (
-      );
+        <div className={filterContainerStyle}>
-      const filterContainer = config.enableAllPageFilter &&
-        setting.currentView.filterList.length > 0 && (
-          <div style={{ padding: 12, display: 'flex' }}>
           <div style={{ flex: 1 }}>
             <FilterList
               value={setting.currentView.filterList}
@@ -42,6 +40,7 @@ export function WorkspaceHeader({
               }}
             />
           </div>
+          {config.enableAllPageFilter && (
             <div>
               {setting.currentView.id !== NIL ||
               (setting.currentView.id === NIL &&
@@ -56,6 +55,7 @@ export function WorkspaceHeader({
                 </Button>
               )}
             </div>
+          )}
         </div>
       );
       return (

packages/component/src/components/app-sidebar/sidebar-header/sidebar-switch.tsx

@@ -1,8 +1,8 @@
-import { IconButton, Tooltip } from '@affine/component';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { SidebarIcon } from '@blocksuite/icons';
 import { useAtom } from 'jotai';
 
+import { IconButton, Tooltip } from '../../../';
 import { sidebarButtonStyle } from '../index.css';
 import { appSidebarOpenAtom } from '../index.jotai';
 

packages/component/src/components/page-list/filter/filter-list.tsx

@@ -1,8 +1,8 @@
 import { Menu } from '../../..';
 import { Condition } from './condition';
+import * as styles from './index.css';
 import type { Filter } from './vars';
 import { CreateFilterMenu } from './vars';
-
 export const FilterList = ({
   value,
   onChange,
@@ -14,17 +14,7 @@ export const FilterList = ({
     <div style={{ display: 'flex', flexWrap: 'wrap' }}>
       {value.map((filter, i) => {
         return (
-          <div
+          <div className={styles.filterItemStyle} key={i}>
-            style={{
-              display: 'flex',
-              border: '1px solid gray',
-              borderRadius: 4,
-              padding: '2px 6px',
-              margin: 4,
-              backgroundColor: 'white',
-            }}
-            key={i}
-          >
             <Condition
               value={filter}
               onChange={filter => {

packages/component/src/components/page-list/filter/index.css.ts

@@ -0,0 +1,33 @@
+import { style } from '@vanilla-extract/css';
+
+export const menuItemStyle = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'flex-start',
+  padding: '0px 24px 0px 8px',
+});
+export const variableSelectTitleStyle = style({
+  marginLeft: '12px',
+  marginTop: '10px',
+  fontSize: 'var(--affine-font-xs)',
+  color: 'var(--affine-text-secondary-color)',
+});
+export const variableSelectDividerStyle = style({
+  marginTop: '2px',
+  marginBottom: '2px',
+  marginLeft: '12px',
+  marginRight: '8px',
+  height: '1px',
+  background: 'var(--affine-border-color)',
+});
+export const menuItemTextStyle = style({
+  fontSize: 'var(--affine-font-sm)',
+});
+export const filterItemStyle = style({
+  display: 'flex',
+  border: '1px solid var(--affine-border-color)',
+  borderRadius: '8px',
+  padding: '2px 6px',
+  margin: 4,
+  background: 'var(--affine-white)',
+});

packages/component/src/components/page-list/filter/vars.tsx

@@ -1,7 +1,9 @@
+import { DateTimeIcon, FavoritedIcon } from '@blocksuite/icons';
 import dayjs from 'dayjs';
-import type { ReactNode } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 
 import { MenuItem } from '../../../ui/menu';
+import * as styles from './index.css';
 import { tBoolean, tDate } from './logical/custom-type';
 import { Matcher } from './logical/matcher';
 import type { TFunction, TType } from './logical/typesystem';
@@ -36,16 +38,20 @@ export type Literal = {
 export type FilterVariable = {
   name: keyof VariableMap;
   type: TType;
+  icon: ReactElement;
 };
 export const variableDefineMap = {
   Created: {
     type: tDate.create(),
+    icon: <DateTimeIcon />,
   },
   Updated: {
     type: tDate.create(),
+    icon: <DateTimeIcon />,
   },
-  Favorite: {
+  'Is Favourited': {
     type: tBoolean.create(),
+    icon: <FavoritedIcon />,
   },
   // Imported: {
   //   type: tBoolean.create(),
@@ -61,6 +67,7 @@ export const vars: FilterVariable[] = Object.entries(variableDefineMap).map(
   ([key, value]) => ({
     name: key as keyof VariableMap,
     type: value.type,
+    icon: value.icon,
   })
 );
 
@@ -102,16 +109,20 @@ export const VariableSelect = ({
 }) => {
   return (
     <div>
+      <div className={styles.variableSelectTitleStyle}>Filter</div>
+      <div className={styles.variableSelectDividerStyle}></div>
       {vars
         // .filter(v => !selected.find(filter => filter.left.name === v.name))
         .map(v => (
           <MenuItem
+            icon={v.icon}
             key={v.name}
             onClick={() => {
               onSelect(createDefaultFilter(v));
             }}
+            className={styles.menuItemStyle}
           >
-            {v.name}
+            <div className={styles.menuItemTextStyle}>{v.name}</div>
           </MenuItem>
         ))}
     </div>

packages/component/src/components/page-list/styles.ts

@@ -4,7 +4,7 @@ import { Content, displayFlex, styled } from '../../';
 export const StyledTableContainer = styled('div')(({ theme }) => {
   return {
     height: 'calc(100vh - 52px)',
-    padding: '52px 32px',
+    padding: '18px 32px 52px 32px',
     maxWidth: '100%',
     overflowY: 'auto',
     [theme.breakpoints.down('sm')]: {

packages/component/src/components/page-list/view/view-list.css.ts

@@ -2,6 +2,30 @@ import { style } from '@vanilla-extract/css';
 
 export const filterButton = style({
   borderRadius: '8px',
-  padding: '2px 8px 2px 4px',
+  height: '100%',
-  margin: '20px',
+  padding: '4px 8px',
+  fontSize: 'var(--affine-font-xs)',
+  background: 'var(--affine-hover-color)',
+  color: 'var(--affine-text-secondary-color)',
+  border: '1px solid var(--affine-border-color)',
+  transition: 'margin-left 0.2s ease-in-out',
+  ':hover': {
+    borderColor: 'var(--affine-border-color)',
+  },
+});
+export const filterButtonCollapse = style({
+  marginLeft: '20px',
+});
+export const viewDivider = style({
+  '::after': {
+    content: '""',
+    display: 'block',
+    width: '100%',
+    height: '1px',
+    background: 'var(--affine-border-color)',
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    margin: '0 1px',
+  },
 });

packages/component/src/components/page-list/view/view-list.tsx

@@ -1,16 +1,19 @@
 import { FilteredIcon } from '@blocksuite/icons';
+import clsx from 'clsx';
+import { useAtom } from 'jotai';
 
 import { Button, MenuItem } from '../../..';
 import Menu from '../../../ui/menu/menu';
+import { appSidebarOpenAtom } from '../../app-sidebar';
 import { CreateFilterMenu } from '../filter/vars';
 import type { useAllPageSetting } from '../use-all-page-setting';
-import { filterButton } from './view-list.css';
+import * as styles from './view-list.css';
-
 export const ViewList = ({
   setting,
 }: {
   setting: ReturnType<typeof useAllPageSetting>;
 }) => {
+  const [open] = useAtom(appSidebarOpenAtom);
   return (
     <div style={{ marginLeft: 4, display: 'flex', alignItems: 'center' }}>
       {setting.savedViews.length > 0 && (
@@ -38,6 +41,7 @@ export const ViewList = ({
       )}
       <Menu
         trigger="click"
+        placement="bottom-start"
         content={
           <CreateFilterMenu
             value={setting.currentView.filterList}
@@ -50,7 +54,14 @@ export const ViewList = ({
           />
         }
       >
-        <Button icon={<FilteredIcon />} className={filterButton}>
+        <Button
+          icon={<FilteredIcon />}
+          className={clsx(styles.filterButton, {
+            [styles.filterButtonCollapse]: !open,
+          })}
+          size="small"
+          hoverColor="var(--affine-icon-color)"
+        >
           Filter
         </Button>
       </Menu>

packages/component/src/ui/shared/container.tsx

@@ -31,7 +31,7 @@ export const placementToContainerDirection: Record<
   'right-start': 'left-top',
   'right-end': 'left-bottom',
   bottom: 'none',
-  'bottom-start': 'left-top',
+  'bottom-start': 'none',
   'bottom-end': 'none',
   left: 'none',
   'left-start': 'right-top',