Skip to content

Commit 024d867

Browse files
siddharthkpsiddharthkp
committed
fix menu + add to nav
1 parent d6bdd8b commit 024d867

File tree

6 files changed

+71
-73
lines changed

6 files changed

+71
-73
lines changed

‎packages/app/src/app/pages/Sandbox/Editor/Header/Actions.tsx‎

Lines changed: 32 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ export const Actions = () => {
6666

6767
let primaryAction;
6868
if (!hasLogIn) primaryAction = 'Sign in';
69-
else primaryAction = owned ? 'Embed' : 'Fork';
69+
else primaryAction = owned ? 'Share' : 'Fork';
7070

7171
return (
7272
<Stack
@@ -120,8 +120,6 @@ export const Actions = () => {
120120
</Stack>
121121
)}
122122

123-
{author && featureFlags.ACCESS_SHEET && <Collaborators />}
124-
125123
{user?.curatorAt && (
126124
<Button
127125
variant="secondary"
@@ -131,12 +129,37 @@ export const Actions = () => {
131129
Pick
132130
</Button>
133131
)}
134-
<Button
135-
variant={primaryAction === 'Embed' ? 'primary' : 'secondary'}
136-
onClick={() => modalOpened({ modal: 'share' })}
137-
>
138-
<EmbedIcon css={css({ height: 3, marginRight: 1 })} /> Embed
139-
</Button>
132+
133+
{featureFlags.ACCESS_SHEET && (
134+
<>
135+
{author ? (
136+
<Collaborators
137+
renderButton={props => (
138+
<Button variant="primary" {...props}>
139+
<EmbedIcon css={css({ height: 3, marginRight: 1 })} /> Share
140+
</Button>
141+
)}
142+
/>
143+
) : (
144+
<Button
145+
variant={primaryAction === 'Share' ? 'primary' : 'secondary'}
146+
onClick={() => modalOpened({ modal: 'share' })}
147+
>
148+
<EmbedIcon css={css({ height: 3, marginRight: 1 })} /> Embed
149+
</Button>
150+
)}
151+
</>
152+
)}
153+
154+
{!featureFlags.ACCESS_SHEET && (
155+
<Button
156+
variant={primaryAction === 'Share' ? 'primary' : 'secondary'}
157+
onClick={() => modalOpened({ modal: 'share' })}
158+
>
159+
<EmbedIcon css={css({ height: 3, marginRight: 1 })} /> Embed
160+
</Button>
161+
)}
162+
140163
<Button
141164
variant={primaryAction === 'Fork' ? 'primary' : 'secondary'}
142165
onClick={forkSandboxClicked}

‎packages/app/src/app/pages/Sandbox/Editor/Header/Collaborators/AddCollaboratorForm.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -71,13 +71,13 @@ export const AddCollaboratorForm = () => {
7171
/>
7272

7373
<PermissionSelect
74-
css={css({
75-
position: 'absolute',
76-
right: 0,
77-
top: 0,
78-
})}
7974
value={authorization}
8075
onChange={setAuthorization}
76+
css={{
77+
position: 'absolute',
78+
top: 0,
79+
right: 0,
80+
}}
8181
/>
8282
</motion.div>
8383

‎packages/app/src/app/pages/Sandbox/Editor/Header/Collaborators/Collaborator.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -237,8 +237,7 @@ export const LinkPermissions = ({ readOnly }: ILinkPermissionProps) => {
237237

238238
const PrivacyIcon = privacyToIcon[privacy];
239239

240-
// const isReadOnly = readOnly || !isPatron;
241-
const isReadOnly = false;
240+
const isReadOnly = readOnly || !isPatron;
242241

243242
const onChange = value => {
244243
actions.workspace.sandboxPrivacyChanged({

‎packages/app/src/app/pages/Sandbox/Editor/Header/Collaborators/Collaborators.tsx‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import React, { FunctionComponent } from 'react';
2-
import { Button, Element } from '@codesandbox/components';
2+
import { Element } from '@codesandbox/components';
33
import { hasPermission } from '@codesandbox/common/lib/utils/permission';
44
import { Overlay } from 'app/components/Overlay';
55
import { useOvermind } from 'app/overmind';
66

7-
import { AddPeople } from './icons';
87
import { Container, HorizontalSeparator } from './elements';
98
import { AddCollaboratorForm } from './AddCollaboratorForm';
109
import { LinkPermissions } from './Collaborator';
@@ -43,18 +42,16 @@ const CollaboratorContent = () => {
4342
);
4443
};
4544

46-
export const Collaborators: FunctionComponent = () => (
45+
export const Collaborators: FunctionComponent<{
46+
renderButton: (any) => JSX.Element;
47+
}> = ({ renderButton }) => (
4748
<>
4849
<Overlay
4950
noHeightAnimation={false}
5051
event="Collaborators"
5152
content={CollaboratorContent}
5253
>
53-
{open => (
54-
<Button onClick={() => open()} variant="link">
55-
<AddPeople width={24} height={24} />
56-
</Button>
57-
)}
54+
{open => renderButton({ onClick: () => open() })}
5855
</Overlay>
5956
</>
6057
);

‎packages/app/src/app/pages/Sandbox/Editor/Header/Collaborators/PermissionSelect.tsx‎

Lines changed: 28 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,7 @@
11
import React from 'react';
2-
import { Stack, Menu, Icon } from '@codesandbox/components';
2+
import { Menu, Icon } from '@codesandbox/components';
33
import { Authorization } from 'app/graphql/types';
44

5-
interface IPermissionSelectProps {
6-
additionalOptions?: { value: string; label: string }[];
7-
permissions?: Authorization[];
8-
pretext?: string;
9-
value: Authorization;
10-
onChange: (Authorization) => void;
11-
}
12-
135
const authToName = {
146
[Authorization.WriteCode]: 'Can Edit',
157
[Authorization.Comment]: 'Can Comment',
@@ -22,32 +14,39 @@ const authToName = {
2214
// which is "Can Comment"
2315
export const MENU_WIDTH = 110;
2416

17+
interface IPermissionSelectProps {
18+
additionalOptions?: { value: string; label: string }[];
19+
permissions?: Authorization[];
20+
pretext?: string;
21+
value: Authorization;
22+
onChange: (Authorization) => void;
23+
disabled?: boolean;
24+
}
25+
2526
export const PermissionSelect = ({
2627
additionalOptions = [],
2728
permissions = [Authorization.WriteCode, Authorization.Read],
2829
value: selectedValue,
2930
onChange,
31+
disabled,
3032
...props
3133
}: IPermissionSelectProps) => (
32-
<Stack align="center">
33-
<Menu>
34-
<Menu.Button css={{ position: 'absolute', top: 0, right: 0 }}>
35-
{authToName[selectedValue]}{' '}
36-
<Icon name="caret" size={2} marginLeft={1} />
37-
</Menu.Button>
38-
<Menu.List>
39-
{permissions.map(auth => (
40-
<Menu.Item key={auth} onSelect={() => onChange(auth)}>
41-
{authToName[auth]}
42-
</Menu.Item>
43-
))}
34+
<Menu>
35+
<Menu.Button disabled={disabled} {...props}>
36+
{authToName[selectedValue]} <Icon name="caret" size={2} marginLeft={1} />
37+
</Menu.Button>
38+
<Menu.List>
39+
{permissions.map(auth => (
40+
<Menu.Item key={auth} onSelect={() => onChange(auth)}>
41+
{authToName[auth]}
42+
</Menu.Item>
43+
))}
4444

45-
{additionalOptions.map(({ label, value }) => (
46-
<Menu.Item key={label} onSelect={() => onChange(value)}>
47-
{label}
48-
</Menu.Item>
49-
))}
50-
</Menu.List>
51-
</Menu>
52-
</Stack>
45+
{additionalOptions.map(({ label, value }) => (
46+
<Menu.Item key={label} onSelect={() => onChange(value)}>
47+
{label}
48+
</Menu.Item>
49+
))}
50+
</Menu.List>
51+
</Menu>
5352
);

‎packages/app/src/app/pages/Sandbox/Editor/Header/Collaborators/icons.tsx‎

Lines changed: 0 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,6 @@
11
import React from 'react';
22
import IconBase from 'react-icons/IconBase';
33

4-
export const AddPeople = props => (
5-
<IconBase
6-
viewBox="0 0 24 24"
7-
fill="none"
8-
xmlns="http://www.w3.org/2000/svg"
9-
{...props}
10-
>
11-
<path
12-
d="M6.57143 6H5.42857V9.42857H2V10.5714H5.42857V14H6.57143V10.5714H10V9.42857H6.57143V6Z"
13-
fill="currentColor"
14-
/>
15-
<path
16-
fillRule="evenodd"
17-
clipRule="evenodd"
18-
d="M18.6493 8.50025C18.6493 9.26669 18.3765 10.0235 18.054 10.6C17.9808 10.7309 18.1127 10.952 18.2448 11.1736C18.3898 11.4168 18.5351 11.6606 18.4098 11.7859C18.0667 12.129 17.2557 12.088 16.5991 12.0391C16.168 12.4163 15.6485 12.6365 15.0892 12.6365C14.4603 12.6365 13.8815 12.358 13.4225 11.8909C13.2965 11.9492 13.171 12.0075 13.047 12.0668C12.0716 11.9375 11.4694 10.3319 11.7019 8.48083C11.9344 6.62971 12.9135 5.23396 13.8888 5.36334C14.1122 5.4114 14.3145 5.4734 14.4977 5.54697C14.9167 5.20067 15.4143 5 15.9482 5C17.4399 5 18.6493 6.56711 18.6493 8.50025ZM10.042 18.8142L19.7895 18.8142C19.7895 18.8142 20.4942 14.1095 14.857 13.9862C9.21991 13.863 10.042 18.8142 10.042 18.8142Z"
19-
fill="currentColor"
20-
/>
21-
</IconBase>
22-
);
23-
244
export const Mail = props => (
255
<IconBase
266
fill="none"

0 commit comments

Comments
 (0)