Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-09-22 19:53:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: settings style update (#3161)

Browse Source 
(cherry picked from commit d88a21d24a)
This commit is contained in:
Peng Xiao
2023-07-12 17:20:56 +08:00
committed by Alex Yang
parent 2c9c4c2cd3
commit c9a7744270
9 changed files with 45 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/atoms/settings.ts
+2 -1
View File
@@ -1,3 +1,4 @@
import { isDesktop } from '@affine/env/constant';
import { atom, useAtom } from 'jotai'; import { atom, useAtom } from 'jotai';
import { atomWithStorage } from 'jotai/utils'; import { atomWithStorage } from 'jotai/utils';
@@ -49,7 +50,7 @@ export const fontStyleOptions = [
}[]; }[];
const appSettingBaseAtom = atomWithStorage<AppSetting>('affine-settings', { const appSettingBaseAtom = atomWithStorage<AppSetting>('affine-settings', {
clientBorder: false, clientBorder: isDesktop,
fullWidthLayout: false, fullWidthLayout: false,
windowFrameStyle: 'frameless', windowFrameStyle: 'frameless',
fontStyle: 'Sans', fontStyle: 'Sans',
apps/web/src/components/affine/setting-modal/general-setting/appearance/index.tsx
+1 -1
View File
@@ -120,7 +120,7 @@ export const AppearanceSettings = () => {
<LanguageMenu triggerProps={{ size: 'small' }} /> <LanguageMenu triggerProps={{ size: 'small' }} />
</div> </div>
</SettingRow> </SettingRow>
{runtimeConfig.enableNewSettingUnstableApi && environment.isDesktop ? ( {environment.isDesktop ? (
<SettingRow <SettingRow
name={t['Client Border Style']()} name={t['Client Border Style']()}
desc={t['Customize the appearance of the client.']()} desc={t['Customize the appearance of the client.']()}
apps/web/src/components/affine/setting-modal/style.css.ts
+1 -2
View File
@@ -4,7 +4,7 @@ export const settingContent = style({
flexGrow: '1', flexGrow: '1',
height: '100%', height: '100%',
padding: '40px 15px 20px', padding: '40px 15px 20px',
overflowX: 'auto', overflow: 'auto',
}); });
globalStyle(`${settingContent} .wrapper`, { globalStyle(`${settingContent} .wrapper`, {
@@ -13,7 +13,6 @@ globalStyle(`${settingContent} .wrapper`, {
height: '100%', height: '100%',
maxWidth: '560px', maxWidth: '560px',
margin: '0 auto', margin: '0 auto',
overflowY: 'auto',
}); });
globalStyle(`${settingContent} .content`, { globalStyle(`${settingContent} .content`, {
minHeight: '100%', minHeight: '100%',
apps/web/src/components/blocksuite/workspace-header/styles.css.ts
+9 -2
View File
@@ -210,6 +210,7 @@ export const windowAppControlsWrapper = style({
display: 'flex', display: 'flex',
gap: '2px', gap: '2px',
transform: 'translateX(8px)', transform: 'translateX(8px)',
height: '100%',
}); });
export const windowAppControl = style({ export const windowAppControl = style({
@@ -217,11 +218,17 @@ export const windowAppControl = style({
cursor: 'pointer', cursor: 'pointer',
display: 'inline-flex', display: 'inline-flex',
width: '42px', width: '42px',
height: '32px', height: 'calc(100% - 10px)',
paddingTop: '10px',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
borderRadius: '4px', borderRadius: '0',
selectors: { selectors: {
'&[data-type="close"]': {
width: '56px',
paddingRight: '14px',
marginRight: '-14px',
},
'&[data-type="close"]:hover': { '&[data-type="close"]:hover': {
background: 'var(--affine-error-color)', background: 'var(--affine-error-color)',
color: '#FFFFFF', color: '#FFFFFF',
apps/web/src/layouts/workspace-layout.tsx
+4 -1
View File
@@ -46,6 +46,7 @@ import {
openWorkspacesModalAtom, openWorkspacesModalAtom,
} from '../atoms'; } from '../atoms';
import { useTrackRouterHistoryEffect } from '../atoms/history'; import { useTrackRouterHistoryEffect } from '../atoms/history';
import { useAppSetting } from '../atoms/settings';
import { AppContainer } from '../components/affine/app-container'; import { AppContainer } from '../components/affine/app-container';
import type { IslandItemNames } from '../components/pure/help-island'; import type { IslandItemNames } from '../components/pure/help-island';
import { HelpIsland } from '../components/pure/help-island'; import { HelpIsland } from '../components/pure/help-island';
@@ -335,6 +336,8 @@ export const WorkspaceLayoutInner: FC<PropsWithChildren> = ({ children }) => {
[moveToTrash, t] [moveToTrash, t]
); );
const [appSetting] = useAppSetting();
return ( return (
<> <>
<Head> <Head>
@@ -364,7 +367,7 @@ export const WorkspaceLayoutInner: FC<PropsWithChildren> = ({ children }) => {
currentPath={router.asPath.split('?')[0]} currentPath={router.asPath.split('?')[0]}
paths={isPublicWorkspace ? publicPathGenerator : pathGenerator} paths={isPublicWorkspace ? publicPathGenerator : pathGenerator}
/> />
<MainContainer> <MainContainer padding={appSetting.clientBorder}>
{children} {children}
<ToolContainer> <ToolContainer>
<BlockHubWrapper blockHubAtom={rootBlockHubAtom} /> <BlockHubWrapper blockHubAtom={rootBlockHubAtom} />
packages/component/package.json
+1 -1
View File
@@ -36,7 +36,7 @@
"@radix-ui/react-toast": "^1.1.4", "@radix-ui/react-toast": "^1.1.4",
"@toeverything/hooks": "workspace:*", "@toeverything/hooks": "workspace:*",
"@toeverything/plugin-infra": "workspace:*", "@toeverything/plugin-infra": "workspace:*",
"@toeverything/theme": "^0.7.4", "@toeverything/theme": "^0.7.6",
"@vanilla-extract/dynamic": "^2.0.3", "@vanilla-extract/dynamic": "^2.0.3",
"clsx": "^1.2.1", "clsx": "^1.2.1",
"dayjs": "^1.11.9", "dayjs": "^1.11.9",
packages/component/src/components/workspace/index.css.ts
+7 -4
View File
@@ -57,9 +57,9 @@ export const mainContainerStyle = style({
zIndex: 2, zIndex: 2,
backgroundColor: 'var(--affine-background-primary-color)', backgroundColor: 'var(--affine-background-primary-color)',
selectors: { selectors: {
'&[data-is-desktop="true"]': { '&[data-show-padding="true"]': {
margin: '8px 8px 8px 8px', margin: '8px',
borderRadius: '8px', borderRadius: '5px',
overflow: 'hidden', overflow: 'hidden',
boxShadow: 'var(--affine-shadow-1)', boxShadow: 'var(--affine-shadow-1)',
'@media': { '@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: '""', content: '""',
position: 'absolute', position: 'absolute',
height: '8px', height: '8px',
packages/component/src/components/workspace/index.tsx
+15 -7
View File
@@ -1,4 +1,3 @@
import { isDesktop } from '@affine/env/constant';
import { clsx } from 'clsx'; import { clsx } from 'clsx';
import type { FC, PropsWithChildren, ReactElement } from 'react'; import type { FC, PropsWithChildren, ReactElement } from 'react';
@@ -22,7 +21,7 @@ export const AppContainer: FC<WorkspaceRootProps> = ({
<div <div
className={clsx(appStyle, { className={clsx(appStyle, {
'noisy-background': noisyBackground, 'noisy-background': noisyBackground,
'blur-background': isDesktop && useBlurBackground, 'blur-background': environment.isDesktop && useBlurBackground,
})} })}
data-noise-background={noisyBackground} data-noise-background={noisyBackground}
data-is-resizing={resizing} data-is-resizing={resizing}
@@ -34,15 +33,24 @@ export const AppContainer: FC<WorkspaceRootProps> = ({
export type MainContainerProps = PropsWithChildren<{ export type MainContainerProps = PropsWithChildren<{
className?: string; className?: string;
}>; padding?: boolean;
}> &
React.HTMLAttributes<HTMLDivElement>;
export const MainContainer = (props: MainContainerProps): ReactElement => { export const MainContainer = ({
className,
padding,
children,
...props
}: MainContainerProps): ReactElement => {
return ( return (
<div <div
className={clsx(mainContainerStyle, 'main-container', props.className)} {...props}
data-is-desktop={isDesktop} className={clsx(mainContainerStyle, 'main-container', className)}
data-is-macos={environment.isBrowser && environment.isMacOs}
data-show-padding={padding}
> >
{props.children} {children}
</div> </div>
); );
}; };
yarn.lock
+5 -5
View File
@@ -115,7 +115,7 @@ __metadata:
"@radix-ui/react-toast": ^1.1.4 "@radix-ui/react-toast": ^1.1.4
"@toeverything/hooks": "workspace:*" "@toeverything/hooks": "workspace:*"
"@toeverything/plugin-infra": "workspace:*" "@toeverything/plugin-infra": "workspace:*"
"@toeverything/theme": ^0.7.4 "@toeverything/theme": ^0.7.6
"@types/react": ^18.2.14 "@types/react": ^18.2.14
"@types/react-datepicker": ^4.11.2 "@types/react-datepicker": ^4.11.2
"@types/react-dnd": ^3.0.2 "@types/react-dnd": ^3.0.2
@@ -11279,10 +11279,10 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"@toeverything/theme@npm:^0.7.4": "@toeverything/theme@npm:^0.7.6":
version: 0.7.4 version: 0.7.6
resolution: "@toeverything/theme@npm:0.7.4" resolution: "@toeverything/theme@npm:0.7.6"
checksum: e1f6f8c9648ee3c253cb9726d5b1b2c96870415b4959c82696804e2b3dbf3fdecc94fd07b6536311c92529d48e3c1dbc04209d197de087e41014a6ade0b788cf checksum: 6a073ad9ef38de3d668195f0d266e33c5adc088cb584a19d3c3ca6275f3459e150148f70eb9e9696ed6907f4e3996d321795878427561502b44fecfbc4994992
languageName: node languageName: node
linkType: hard linkType: hard