Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-12 04:18:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: new setting modal (#2834)

Browse Source 
Co-authored-by: Alex Yang <himself65@outlook.com>
This commit is contained in:
Qi
2023-06-21 19:57:59 +08:00
committed by GitHub
parent 9a90ce694c
commit aa86d3a2ee
64 changed files with 1911 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/component/package.json
View File

@@ -54,7 +54,7 @@
"@blocksuite/blocks": "0.0.0-20230607055421-9b20fcaf-nightly",
"@blocksuite/editor": "0.0.0-20230607055421-9b20fcaf-nightly",
"@blocksuite/global": "0.0.0-20230607055421-9b20fcaf-nightly",
"@blocksuite/icons": "^2.1.19",
"@blocksuite/icons": "^2.1.21",
"@blocksuite/lit": "0.0.0-20230607055421-9b20fcaf-nightly",
"@blocksuite/store": "0.0.0-20230607055421-9b20fcaf-nightly",
"@types/react": "^18.2.12",

4
packages/component/src/components/affine-banner/download-client.tsx
View File

@@ -1,5 +1,5 @@
import { Trans } from '@affine/i18n';
import { AffineLogoSimCBlue1_1Icon, CloseIcon } from '@blocksuite/icons';
import { AffineLogoSBlue2_1Icon, CloseIcon } from '@blocksuite/icons';
import {
downloadCloseButtonStyle,
@@ -17,7 +17,7 @@ export const DownloadTips = ({ onClose }: { onClose: () => void }) => {
data-testid="download-client-tip"
>
<div className={downloadTipStyle}>
<AffineLogoSimCBlue1_1Icon className={downloadTipIconStyle} />
<AffineLogoSBlue2_1Icon className={downloadTipIconStyle} />
<div className={downloadMessageStyle}>
<Trans i18nKey="com.affine.banner.content">
Enjoying the demo?

4
packages/component/src/components/app-sidebar/index.css.ts
View File

@@ -16,6 +16,7 @@ export const navWrapperStyle = style({
zIndex: 2,
paddingBottom: '8px',
backgroundColor: 'transparent',
borderRight: '1px solid var(--affine-border-color)',
'@media': {
[`(max-width: ${floatingMaxWidth}px)`]: {
position: 'absolute',
@@ -39,6 +40,9 @@ export const navWrapperStyle = style({
'&[data-enable-animation="true"]': {
transition: 'margin-left .3s, width .3s',
},
'&.has-background': {
backgroundColor: 'var(--affine-white-60)',
},
},
});

11
packages/component/src/components/app-sidebar/index.tsx
View File

@@ -1,6 +1,7 @@
import { env } from '@affine/env';
import { Skeleton } from '@mui/material';
import { assignInlineVars } from '@vanilla-extract/dynamic';
import clsx from 'clsx';
import { useAtom, useAtomValue } from 'jotai';
import type { PropsWithChildren, ReactElement } from 'react';
import { useEffect, useRef, useState } from 'react';
@@ -25,7 +26,11 @@ import { ResizeIndicator } from './resize-indicator';
import type { SidebarHeaderProps } from './sidebar-header';
import { SidebarHeader } from './sidebar-header';
export type AppSidebarProps = PropsWithChildren<SidebarHeaderProps>;
export type AppSidebarProps = PropsWithChildren<
SidebarHeaderProps & {
hasBackground?: boolean;
}
>;
function useEnableAnimation() {
const [enable, setEnable] = useState(false);
@@ -91,7 +96,9 @@ export function AppSidebar(props: AppSidebarProps): ReactElement {
style={assignInlineVars({
[navWidthVar]: `${appSidebarWidth}px`,
})}
className={navWrapperStyle}
className={clsx(navWrapperStyle, {
'has-background': env.isDesktop && props.hasBackground,
})}
data-open={open}
data-is-macos-electron={isMacosDesktop}
data-enable-animation={enableAnimation && !isResizing}

5
packages/component/src/components/block-suite-editor/index.tsx
View File

@@ -23,6 +23,7 @@ export type EditorProps = {
onInit: (page: Page, editor: Readonly<EditorContainer>) => void;
onLoad?: (page: Page, editor: EditorContainer) => () => void;
style?: CSSProperties;
className?: string;
};
export type ErrorBoundaryProps = {
@@ -122,7 +123,9 @@ const BlockSuiteEditorImpl = (props: EditorProps): ReactElement => {
}, [editor, page]);
// issue: https://github.com/toeverything/AFFiNE/issues/2004
const className = `editor-wrapper ${editor.mode}-mode`;
const className = `editor-wrapper ${editor.mode}-mode ${
props.className || ''
}`;
return (
<div
data-testid={`editor-${page.id}`}

4
packages/component/src/components/contact-modal/index.tsx
View File

@@ -20,7 +20,7 @@ import {
StyledSmallLink,
StyledSubTitle,
} from './style';
const linkList = [
export const relatedLinks = [
{
icon: <GithubIcon />,
title: 'GitHub',
@@ -107,7 +107,7 @@ export const ContactModal = ({
{t['Get in touch! Join our communities']()}
</StyledSubTitle>
<FlexWrapper justifyContent="center">
{linkList.map(({ icon, title, link }) => {
{relatedLinks.map(({ icon, title, link }) => {
return (
<StyledSmallLink key={title} href={link} target="_blank">
{icon}

4
packages/component/src/components/notification-center/index.tsx
View File

@@ -2,7 +2,7 @@
// License on the MIT
// https://github.com/emilkowalski/sonner/blob/5cb703edc108a23fd74979235c2f3c4005edd2a7/src/index.tsx
import { CloseIcon, InformationFillIcon } from '@blocksuite/icons';
import { CloseIcon, InformationIcon } from '@blocksuite/icons';
import * as Toast from '@radix-ui/react-toast';
import clsx from 'clsx';
import { useAtom, useAtomValue, useSetAtom } from 'jotai';
@@ -303,7 +303,7 @@ function NotificationCard(props: NotificationCardProps): ReactElement {
[styles.lightInfoIconStyle]: notification.theme !== 'dark',
})}
>
<InformationFillIcon />
<InformationIcon />
</div>
<div className={styles.notificationTitleContactStyle}>
{notification.title}

5
packages/component/src/components/workspace/index.css.ts
View File

@@ -14,7 +14,10 @@ export const appStyle = style({
'&[data-is-resizing="true"]': {
cursor: 'col-resize',
},
'&:before': {
'&.blur-background': {
backgroundColor: 'var(--affine-background-primary-color)',
},
'&.noisy-background::before': {
content: '""',
position: 'absolute',
inset: 0,

23
packages/component/src/components/workspace/index.tsx
View File

@@ -1,22 +1,33 @@
import { clsx } from 'clsx';
import type { PropsWithChildren, ReactElement } from 'react';
import type { FC, PropsWithChildren, ReactElement } from 'react';
import { AppSidebarFallback } from '../app-sidebar';
import { appStyle, mainContainerStyle, toolStyle } from './index.css';
export type WorkspaceRootProps = PropsWithChildren<{
resizing?: boolean;
useNoisyBackground?: boolean;
useBlurBackground?: boolean;
}>;
export const AppContainer = (props: WorkspaceRootProps): ReactElement => {
const noisyBackground = environment.isDesktop && environment.isMacOs;
export const AppContainer: FC<WorkspaceRootProps> = ({
resizing,
useNoisyBackground,
useBlurBackground,
children,
}) => {
const noisyBackground =
useNoisyBackground && environment.isDesktop && environment.isMacOs;
return (
<div
className={appStyle}
className={clsx(appStyle, {
'noisy-background': noisyBackground,
'blur-background': environment.isDesktop && useBlurBackground,
})}
data-noise-background={noisyBackground}
data-is-resizing={props.resizing}
data-is-resizing={resizing}
>
{props.children}
{children}
</div>
);
};

1
packages/component/src/ui/menu/index.ts
View File

@@ -1,4 +1,5 @@
export * from './menu';
// export { StyledMenuItem as MenuItem } from './styles';
export * from './menu-item';
export * from './menu-trigger';
export * from './pure-menu';

22
packages/component/src/ui/menu/menu-trigger.tsx Normal file
View File

@@ -0,0 +1,22 @@
import { ArrowDownSmallIcon } from '@blocksuite/icons';
import { forwardRef } from 'react';
import type { ButtonProps } from '../button';
import { StyledButton } from './styles';
export const MenuTrigger = forwardRef<HTMLButtonElement, ButtonProps>(
({ children, ...props }, ref) => {
return (
<StyledButton
ref={ref}
icon={<ArrowDownSmallIcon />}
iconPosition="end"
noBorder={true}
{...props}
>
{children}
</StyledButton>
);
}
);
MenuTrigger.displayName = 'MenuTrigger';

14
packages/component/src/ui/menu/styles.ts
View File

@@ -1,6 +1,7 @@
import type { CSSProperties } from 'react';
import { displayFlex, styled, textEllipsis } from '../../styles';
import { Button } from '../button';
import StyledPopperContainer from '../shared/container';
export const StyledMenuWrapper = styled(StyledPopperContainer, {
@@ -100,3 +101,16 @@ export const StyledMenuItem = styled('button')<{
};
}
);
export const StyledButton = styled(Button)(() => {
return {
width: '100%',
height: '32px',
borderRadius: '8px',
backgroundColor: 'transparent',
...displayFlex('space-between', 'center'),
border: `1px solid var(--affine-border-color)`,
padding: '0 10px',
fontSize: 'var(--affine-font-base)',
};
});

1
packages/env/src/config.ts vendored
View File

@@ -48,6 +48,7 @@ export const buildFlagsSchema = z.object({
enableLegacyCloud: z.boolean(),
changelogUrl: z.string(),
enablePreloading: z.boolean(),
enableNewSettingModal: z.boolean(),
});
export const blockSuiteFeatureFlags = z.object({

14
packages/env/src/workspace.ts vendored
View File

@@ -201,6 +201,19 @@ type SettingProps<Flavour extends keyof WorkspaceRegistry> =
) => void;
};
type NewSettingProps<Flavour extends keyof WorkspaceRegistry> =
UIBaseProps<Flavour> & {
onDeleteWorkspace: () => Promise<void>;
onTransformWorkspace: <
From extends keyof WorkspaceRegistry,
To extends keyof WorkspaceRegistry
>(
from: From,
to: To,
workspace: WorkspaceRegistry[From]
) => void;
};
type PageDetailProps<Flavour extends keyof WorkspaceRegistry> =
UIBaseProps<Flavour> & {
currentPageId: string;
@@ -218,6 +231,7 @@ export interface WorkspaceUISchema<Flavour extends keyof WorkspaceRegistry> {
PageDetail: FC<PageDetailProps<Flavour>>;
PageList: FC<PageListProps<Flavour>>;
SettingsDetail: FC<SettingProps<Flavour>>;
NewSettingsDetail: FC<NewSettingProps<Flavour>>;
Provider: FC<PropsWithChildren>;
}

64
packages/i18n/src/resources/en.json
View File

@@ -297,5 +297,67 @@
"Update Available": "Update available",
"dark": "Dark",
"system": "System",
"light": "Light"
"light": "Light",
"Need more customization options? You can suggest them to us in the community.": "Need more customization options? You can suggest them to us in the community.",
"Check Keyboard Shortcuts quickly": "Check Keyboard Shortcuts quickly",
"Quick Search": "Quick Search",
"Append to Daily Note": "Append to Daily Note",
"Expand/Collapse Sidebar": "Expand/Collapse Sidebar",
"Go Back": "Go Back",
"Go Forward": "Go Forward",
"Select All": "Select All",
"Zoom in": "Zoom in",
"Zoom out": "Zoom out",
"Zoom to 100%": "Zoom to 100%",
"Zoom to fit": "Zoom to fit",
"Image": "Image",
"Straight Connector": "Straight Connector",
"Elbowed Connector": "Elbowed Connector",
"Curve Connector": "Curve Connector",
"Hand": "Hand",
"Note": "Note",
"Group": "Group",
"Ungroup": "Ungroup",
"Group as Database": "Group as Database",
"Move Up": "Move Up",
"Move Down": "Move Down",
"Appearance Settings": "Appearance Settings",
"Customize your AFFiNE Appearance": "Customize your AFFiNE Appearance",
"Theme": "Theme",
"Date": "Date",
"Sidebar": "Sidebar",
"Color Scheme": "Color Scheme",
"Choose your color scheme": "Choose your color scheme",
"Display Language": "Display Language",
"Select the language for the interface.": "Select the language for the interface.",
"Client Border Style": "Client Border Style",
"Customize the appearance of the client.": "Customize the appearance of the client.",
"Full width Layout": "Full width Layout",
"Maximum display of content within a page.": "Maximum display of content within a page.",
"Window frame style": "Window frame style",
"Customize appearance of Windows Client.": "Customize appearance of Windows Client.",
"Date Format": "Date Format",
"Customize your date style.": "Customize your date style.",
"Start Week On Monday": "Start Week On Monday",
"By default, the week starts on Sunday.": "By default, the week starts on Sunday.",
"Disable the noise background on the sidebar": "Disable the noise background on the sidebar",
"None yet": "None yet",
"Disable the blur sidebar": "Disable the blur sidebar",
"frameless": "Frameless",
"NativeTitleBar": "Native Titlebar",
"About AFFiNE": "About AFFiNE",
"Version": "Version",
"Contact with us": "Contact with us",
"Communities": "Communities",
"Info of legal": "Info of legal",
"Check for updates": "Check for updates",
"New version is ready": "New version is ready",
"Check for updates automatically": "Check for updates automatically",
"If enabled, it will automatically check for new versions at regular intervals.": "If enabled, it will automatically check for new versions at regular intervals.",
"Download updates automatically": "Download updates automatically",
"If enabled, new versions will be automatically downloaded to the current device.": " If enabled, new versions will be automatically downloaded to the current device.",
"Discover what's new": "Discover what's new",
"View the AFFiNE Changelog.": "View the AFFiNE Changelog.",
"Privacy": "Privacy",
"Terms of Use": "Terms of Use"
}

2
packages/storybook/package.json
View File

@@ -33,7 +33,7 @@
"@blocksuite/blocks": "0.0.0-20230607055421-9b20fcaf-nightly",
"@blocksuite/editor": "0.0.0-20230607055421-9b20fcaf-nightly",
"@blocksuite/global": "0.0.0-20230607055421-9b20fcaf-nightly",
"@blocksuite/icons": "^2.1.19",
"@blocksuite/icons": "^2.1.21",
"@blocksuite/lit": "0.0.0-20230607055421-9b20fcaf-nightly",
"@blocksuite/store": "0.0.0-20230607055421-9b20fcaf-nightly",
"react": "18.3.0-canary-16d053d59-20230506",