toeverything/AFFiNE
1
1
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2024-12-24 05:12:37 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat: modify current workspace label to a dot (#3399)

Browse Source
This commit is contained in:
Qi 2023-07-27 13:37:31 +08:00 committed by GitHub
parent bc27412425
commit bc263e7afb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 26 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
apps/core/src/components/affine/setting-modal/setting-sidebar/index.tsx
View File

@ -1,3 +1,4 @@
import { Tooltip } from '@affine/component';
import { import {
WorkspaceListItemSkeleton, WorkspaceListItemSkeleton,
WorkspaceListSkeleton, WorkspaceListSkeleton,
@ -19,6 +20,7 @@ import type {
GeneralSettingList, GeneralSettingList,
} from '../general-setting'; } from '../general-setting';
import { import {
currentWorkspaceLabel,
settingSlideBar, settingSlideBar,
sidebarItemsWrapper, sidebarItemsWrapper,
sidebarSelectItem, sidebarSelectItem,
@ -133,9 +135,18 @@ const WorkspaceListItem = ({
<WorkspaceAvatar size={14} workspace={workspace} className="icon" /> <WorkspaceAvatar size={14} workspace={workspace} className="icon" />
<span className="setting-name">{workspaceName}</span> <span className="setting-name">{workspaceName}</span>
{isCurrent ? ( {isCurrent ? (
<div className="current-label" data-testid="current-workspace-label"> <Tooltip
Current content="Current"
</div> title="Current"
offset={[0, -5]}
placement="top"
disablePortal={false}
>
<div
className={currentWorkspaceLabel}
data-testid="current-workspace-label"
></div>
</Tooltip>
) : null} ) : null}
</div> </div>
); );

21
apps/core/src/components/affine/setting-modal/setting-sidebar/style.css.ts
View File

@ -75,20 +75,21 @@ globalStyle(`${settingSlideBar} .setting-name`, {
whiteSpace: 'nowrap', whiteSpace: 'nowrap',
flexGrow: 1, flexGrow: 1,
}); });
globalStyle(`${settingSlideBar} .current-label`, { export const currentWorkspaceLabel = style({
width: '20px',
height: '20px', height: '20px',
borderRadius: '8px',
display: 'flex', display: 'flex',
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
padding: '0 5px', selectors: {
// TODO: use color variable '&::after': {
background: '#1E96EB', content: '""',
fontSize: 'var(--affine-font-xs)', width: '8px',
fontWeight: '600', height: '8px',
color: 'var(--affine-white)', borderRadius: '50%',
marginLeft: '10px', background: 'var(--affine-blue)',
flexShrink: 0, },
},
}); });
export const accountButton = style({ export const accountButton = style({

2
tests/affine-local/e2e/local-first-avatar.spec.ts
View File

@ -21,7 +21,7 @@ test('should create a page with a local first avatar', async ({
await page.getByTestId('workspace-name').click(); await page.getByTestId('workspace-name').click();
await page.getByTestId('workspace-card').nth(1).click(); await page.getByTestId('workspace-card').nth(1).click();
await page.getByTestId('settings-modal-trigger').click(); await page.getByTestId('settings-modal-trigger').click();
await page.getByText('current').click(); await page.getByTestId('current-workspace-label').click();
await page await page
.getByTestId('upload-avatar') .getByTestId('upload-avatar')
.setInputFiles(resolve(rootDir, 'tests', 'fixtures', 'smile.png')); .setInputFiles(resolve(rootDir, 'tests', 'fixtures', 'smile.png'));