From 8bcc89f8fc1345e9c9aba6c11e3dc4971a8f5a47 Mon Sep 17 00:00:00 2001
From: JimmFly <447268514@qq.com>
Date: Tue, 9 Apr 2024 04:05:18 +0000
Subject: [PATCH] feat(core): add responsive styles to collection filter
 (#6486)

https://github.com/toeverything/AFFiNE/assets/102217452/caa4c09b-e1fd-4bd0-a504-535925607e2f
---
 .../components/page-list/filter/condition.tsx | 32 +++++++++--------
 .../filter/filter-tag-translation.tsx         | 10 +++++-
 .../components/page-list/filter/index.css.ts  | 25 +++++++++++++-
 .../page-list/filter/multi-select.css.ts      |  5 +++
 .../page-list/filter/multi-select.tsx         | 30 ++++++++++------
 .../view/edit-collection/rules-mode.tsx       | 34 ++++++++++++-------
 6 files changed, 97 insertions(+), 39 deletions(-)

diff --git a/packages/frontend/core/src/components/page-list/filter/condition.tsx b/packages/frontend/core/src/components/page-list/filter/condition.tsx
index 2ba089751..5987d6bdb 100644
--- a/packages/frontend/core/src/components/page-list/filter/condition.tsx
+++ b/packages/frontend/core/src/components/page-list/filter/condition.tsx
@@ -1,5 +1,6 @@
-import { Menu, MenuItem } from '@affine/component';
+import { Menu, MenuItem, Tooltip } from '@affine/component';
 import type { Filter, Literal, PropertiesMeta } from '@affine/env/filter';
+import clsx from 'clsx';
 import type { ReactNode } from 'react';
 import { useMemo } from 'react';
 
@@ -45,14 +46,7 @@ export const Condition = ({
     (({ ast }) => {
       const args = renderArgs(value, onChange, data.type);
       return (
-        <div
-          style={{
-            display: 'flex',
-            userSelect: 'none',
-            alignItems: 'center',
-            overflow: 'hidden',
-          }}
-        >
+        <div className={styles.filterContainerStyle}>
           <Menu
             items={
               <VariableSelect
@@ -62,10 +56,15 @@ export const Condition = ({
               />
             }
           >
-            <div data-testid="variable-name" className={styles.filterTypeStyle}>
-              <div className={styles.filterTypeIconStyle}>
-                {variableDefineMap[ast.left.name].icon}
-              </div>
+            <div
+              data-testid="variable-name"
+              className={clsx(styles.filterTypeStyle, styles.ellipsisTextStyle)}
+            >
+              <Tooltip content={ast.left.name}>
+                <div className={styles.filterTypeIconStyle}>
+                  {variableDefineMap[ast.left.name].icon}
+                </div>
+              </Tooltip>
               <FilterTag name={ast.left.name} />
             </div>
           </Menu>
@@ -78,7 +77,10 @@ export const Condition = ({
               />
             }
           >
-            <div className={styles.switchStyle} data-testid="filter-name">
+            <div
+              className={clsx(styles.switchStyle, styles.ellipsisTextStyle)}
+              data-testid="filter-name"
+            >
               <FilterTag name={ast.funcName} />
             </div>
           </Menu>
@@ -141,7 +143,7 @@ export const Arg = ({
   return (
     <div
       data-testid="filter-arg"
-      style={{ marginLeft: 4, fontWeight: 600, overflow: 'hidden' }}
+      className={clsx(styles.argStyle, styles.ellipsisTextStyle)}
     >
       {data.render({
         type,
diff --git a/packages/frontend/core/src/components/page-list/filter/filter-tag-translation.tsx b/packages/frontend/core/src/components/page-list/filter/filter-tag-translation.tsx
index a8158d8c5..53d3ede2f 100644
--- a/packages/frontend/core/src/components/page-list/filter/filter-tag-translation.tsx
+++ b/packages/frontend/core/src/components/page-list/filter/filter-tag-translation.tsx
@@ -1,5 +1,7 @@
+import { Tooltip } from '@affine/component';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 
+import { ellipsisTextStyle } from './index.css';
 type FilterTagProps = {
   name: string;
 };
@@ -49,5 +51,11 @@ const useFilterTag = ({ name }: FilterTagProps) => {
 export const FilterTag = ({ name }: FilterTagProps) => {
   const tag = useFilterTag({ name });
 
-  return <span data-testid={`filler-tag-${tag}`}>{tag}</span>;
+  return (
+    <Tooltip content={tag}>
+      <span className={ellipsisTextStyle} data-testid={`filler-tag-${tag}`}>
+        {tag}
+      </span>
+    </Tooltip>
+  );
 };
diff --git a/packages/frontend/core/src/components/page-list/filter/index.css.ts b/packages/frontend/core/src/components/page-list/filter/index.css.ts
index ce2bc06c4..e066412ac 100644
--- a/packages/frontend/core/src/components/page-list/filter/index.css.ts
+++ b/packages/frontend/core/src/components/page-list/filter/index.css.ts
@@ -1,5 +1,13 @@
 import { cssVar } from '@toeverything/theme';
 import { style } from '@vanilla-extract/css';
+
+export const filterContainerStyle = style({
+  display: 'flex',
+  userSelect: 'none',
+  alignItems: 'center',
+  overflow: 'hidden',
+});
+
 export const menuItemStyle = style({
   fontSize: cssVar('fontXs'),
 });
@@ -28,6 +36,7 @@ export const filterItemStyle = style({
   background: cssVar('white'),
   padding: '4px 8px',
   overflow: 'hidden',
+  justifyContent: 'space-between',
 });
 export const filterItemCloseStyle = style({
   display: 'flex',
@@ -53,12 +62,13 @@ export const switchStyle = style({
   transition: 'all 0.15s ease-in-out',
   display: 'flex',
   alignItems: 'center',
+  flex: '3 1 auto',
+  minWidth: '28px',
   ':hover': {
     cursor: 'pointer',
     background: cssVar('hoverColor'),
     borderRadius: '4px',
   },
-  whiteSpace: 'nowrap',
 });
 export const filterTypeStyle = style({
   fontSize: cssVar('fontSm'),
@@ -67,6 +77,7 @@ export const filterTypeStyle = style({
   padding: '2px 4px',
   transition: 'all 0.15s ease-in-out',
   marginRight: '6px',
+  flex: '1 0 auto',
   ':hover': {
     cursor: 'pointer',
     background: cssVar('hoverColor'),
@@ -81,3 +92,15 @@ export const filterTypeIconStyle = style({
   alignItems: 'center',
   color: cssVar('iconColor'),
 });
+
+export const argStyle = style({
+  marginLeft: 4,
+  fontWeight: 600,
+  flex: '1 0 auto',
+});
+
+export const ellipsisTextStyle = style({
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+});
diff --git a/packages/frontend/core/src/components/page-list/filter/multi-select.css.ts b/packages/frontend/core/src/components/page-list/filter/multi-select.css.ts
index 6eac71203..565e13069 100644
--- a/packages/frontend/core/src/components/page-list/filter/multi-select.css.ts
+++ b/packages/frontend/core/src/components/page-list/filter/multi-select.css.ts
@@ -16,6 +16,11 @@ export const text = style({
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
   maxWidth: 350,
+  selectors: {
+    '&.empty': {
+      color: 'var(--affine-text-secondary-color)',
+    },
+  },
 });
 export const optionList = style({
   display: 'flex',
diff --git a/packages/frontend/core/src/components/page-list/filter/multi-select.tsx b/packages/frontend/core/src/components/page-list/filter/multi-select.tsx
index d0eae8daa..45193791a 100644
--- a/packages/frontend/core/src/components/page-list/filter/multi-select.tsx
+++ b/packages/frontend/core/src/components/page-list/filter/multi-select.tsx
@@ -1,5 +1,6 @@
-import { Menu, MenuItem, Scrollable } from '@affine/component';
+import { Menu, MenuItem, Scrollable, Tooltip } from '@affine/component';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import clsx from 'clsx';
 import type { MouseEvent } from 'react';
 import { useMemo } from 'react';
 
@@ -23,6 +24,11 @@ export const MultiSelect = ({
     [options]
   );
 
+  const content = useMemo(
+    () => value.map(id => optionMap[id]?.label).join(', '),
+    [optionMap, value]
+  );
+
   const items = useMemo(() => {
     return (
       <Scrollable.Root>
@@ -67,15 +73,19 @@ export const MultiSelect = ({
   return (
     <Menu items={items}>
       <div className={styles.content}>
-        {value.length ? (
-          <div className={styles.text}>
-            {value.map(id => optionMap[id]?.label).join(', ')}
-          </div>
-        ) : (
-          <div style={{ color: 'var(--affine-text-secondary-color)' }}>
-            {t['com.affine.filter.empty-tag']()}
-          </div>
-        )}
+        <Tooltip
+          content={
+            content.length ? content : t['com.affine.filter.empty-tag']()
+          }
+        >
+          {value.length ? (
+            <div className={styles.text}>{content}</div>
+          ) : (
+            <div className={clsx(styles.text, 'empty')}>
+              {t['com.affine.filter.empty-tag']()}
+            </div>
+          )}
+        </Tooltip>
       </div>
     </Menu>
   );
diff --git a/packages/frontend/core/src/components/page-list/view/edit-collection/rules-mode.tsx b/packages/frontend/core/src/components/page-list/view/edit-collection/rules-mode.tsx
index 5a868bba8..73cff4cee 100644
--- a/packages/frontend/core/src/components/page-list/view/edit-collection/rules-mode.tsx
+++ b/packages/frontend/core/src/components/page-list/view/edit-collection/rules-mode.tsx
@@ -1,3 +1,4 @@
+import { Tooltip } from '@affine/component';
 import { FavoriteItemsAdapter } from '@affine/core/modules/workspace';
 import type { Collection } from '@affine/env/filter';
 import { Trans } from '@affine/i18n';
@@ -13,7 +14,7 @@ import type { DocMeta } from '@blocksuite/store';
 import { useLiveData, useService } from '@toeverything/infra';
 import clsx from 'clsx';
 import type { ReactNode } from 'react';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { FilterList } from '../../filter';
 import { List, ListScrollContainer } from '../../list';
@@ -96,6 +97,22 @@ export const RulesMode = ({
     },
     [allPageListConfig]
   );
+
+  const tips = useMemo(
+    () => (
+      <Trans
+        i18nKey="com.affine.editCollection.rules.tips"
+        values={{
+          highlight: t['com.affine.editCollection.rules.tips.highlight'](),
+        }}
+        components={{
+          2: <span className={styles.rulesTitleHighlight} />,
+        }}
+      />
+    ),
+    [t]
+  );
+
   return (
     <>
       {/*prevents modal autofocus to the first input*/}
@@ -104,17 +121,10 @@ export const RulesMode = ({
         style={{ width: 0, height: 0 }}
         onFocus={e => requestAnimationFrame(() => e.target.blur())}
       />
-      <div className={clsx(styles.rulesTitle, styles.ellipsis)}>
-        <Trans
-          i18nKey="com.affine.editCollection.rules.tips"
-          values={{
-            highlight: t['com.affine.editCollection.rules.tips.highlight'](),
-          }}
-          components={{
-            2: <span className={styles.rulesTitleHighlight} />,
-          }}
-        />
-      </div>
+      <Tooltip content={tips}>
+        <div className={clsx(styles.rulesTitle, styles.ellipsis)}>{tips}</div>
+      </Tooltip>
+
       <div className={styles.rulesContainer}>
         <div className={styles.rulesContainerLeft}>
           <div className={styles.rulesContainerLeftTab}>{switchMode}</div>