Skip to content

Commit 7fbb985

Browse files
siddharthkpsiddharthkp
authored
Sidebar bugs + ad (codesandbox#3604)
* fix github repo creation * prevent form submit + alignment * add bookmark for teams * added advertisement * dont show bookmark to logged in user * changed the wrong file 🤦
1 parent 7acd894 commit 7fbb985

File tree

9 files changed

+109
-20
lines changed

9 files changed

+109
-20
lines changed

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/BookmarkTemplateButton/BookmarkTemplateButton.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,7 @@ export const BookmarkTemplateButton = ({ style }: IBookmarkTemplateButton) => {
129129
<ButtonIcon>
130130
{bookmarkInfos[i].isBookmarked ? <Checked /> : <Unchecked />}
131131
</ButtonIcon>
132+
{bookmarkInfos[i].isBookmarked ? 'Remove from ' : 'Add to '}
132133
{i === 0 ? 'My Bookmarks' : name}
133134
</button>
134135
))}

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/index.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,10 @@ export const WorkspaceComponent = ({ theme }) => {
101101
) : (
102102
<Chat />
103103
))}
104+
105+
{NEW_SIDEBAR &&
106+
!(isPatron || owned) &&
107+
!(isLive && roomInfo.chatEnabled) && <Advertisement />}
104108
</>
105109
</WorkspaceWrapper>
106110

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/CommitForm.tsx

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,12 @@ export const CommitForm = () => {
4141

4242
return (
4343
<>
44-
<Stack as="form" direction="vertical" gap={1} marginX={2}>
44+
<Stack
45+
as="form"
46+
direction="vertical"
47+
gap={1}
48+
onSubmit={event => event.preventDefault()}
49+
>
4550
<FormField direction="vertical" label="Commit message">
4651
<Input
4752
css={css({ marginTop: 2 })}
@@ -58,7 +63,13 @@ export const CommitForm = () => {
5863
value={description}
5964
/>
6065
</FormField>
61-
<Stack gap={2}>
66+
<Stack
67+
justify="space-between"
68+
marginX={2}
69+
css={{
70+
button: { width: '40%' },
71+
}}
72+
>
6273
{hasWriteAccess(originalGitChanges?.rights) && (
6374
<Button
6475
variant="secondary"

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/CreateRepo.tsx

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
Stack,
88
Button,
99
Text,
10+
FormField,
1011
} from '@codesandbox/components';
1112
import { useOvermind } from 'app/overmind';
1213

@@ -65,14 +66,16 @@ export const CreateRepo = () => {
6566
gap={2}
6667
onSubmit={createRepo}
6768
>
68-
<Input
69-
type="text"
70-
onChange={updateRepoTitle}
71-
value={repoTitle}
72-
placeholder="Enter repository name"
73-
/>
69+
<FormField label="Repository name" hideLabel>
70+
<Input
71+
type="text"
72+
onChange={updateRepoTitle}
73+
value={repoTitle}
74+
placeholder="Enter repository name"
75+
/>
76+
</FormField>
7477
<Element paddingX={2}>
75-
<Button disabled={disabled} variant="secondary">
78+
<Button type="submit" disabled={disabled} variant="secondary">
7679
Create Repository
7780
</Button>
7881
</Element>

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/NotOwnedSandboxInfo/BookmarkTemplateButton/index.tsx

Lines changed: 41 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
UnbookmarkTemplateMutationVariables,
1414
BookmarkedSandboxInfoQueryVariables,
1515
} from 'app/graphql/types';
16-
import { Button } from '@codesandbox/components';
16+
import { Stack, Button, Icon, Menu } from '@codesandbox/components';
1717
import { BOOKMARK_TEMPLATE, UNBOOKMARK_TEMPLATE } from './mutations';
1818
import { BOOKMARKED_SANDBOX_INFO } from './queries';
1919

@@ -27,6 +27,7 @@ export const BookmarkTemplateButton = () => {
2727
},
2828
},
2929
} = useOvermind();
30+
3031
const [runQuery, { loading, data }] = useLazyQuery<
3132
BookmarkedSandboxInfoQuery,
3233
BookmarkedSandboxInfoQueryVariables
@@ -57,7 +58,10 @@ export const BookmarkTemplateButton = () => {
5758
return {
5859
variables: {
5960
template: customTemplate.id,
60-
team: undefined,
61+
team:
62+
bookmarkInfo.entity.__typename === 'Team'
63+
? bookmarkInfo.entity.id
64+
: undefined,
6165
},
6266
optimisticResponse: {
6367
__typename: 'RootMutationType',
@@ -92,10 +96,40 @@ export const BookmarkTemplateButton = () => {
9296
bookmarkInfos[i].isBookmarked ? unbookmark(config(i)) : bookmark(config(i));
9397

9498
return (
95-
<Button disabled={loading} onClick={() => handleToggleFollow()}>
96-
{bookmarkInfos[0]?.isBookmarked
97-
? `Unbookmark Template`
98-
: `Bookmark Template`}
99-
</Button>
99+
<Stack>
100+
<Button
101+
disabled={loading}
102+
onClick={() => handleToggleFollow(0)}
103+
css={{
104+
width: 'calc(100% - 26px)',
105+
borderTopRightRadius: 0,
106+
borderBottomRightRadius: 0,
107+
}}
108+
>
109+
{bookmarkInfos[0]?.isBookmarked
110+
? `Remove Bookmark`
111+
: `Bookmark Template`}
112+
</Button>
113+
<Menu>
114+
<Menu.Button
115+
variant="primary"
116+
css={{
117+
width: '26px',
118+
borderTopLeftRadius: 0,
119+
borderBottomLeftRadius: 0,
120+
}}
121+
>
122+
<Icon size={8} name="caret" />
123+
</Menu.Button>
124+
<Menu.List>
125+
{bookmarkInfos.map(({ entity: { name } }, index: number) => (
126+
<Menu.Item key={name} onSelect={() => handleToggleFollow(index)}>
127+
{bookmarkInfos[index].isBookmarked ? 'Remove from ' : 'Add to '}
128+
{index === 0 ? 'My Bookmarks' : name}
129+
</Menu.Item>
130+
))}
131+
</Menu.List>
132+
</Menu>
133+
</Stack>
100134
);
101135
};

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/NotOwnedSandboxInfo/Summary.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ export const Summary = () => {
3030
const {
3131
state: {
3232
editor: { currentSandbox },
33+
isLoggedIn,
3334
},
3435
} = useOvermind();
3536
const {
@@ -80,7 +81,7 @@ export const Summary = () => {
8081

8182
<Stack as="section" direction="vertical" gap={6} paddingX={2}>
8283
<Stats sandbox={currentSandbox} />
83-
{customTemplate && <BookmarkTemplateButton />}
84+
{customTemplate && isLoggedIn && <BookmarkTemplateButton />}
8485
</Stack>
8586

8687
<Divider marginTop={8} marginBottom={4} />

‎packages/components/src/components/Icon/icons.tsx

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,36 @@ export const check = props => (
123123
</Element>
124124
);
125125

126+
export const chevronDown = props => (
127+
<Element
128+
as="svg"
129+
viewBox="0 0 16 16"
130+
fill="none"
131+
xmlns="http://www.w3.org/2000/svg"
132+
{...props}
133+
>
134+
<path
135+
d="M8.00006 10.7217L1.02852 3L-3.87318e-07 4.13919L8 13L16 4.13919L14.9091 3L8.00006 10.7217Z"
136+
fill="currentColor"
137+
/>
138+
</Element>
139+
);
140+
141+
export const caret = props => (
142+
<Element
143+
as="svg"
144+
viewBox="0 0 16 16"
145+
fill="none"
146+
xmlns="http://www.w3.org/2000/svg"
147+
{...props}
148+
>
149+
<path
150+
d="M8 12.8608L16 4L-3.87318e-07 4L8 12.8608L16 4L-3.87318e-07 4L8 12.8608Z"
151+
fill="currentColor"
152+
/>
153+
</Element>
154+
);
155+
126156
// we use this icon as a error state fallback
127157
export const notFound = props => (
128158
<svg

‎packages/components/src/components/Menu/index.tsx

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,7 @@ import deepmerge from 'deepmerge';
33
import css from '@styled-system/css';
44
import * as ReachMenu from '@reach/menu-button';
55
import { createGlobalStyle } from 'styled-components';
6-
import { Element } from '../Element';
7-
import { Button } from '../Button';
8-
import { List } from '../List';
6+
import { Element, Button, IconButton, List } from '../..';
97

108
const Menu = ({ ...props }) => {
119
const PortalStyles = createGlobalStyle(
@@ -35,6 +33,7 @@ const Menu = ({ ...props }) => {
3533
'&[data-selected]': {
3634
outline: 'none',
3735
backgroundColor: 'menuList.hoverBackground',
36+
color: 'menuList.foreground',
3837
},
3938
// override reach ui styles
4039
font: 'ineherit',
@@ -61,6 +60,10 @@ const MenuButton = props => (
6160
</Button>
6261
);
6362

63+
const MenuIconButton = props => (
64+
<IconButton as={ReachMenu.MenuButton} {...props} />
65+
);
66+
6467
const MenuList = props => (
6568
<List as={ReachMenu.MenuList} data-component="MenuList" {...props}>
6669
{props.children}
@@ -72,6 +75,7 @@ const MenuItem = props => (
7275
);
7376

7477
Menu.Button = MenuButton;
78+
Menu.IconButton = MenuIconButton;
7579
Menu.List = MenuList;
7680
Menu.Item = MenuItem;
7781

‎packages/components/src/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ export * from './components/ThemeProvider';
66
export * from './components/Avatar';
77
export * from './components/Button';
88
export * from './components/Icon';
9+
export * from './components/IconButton';
910
export * from './components/Input';
1011
export * from './components/Label';
1112
export * from './components/Link';

0 commit comments

Comments
 (0)