Skip to content

Commit c1f41a4

Browse files
dewanshDTdewanshDT
committed
optimized sidebar
1 parent 828e182 commit c1f41a4

File tree

5 files changed

+106
-134
lines changed

5 files changed

+106
-134
lines changed

‎client/images/plus-icon.svg‎

Lines changed: 2 additions & 11 deletions
Loading

‎client/modules/IDE/components/Editor/MobileEditor.jsx‎

Lines changed: 5 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -47,15 +47,15 @@ export const PreviewWrapper = styled.div`
4747
`;
4848

4949
export const EditorSidebarWrapper = styled.div`
50-
display: ${(props) => (props.show ? 'flex' : 'none')};
50+
display: ${(props) => (props.show ? 'block' : 'none')};
5151
height: 100%;
5252
position: relative;
5353
`;
5454

5555
export const FileDrawer = styled.div`
5656
height: 100%;
5757
width: 50vw;
58-
display: ${(props) => (props.show ? 'flex' : 'none')};
58+
display: flex;
5959
flex-direction: column;
6060
position: absolute;
6161
/* z-index: 10; */
@@ -70,21 +70,10 @@ export const FileDrawer = styled.div`
7070
transform: translateX(100%);
7171
}
7272
73-
> nav {
74-
padding: ${remSize(14)};
75-
display: flex;
76-
justify-content: space-between;
77-
align-items: center;
73+
@media (min-width: 770px) {
7874
width: 100%;
79-
> h4 {
80-
font-weight: bold;
81-
font-size: ${remSize(15)};
82-
margin: 0;
83-
}
84-
> button {
85-
${prop('Button.primary.default')}
86-
height: ${remSize(25)};
87-
width: ${remSize(25)};
75+
> button[data-backdrop='filedrawer'] {
76+
display: none;
8877
}
8978
}
9079
`;

‎client/modules/IDE/components/Sidebar.jsx‎

Lines changed: 77 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
44
import { useDispatch, useSelector } from 'react-redux';
55
import {
66
closeProjectOptions,
7+
collapseSidebar,
78
newFile,
89
newFolder,
910
openProjectOptions,
@@ -13,27 +14,29 @@ import { selectRootFile } from '../selectors/files';
1314
import { getAuthenticated, selectCanEditSketch } from '../selectors/users';
1415

1516
import ConnectedFileNode from './FileNode';
16-
17-
import DownArrowIcon from '../../../images/down-filled-triangle.svg';
17+
import { PlusIcon } from '../../../common/icons';
18+
import { FileDrawer } from './Editor/MobileEditor';
1819

1920
// TODO: use a generic Dropdown UI component
2021

2122
export default function SideBar() {
2223
const { t } = useTranslation();
2324
const dispatch = useDispatch();
2425

25-
const [isFocused, setIsFocused] = useState(false);
26-
2726
const rootFile = useSelector(selectRootFile);
27+
const ide = useSelector((state) => state.ide);
2828
const projectOptionsVisible = useSelector(
2929
(state) => state.ide.projectOptionsVisible
3030
);
3131
const isExpanded = useSelector((state) => state.ide.sidebarIsExpanded);
3232
const canEditProject = useSelector(selectCanEditSketch);
33-
const isAuthenticated = useSelector(getAuthenticated);
3433

3534
const sidebarOptionsRef = useRef(null);
3635

36+
const [isFocused, setIsFocused] = useState(false);
37+
38+
const isAuthenticated = useSelector(getAuthenticated);
39+
3740
const onBlurComponent = () => {
3841
setIsFocused(false);
3942
setTimeout(() => {
@@ -65,69 +68,84 @@ export default function SideBar() {
6568
});
6669

6770
return (
68-
<section className={sidebarClass}>
69-
<header className="sidebar__header" onContextMenu={toggleProjectOptions}>
70-
<h3 className="sidebar__title">
71-
<span>{t('Sidebar.Title')}</span>
72-
</h3>
73-
<div className="sidebar__icons">
74-
<button
75-
aria-label={t('Sidebar.ToggleARIA')}
76-
className="sidebar__add"
77-
tabIndex="0"
78-
ref={sidebarOptionsRef}
79-
onClick={toggleProjectOptions}
80-
onBlur={onBlurComponent}
81-
onFocus={onFocusComponent}
82-
>
83-
<DownArrowIcon focusable="false" aria-hidden="true" />
84-
</button>
85-
<ul className="sidebar__project-options">
86-
<li>
87-
<button
88-
aria-label={t('Sidebar.AddFolderARIA')}
89-
onClick={() => {
90-
dispatch(newFolder(rootFile.id));
91-
setTimeout(() => dispatch(closeProjectOptions()), 0);
92-
}}
93-
onBlur={onBlurComponent}
94-
onFocus={onFocusComponent}
95-
>
96-
{t('Sidebar.AddFolder')}
97-
</button>
98-
</li>
99-
<li>
100-
<button
101-
aria-label={t('Sidebar.AddFileARIA')}
102-
onClick={() => {
103-
dispatch(newFile(rootFile.id));
104-
setTimeout(() => dispatch(closeProjectOptions()), 0);
105-
}}
106-
onBlur={onBlurComponent}
107-
onFocus={onFocusComponent}
108-
>
109-
{t('Sidebar.AddFile')}
110-
</button>
111-
</li>
112-
{isAuthenticated && (
71+
<FileDrawer>
72+
{ide.sidebarIsExpanded && (
73+
<button
74+
data-backdrop="filedrawer"
75+
onClick={() => {
76+
dispatch(collapseSidebar());
77+
}}
78+
>
79+
{' '}
80+
</button>
81+
)}
82+
<section className={sidebarClass}>
83+
<header
84+
className="sidebar__header"
85+
onContextMenu={toggleProjectOptions}
86+
>
87+
<h3 className="sidebar__title">
88+
<span>{t('Sidebar.Title')}</span>
89+
</h3>
90+
<div className="sidebar__icons">
91+
<button
92+
aria-label={t('Sidebar.ToggleARIA')}
93+
className="sidebar__add"
94+
tabIndex="0"
95+
ref={sidebarOptionsRef}
96+
onClick={toggleProjectOptions}
97+
onBlur={onBlurComponent}
98+
onFocus={onFocusComponent}
99+
>
100+
<PlusIcon focusable="false" aria-hidden="true" />
101+
</button>
102+
<ul className="sidebar__project-options">
103+
<li>
104+
<button
105+
aria-label={t('Sidebar.AddFolderARIA')}
106+
onClick={() => {
107+
dispatch(newFolder(rootFile.id));
108+
setTimeout(() => dispatch(closeProjectOptions()), 0);
109+
}}
110+
onBlur={onBlurComponent}
111+
onFocus={onFocusComponent}
112+
>
113+
{t('Sidebar.AddFolder')}
114+
</button>
115+
</li>
113116
<li>
114117
<button
115-
aria-label={t('Sidebar.UploadFileARIA')}
118+
aria-label={t('Sidebar.AddFileARIA')}
116119
onClick={() => {
117-
dispatch(openUploadFileModal(rootFile.id));
120+
dispatch(newFile(rootFile.id));
118121
setTimeout(() => dispatch(closeProjectOptions()), 0);
119122
}}
120123
onBlur={onBlurComponent}
121124
onFocus={onFocusComponent}
122125
>
123-
{t('Sidebar.UploadFile')}
126+
{t('Sidebar.AddFile')}
124127
</button>
125128
</li>
126-
)}
127-
</ul>
128-
</div>
129-
</header>
130-
<ConnectedFileNode id={rootFile.id} canEdit={canEditProject} />
131-
</section>
129+
{isAuthenticated && (
130+
<li>
131+
<button
132+
aria-label={t('Sidebar.UploadFileARIA')}
133+
onClick={() => {
134+
dispatch(openUploadFileModal(rootFile.id));
135+
setTimeout(() => dispatch(closeProjectOptions()), 0);
136+
}}
137+
onBlur={onBlurComponent}
138+
onFocus={onFocusComponent}
139+
>
140+
{t('Sidebar.UploadFile')}
141+
</button>
142+
</li>
143+
)}
144+
</ul>
145+
</div>
146+
</header>
147+
<ConnectedFileNode id={rootFile.id} canEdit={canEditProject} />
148+
</section>
149+
</FileDrawer>
132150
);
133151
}

‎client/modules/IDE/pages/IDEView.jsx‎

Lines changed: 7 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -12,31 +12,22 @@ import PreviewFrame from '../components/PreviewFrame';
1212
import Console from '../components/Console';
1313
import Toast from '../components/Toast';
1414
import { updateFileContent } from '../actions/files';
15-
import {
16-
setPreviousPath,
17-
stopSketch,
18-
collapseSidebar,
19-
newFile
20-
} from '../actions/ide';
15+
import { setPreviousPath, stopSketch } from '../actions/ide';
2116
import {
2217
autosaveProject,
2318
clearPersistedState,
2419
getProject
2520
} from '../actions/project';
26-
import { selectActiveFile, selectRootFile } from '../selectors/files';
27-
import { getIsUserOwner, selectCanEditSketch } from '../selectors/users';
21+
import { selectActiveFile } from '../selectors/files';
22+
import { getIsUserOwner } from '../selectors/users';
2823
import RootPage from '../../../components/RootPage';
2924
import Header from '../components/Header';
3025
import FloatingActionButton from '../components/FloatingActionButton';
31-
import EditorV2 from '../components/Editor';
26+
import Editor from '../components/Editor';
3227
import {
3328
EditorSidebarWrapper,
34-
FileDrawer,
3529
PreviewWrapper
3630
} from '../components/Editor/MobileEditor';
37-
import IconButton from '../../../components/mobile/IconButton';
38-
import { PlusIcon } from '../../../common/icons';
39-
import ConnectedFileNode from '../components/FileNode';
4031
import IDEOverlays from '../components/IDEOverlays';
4132

4233
function getTitle(project) {
@@ -92,9 +83,6 @@ const IDEView = (props) => {
9283
const [sidebarSize, setSidebarSize] = useState(160);
9384
const [isOverlayVisible, setIsOverlayVisible] = useState(true);
9485

95-
const rootFile = useSelector(selectRootFile);
96-
const canEditProject = useSelector(selectCanEditSketch);
97-
9886
const cmRef = useRef({});
9987

10088
const autosaveIntervalRef = useRef(null);
@@ -223,7 +211,7 @@ const IDEView = (props) => {
223211
allowResize={ide.consoleIsExpanded}
224212
className="editor-preview-subpanel"
225213
>
226-
<EditorV2
214+
<Editor
227215
provideController={(ctl) => {
228216
cmRef.current = ctl;
229217
}}
@@ -271,27 +259,8 @@ const IDEView = (props) => {
271259
</SplitPane>
272260
</PreviewWrapper>
273261
<EditorSidebarWrapper show={!ide.isPlaying}>
274-
<FileDrawer show={ide.sidebarIsExpanded}>
275-
<button
276-
data-backdrop="filedrawer"
277-
onClick={() => {
278-
dispatch(collapseSidebar());
279-
}}
280-
>
281-
{' '}
282-
</button>
283-
<nav>
284-
<h4>Sketch Files</h4>
285-
<IconButton
286-
onClick={() => {
287-
dispatch(newFile(rootFile.id));
288-
}}
289-
icon={PlusIcon}
290-
/>
291-
</nav>
292-
<ConnectedFileNode id={rootFile.id} canEit={canEditProject} />
293-
</FileDrawer>
294-
<EditorV2
262+
<Sidebar />
263+
<Editor
295264
provideController={(ctl) => {
296265
cmRef.current = ctl;
297266
}}

‎client/styles/components/_sidebar.scss‎

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,17 @@
44
}
55

66
.sidebar__header {
7-
padding-right: #{6 / $base-font-size}rem;
8-
padding-left: #{19 / $base-font-size}rem;
7+
padding: #{10 / $base-font-size}rem #{12 / $base-font-size}rem;
98
display: flex;
109
justify-content: space-between;
1110
align-items: center;
12-
height: #{29 / $base-font-size}rem;
1311
min-height: #{29 / $base-font-size}rem;
1412
position: relative;
1513
}
1614

1715
.sidebar__title {
18-
font-size: #{12 / $base-font-size}rem;
16+
font-size: #{16 / $base-font-size}rem;
17+
font-weight: 500;
1918
display: inline-block;
2019
.sidebar--contracted & {
2120
display: none;
@@ -25,15 +24,21 @@
2524
}
2625

2726
.sidebar__add {
28-
width: #{20 / $base-font-size}rem;
29-
height: #{20 / $base-font-size}rem;
30-
@include icon();
27+
padding: #{2 / $base-font-size}rem;
28+
display: flex;
29+
align-items: center;
30+
justify-content: center;
31+
& svg {
32+
width: #{18 / $base-font-size}rem;
33+
height: #{18 / $base-font-size}rem;
34+
}
35+
@include themify() {
36+
background-color: getThemifyVariable('ide-border-color');
37+
}
38+
3139
.sidebar--contracted & {
3240
display: none;
3341
}
34-
& svg {
35-
width: #{10 / $base-font-size}rem;
36-
}
3742
}
3843

3944
.sidebar__file-list {

0 commit comments

Comments
 (0)