Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-13 21:05:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add worksapce type label (#4045)

Browse Source 
Co-authored-by: Alex Yang <himself65@outlook.com>
This commit is contained in:
JimmFly
2023-09-01 02:16:58 +08:00
committed by GitHub
parent 18d5a99af5
commit df4d71b0c8
9 changed files with 213 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/core/src/components/pure/header/style.css.tsx
View File

@@ -7,6 +7,7 @@ export const header = style({
position: 'relative',
padding: '0 16px',
minHeight: '52px',
background: 'var(--affine-background-primary-color)',
borderBottom: '1px solid var(--affine-border-color)',
zIndex: 2,
selectors: {

4
apps/core/src/components/pure/workspace-list-modal/index.tsx
View File

@@ -110,9 +110,9 @@ const CloudWorkSpaceList = ({
<>
<StyledModalHeader>
<StyledModalHeaderLeft>
<StyledModalTitle>
<StyledWorkspaceFlavourTitle>
{t['com.affine.workspace.cloud']()}
</StyledModalTitle>
</StyledWorkspaceFlavourTitle>
</StyledModalHeaderLeft>
</StyledModalHeader>
<StyledModalContent>

5
apps/core/src/components/pure/workspace-list-modal/styles.ts
View File

@@ -236,9 +236,8 @@ export const StyledModalBody = styled('div')(() => {
export const StyledWorkspaceFlavourTitle = styled('div')(() => {
return {
fontSize: '12px',
fontWeight: 600,
fontSize: 'var(--affine-font-xs)',
color: 'var(--affine-text-secondary-color)',
lineHeight: '20px',
marginBottom: '4px',
};
});

17
apps/core/src/components/pure/workspace-slider-bar/WorkspaceSelector/styles.ts
View File

@@ -1,6 +1,10 @@
import { displayFlex, textEllipsis } from '@affine/component';
import { styled } from '@affine/component';
export const StyledSelectorContainer = styled('div')(() => {
export const StyledSelectorContainer = styled('div')(({
disableHoverBackground,
}: {
disableHoverBackground: boolean;
}) => {
return {
height: '58px',
display: 'flex',
@@ -10,7 +14,7 @@ export const StyledSelectorContainer = styled('div')(() => {
color: 'var(--affine-text-primary-color)',
':hover': {
cursor: 'pointer',
background: 'var(--affine-hover-color)',
background: disableHoverBackground ? '' : 'var(--affine-hover-color)',
},
};
});
@@ -38,10 +42,17 @@ export const StyledWorkspaceStatus = styled('div')(() => {
fontSize: 'var(--affine-font-sm)',
color: 'var(--affine-text-secondary-color)',
userSelect: 'none',
padding: '0 4px',
gap: '4px',
zIndex: '1',
svg: {
color: 'var(--affine-icon-color)',
fontSize: 'var(--affine-font-base)',
marginRight: '4px',
},
':hover': {
cursor: 'pointer',
borderRadius: '4px',
background: 'var(--affine-hover-color)',
},
};
});

76
apps/core/src/components/pure/workspace-slider-bar/WorkspaceSelector/workspace-selector.tsx
View File

@@ -1,9 +1,16 @@
import { WorkspaceAvatar } from '@affine/component/workspace-avatar';
import { CloudWorkspaceIcon, LocalWorkspaceIcon } from '@blocksuite/icons';
import {
CloudWorkspaceIcon,
LocalWorkspaceIcon,
NoNetworkIcon,
} from '@blocksuite/icons';
import { Tooltip } from '@toeverything/components/tooltip';
import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-block-suite-workspace-name';
import type React from 'react';
import { useCallback } from 'react';
import { useCallback, useMemo, useState } from 'react';
import { useCurrentLoginStatus } from '../../../../hooks/affine/use-current-login-status';
import { useSystemOnline } from '../../../../hooks/use-system-online';
import type { AllWorkspace } from '../../../../shared';
import { workspaceAvatarStyle } from './index.css';
import {
@@ -29,7 +36,8 @@ export const WorkspaceSelector = ({
const [name] = useBlockSuiteWorkspaceName(
currentWorkspace.blockSuiteWorkspace
);
const [isHovered, setIsHovered] = useState(false);
const [container, setContainer] = useState<HTMLDivElement | null>(null);
// Open dialog when `Enter` or `Space` pressed
// TODO-Doma Refactor with `@radix-ui/react-dialog` or other libraries that handle these out of the box and be accessible by default
// TODO: Delete this?
@@ -43,13 +51,48 @@ export const WorkspaceSelector = ({
},
[onClick]
);
const loginStatus = useCurrentLoginStatus();
const isOnline = useSystemOnline();
const content = useMemo(() => {
if (!isOnline) {
return 'Disconnected, please check your network connection';
}
if (
loginStatus === 'authenticated' &&
currentWorkspace.flavour !== 'local'
) {
return 'Sync with AFFiNE Cloud';
}
return 'Saved locally';
}, [currentWorkspace.flavour, isOnline, loginStatus]);
const WorkspaceStatus = () => {
if (!isOnline) {
return (
<>
<NoNetworkIcon />
Offline
</>
);
}
return (
<>
{currentWorkspace.flavour === 'local' ? (
<LocalWorkspaceIcon />
) : (
<CloudWorkspaceIcon />
)}
{currentWorkspace.flavour === 'local' ? 'Local' : 'AFFiNE Cloud'}
</>
);
};
return (
<StyledSelectorContainer
role="button"
tabIndex={0}
onClick={onClick}
onKeyDown={handleKeyDown}
disableHoverBackground={isHovered}
data-testid="current-workspace"
id="current-workspace"
>
@@ -63,14 +106,25 @@ export const WorkspaceSelector = ({
<StyledWorkspaceName data-testid="workspace-name">
{name}
</StyledWorkspaceName>
<StyledWorkspaceStatus>
{currentWorkspace.flavour === 'local' ? (
<LocalWorkspaceIcon />
) : (
<CloudWorkspaceIcon />
)}
{currentWorkspace.flavour === 'local' ? 'Local' : 'AFFiNE Cloud'}
</StyledWorkspaceStatus>
<div style={{ display: 'flex' }}>
<Tooltip
content={content}
portalOptions={{
container,
}}
>
<StyledWorkspaceStatus
onMouseEnter={() => {
setIsHovered(true);
}}
ref={setContainer}
onMouseLeave={() => setIsHovered(false)}
onClick={e => e.stopPropagation()}
>
<WorkspaceStatus />
</StyledWorkspaceStatus>
</Tooltip>
</div>
</StyledSelectorWrapper>
</StyledSelectorContainer>
);