fix: settings style update (#3161)

2024-11-24 02:52:17 +03:00 · 2023-07-11 20:55:28 +08:00 · 2023-07-11 20:55:28 +08:00 · d88a21d24a
commit d88a21d24a
parent 6ad2d106bc
9 changed files with 45 additions and 24 deletions
--- a/apps/web/src/atoms/settings.ts
+++ b/apps/web/src/atoms/settings.ts
@ -1,3 +1,4 @@
+import { isDesktop } from '@affine/env/constant';
 import { atom, useAtom } from 'jotai';
 import { atomWithStorage } from 'jotai/utils';

@ -49,7 +50,7 @@ export const fontStyleOptions = [
 }[];

 const appSettingBaseAtom = atomWithStorage<AppSetting>('affine-settings', {
-  clientBorder: false,
+  clientBorder: isDesktop,
  fullWidthLayout: false,
  windowFrameStyle: 'frameless',
  fontStyle: 'Sans',
--- a/apps/web/src/components/affine/setting-modal/general-setting/appearance/index.tsx
+++ b/apps/web/src/components/affine/setting-modal/general-setting/appearance/index.tsx
@ -120,7 +120,7 @@ export const AppearanceSettings = () => {
            <LanguageMenu triggerProps={{ size: 'small' }} />
          </div>
        </SettingRow>
-        {runtimeConfig.enableNewSettingUnstableApi && environment.isDesktop ? (
+        {environment.isDesktop ? (
          <SettingRow
            name={t['Client Border Style']()}
            desc={t['Customize the appearance of the client.']()}
--- a/apps/web/src/components/affine/setting-modal/style.css.ts
+++ b/apps/web/src/components/affine/setting-modal/style.css.ts
@ -4,7 +4,7 @@ export const settingContent = style({
  flexGrow: '1',
  height: '100%',
  padding: '40px 15px 20px',
-  overflowX: 'auto',
+  overflow: 'auto',
 });

 globalStyle(`${settingContent} .wrapper`, {
@ -13,7 +13,6 @@ globalStyle(`${settingContent} .wrapper`, {
  height: '100%',
  maxWidth: '560px',
  margin: '0 auto',
-  overflowY: 'auto',
 });
 globalStyle(`${settingContent} .content`, {
  minHeight: '100%',
--- a/apps/web/src/components/blocksuite/workspace-header/styles.css.ts
+++ b/apps/web/src/components/blocksuite/workspace-header/styles.css.ts
@ -210,6 +210,7 @@ export const windowAppControlsWrapper = style({
  display: 'flex',
  gap: '2px',
  transform: 'translateX(8px)',
+  height: '100%',
 });

 export const windowAppControl = style({
@ -217,11 +218,17 @@ export const windowAppControl = style({
  cursor: 'pointer',
  display: 'inline-flex',
  width: '42px',
-  height: '32px',
+  height: 'calc(100% - 10px)',
+  paddingTop: '10px',
  alignItems: 'center',
  justifyContent: 'center',
-  borderRadius: '4px',
+  borderRadius: '0',
  selectors: {
+    '&[data-type="close"]': {
+      width: '56px',
+      paddingRight: '14px',
+      marginRight: '-14px',
+    },
    '&[data-type="close"]:hover': {
      background: 'var(--affine-error-color)',
      color: '#FFFFFF',
--- a/apps/web/src/layouts/workspace-layout.tsx
+++ b/apps/web/src/layouts/workspace-layout.tsx
@ -46,6 +46,7 @@ import {
  openWorkspacesModalAtom,
 } from '../atoms';
 import { useTrackRouterHistoryEffect } from '../atoms/history';
+import { useAppSetting } from '../atoms/settings';
 import { AppContainer } from '../components/affine/app-container';
 import type { IslandItemNames } from '../components/pure/help-island';
 import { HelpIsland } from '../components/pure/help-island';
@ -335,6 +336,8 @@ export const WorkspaceLayoutInner: FC<PropsWithChildren> = ({ children }) => {
    [moveToTrash, t]
  );

+  const [appSetting] = useAppSetting();
+
  return (
    <>
      <Head>
@ -364,7 +367,7 @@ export const WorkspaceLayoutInner: FC<PropsWithChildren> = ({ children }) => {
            currentPath={router.asPath.split('?')[0]}
            paths={isPublicWorkspace ? publicPathGenerator : pathGenerator}
          />
-          <MainContainer>
+          <MainContainer padding={appSetting.clientBorder}>
            {children}
            <ToolContainer>
              <BlockHubWrapper blockHubAtom={rootBlockHubAtom} />
--- a/packages/component/package.json
+++ b/packages/component/package.json
@ -36,7 +36,7 @@
    "@radix-ui/react-toast": "^1.1.4",
    "@toeverything/hooks": "workspace:*",
    "@toeverything/plugin-infra": "workspace:*",
-    "@toeverything/theme": "^0.7.4",
+    "@toeverything/theme": "^0.7.6",
    "@vanilla-extract/dynamic": "^2.0.3",
    "clsx": "^1.2.1",
    "dayjs": "^1.11.9",
--- a/packages/component/src/components/workspace/index.css.ts
+++ b/packages/component/src/components/workspace/index.css.ts
@ -57,9 +57,9 @@ export const mainContainerStyle = style({
  zIndex: 2,
  backgroundColor: 'var(--affine-background-primary-color)',
  selectors: {
-    '&[data-is-desktop="true"]': {
-      margin: '8px 8px 8px 8px',
-      borderRadius: '8px',
+    '&[data-show-padding="true"]': {
+      margin: '8px',
+      borderRadius: '5px',
      overflow: 'hidden',
      boxShadow: 'var(--affine-shadow-1)',
      '@media': {
@ -70,7 +70,10 @@ export const mainContainerStyle = style({
        },
      },
    },
-    '&[data-is-desktop="true"]:before': {
+    '&[data-show-padding="true"][data-is-macos="true"]': {
+      borderRadius: '6px',
+    },
+    '&[data-show-padding="true"]:before': {
      content: '""',
      position: 'absolute',
      height: '8px',
--- a/packages/component/src/components/workspace/index.tsx
+++ b/packages/component/src/components/workspace/index.tsx
@ -1,4 +1,3 @@
-import { isDesktop } from '@affine/env/constant';
 import { clsx } from 'clsx';
 import type { FC, PropsWithChildren, ReactElement } from 'react';

@ -22,7 +21,7 @@ export const AppContainer: FC<WorkspaceRootProps> = ({
    <div
      className={clsx(appStyle, {
        'noisy-background': noisyBackground,
-        'blur-background': isDesktop && useBlurBackground,
+        'blur-background': environment.isDesktop && useBlurBackground,
      })}
      data-noise-background={noisyBackground}
      data-is-resizing={resizing}
@ -34,15 +33,24 @@ export const AppContainer: FC<WorkspaceRootProps> = ({

 export type MainContainerProps = PropsWithChildren<{
  className?: string;
-}>;
+  padding?: boolean;
+}> &
+  React.HTMLAttributes<HTMLDivElement>;

-export const MainContainer = (props: MainContainerProps): ReactElement => {
+export const MainContainer = ({
+  className,
+  padding,
+  children,
+  ...props
+}: MainContainerProps): ReactElement => {
  return (
    <div
-      className={clsx(mainContainerStyle, 'main-container', props.className)}
-      data-is-desktop={isDesktop}
+      {...props}
+      className={clsx(mainContainerStyle, 'main-container', className)}
+      data-is-macos={environment.isBrowser && environment.isMacOs}
+      data-show-padding={padding}
    >
-      {props.children}
+      {children}
    </div>
  );
 };
--- a/yarn.lock
+++ b/yarn.lock
@ -115,7 +115,7 @@ __metadata:
    "@radix-ui/react-toast": ^1.1.4
    "@toeverything/hooks": "workspace:*"
    "@toeverything/plugin-infra": "workspace:*"
-    "@toeverything/theme": ^0.7.4
+    "@toeverything/theme": ^0.7.6
    "@types/react": ^18.2.14
    "@types/react-datepicker": ^4.11.2
    "@types/react-dnd": ^3.0.2
@ -11279,10 +11279,10 @@ __metadata:
  languageName: node
  linkType: hard

-"@toeverything/theme@npm:^0.7.4":
-  version: 0.7.4
-  resolution: "@toeverything/theme@npm:0.7.4"
-  checksum: e1f6f8c9648ee3c253cb9726d5b1b2c96870415b4959c82696804e2b3dbf3fdecc94fd07b6536311c92529d48e3c1dbc04209d197de087e41014a6ade0b788cf
+"@toeverything/theme@npm:^0.7.6":
+  version: 0.7.6
+  resolution: "@toeverything/theme@npm:0.7.6"
+  checksum: 6a073ad9ef38de3d668195f0d266e33c5adc088cb584a19d3c3ca6275f3459e150148f70eb9e9696ed6907f4e3996d321795878427561502b44fecfbc4994992
  languageName: node
  linkType: hard