fix: a serise of ui issues of new setting (#2920)

Co-authored-by: Alex Yang <himself65@outlook.com>
2024-12-23 21:55:02 +03:00 · 2023-06-29 17:25:42 +08:00 · 2023-06-29 17:25:42 +08:00 · 5cfdf6c7e2
commit 5cfdf6c7e2
parent 8410d83744
11 changed files with 43 additions and 41 deletions
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@ -27,6 +27,7 @@ on:

 env:
  DEBUG: napi:*
+  BUILD_TYPE: canary
  APP_NAME: affine
  COVERAGE: true
  MACOSX_DEPLOYMENT_TARGET: '10.13'
@ -89,8 +90,6 @@ jobs:
    name: Build @affine/web
    runs-on: ubuntu-latest
    environment: development
-    env:
-      RELEASE_VERSION: canary

    steps:
      - uses: actions/checkout@v3
@ -109,9 +108,6 @@ jobs:
    name: Build @affine/web (Desktop)
    runs-on: ubuntu-latest
    environment: development
-    env:
-      ENABLE_BOOKMARK_OPERATION: true
-      RELEASE_VERSION: canary

    steps:
      - uses: actions/checkout@v3
--- a/apps/web/preset.config.mjs
+++ b/apps/web/preset.config.mjs
@ -19,7 +19,7 @@ export const blockSuiteFeatureFlags = {
 */
 const buildPreset = {
  stable: {
-    enableAllPageFilter: true,
+    enableAllPageSaving: false,
    enablePlugin: false,
    enableTestProperties: false,
    enableBroadcastChannelProvider: true,
@ -28,13 +28,14 @@ const buildPreset = {
    changelogUrl: 'https://affine.pro/blog/what-is-new-affine-0620',
    enablePreloading: true,
    enableNewSettingModal: false,
+    enableNewSettingUnstableApi: false,
    enableSQLiteProvider: false,
  },
  beta: {},
  internal: {},
  // canary will be aggressive and enable all features
  canary: {
-    enableAllPageFilter: true,
+    enableAllPageSaving: true,
    enablePlugin: true,
    enableTestProperties: true,
    enableBroadcastChannelProvider: true,
@ -43,6 +44,7 @@ const buildPreset = {
    changelogUrl: 'https://github.com/toeverything/AFFiNE/releases',
    enablePreloading: true,
    enableNewSettingModal: true,
+    enableNewSettingUnstableApi: false,
    enableSQLiteProvider: false,
  },
 };
@ -51,36 +53,43 @@ const buildPreset = {
 buildPreset.beta = buildPreset.stable;
 buildPreset.internal = buildPreset.stable;

-const currentBuild = process.env.BUILD_ENV || 'stable';
+const currentBuild = process.env.BUILD_TYPE || 'stable';
+
+if (process.env.CI && !process.env.BUILD_TYPE) {
+  throw new Error('BUILD_ENV is required in CI');
+}

 const currentBuildPreset = buildPreset[currentBuild];

 const environmentPreset = {
  enablePlugin: process.env.ENABLE_PLUGIN
    ? process.env.ENABLE_PLUGIN === 'true'
-    : buildPreset.canary.enablePlugin,
-  enableAllPageFilter: process.env.ENABLE_ALL_PAGE_FILTER
+    : currentBuildPreset.enablePlugin,
+  enableAllPageSaving: process.env.ENABLE_ALL_PAGE_SAVING
    ? process.env.ENABLE_ALL_PAGE_FILTER === 'true'
-    : buildPreset.canary.enableAllPageFilter,
+    : currentBuildPreset.enableAllPageSaving,
  enableTestProperties: process.env.ENABLE_TEST_PROPERTIES
    ? process.env.ENABLE_TEST_PROPERTIES === 'true'
-    : buildPreset.canary.enableTestProperties,
+    : currentBuildPreset.enableTestProperties,
  enableLegacyCloud: process.env.ENABLE_LEGACY_PROVIDER
    ? process.env.ENABLE_LEGACY_PROVIDER === 'true'
-    : buildPreset.canary.enableLegacyCloud,
+    : currentBuildPreset.enableLegacyCloud,
  enableBroadcastChannelProvider: process.env.ENABLE_BC_PROVIDER
    ? process.env.ENABLE_BC_PROVIDER !== 'false'
-    : buildPreset.canary.enableBroadcastChannelProvider,
-  changelogUrl: process.env.CHANGELOG_URL ?? buildPreset.canary.changelogUrl,
+    : currentBuildPreset.enableBroadcastChannelProvider,
+  changelogUrl: process.env.CHANGELOG_URL ?? currentBuildPreset.changelogUrl,
  enablePreloading: process.env.ENABLE_PRELOADING
    ? process.env.ENABLE_PRELOADING === 'true'
-    : buildPreset.canary.enablePreloading,
+    : currentBuildPreset.enablePreloading,
  enableNewSettingModal: process.env.ENABLE_NEW_SETTING_MODAL
    ? process.env.ENABLE_NEW_SETTING_MODAL === 'true'
-    : buildPreset.canary.enableNewSettingModal,
+    : currentBuildPreset.enableNewSettingModal,
  enableSQLiteProvider: process.env.ENABLE_SQLITE_PROVIDER
    ? process.env.ENABLE_SQLITE_PROVIDER === 'true'
-    : buildPreset.canary.enableSQLiteProvider,
+    : currentBuildPreset.enableSQLiteProvider,
+  enableNewSettingUnstableApi: process.env.ENABLE_NEW_SETTING_UNSTABLE_API
+    ? process.env.ENABLE_NEW_SETTING_UNSTABLE_API === 'true'
+    : currentBuildPreset.enableNewSettingUnstableApi,
 };

 /**
@ -91,7 +100,7 @@ const buildFlags = {
  // environment preset will overwrite current build preset
  // this environment variable is for debug proposes only
  // do not put them into CI
-  ...environmentPreset,
+  ...(process.env.CI ? {} : environmentPreset),
 };

 export { buildFlags };
--- a/apps/web/src/components/affine/new-workspace-setting-detail/publish.tsx
+++ b/apps/web/src/components/affine/new-workspace-setting-detail/publish.tsx
@ -137,9 +137,7 @@ const PublishPanelLocal: FC<PublishPanelLocalProps> = ({
          }}
          style={{ marginTop: '12px' }}
        >
-          {runtimeConfig.enableLegacyCloud
-            ? t['Enable AFFiNE Cloud']()
-            : 'Disable AFFiNE Cloud'}
+          {t['Enable AFFiNE Cloud']()}
        </Button>
      </SettingRow>
      <FakePublishPanelAffine workspace={workspace} />
--- a/apps/web/src/components/affine/setting-modal/config.ts
+++ b/apps/web/src/components/affine/setting-modal/config.ts
@ -1,2 +0,0 @@
-// Some settings are not implemented yet, but need to show in the setting modal when boss is watching.
-export const IS_EXHIBITION = true;
--- a/apps/web/src/components/affine/setting-modal/general-setting/about/index.tsx
+++ b/apps/web/src/components/affine/setting-modal/general-setting/about/index.tsx
@ -8,7 +8,6 @@ import { ArrowRightSmallIcon, OpenInNewIcon } from '@blocksuite/icons';
 import { useCallback } from 'react';

 import { type AppSetting, useAppSetting } from '../../../../../atoms/settings';
-import { IS_EXHIBITION } from '../../config';
 import { communityItem, communityWrapper, link } from './style.css';

 export const AboutAffine = () => {
@ -23,7 +22,7 @@ export const AboutAffine = () => {
  return (
    <>
      <SettingHeader title={t['About AFFiNE']()} subtitle={t['None yet']()} />
-      {IS_EXHIBITION && environment.isDesktop ? (
+      {runtimeConfig.enableNewSettingUnstableApi && environment.isDesktop ? (
        <SettingWrapper title={t['Version']()}>
          <SettingRow
            name={t['Check for updates']()}
--- 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
@ -12,7 +12,6 @@ import {
  windowFrameStyleOptions,
 } from '../../../../../atoms/settings';
 import { LanguageMenu } from '../../../language-menu';
-import { IS_EXHIBITION } from '../../config';
 import { DateFormatSetting } from './date-format-setting';
 import { settingWrapper } from './style.css';

@ -70,7 +69,7 @@ export const AppearanceSettings = () => {
            <LanguageMenu />
          </div>
        </SettingRow>
-        {IS_EXHIBITION && environment.isDesktop ? (
+        {runtimeConfig.enableNewSettingUnstableApi && environment.isDesktop ? (
          <SettingRow
            name={t['Client Border Style']()}
            desc={t['Customize the appearance of the client.']()}
@ -91,7 +90,7 @@ export const AppearanceSettings = () => {
            onChange={checked => changeSwitch('fullWidthLayout', checked)}
          />
        </SettingRow>
-        {IS_EXHIBITION && environment.isDesktop ? (
+        {runtimeConfig.enableNewSettingUnstableApi && environment.isDesktop ? (
          <SettingRow
            name={t['Window frame style']()}
            desc={t['Customize appearance of Windows Client.']()}
@ -114,7 +113,7 @@ export const AppearanceSettings = () => {
          </SettingRow>
        ) : null}
      </SettingWrapper>
-      {IS_EXHIBITION ? (
+      {runtimeConfig.enableNewSettingUnstableApi ? (
        <SettingWrapper title={t['Date']()}>
          <SettingRow
            name={t['Date Format']()}
@ -154,9 +153,9 @@ export const AppearanceSettings = () => {
            desc={t['None yet']()}
          >
            <Switch
-              checked={appSettings.disableBlurBackground}
+              checked={!appSettings.disableBlurBackground}
              onChange={checked =>
-                changeSwitch('disableBlurBackground', checked)
+                changeSwitch('disableBlurBackground', !checked)
              }
            />
          </SettingRow>
--- a/apps/web/src/components/affine/setting-modal/style.css.ts
+++ b/apps/web/src/components/affine/setting-modal/style.css.ts
@ -3,7 +3,8 @@ import { globalStyle, style } from '@vanilla-extract/css';
 export const settingContent = style({
  flexGrow: '1',
  height: '100%',
-  padding: '40px 0',
+  padding: '40px 15px 20px',
+  overflowX: 'auto',
 });

 globalStyle(`${settingContent} .wrapper`, {
--- a/apps/web/src/components/workspace-header.tsx
+++ b/apps/web/src/components/workspace-header.tsx
@ -39,7 +39,7 @@ export function WorkspaceHeader({
              }}
            />
          </div>
-          {runtimeConfig.enableAllPageFilter && (
+          {runtimeConfig.enableAllPageSaving && (
            <div>
              {setting.currentView.id !== NIL ||
              (setting.currentView.id === NIL &&
--- a/packages/component/src/components/app-sidebar/index.css.ts
+++ b/packages/component/src/components/app-sidebar/index.css.ts
@ -16,7 +16,6 @@ export const navWrapperStyle = style({
  zIndex: 2,
  paddingBottom: '8px',
  backgroundColor: 'transparent',
-  borderRight: '1px solid var(--affine-border-color)',
  '@media': {
    [`(max-width: ${floatingMaxWidth}px)`]: {
      position: 'absolute',
@ -42,6 +41,10 @@ export const navWrapperStyle = style({
    },
    '&.has-background': {
      backgroundColor: 'var(--affine-white-60)',
+      borderRight: '1px solid var(--affine-border-color)',
+    },
+    '&.has-border': {
+      borderRight: '1px solid var(--affine-border-color)',
    },
  },
 });
--- a/packages/component/src/components/app-sidebar/index.tsx
+++ b/packages/component/src/components/app-sidebar/index.tsx
@ -97,6 +97,9 @@ export function AppSidebar(props: AppSidebarProps): ReactElement {
        })}
        className={clsx(navWrapperStyle, {
          'has-background': environment.isDesktop && props.hasBackground,
+          'has-border':
+            !environment.isDesktop ||
+            (environment.isDesktop && props.hasBackground),
        })}
        data-open={open}
        data-is-macos-electron={isMacosDesktop}
--- a/packages/env/src/global.ts
+++ b/packages/env/src/global.ts
@ -50,12 +50,7 @@ declare global {
 }

 export const buildFlagsSchema = z.object({
-  /**
-   * todo: remove this build flag when filter feature is ready.
-   *
-   * filter feature in the all pages.
-   */
-  enableAllPageFilter: z.boolean(),
+  enableAllPageSaving: z.boolean(),
  enablePlugin: z.boolean(),
  enableTestProperties: z.boolean(),
  enableBroadcastChannelProvider: z.boolean(),
@ -64,6 +59,7 @@ export const buildFlagsSchema = z.object({
  changelogUrl: z.string(),
  enablePreloading: z.boolean(),
  enableNewSettingModal: z.boolean(),
+  enableNewSettingUnstableApi: z.boolean(),
  enableSQLiteProvider: z.boolean(),
 });