feat(core): add responsive styles to collection filter (#6486)

https://github.com/toeverything/AFFiNE/assets/102217452/caa4c09b-e1fd-4bd0-a504-535925607e2f
2026-02-22 00:37:05 +08:00 · 2024-04-09 04:05:18 +00:00
parent 891ab6ab51
commit 8bcc89f8fc
6 changed files with 97 additions and 39 deletions
--- 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,
--- 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>
+  );
 };
--- 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',
+});
--- 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',
--- 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>
  );
--- 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>