Skip to content

Commit 1dedb70

Browse files
siddharthkpsiddharthkp
authored
WIP: Dashboard focus selection for folders and sandboxes (#4183)
1 parent 78f7b91 commit 1dedb70

File tree

7 files changed

+300
-208
lines changed

7 files changed

+300
-208
lines changed

‎packages/app/src/app/pages/NewDashboard/Components/Folder/FolderCard.tsx‎

Lines changed: 81 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,113 +1,116 @@
11
import React from 'react';
2-
import { Link as RouterLink } from 'react-router-dom';
3-
import { Stack, Link, Text, Input } from '@codesandbox/components';
2+
import { Stack, Text, Input } from '@codesandbox/components';
43
import css from '@styled-system/css';
54
import { MenuOptions } from './Menu';
65

76
export const FolderCard = ({
87
name,
98
path,
109
numberOfSandboxes,
10+
// interactions
11+
selected,
12+
onClick,
13+
onDoubleClick,
1114
// editing
1215
editing,
1316
enterEditing,
1417
isNewFolder,
1518
newName,
1619
inputRef,
1720
onChange,
18-
onKeyDown,
21+
onInputKeyDown,
1922
onSubmit,
20-
onBlur,
23+
onInputBlur,
2124
// drop target
2225
showDropStyles,
2326
// drag preview
2427
thumbnailRef,
2528
opacity,
26-
// menu conflict
27-
onClick,
2829
...props
2930
}) => (
30-
<Link
31-
as={RouterLink}
32-
to={`/new-dashboard/all` + path}
31+
<Stack
32+
direction="vertical"
33+
gap={2}
3334
onClick={onClick}
35+
onDoubleClick={onDoubleClick}
3436
{...props}
37+
css={css({
38+
width: '100%',
39+
height: 240,
40+
backgroundColor: 'grays.700',
41+
border: '1px solid',
42+
borderRadius: 'medium',
43+
overflow: 'hidden',
44+
transition: 'all ease-in-out',
45+
transitionDuration: theme => theme.speeds[4],
46+
// drop target
47+
borderColor: getBorderColor(selected, showDropStyles),
48+
boxShadow: theme =>
49+
showDropStyles ? '0 4px 16px 0 ' + theme.colors.grays[900] : null,
50+
51+
// drag state,
52+
opacity,
53+
54+
':hover, :focus, :focus-within': {
55+
cursor: editing ? 'normal' : 'pointer',
56+
boxShadow: theme => '0 4px 16px 0 ' + theme.colors.grays[900],
57+
},
58+
})}
3559
>
3660
<Stack
37-
direction="vertical"
38-
gap={2}
61+
as="div"
62+
justify="center"
63+
align="center"
64+
ref={thumbnailRef}
3965
css={css({
40-
width: '100%',
41-
height: 240,
42-
backgroundColor: 'grays.700',
43-
border: '1px solid',
44-
borderRadius: 'medium',
45-
overflow: 'hidden',
46-
transition: 'all ease-in-out',
47-
transitionDuration: theme => theme.speeds[4],
48-
// drop target
49-
borderColor: showDropStyles ? 'grays.400' : 'grays.500',
50-
boxShadow: theme =>
51-
showDropStyles ? '0 4px 16px 0 ' + theme.colors.grays[900] : null,
52-
53-
// drag state,
54-
opacity,
55-
56-
':hover, :focus, :focus-within': {
57-
cursor: editing ? 'normal' : 'pointer',
58-
boxShadow: theme => '0 4px 16px 0 ' + theme.colors.grays[900],
59-
},
66+
height: 160,
67+
borderStyle: 'solid',
68+
borderWidth: 0,
69+
borderBottomWidth: 1,
70+
borderColor: 'grays.500',
71+
backgroundColor: 'grays.600',
6072
})}
6173
>
62-
<Stack
63-
as="div"
64-
justify="center"
65-
align="center"
66-
ref={thumbnailRef}
67-
css={css({
68-
height: 160,
69-
borderStyle: 'solid',
70-
borderWidth: 0,
71-
borderBottomWidth: 1,
72-
borderColor: 'grays.500',
73-
backgroundColor: 'grays.600',
74-
})}
75-
>
76-
<svg width={56} height={49} fill="none" viewBox="0 0 56 49">
77-
<path
78-
fill="#6CC7F6"
79-
d="M20.721 0H1.591A1.59 1.59 0 000 1.59v45.82C0 48.287.712 49 1.59 49h52.82A1.59 1.59 0 0056 47.41V7.607a1.59 1.59 0 00-1.59-1.59H28L21.788.41A1.59 1.59 0 0020.72 0z"
74+
<svg width={56} height={49} fill="none" viewBox="0 0 56 49">
75+
<path
76+
fill="#6CC7F6"
77+
d="M20.721 0H1.591A1.59 1.59 0 000 1.59v45.82C0 48.287.712 49 1.59 49h52.82A1.59 1.59 0 0056 47.41V7.607a1.59 1.59 0 00-1.59-1.59H28L21.788.41A1.59 1.59 0 0020.72 0z"
78+
/>
79+
</svg>
80+
</Stack>
81+
<Stack justify="space-between" align="center" marginLeft={4}>
82+
{editing ? (
83+
<form onSubmit={onSubmit}>
84+
<Input
85+
value={newName}
86+
ref={inputRef}
87+
onChange={onChange}
88+
onKeyDown={onInputKeyDown}
89+
onBlur={onInputBlur}
8090
/>
81-
</svg>
82-
</Stack>
83-
<Stack justify="space-between" align="center" marginLeft={4}>
84-
{editing ? (
85-
<form onSubmit={onSubmit}>
86-
<Input
87-
value={newName}
88-
ref={inputRef}
89-
onChange={onChange}
90-
onKeyDown={onKeyDown}
91-
onBlur={onBlur}
92-
/>
93-
</form>
94-
) : (
95-
<Text size={3} weight="medium">
96-
{name}
97-
</Text>
98-
)}
99-
{!isNewFolder ? (
100-
<MenuOptions path={path} onRename={enterEditing} />
101-
) : null}
102-
</Stack>
91+
</form>
92+
) : (
93+
<Text size={3} weight="medium">
94+
{name}
95+
</Text>
96+
)}
10397
{!isNewFolder ? (
104-
<Stack marginLeft={4}>
105-
<Text size={3} block variant="muted">
106-
{numberOfSandboxes || 0}{' '}
107-
{numberOfSandboxes === 1 ? 'sandbox' : 'sandboxes'}
108-
</Text>
109-
</Stack>
98+
<MenuOptions path={path} onRename={enterEditing} />
11099
) : null}
111100
</Stack>
112-
</Link>
101+
{!isNewFolder ? (
102+
<Stack marginLeft={4}>
103+
<Text size={3} block variant="muted">
104+
{numberOfSandboxes || 0}{' '}
105+
{numberOfSandboxes === 1 ? 'sandbox' : 'sandboxes'}
106+
</Text>
107+
</Stack>
108+
) : null}
109+
</Stack>
113110
);
111+
112+
const getBorderColor = (selected, showDropStyles) => {
113+
if (selected) return 'blues.600';
114+
if (showDropStyles) return 'grays.400';
115+
return 'grays.500';
116+
};

‎packages/app/src/app/pages/NewDashboard/Components/Folder/FolderListItem.tsx‎

Lines changed: 66 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,101 +1,100 @@
11
import React from 'react';
2-
import { Link as RouterLink } from 'react-router-dom';
3-
import { Stack, ListAction, Link, Text, Input } from '@codesandbox/components';
2+
import { Stack, ListAction, Text, Input } from '@codesandbox/components';
43
import css from '@styled-system/css';
54
import { MenuOptions } from './Menu';
65

76
export const FolderListItem = ({
87
name,
98
path,
109
numberOfSandboxes,
10+
// interactions
11+
selected,
12+
onClick,
13+
onDoubleClick,
1114
// editing
1215
editing,
1316
enterEditing,
1417
isNewFolder,
1518
newName,
1619
inputRef,
1720
onChange,
18-
onKeyDown,
21+
onInputKeyDown,
1922
onSubmit,
20-
onBlur,
23+
onInputBlur,
2124
// drop target
2225
showDropStyles,
2326
// drag preview
2427
// opacity,
25-
// menu conflict
26-
onClick,
2728
...props
2829
}) => (
2930
<ListAction
31+
onClick={onClick}
32+
onDoubleClick={onDoubleClick}
33+
{...props}
3034
css={css({
3135
paddingX: 0,
3236
backgroundColor: showDropStyles ? 'list.hoverBackground' : 'inherit',
37+
boxShadow: theme =>
38+
selected ? `0px 0px 1px 1px ${theme.colors.blues[600]}` : null,
3339
})}
3440
>
35-
<Link
36-
as={RouterLink}
37-
to={`/new-dashboard/all` + path}
38-
onClick={onClick}
39-
style={{ width: '100%' }}
40-
{...props}
41+
<Stack
42+
gap={2}
43+
justify="space-between"
44+
align="center"
45+
paddingX={2}
46+
css={css({
47+
width: '100%',
48+
height: 64,
49+
borderBottom: '1px solid',
50+
borderBottomColor: 'grays.600',
51+
overflow: 'hidden',
52+
})}
4153
>
42-
<Stack
43-
gap={2}
44-
justify="space-between"
45-
align="center"
46-
paddingX={2}
47-
css={css({
48-
height: 64,
49-
borderBottom: '1px solid',
50-
borderBottomColor: 'grays.600',
51-
overflow: 'hidden',
52-
})}
53-
>
54-
<Stack gap={4} align="center">
55-
<Stack
56-
as="div"
57-
justify="center"
58-
align="center"
59-
css={css({
60-
height: 32,
61-
})}
62-
>
63-
<svg width={32} height={24} fill="none" viewBox="0 0 56 49">
64-
<path
65-
fill="#6CC7F6"
66-
d="M20.721 0H1.591A1.59 1.59 0 000 1.59v45.82C0 48.287.712 49 1.59 49h52.82A1.59 1.59 0 0056 47.41V7.607a1.59 1.59 0 00-1.59-1.59H28L21.788.41A1.59 1.59 0 0020.72 0z"
54+
<Stack gap={4} align="center">
55+
<Stack
56+
as="div"
57+
justify="center"
58+
align="center"
59+
css={css({
60+
height: 32,
61+
})}
62+
>
63+
<svg width={32} height={24} fill="none" viewBox="0 0 56 49">
64+
<path
65+
fill="#6CC7F6"
66+
d="M20.721 0H1.591A1.59 1.59 0 000 1.59v45.82C0 48.287.712 49 1.59 49h52.82A1.59 1.59 0 0056 47.41V7.607a1.59 1.59 0 00-1.59-1.59H28L21.788.41A1.59 1.59 0 0020.72 0z"
67+
/>
68+
</svg>
69+
</Stack>
70+
<Stack justify="space-between" align="center">
71+
{editing ? (
72+
<form onSubmit={onSubmit}>
73+
<Input
74+
value={newName}
75+
ref={inputRef}
76+
onChange={onChange}
77+
onKeyDown={onInputKeyDown}
78+
onBlur={onInputBlur}
6779
/>
68-
</svg>
69-
</Stack>
70-
<Stack justify="space-between" align="center">
71-
{editing ? (
72-
<form onSubmit={onSubmit}>
73-
<Input
74-
value={newName}
75-
ref={inputRef}
76-
onChange={onChange}
77-
onKeyDown={onKeyDown}
78-
onBlur={onBlur}
79-
/>
80-
</form>
81-
) : (
82-
<Text size={3} weight="medium">
83-
{name}
84-
</Text>
85-
)}
86-
</Stack>
80+
</form>
81+
) : (
82+
<Text size={3} weight="medium">
83+
{name}
84+
</Text>
85+
)}
8786
</Stack>
88-
{!isNewFolder ? (
89-
<Text size={3} block variant="muted">
90-
{numberOfSandboxes || 0}{' '}
91-
{numberOfSandboxes === 1 ? 'sandbox' : 'sandboxes'}
92-
</Text>
93-
) : null}
94-
95-
{!isNewFolder ? (
96-
<MenuOptions path={path} onRename={enterEditing} />
97-
) : null}
9887
</Stack>
99-
</Link>
88+
{!isNewFolder ? (
89+
<Text size={3} block variant="muted">
90+
{numberOfSandboxes || 0}{' '}
91+
{numberOfSandboxes === 1 ? 'sandbox' : 'sandboxes'}
92+
</Text>
93+
) : null}
94+
95+
{!isNewFolder ? (
96+
<MenuOptions path={path} onRename={enterEditing} />
97+
) : null}
98+
</Stack>
10099
</ListAction>
101100
);

0 commit comments

Comments
 (0)