feat: enhance root div styles (#2295)

2026-02-12 04:18:54 +00:00 · 2023-05-10 13:39:51 +08:00
parent 08341d3d6c
commit 752d0545ca
9 changed files with 146 additions and 165 deletions
--- a/apps/web/src/layouts/public-workspace-layout.tsx
+++ b/apps/web/src/layouts/public-workspace-layout.tsx
@@ -1,3 +1,4 @@
+import { AppContainer, MainContainer } from '@affine/component/workspace';
 import type { AffinePublicWorkspace } from '@affine/workspace/type';
 import { useAtom } from 'jotai';
 import Head from 'next/head';
@@ -7,7 +8,6 @@ import { lazy, Suspense } from 'react';

 import { openQuickSearchModalAtom } from '../atoms';
 import { useRouterTitle } from '../hooks/use-router-title';
-import { MainContainer, StyledPage } from './styles';

 const QuickSearchModal = lazy(() =>
  import('../components/pure/quick-search-modal').then(module => ({
@@ -46,11 +46,9 @@ const PublicWorkspaceLayoutInner: React.FC<React.PropsWithChildren> = props => {
      <Head>
        <title>{title}</title>
      </Head>
-      <StyledPage>
-        <MainContainer className="main-container">
-          {props.children}
-        </MainContainer>
-      </StyledPage>
+      <AppContainer>
+        <MainContainer>{props.children}</MainContainer>
+      </AppContainer>
    </>
  );
 };
--- a/apps/web/src/layouts/styles.ts
+++ b/apps/web/src/layouts/styles.ts
@@ -1,110 +0,0 @@
-import { styled } from '@affine/component';
-
-export const StyledPage = styled('div')<{ resizing?: boolean }>(
-  ({ theme, resizing }) => {
-    return {
-      cursor: resizing ? 'col-resize' : 'default',
-      width: '100%',
-      position: 'relative',
-      height: '100vh',
-      transition: 'background-color .5s',
-      display: 'flex',
-      flexGrow: '1',
-      flexDirection: 'row',
-      '--affine-editor-width': '686px',
-      [theme.breakpoints.down('sm')]: {
-        '--affine-editor-width': '550px',
-      },
-    };
-  }
-);
-
-export const StyledSpacer = styled('div')<{
-  sidebarOpen: boolean;
-  resizing: boolean;
-  floating: boolean;
-}>(({ resizing, floating }) => {
-  return {
-    position: floating ? 'absolute' : 'relative',
-    flexGrow: 1,
-    height: '100%',
-    maxWidth: floating ? 'calc(10vw + 400px)' : 'calc(100vw - 698px)',
-    transition: resizing ? '' : 'width .3s, min-width .3s, max-width .3s',
-  };
-});
-
-export const StyledWrapper = styled('div')(() => {
-  return {
-    flexGrow: 1,
-    position: 'relative',
-    overflow: 'auto',
-  };
-});
-
-export const MainContainerWrapper = styled('div')(() => {
-  return {
-    display: 'flex',
-    flexGrow: 1,
-    position: 'relative',
-    maxWidth: '100vw',
-    overflow: 'auto',
-  };
-});
-
-export const MainContainer = styled('div')(() => {
-  return {
-    position: 'relative',
-    flexGrow: 1,
-    maxWidth: '100%',
-    backgroundColor: 'var(--affine-background-primary-color)',
-  };
-});
-
-export const StyledToolWrapper = styled('div')(({ theme }) => {
-  return {
-    position: 'fixed',
-    right: '30px',
-    bottom: '30px',
-    zIndex: 'var(--affine-z-index-popover)',
-    [theme.breakpoints.down('md')]: {
-      right: 'calc((100vw - 640px) * 3 / 19 + 5px)',
-    },
-    [theme.breakpoints.down('sm')]: {
-      right: '5px',
-      bottom: '5px',
-    },
-  };
-});
-
-export const StyledSliderResizer = styled('div')<{ isResizing: boolean }>(
-  () => {
-    return {
-      position: 'absolute',
-      top: 0,
-      right: 0,
-      bottom: 0,
-      width: '12px',
-      transform: 'translateX(50%)',
-      cursor: 'col-resize',
-      zIndex: 'var(--affine-z-index-modal)',
-      userSelect: 'none',
-      ':hover > *': {
-        background: 'rgba(0, 0, 0, 0.1)',
-      },
-    };
-  }
-);
-export const StyledSliderResizerInner = styled('div')<{ isResizing: boolean }>(
-  ({ isResizing }) => {
-    return {
-      transition: 'background .15s .1s',
-      position: 'absolute',
-      top: 0,
-      right: '50%',
-      bottom: 0,
-      transform: 'translateX(0.5px)',
-      width: '2px',
-      background: isResizing ? 'rgba(0, 0, 0, 0.1)' : 'transparent',
-    };
-  }
-);
--- a/apps/web/src/layouts/workspace-layout.tsx
+++ b/apps/web/src/layouts/workspace-layout.tsx
@@ -1,3 +1,8 @@
+import {
+  AppContainer,
+  MainContainer,
+  ToolContainer,
+} from '@affine/component/workspace';
 import { DebugLogger } from '@affine/debug';
 import { DEFAULT_HELLO_WORLD_PAGE_ID } from '@affine/env';
 import { initPage } from '@affine/env/blocksuite';
@@ -38,12 +43,6 @@ import { useWorkspaces } from '../hooks/use-workspaces';
 import { WorkspacePlugins } from '../plugins';
 import { ModalProvider } from '../providers/modal-provider';
 import { pathGenerator, publicPathGenerator } from '../shared';
-import {
-  MainContainer,
-  MainContainerWrapper,
-  StyledPage,
-  StyledToolWrapper,
-} from './styles';

 const QuickSearchModal = lazy(() =>
  import('../components/pure/quick-search-modal').then(module => ({
@@ -342,7 +341,7 @@ export const WorkspaceLayoutInner: FC<PropsWithChildren> = ({ children }) => {
      <Head>
        <title>{title}</title>
      </Head>
-      <StyledPage>
+      <AppContainer>
        <RootAppSidebar
          isPublicWorkspace={isPublicWorkspace}
          onOpenQuickSearchModal={handleOpenQuickSearchModal}
@@ -360,27 +359,25 @@ export const WorkspaceLayoutInner: FC<PropsWithChildren> = ({ children }) => {
          currentPath={router.asPath.split('?')[0]}
          paths={isPublicWorkspace ? publicPathGenerator : pathGenerator}
        />
-        <MainContainerWrapper>
-          <MainContainer className="main-container">
-            <Suspense fallback={<PageLoading text={t['Page is Loading']()} />}>
-              {children}
-            </Suspense>
-            <StyledToolWrapper>
-              {/* fixme(himself65): remove this */}
-              <div id="toolWrapper" style={{ marginBottom: '12px' }}>
-                {/* Slot for block hub */}
-              </div>
-              {!isPublicWorkspace && (
-                <HelpIsland
-                  showList={
-                    router.query.pageId ? undefined : ['whatNew', 'contact']
-                  }
-                />
-              )}
-            </StyledToolWrapper>
-          </MainContainer>
-        </MainContainerWrapper>
-      </StyledPage>
+        <MainContainer>
+          <Suspense fallback={<PageLoading text={t['Page is Loading']()} />}>
+            {children}
+          </Suspense>
+          <ToolContainer>
+            {/* fixme(himself65): remove this */}
+            <div id="toolWrapper" style={{ marginBottom: '12px' }}>
+              {/* Slot for block hub */}
+            </div>
+            {!isPublicWorkspace && (
+              <HelpIsland
+                showList={
+                  router.query.pageId ? undefined : ['whatNew', 'contact']
+                }
+              />
+            )}
+          </ToolContainer>
+        </MainContainer>
+      </AppContainer>
      <QuickSearch />
    </>
  );
--- a/apps/web/src/pages/_debug/broadcast.dev.tsx
+++ b/apps/web/src/pages/_debug/broadcast.dev.tsx
@@ -1,4 +1,5 @@
 import { Button } from '@affine/component';
+import { AppContainer, MainContainer } from '@affine/component/workspace';
 import { DebugLogger } from '@affine/debug';
 import { createBroadCastChannelProvider } from '@affine/workspace/providers';
 import type { BroadCastChannelProvider } from '@affine/workspace/type';
@@ -10,7 +11,6 @@ import type React from 'react';
 import { useEffect, useMemo, useState } from 'react';

 import { BlockSuitePageList } from '../../components/blocksuite/block-suite-page-list';
-import { StyledPage, StyledWrapper } from '../../layouts/styles';
 import { toast } from '../../utils';

 const logger = new DebugLogger('broadcast');
@@ -44,8 +44,8 @@ const BroadcastPage: React.FC = () => {
    return null;
  }
  return (
-    <StyledPage>
-      <StyledWrapper>
+    <AppContainer>
+      <MainContainer>
        <Typography variant="h5">Broadcast Provider Test</Typography>
        <Button
          type="primary"
@@ -64,8 +64,8 @@ const BroadcastPage: React.FC = () => {
            toast('do nothing');
          }}
        />
-      </StyledWrapper>
-    </StyledPage>
+      </MainContainer>
+    </AppContainer>
  );
 };

--- a/apps/web/src/pages/_debug/init-page.dev.tsx
+++ b/apps/web/src/pages/_debug/init-page.dev.tsx
@@ -1,8 +1,8 @@
+import { AppContainer, MainContainer } from '@affine/component/workspace';
 import { initPage } from '@affine/env/blocksuite';
 import { useRouter } from 'next/router';
 import { lazy, Suspense } from 'react';

-import { StyledPage, StyledWrapper } from '../../layouts/styles';
 import type { NextPageWithLayout } from '../../shared';

 const Editor = lazy(() =>
@@ -23,14 +23,14 @@ const InitPagePage: NextPageWithLayout = () => {
    testType = 'empty';
  }
  return (
-    <StyledPage>
-      <StyledWrapper>
+    <AppContainer>
+      <MainContainer>
        <Suspense>
          <Editor onInit={initPage} testType={testType} />
        </Suspense>
        <div id="toolWrapper" />
-      </StyledWrapper>
-    </StyledPage>
+      </MainContainer>
+    </AppContainer>
  );
 };

--- a/apps/web/src/pages/_debug/login.dev.tsx
+++ b/apps/web/src/pages/_debug/login.dev.tsx
@@ -1,4 +1,5 @@
 import { Button } from '@affine/component';
+import { AppContainer, MainContainer } from '@affine/component/workspace';
 import { currentAffineUserAtom } from '@affine/workspace/affine/atom';
 import {
  clearLoginStorage,
@@ -21,14 +22,12 @@ const Viewer = lazy(() =>

 import { useTheme } from 'next-themes';

-import { StyledPage, StyledWrapper } from '../../layouts/styles';
-
 const LoginDevPage: NextPage = () => {
  const [user, setUser] = useAtom(currentAffineUserAtom);
  const auth = useMemo(() => createAffineAuth(), []);
  return (
-    <StyledPage>
-      <StyledWrapper>
+    <AppContainer>
+      <MainContainer>
        <h1>LoginDevPage</h1>
        <Button
          onClick={async () => {
@@ -97,8 +96,8 @@ const LoginDevPage: NextPage = () => {
            value={user}
          />
        </Suspense>
-      </StyledWrapper>
-    </StyledPage>
+      </MainContainer>
+    </AppContainer>
  );
 };

--- a/packages/component/src/components/workspace/index.css.ts
+++ b/packages/component/src/components/workspace/index.css.ts
@@ -0,0 +1,50 @@
+import { style } from '@vanilla-extract/css';
+
+import { breakpoints } from '../../styles/mui-theme';
+export const appStyle = style({
+  width: '100%',
+  position: 'relative',
+  height: '100vh',
+  transition: 'background-color .5s',
+  display: 'flex',
+  flexGrow: '1',
+  flexDirection: 'row',
+  selectors: {
+    '&[data-is-resizing="true"]': {
+      cursor: 'col-resize',
+    },
+  },
+  vars: {
+    '--affine-editor-width': '686px',
+  },
+  '@media': {
+    [breakpoints.down('sm', true)]: {
+      vars: {
+        '--affine-editor-width': '550px',
+      },
+    },
+  },
+});
+
+export const mainContainerStyle = style({
+  position: 'relative',
+  flexGrow: 1,
+  maxWidth: '100%',
+  backgroundColor: 'var(--affine-background-primary-color)',
+});
+
+export const toolStyle = style({
+  position: 'fixed',
+  right: '30px',
+  bottom: '30px',
+  zIndex: 'var(--affine-z-index-popover)',
+  '@media': {
+    [breakpoints.down('md', true)]: {
+      right: 'calc((100vw - 640px) * 3 / 19 + 5px)',
+    },
+    [breakpoints.down('sm', true)]: {
+      right: '5px',
+      bottom: '5px',
+    },
+  },
+});
--- a/packages/component/src/components/workspace/index.tsx
+++ b/packages/component/src/components/workspace/index.tsx
@@ -0,0 +1,34 @@
+import { clsx } from 'clsx';
+import type { PropsWithChildren, ReactElement } from 'react';
+
+import { appStyle, mainContainerStyle, toolStyle } from './index.css';
+
+export type WorkspaceRootProps = PropsWithChildren<{
+  resizing?: boolean;
+}>;
+
+export const AppContainer = (props: WorkspaceRootProps): ReactElement => {
+  return (
+    <div className={appStyle} data-is-resizing={props.resizing}>
+      {props.children}
+    </div>
+  );
+};
+
+export type MainContainerProps = PropsWithChildren<{
+  className?: string;
+}>;
+
+export const MainContainer = (props: MainContainerProps): ReactElement => {
+  return (
+    <div
+      className={clsx(mainContainerStyle, 'main-container', props.className)}
+    >
+      {props.children}
+    </div>
+  );
+};
+
+export const ToolContainer = (props: PropsWithChildren): ReactElement => {
+  return <div className={toolStyle}>{props.children}</div>;
+};
--- a/packages/component/src/styles/mui-theme.ts
+++ b/packages/component/src/styles/mui-theme.ts
@@ -21,7 +21,12 @@ export const muiThemes = {
 // Ported from mui
 // See https://github.com/mui/material-ui/blob/eba90da5359ff9c58b02800dfe468dc6c0b95bd2/packages/mui-system/src/createTheme/createBreakpoints.js
 // License under MIT
-function createBreakpoints(breakpoints: BreakpointsOptions) {
+function createBreakpoints(breakpoints: BreakpointsOptions): Readonly<
+  Omit<BreakpointsOptions, 'up' | 'down'> & {
+    up: (key: Breakpoint | number, pure?: boolean) => string;
+    down: (key: Breakpoint | number, pure?: boolean) => string;
+  }
+> {
  const {
    // The breakpoint **start** at this value.
    // For instance with the first breakpoint xs: [xs, sm).
@@ -39,14 +44,22 @@ function createBreakpoints(breakpoints: BreakpointsOptions) {

  const keys = Object.keys(values) as ['xs', 'sm', 'md', 'lg', 'xl'];

-  function up(key: Breakpoint | number) {
+  function up(key: Breakpoint | number, pure = false) {
    const value = typeof key === 'number' ? key : values[key];
-    return `@media (min-width:${value}${unit})`;
+    const original = `(min-width:${value}${unit})`;
+    if (pure) {
+      return original;
+    }
+    return `@media ${original}`;
  }

-  function down(key: Breakpoint | number) {
+  function down(key: Breakpoint | number, pure = false) {
    const value = typeof key === 'number' ? key : values[key];
-    return `@media (max-width:${value - step / 100}${unit})`;
+    const original = `(max-width:${value - step / 100}${unit})`;
+    if (pure) {
+      return original;
+    }
+    return `@media ${original}`;
  }

  return {