luulam/AFFiNE
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix(core): enable cloud button should not take space by default (#8270)

Browse Source 
before

<div class='graphite__hidden'>
          <div>🎥 Video uploaded on Graphite:</div>
            <a href="https://app.graphite.dev/media/video/T2klNLEk0wxLh4NRDzhk/6d818363-30df-4dee-84c1-69eee828f454.mp4">
              <img src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/T2klNLEk0wxLh4NRDzhk/6d818363-30df-4dee-84c1-69eee828f454.mp4">
            </a>
          </div>
<video src="https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/T2klNLEk0wxLh4NRDzhk/6d818363-30df-4dee-84c1-69eee828f454.mp4">20240917-0548-21.8568797.mp4</video>

---

after

<div class='graphite__hidden'>
          <div>🎥 Video uploaded on Graphite:</div>
            <a href="https://app.graphite.dev/media/video/T2klNLEk0wxLh4NRDzhk/69c68a4d-d2ea-4439-9c3d-f4a328d76927.mp4">
              <img src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/T2klNLEk0wxLh4NRDzhk/69c68a4d-d2ea-4439-9c3d-f4a328d76927.mp4">
            </a>
          </div>
<video src="https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/T2klNLEk0wxLh4NRDzhk/69c68a4d-d2ea-4439-9c3d-f4a328d76927.mp4">20240917-0549-00.5175618.mp4</video>
This commit is contained in:
pengx17
2024-09-18 02:10:46 +00:00
parent 7a1aa24424
commit 8d4bda1dcc
2 changed files with 44 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
packages/frontend/core/src/components/workspace-selector/workspace-card/index.tsx
View File

@@ -26,6 +26,7 @@ import clsx from 'clsx';
import type { HTMLAttributes } from 'react'; import type { HTMLAttributes } from 'react';
import { forwardRef, useCallback, useEffect, useState } from 'react'; import { forwardRef, useCallback, useEffect, useState } from 'react';
import { useCatchEventCallback } from '../../hooks/use-catch-event-hook';
import * as styles from './styles.css'; import * as styles from './styles.css';
const CloudWorkspaceStatus = () => { const CloudWorkspaceStatus = () => {
@@ -262,6 +263,14 @@ export const WorkspaceCard = forwardRef<
const name = information?.name ?? UNTITLED_WORKSPACE_NAME; const name = information?.name ?? UNTITLED_WORKSPACE_NAME;
const onEnableCloud = useCatchEventCallback(() => {
onClickEnableCloud?.(workspaceMetadata);
}, [onClickEnableCloud, workspaceMetadata]);
const onOpenSettings = useCatchEventCallback(() => {
onClickOpenSettings?.(workspaceMetadata);
}, [onClickOpenSettings, workspaceMetadata]);
return ( return (
<div <div
className={clsx( className={clsx(
@@ -301,32 +310,26 @@ export const WorkspaceCard = forwardRef<
<Skeleton width={100} /> <Skeleton width={100} />
)} )}
</div> </div>
{onClickEnableCloud && <div className={styles.showOnCardHover}>
workspaceMetadata.flavour === WorkspaceFlavour.LOCAL ? ( {onClickEnableCloud &&
<Button workspaceMetadata.flavour === WorkspaceFlavour.LOCAL ? (
className={styles.showOnCardHover} <Button
onClick={e => { className={styles.enableCloudButton}
e.stopPropagation(); onClick={onEnableCloud}
onClickEnableCloud(workspaceMetadata); >
}} Enable Cloud
> </Button>
Enable Cloud ) : null}
</Button> {hideCollaborationIcon || information?.isOwner ? null : (
) : null} <CollaborationIcon />
{hideCollaborationIcon || information?.isOwner ? null : ( )}
<CollaborationIcon /> {onClickOpenSettings && (
)} <div className={styles.settingButton} onClick={onOpenSettings}>
{onClickOpenSettings && ( <SettingsIcon width={16} height={16} />
<div </div>
className={styles.settingButton} )}
onClick={e => { </div>
e.stopPropagation();
onClickOpenSettings(workspaceMetadata);
}}
>
<SettingsIcon width={16} height={16} />
</div>
)}
{showArrowDownIcon && <ArrowDownSmallIcon />} {showArrowDownIcon && <ArrowDownSmallIcon />}
</div> </div>
); );

19
packages/frontend/core/src/components/workspace-selector/workspace-card/styles.css.ts
View File

@@ -125,6 +125,15 @@ export const workspaceTitleContainer = style({
overflow: 'hidden', overflow: 'hidden',
}); });
export const enableCloudButton = style({
opacity: 0,
selectors: {
[`.${container}:hover &`]: {
opacity: 1,
},
},
});
export const settingButton = style({ export const settingButton = style({
transition: 'all 0.13s ease', transition: 'all 0.13s ease',
width: 0, width: 0,
@@ -152,12 +161,14 @@ export const settingButton = style({
}); });
export const showOnCardHover = style({ export const showOnCardHover = style({
visibility: 'hidden', position: 'absolute',
opacity: 0, right: 0,
display: 'flex',
gap: 8,
alignItems: 'center',
selectors: { selectors: {
[`.${container}:hover &`]: { [`.${container}:hover &`]: {
visibility: 'visible', position: 'relative',
opacity: 1,
}, },
}, },
}); });