fix: adjust some styles (#2438)

2024-11-28 04:53:53 +03:00 · 2023-05-18 17:24:23 +08:00 · 2023-05-18 17:24:23 +08:00 · b2556db33b
commit b2556db33b
parent 89310c9b97
13 changed files with 110 additions and 40 deletions
--- a/apps/web/src/components/pure/workspace-list-modal/index.tsx
+++ b/apps/web/src/components/pure/workspace-list-modal/index.tsx
@ -148,7 +148,7 @@ export const WorkspaceListModal = ({
          {environment.isDesktop && (
            <Menu
              placement="auto"
-              trigger={['click', 'hover']}
+              trigger={['click']}
              zIndex={1000}
              content={
                <StyledCreateWorkspaceCardPillContainer>
--- 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
@ -10,6 +10,7 @@ import { useMemo, useState } from 'react';
 import { workspacePreferredModeAtom } from '../../../../atoms';
 import type { FavoriteListProps } from '../index';
 import EmptyItem from './empty-item';
+import * as styles from './styles.css';

 interface FavoriteMenuItemProps {
  workspace: Workspace;
@ -33,16 +34,13 @@ function FavoriteMenuItem({
    return [...new Set(references.filter(ref => !parentIds.has(ref)))];
  }, [references, parentIds]);
  const [collapsed, setCollapsed] = useState(true);
-  const collapsible = referencesToShow.length > 0 && parentIds.size === 0;
+  const collapsible = referencesToShow.length > 0;
  const showReferences = collapsible ? !collapsed : referencesToShow.length > 0;
  const nestedItem = parentIds.size > 0;
+  const untitled = !metaMapping[pageId]?.title;
  return (
-    <>
+    <div className={styles.favItemWrapper} data-nested={nestedItem}>
      <MenuLinkItem
-        style={{
-          marginLeft: nestedItem ? '12px' : undefined,
-          width: nestedItem ? 'calc(100% - 12px)' : undefined,
-        }}
        data-type="favorite-list-item"
        data-testid={`favorite-list-item-${pageId}`}
        active={active}
@ -51,7 +49,9 @@ function FavoriteMenuItem({
        collapsed={collapsible ? collapsed : undefined}
        onCollapsedChange={setCollapsed}
      >
-        <span>{metaMapping[pageId]?.title || 'Untitled'}</span>
+        <span className={styles.label} data-untitled={untitled}>
+          {metaMapping[pageId]?.title || 'Untitled'}
+        </span>
      </MenuLinkItem>
      {showReferences &&
        referencesToShow.map(ref => {
@ -65,7 +65,7 @@ function FavoriteMenuItem({
            />
          );
        })}
-    </>
+    </div>
  );
 }

--- a/apps/web/src/components/pure/workspace-slider-bar/favorite/styles.css.ts
+++ b/apps/web/src/components/pure/workspace-slider-bar/favorite/styles.css.ts
@ -0,0 +1,21 @@
+import { style } from '@vanilla-extract/css';
+
+export const label = style({
+  selectors: {
+    '&[data-untitled="true"]': {
+      opacity: 0.6,
+    },
+  },
+});
+
+export const favItemWrapper = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '4px',
+  selectors: {
+    '&[data-nested="true"]': {
+      marginLeft: '12px',
+      width: 'calc(100% - 12px)',
+    },
+  },
+});
--- a/packages/component/src/components/app-sidebar/add-page-button/index.tsx
+++ b/packages/component/src/components/app-sidebar/add-page-button/index.tsx
@ -12,7 +12,6 @@ interface AddPageButtonProps {
  style?: React.CSSProperties;
 }

-// Although it is called an input, it is actually a button.
 export function AddPageButton({
  onClick,
  className,
--- a/packages/component/src/components/app-sidebar/app-updater-button/index.css.ts
+++ b/packages/component/src/components/app-sidebar/app-updater-button/index.css.ts
@ -62,11 +62,17 @@ export const closeIcon = style({
  cursor: 'pointer',
  transition: '0.1s',
  borderRadius: '50%',
+  transform: 'scale(0.6)',
  zIndex: 1,
+  opacity: 0,
  selectors: {
    '&:hover': {
      transform: 'scale(1.1)',
    },
+    [`${root}:hover &`]: {
+      opacity: 1,
+      transform: 'scale(1)',
+    },
  },
 });

--- a/packages/component/src/components/app-sidebar/index.css.ts
+++ b/packages/component/src/components/app-sidebar/index.css.ts
@ -14,6 +14,7 @@ export const navWrapperStyle = style({
  minWidth: navWidthVar,
  height: '100%',
  zIndex: 2,
+  paddingBottom: '8px',
  backgroundColor: 'transparent',
  '@media': {
    [`(max-width: ${floatingMaxWidth}px)`]: {
--- a/packages/component/src/components/app-sidebar/menu-item/index.css.ts
+++ b/packages/component/src/components/app-sidebar/menu-item/index.css.ts
@ -69,6 +69,7 @@ export const iconsContainer = style({
  alignItems: 'center',
  justifyContent: 'flex-start',
  width: '28px',
+  flexShrink: 0,
  selectors: {
    '&[data-collapsible="true"]': {
      width: '40px',
--- a/packages/component/src/components/app-sidebar/menu-item/index.tsx
+++ b/packages/component/src/components/app-sidebar/menu-item/index.tsx
@ -39,28 +39,29 @@ export function MenuItem({
      data-disabled={disabled}
      data-collapsible={collapsible}
    >
-      <div className={styles.iconsContainer} data-collapsible={collapsible}>
-        {collapsible && (
-          <div
-            onClick={e => {
-              e.stopPropagation();
-              e.preventDefault(); // for links
-              onCollapsedChange?.(!collapsed);
-            }}
-            data-testid="fav-collapsed-button"
-            className={styles.collapsedIconContainer}
-          >
-            <ArrowDownSmallIcon
-              className={styles.collapsedIcon}
-              data-collapsed={collapsed}
-            />
-          </div>
-        )}
-        {icon &&
-          React.cloneElement(icon, {
+      {icon && (
+        <div className={styles.iconsContainer} data-collapsible={collapsible}>
+          {collapsible && (
+            <div
+              onClick={e => {
+                e.stopPropagation();
+                e.preventDefault(); // for links
+                onCollapsedChange?.(!collapsed);
+              }}
+              data-testid="fav-collapsed-button"
+              className={styles.collapsedIconContainer}
+            >
+              <ArrowDownSmallIcon
+                className={styles.collapsedIcon}
+                data-collapsed={collapsed}
+              />
+            </div>
+          )}
+          {React.cloneElement(icon, {
            className: clsx([styles.icon, icon.props.className]),
          })}
-      </div>
+        </div>
+      )}

      <div className={styles.content}>{children}</div>
    </div>
--- a/packages/component/src/components/app-sidebar/sidebar-containers/index.css.ts
+++ b/packages/component/src/components/app-sidebar/sidebar-containers/index.css.ts
@ -1,7 +1,7 @@
 import { globalStyle, style } from '@vanilla-extract/css';

 export const baseContainer = style({
-  padding: '12px 16px',
+  padding: '4px 16px',
  display: 'flex',
  flexFlow: 'column nowrap',
  rowGap: '4px',
@ -13,17 +13,27 @@ export const scrollableContainerRoot = style({
  vars: {
    '--scrollbar-width': '10px',
  },
-  transition: 'all .3s .2s',
-  borderTop: '1px solid transparent',
+});
+
+export const scrollTopBorder = style({
+  position: 'absolute',
+  top: 0,
+  left: '16px',
+  right: '16px',
+  height: '1px',
+  transition: 'opacity .3s .2s',
+  opacity: 0,
+  background: 'var(--affine-black-10)',
  selectors: {
    '&[data-has-scroll-top="true"]': {
-      boxShadow: 'inset 0 8px 8px -8px var(--affine-black-10)',
+      opacity: 1,
    },
  },
 });

 export const scrollableViewport = style({
  height: '100%',
+  marginTop: '4px',
 });

 globalStyle(`${scrollableViewport} > div`, {
--- a/packages/component/src/components/app-sidebar/sidebar-containers/index.tsx
+++ b/packages/component/src/components/app-sidebar/sidebar-containers/index.tsx
@ -39,10 +39,11 @@ function useHasScrollTop() {
 export function SidebarScrollableContainer({ children }: PropsWithChildren) {
  const [hasScrollTop, ref] = useHasScrollTop();
  return (
-    <ScrollArea.Root
-      data-has-scroll-top={hasScrollTop}
-      className={styles.scrollableContainerRoot}
-    >
+    <ScrollArea.Root className={styles.scrollableContainerRoot}>
+      <div
+        data-has-scroll-top={hasScrollTop}
+        className={styles.scrollTopBorder}
+      />
      <ScrollArea.Viewport
        className={clsx([styles.scrollableViewport])}
        ref={ref}
--- a/packages/component/src/components/app-sidebar/spolight/index.css.ts
+++ b/packages/component/src/components/app-sidebar/spolight/index.css.ts
@ -16,7 +16,7 @@ export const spotlight = style({
  background: `radial-gradient(${spotlightSize} circle at ${spotlightX} ${spotlightY}, var(--affine-text-primary-color), transparent)`,
  inset: '0px',
  pointerEvents: 'none',
-  willChange: 'background',
+  willChange: 'background, opacity',
  opacity: spotlightOpacity,
  zIndex: 1,
  transition: 'all 0.2s',
--- a/packages/component/src/components/app-sidebar/spolight/index.stories.tsx
+++ b/packages/component/src/components/app-sidebar/spolight/index.stories.tsx
@ -0,0 +1,30 @@
+import type { Meta, StoryFn } from '@storybook/react';
+import { type PropsWithChildren } from 'react';
+
+import { Spotlight } from '.';
+
+export default {
+  title: 'Components/AppSidebar/Spotlight',
+  component: Spotlight,
+} satisfies Meta;
+
+const Container = ({ children }: PropsWithChildren) => (
+  <main
+    style={{
+      position: 'relative',
+      width: '320px',
+      height: '320px',
+      border: '1px solid #ccc',
+    }}
+  >
+    {children}
+  </main>
+);
+
+export const Default: StoryFn = () => {
+  return (
+    <Container>
+      <Spotlight />
+    </Container>
+  );
+};
--- a/packages/component/src/components/app-sidebar/spolight/index.tsx
+++ b/packages/component/src/components/app-sidebar/spolight/index.tsx
@ -12,10 +12,10 @@ function useMouseOffset() {
  useEffect(() => {
    if (ref.current && ref.current.parentElement) {
      const el = ref.current.parentElement;
-      const bound = el.getBoundingClientRect();

      // debounce?
      const onMouseMove = (e: MouseEvent) => {
+        const bound = el.getBoundingClientRect();
        setOffset({ x: e.clientX - bound.x, y: e.clientY - bound.y });
        setOutside(false);
      };