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

fix: only owner can set workspace avatar (#882)

Browse Source 
Co-authored-by: Qi <474021214@qq.com>
This commit is contained in:
zuomeng wang
2023-02-09 11:29:04 +08:00
committed by GitHub
parent 8297259f7e
commit 5323f659c8
2 changed files with 44 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
packages/app/src/components/workspace-setting/general/General.tsx
View File

@@ -33,7 +33,6 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
currentWorkspace && currentWorkspace &&
(await updateWorkspace({ avatarBlob: blob }, currentWorkspace)); (await updateWorkspace({ avatarBlob: blob }, currentWorkspace));
}; };
if (!workspace) { if (!workspace) {
return null; return null;
} }
@@ -42,22 +41,30 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
<> <>
<StyledRow> <StyledRow>
<StyledSettingKey>{t('Workspace Avatar')}</StyledSettingKey> <StyledSettingKey>{t('Workspace Avatar')}</StyledSettingKey>
<StyledAvatar> <StyledAvatar disabled={!isOwner}>
<Upload {isOwner ? (
accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" <Upload
fileChange={fileChange} accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
> fileChange={fileChange}
<> >
<div className="camera-icon"> <>
<CameraIcon></CameraIcon> <div className="camera-icon">
</div> <CameraIcon></CameraIcon>
</div>
<WorkspaceUnitAvatar
size={72}
name={workspace.name}
workspaceUnit={workspace}
/>
</>
</Upload>
) : (
<WorkspaceUnitAvatar <WorkspaceUnitAvatar
size={72} size={72}
name={workspace.name} name={workspace.name}
workspaceUnit={workspace} workspaceUnit={workspace}
/> />
</> )}
</Upload>
</StyledAvatar> </StyledAvatar>
</StyledRow> </StyledRow>

47
packages/app/src/components/workspace-setting/general/style.ts
View File

@@ -19,26 +19,29 @@ export const StyledProviderInfo = styled('p')(({ theme }) => {
}; };
}); });
export const StyledAvatar = styled('div')(() => { export const StyledAvatar = styled('div')(
return { ({ disabled }: { disabled: boolean }) => {
position: 'relative', return {
cursor: 'pointer', position: 'relative',
':hover': { marginRight: '20px',
'.camera-icon': { cursor: disabled ? 'default' : 'pointer',
display: 'block', ':hover': {
'.camera-icon': {
display: 'block',
},
}, },
}, '.camera-icon': {
'.camera-icon': { position: 'absolute',
position: 'absolute', display: 'none',
display: 'none', width: '100%',
width: '100%', height: '100%',
height: '100%', borderRadius: '50%',
borderRadius: '50%', backgroundColor: 'rgba(60, 61, 63, 0.5)',
backgroundColor: 'rgba(60, 61, 63, 0.5)', top: 0,
top: 0, left: 0,
left: 0, textAlign: 'center',
textAlign: 'center', lineHeight: '72px',
lineHeight: '72px', },
}, };
}; }
}); );