feat: enhance root div styles (#2295)

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',
+    },
+  },
+});

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>;
+};

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 {