fix: some style issues to sidebar and switch (#4046)

Co-authored-by: Alex Yang <himself65@outlook.com>
2024-11-23 16:22:21 +03:00 · 2023-08-31 20:46:06 +08:00 · 2023-08-31 20:46:06 +08:00 · 13857d59dc
commit 13857d59dc
parent 260c25acf3
16 changed files with 91 additions and 55 deletions
--- a/apps/core/src/atoms/settings.ts
+++ b/apps/core/src/atoms/settings.ts
@ -49,7 +49,7 @@ export const fontStyleOptions = [
 }[];

 const appSettingBaseAtom = atomWithStorage<AppSetting>('affine-settings', {
-  clientBorder: globalThis.platform !== 'win32',
+  clientBorder: environment.isDesktop ? !environment.isWindows : false,
  fullWidthLayout: false,
  windowFrameStyle: 'frameless',
  fontStyle: 'Sans',
--- a/apps/core/src/components/affine/app-container.tsx
+++ b/apps/core/src/components/affine/app-container.tsx
@ -11,7 +11,11 @@ export const AppContainer = (props: WorkspaceRootProps) => {
  return (
    <AppContainerWithoutSettings
      useNoisyBackground={appSettings.enableNoisyBackground}
-      useBlurBackground={!appSettings.enableBlurBackground}
+      useBlurBackground={
+        appSettings.enableBlurBackground &&
+        environment.isDesktop &&
+        environment.isMacOs
+      }
      {...props}
    />
  );
--- a/apps/core/src/components/affine/setting-modal/general-setting/appearance/index.tsx
+++ b/apps/core/src/components/affine/setting-modal/general-setting/appearance/index.tsx
@ -212,17 +212,19 @@ export const AppearanceSettings = () => {
              }
            />
          </SettingRow>
-          <SettingRow
-            name={t['com.affine.settings.translucent-style']()}
-            desc={t['com.affine.settings.translucent-style-description']()}
-          >
-            <Switch
-              checked={appSettings.enableBlurBackground}
-              onChange={checked =>
-                changeSwitch('enableBlurBackground', checked)
-              }
-            />
-          </SettingRow>
+          {environment.isMacOs && (
+            <SettingRow
+              name={t['com.affine.settings.translucent-style']()}
+              desc={t['com.affine.settings.translucent-style-description']()}
+            >
+              <Switch
+                checked={appSettings.enableBlurBackground}
+                onChange={checked =>
+                  changeSwitch('enableBlurBackground', checked)
+                }
+              />
+            </SettingRow>
+          )}
        </SettingWrapper>
      ) : null}
    </>
--- a/apps/core/src/components/affine/setting-modal/setting-sidebar/style.css.ts
+++ b/apps/core/src/components/affine/setting-modal/setting-sidebar/style.css.ts
@ -123,8 +123,8 @@ globalStyle(`${accountButton} .avatar.not-sign`, {
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
-  borderColor: 'var(--affine-border-color)',
-  color: 'var(--affine-border-color)',
+  borderColor: 'var(--affine-icon-secondary)',
+  color: 'var(--affine-icon-secondary)',
  background: 'var(--affine-white)',
 });
 globalStyle(`${accountButton} .content`, {
--- a/apps/core/src/components/pure/header/index.tsx
+++ b/apps/core/src/components/pure/header/index.tsx
@ -1,4 +1,3 @@
-import { Wrapper } from '@affine/component';
 import {
  appSidebarFloatingAtom,
  appSidebarOpenAtom,
@ -66,12 +65,8 @@ export const Header = forwardRef<HTMLDivElement, HeaderPros>(function Header(
          })}
        >
          <div className={clsx(style.headerItem, 'top-item')}>
-            <div ref={sidebarSwitchRef}>
-              {!open && (
-                <Wrapper marginRight={20}>
-                  <SidebarSwitch />
-                </Wrapper>
-              )}
+            <div ref={sidebarSwitchRef} style={{ marginRight: open ? 0 : 20 }}>
+              <SidebarSwitch show={!open} />
            </div>
          </div>
          <div className={clsx(style.headerItem, 'left')}>
--- a/apps/core/src/components/pure/workspace-slider-bar/collections/styles.css.ts
+++ b/apps/core/src/components/pure/workspace-slider-bar/collections/styles.css.ts
@ -77,10 +77,10 @@ export const collapsibleContent = style({
  marginTop: '4px',
  selectors: {
    '&[data-state="open"]': {
-      animation: `${slideDown} 0.2s ease-out`,
+      animation: `${slideDown} 0.2s ease-in-out`,
    },
    '&[data-state="closed"]': {
-      animation: `${slideUp} 0.2s ease-out`,
+      animation: `${slideUp} 0.2s ease-in-out`,
    },
  },
 });
--- a/apps/core/src/components/root-app-sidebar/index.tsx
+++ b/apps/core/src/components/root-app-sidebar/index.tsx
@ -155,7 +155,13 @@ export const RootAppSidebar = ({
    <>
      <AppSidebar
        router={router}
-        hasBackground={!appSettings.enableBlurBackground}
+        hasBackground={
+          !(
+            appSettings.enableBlurBackground &&
+            environment.isDesktop &&
+            environment.isMacOs
+          )
+        }
      >
        <SidebarContainer>
          <NoSsr>
--- a/apps/storybook/src/stories/app-sidebar.stories.tsx
+++ b/apps/storybook/src/stories/app-sidebar.stories.tsx
@ -2,6 +2,7 @@ import {
  AppSidebar,
  AppSidebarFallback,
  appSidebarOpenAtom,
+  SidebarSwitch,
 } from '@affine/component/app-sidebar';
 import { AddPageButton } from '@affine/component/app-sidebar';
 import { CategoryDivider } from '@affine/component/app-sidebar';
@ -12,13 +13,8 @@ import {
  SidebarContainer,
  SidebarScrollableContainer,
 } from '@affine/component/app-sidebar';
-import {
-  DeleteTemporarilyIcon,
-  SettingsIcon,
-  SidebarIcon,
-} from '@blocksuite/icons';
+import { DeleteTemporarilyIcon, SettingsIcon } from '@blocksuite/icons';
 import type { Meta, StoryFn } from '@storybook/react';
-import { IconButton } from '@toeverything/components/button';
 import { useAtom } from 'jotai';
 import { type PropsWithChildren, useState } from 'react';
 import { MemoryRouter } from 'react-router-dom';
@ -45,20 +41,11 @@ const Container = ({ children }: PropsWithChildren) => (
  </MemoryRouter>
 );
 const Main = () => {
-  const [open, setOpen] = useAtom(appSidebarOpenAtom);
+  const [open] = useAtom(appSidebarOpenAtom);
  return (
    <div>
      <div className={navHeaderStyle}>
-        {!open && (
-          <IconButton
-            size="large"
-            onClick={() => {
-              setOpen(true);
-            }}
-          >
-            <SidebarIcon width={24} height={24} />
-          </IconButton>
-        )}
+        <SidebarSwitch show={!open} />
      </div>
    </div>
  );
--- a/packages/component/src/components/app-sidebar/index.css.ts
+++ b/packages/component/src/components/app-sidebar/index.css.ts
@ -33,7 +33,7 @@ export const navWrapperStyle = style({
      marginLeft: `calc(${navWidthVar} * -1)`,
    },
    '&[data-enable-animation="true"]': {
-      transition: 'margin-left .3s, width .3s',
+      transition: 'margin-left .3s .05s, width .3s .05s',
    },
    '&.has-background': {
      backgroundColor: 'var(--affine-white-60)',
--- a/packages/component/src/components/app-sidebar/index.tsx
+++ b/packages/component/src/components/app-sidebar/index.tsx
@ -102,8 +102,10 @@ export function AppSidebar(props: AppSidebarProps): ReactElement {
            (environment.isDesktop && props.hasBackground),
        })}
        data-open={open}
+        data-testid="app-sidebar-wrapper"
        data-is-macos-electron={isMacosDesktop}
        data-is-floating={appSidebarFloating}
+        data-has-background={props.hasBackground}
        data-enable-animation={enableAnimation && !isResizing}
      >
        <nav className={navStyle} ref={navRef} data-testid="app-sidebar">
--- a/packages/component/src/components/app-sidebar/sidebar-header/index.tsx
+++ b/packages/component/src/components/app-sidebar/sidebar-header/index.tsx
@ -19,10 +19,13 @@ export const SidebarHeader = (props: SidebarHeaderProps) => {
  const open = useAtomValue(appSidebarOpenAtom);
  return (
    <div className={navHeaderStyle} data-open={open}>
-      <div style={{ flex: 1 }} />
-      {open && <SidebarSwitch />}
+      {environment.isDesktop && environment.isMacOs && (
+        <div style={{ flex: 1 }} />
+      )}
+      <SidebarSwitch show={open} />
      {environment.isDesktop && (
        <>
+          {!environment.isMacOs && <div style={{ flex: 1 }} />}
          <IconButton
            data-testid="app-sidebar-arrow-button-back"
            disabled={props.router?.history.current === 0}
@ -47,8 +50,6 @@ export const SidebarHeader = (props: SidebarHeaderProps) => {
          >
            <ArrowRightSmallIcon />
          </IconButton>
-
-          {!environment.isMacOs && <div style={{ flex: 1 }} />}
        </>
      )}
    </div>
--- a/packages/component/src/components/app-sidebar/sidebar-header/sidebar-switch.css.ts
+++ b/packages/component/src/components/app-sidebar/sidebar-header/sidebar-switch.css.ts
@ -0,0 +1,16 @@
+import { style } from '@vanilla-extract/css';
+
+export const sidebarSwitch = style({
+  opacity: 0,
+  width: 0,
+  overflow: 'hidden',
+  pointerEvents: 'none',
+  transition: 'opacity .3s ease-in-out',
+  selectors: {
+    '&[data-show=true]': {
+      opacity: 1,
+      width: '32px',
+      pointerEvents: 'auto',
+    },
+  },
+});
--- a/packages/component/src/components/app-sidebar/sidebar-header/sidebar-switch.tsx
+++ b/packages/component/src/components/app-sidebar/sidebar-header/sidebar-switch.tsx
@ -6,8 +6,9 @@ import { useAtom } from 'jotai';
 import { useRef } from 'react';

 import { appSidebarOpenAtom } from '../index.jotai';
+import * as styles from './sidebar-switch.css';

-export const SidebarSwitch = () => {
+export const SidebarSwitch = ({ show }: { show: boolean }) => {
  const [open, setOpen] = useAtom(appSidebarOpenAtom);
  const t = useAFFiNEI18N();
  const ref = useRef(null);
@ -18,12 +19,14 @@ export const SidebarSwitch = () => {
  return (
    <Tooltip
      content={tooltipContent + ' ' + collapseKeyboardShortcuts}
-      side="right"
+      side={open ? 'bottom' : 'right'}
      portalOptions={{
        container: ref.current,
      }}
    >
      <IconButton
+        className={styles.sidebarSwitch}
+        data-show={show}
        size="large"
        data-testid={`app-sidebar-arrow-button-${open ? 'collapse' : 'expand'}`}
        style={{
--- a/packages/component/src/components/workspace/index.css.ts
+++ b/packages/component/src/components/workspace/index.css.ts
@ -11,12 +11,13 @@ export const appStyle = style({
  display: 'flex',
  flexGrow: '1',
  flexDirection: 'row',
+  backgroundColor: 'var(--affine-background-primary-color)',
  selectors: {
    '&[data-is-resizing="true"]': {
      cursor: 'col-resize',
    },
    '&.blur-background': {
-      backgroundColor: 'var(--affine-background-primary-color)',
+      backgroundColor: 'transparent',
    },
    '&.noisy-background::before': {
      content: '""',
@ -70,7 +71,7 @@ export const mainContainerStyle = style({
  backgroundColor: 'var(--affine-background-primary-color)',
  selectors: {
    '&[data-show-padding="true"]': {
-      margin: '8px 8px 8px 0',
+      margin: '8px',
      borderRadius: '5px',
      overflow: 'hidden',
      boxShadow: 'var(--affine-shadow-1)',
@ -119,6 +120,17 @@ globalStyle(`${mainContainerStyle} > div[data-panel-group] > div[data-panel]`, {
  },
 });

+// Hack margin so that it works normally when sidebar is closed
+globalStyle(
+  `[data-testid=app-sidebar-wrapper][data-open=true][data-is-floating=false][data-has-background=false]
+ ~ ${mainContainerStyle}[data-show-padding="true"]`,
+  {
+    // transition added here to prevent the transition from being applied on page load
+    transition: 'margin-left .3s ease-in-out',
+    marginLeft: '0',
+  }
+);
+
 export const toolStyle = style({
  position: 'fixed',
  right: '30px',
--- a/tests/affine-local/e2e/layout.spec.ts
+++ b/tests/affine-local/e2e/layout.spec.ts
@ -6,7 +6,9 @@ import { expect } from '@playwright/test';
 test('Collapse Sidebar', async ({ page }) => {
  await openHomePage(page);
  await waitEditorLoad(page);
-  await page.getByTestId('app-sidebar-arrow-button-collapse').click();
+  await page
+    .locator('[data-testid=app-sidebar-arrow-button-collapse][data-show=true]')
+    .click();
  const sliderBarArea = page.getByTestId('app-sidebar');
  await expect(sliderBarArea).not.toBeInViewport();
 });
@ -14,11 +16,15 @@ test('Collapse Sidebar', async ({ page }) => {
 test('Expand Sidebar', async ({ page }) => {
  await openHomePage(page);
  await waitEditorLoad(page);
-  await page.getByTestId('app-sidebar-arrow-button-collapse').click();
+  await page
+    .locator('[data-testid=app-sidebar-arrow-button-collapse][data-show=true]')
+    .click();
  const sliderBarArea = page.getByTestId('sliderBar-inner');
  await expect(sliderBarArea).not.toBeInViewport();

-  await page.getByTestId('app-sidebar-arrow-button-expand').click();
+  await page
+    .locator('[data-testid=app-sidebar-arrow-button-expand][data-show=true]')
+    .click();
  await expect(sliderBarArea).toBeInViewport();
 });

--- a/tests/affine-local/e2e/subpage.spec.ts
+++ b/tests/affine-local/e2e/subpage.spec.ts
@ -6,7 +6,9 @@ import { expect } from '@playwright/test';
 test('Create subpage', async ({ page }) => {
  await openHomePage(page);
  await waitEditorLoad(page);
-  await page.getByTestId('app-sidebar-arrow-button-collapse').click();
+  await page
+    .locator('[data-testid=app-sidebar-arrow-button-collapse][data-show=true]')
+    .click();
  const sliderBarArea = page.getByTestId('sliderBar-inner');
  await expect(sliderBarArea).not.toBeInViewport();
 });