Skip to content

Commit 1fb2f63

Browse files
LakshSinglaLakshSingla
committed
Merge branch 'master' into feature/sketch-list
2 parents 17312a9 + 80765e0 commit 1fb2f63

File tree

21 files changed

+122
-897
lines changed

21 files changed

+122
-897
lines changed

‎client/constants.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// TODO Organize this file by reducer type, ot break this apart into
1+
// TODO Organize this file by reducer type, to break this apart into
22
// multiple files
33
export const UPDATE_FILE_CONTENT = 'UPDATE_FILE_CONTENT';
44
export const TOGGLE_SKETCH = 'TOGGLE_SKETCH';

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

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,9 @@ export class FileNode extends React.Component {
6565

6666
toggleFileOptions(e) {
6767
e.preventDefault();
68+
if (!this.props.canEdit) {
69+
return;
70+
}
6871
if (this.state.isOptionsOpen) {
6972
this.setState({ isOptionsOpen: false });
7073
} else {
@@ -88,7 +91,7 @@ export class FileNode extends React.Component {
8891
renderChild(childId) {
8992
return (
9093
<li key={childId}>
91-
<ConnectedFileNode id={childId} parentId={this.props.id} />
94+
<ConnectedFileNode id={childId} parentId={this.props.id} canEdit={this.props.canEdit} />
9295
</li>
9396
);
9497
}
@@ -153,7 +156,6 @@ export class FileNode extends React.Component {
153156
ref={(element) => { this[`fileOptions-${this.props.id}`] = element; }}
154157
tabIndex="0"
155158
onClick={this.toggleFileOptions}
156-
onBlur={() => setTimeout(this.hideFileOptions, 200)}
157159
>
158160
<InlineSVG src={downArrowUrl} />
159161
</button>
@@ -165,7 +167,10 @@ export class FileNode extends React.Component {
165167
<li>
166168
<button
167169
aria-label="add file"
168-
onClick={this.props.newFile}
170+
onClick={() => {
171+
this.props.newFile();
172+
setTimeout(() => this.hideFileOptions(), 0);
173+
}}
169174
className="sidebar__file-item-option"
170175
>
171176
Add File
@@ -180,7 +185,10 @@ export class FileNode extends React.Component {
180185
<li>
181186
<button
182187
aria-label="add folder"
183-
onClick={this.props.newFolder}
188+
onClick={() => {
189+
this.props.newFolder();
190+
setTimeout(() => this.hideFileOptions(), 0);
191+
}}
184192
className="sidebar__file-item-option"
185193
>
186194
Add Folder
@@ -195,6 +203,7 @@ export class FileNode extends React.Component {
195203
this.originalFileName = this.props.name;
196204
this.showEditFileName();
197205
setTimeout(() => this.fileNameInput.focus(), 0);
206+
setTimeout(() => this.hideFileOptions(), 0);
198207
}}
199208
className="sidebar__file-item-option"
200209
>
@@ -210,6 +219,9 @@ export class FileNode extends React.Component {
210219
setTimeout(() => this.props.deleteFile(this.props.id, this.props.parentId), 100);
211220
}
212221
}}
222+
onBlur={() => {
223+
setTimeout(this.hideFileOptions, 200);
224+
}}
213225
className="sidebar__file-item-option"
214226
>
215227
Delete
@@ -250,7 +262,8 @@ FileNode.propTypes = {
250262
newFile: PropTypes.func.isRequired,
251263
newFolder: PropTypes.func.isRequired,
252264
showFolderChildren: PropTypes.func.isRequired,
253-
hideFolderChildren: PropTypes.func.isRequired
265+
hideFolderChildren: PropTypes.func.isRequired,
266+
canEdit: PropTypes.bool.isRequired
254267
};
255268

256269
FileNode.defaultProps = {
@@ -261,8 +274,7 @@ FileNode.defaultProps = {
261274

262275
function mapStateToProps(state, ownProps) {
263276
// this is a hack, state is updated before ownProps
264-
return state.files.find(file => file.id === ownProps.id) || { ...ownProps, name: 'test', fileType: 'file' };
265-
// return state.files.find(file => file.id === ownProps.id);
277+
return state.files.find(file => file.id === ownProps.id) || { name: 'test', fileType: 'file' };
266278
}
267279

268280
function mapDispatchToProps(dispatch) {

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,10 @@ class NewFileForm extends React.Component {
88
this.createFile = this.props.createFile.bind(this);
99
}
1010

11+
componentDidMount() {
12+
this.fileName.focus();
13+
}
14+
1115
render() {
1216
const { fields: { name }, handleSubmit } = this.props;
1317
return (
@@ -25,6 +29,7 @@ class NewFileForm extends React.Component {
2529
type="text"
2630
placeholder="Name"
2731
{...domOnlyProps(name)}
32+
ref={(element) => { this.fileName = element; }}
2833
/>
2934
<input type="submit" value="Add File" aria-label="add file" />
3035
{name.touched && name.error && <span className="form-error">{name.error}</span>}

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

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -41,11 +41,12 @@ class Sidebar extends React.Component {
4141
}
4242

4343
render() {
44+
const canEditProject = this.userCanEditProject();
4445
const sidebarClass = classNames({
4546
'sidebar': true,
4647
'sidebar--contracted': !this.props.isExpanded,
4748
'sidebar--project-options': this.props.projectOptionsVisible,
48-
'sidebar--cant-edit': !this.userCanEditProject()
49+
'sidebar--cant-edit': !canEditProject
4950
});
5051

5152
return (
@@ -64,25 +65,40 @@ class Sidebar extends React.Component {
6465
tabIndex="0"
6566
ref={(element) => { this.sidebarOptions = element; }}
6667
onClick={this.toggleProjectOptions}
67-
onBlur={() => setTimeout(this.props.closeProjectOptions, 200)}
6868
>
6969
<InlineSVG src={downArrowUrl} />
7070
</button>
7171
<ul className="sidebar__project-options">
7272
<li>
73-
<button aria-label="add folder" onClick={this.props.newFolder} >
73+
<button
74+
aria-label="add folder"
75+
onClick={() => {
76+
this.props.newFolder();
77+
setTimeout(this.props.closeProjectOptions, 0);
78+
}}
79+
>
7480
Add folder
7581
</button>
7682
</li>
7783
<li>
78-
<button aria-label="add file" onClick={this.props.newFile} >
84+
<button
85+
aria-label="add file"
86+
onClick={() => {
87+
this.props.newFile();
88+
setTimeout(this.props.closeProjectOptions, 0);
89+
}}
90+
onBlur={() => { setTimeout(this.props.closeProjectOptions, 200); }}
91+
>
7992
Add file
8093
</button>
8194
</li>
8295
</ul>
8396
</div>
8497
</div>
85-
<ConnectedFileNode id={this.props.files.filter(file => file.name === 'root')[0].id} />
98+
<ConnectedFileNode
99+
id={this.props.files.filter(file => file.name === 'root')[0].id}
100+
canEdit={canEditProject}
101+
/>
86102
</nav>
87103
);
88104
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,7 @@ class Toolbar extends React.Component {
124124
</a>
125125
<input
126126
type="text"
127+
maxLength="256"
127128
className="toolbar__project-name-input"
128129
value={this.props.project.name}
129130
onChange={this.handleProjectNameChange}

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

Lines changed: 16 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -37,10 +37,13 @@ import Feedback from '../components/Feedback';
3737
class IDEView extends React.Component {
3838
constructor(props) {
3939
super(props);
40-
this._handleConsolePaneOnDragFinished = this._handleConsolePaneOnDragFinished.bind(this);
41-
this._handleSidebarPaneOnDragFinished = this._handleSidebarPaneOnDragFinished.bind(this);
4240
this.handleGlobalKeydown = this.handleGlobalKeydown.bind(this);
4341
this.warnIfUnsavedChanges = this.warnIfUnsavedChanges.bind(this);
42+
43+
this.state = {
44+
consoleSize: props.ide.consoleIsExpanded ? 150 : 29,
45+
sidebarSize: props.ide.sidebarIsExpanded ? 160 : 20
46+
};
4447
}
4548

4649
componentDidMount() {
@@ -56,10 +59,6 @@ class IDEView extends React.Component {
5659
}
5760
}
5861

59-
this.consoleSize = this.props.ide.consoleIsExpanded ? 150 : 29;
60-
this.sidebarSize = this.props.ide.sidebarIsExpanded ? 160 : 20;
61-
this.forceUpdate();
62-
6362
this.isMac = navigator.userAgent.toLowerCase().indexOf('mac') !== -1;
6463
document.addEventListener('keydown', this.handleGlobalKeydown, false);
6564

@@ -75,17 +74,17 @@ class IDEView extends React.Component {
7574
if (nextProps.location !== this.props.location) {
7675
this.props.setPreviousPath(this.props.location.pathname);
7776
}
78-
}
7977

80-
componentWillUpdate(nextProps) {
8178
if (this.props.ide.consoleIsExpanded !== nextProps.ide.consoleIsExpanded) {
82-
this.consoleSize = nextProps.ide.consoleIsExpanded ? 150 : 29;
79+
this.setState({ consoleSize: nextProps.ide.consoleIsExpanded ? 150 : 29 });
8380
}
8481

8582
if (this.props.ide.sidebarIsExpanded !== nextProps.ide.sidebarIsExpanded) {
86-
this.sidebarSize = nextProps.ide.sidebarIsExpanded ? 160 : 20;
83+
this.setState({ sidebarSize: nextProps.ide.sidebarIsExpanded ? 160 : 20 });
8784
}
85+
}
8886

87+
componentWillUpdate(nextProps) {
8988
if (nextProps.params.project_id && !this.props.params.project_id) {
9089
if (nextProps.params.project_id !== nextProps.project.id) {
9190
this.props.getProject(nextProps.params.project_id);
@@ -127,30 +126,12 @@ class IDEView extends React.Component {
127126
document.removeEventListener('keydown', this.handleGlobalKeydown, false);
128127
clearTimeout(this.autosaveInterval);
129128
this.autosaveInterval = null;
130-
this.consoleSize = undefined;
131-
this.sidebarSize = undefined;
132129
}
133130

134131
isUserOwner() {
135132
return this.props.project.owner && this.props.project.owner.id === this.props.user.id;
136133
}
137134

138-
_handleConsolePaneOnDragFinished() {
139-
this.consoleSize = this.consolePane.state.draggedSize;
140-
this.consolePane.setState({
141-
resized: false,
142-
draggedSize: undefined,
143-
});
144-
}
145-
146-
_handleSidebarPaneOnDragFinished() {
147-
this.sidebarSize = this.sidebarPane.state.draggedSize;
148-
this.sidebarPane.setState({
149-
resized: false,
150-
draggedSize: undefined
151-
});
152-
}
153-
154135
handleGlobalKeydown(e) {
155136
// 83 === s
156137
if (e.keyCode === 83 && ((e.metaKey && this.isMac) || (e.ctrlKey && !this.isMac))) {
@@ -245,8 +226,8 @@ class IDEView extends React.Component {
245226
<div className="editor-preview-container">
246227
<SplitPane
247228
split="vertical"
248-
defaultSize={this.sidebarSize}
249-
ref={(element) => { this.sidebarPane = element; }}
229+
size={this.state.sidebarSize}
230+
onChange={size => this.setState({ sidebarSize: size })}
250231
onDragFinished={this._handleSidebarPaneOnDragFinished}
251232
allowResize={this.props.ide.sidebarIsExpanded}
252233
minSize={20}
@@ -270,15 +251,16 @@ class IDEView extends React.Component {
270251
defaultSize="50%"
271252
onChange={() => { this.overlay.style.display = 'block'; }}
272253
onDragFinished={() => { this.overlay.style.display = 'none'; }}
273-
resizerStyle={{ marginRight: '0', marginLeft: '-10px' }}
254+
resizerStyle={{
255+
borderLeftWidth: '2px', borderRightWidth: '2px', width: '2px', margin: '0px 0px'
256+
}}
274257
>
275258
<SplitPane
276259
split="horizontal"
277260
primary="second"
278-
defaultSize={this.consoleSize}
261+
size={this.state.consoleSize}
279262
minSize={29}
280-
ref={(element) => { this.consolePane = element; }}
281-
onDragFinished={this._handleConsolePaneOnDragFinished}
263+
onChange={size => this.setState({ consoleSize: size })}
282264
allowResize={this.props.ide.consoleIsExpanded}
283265
className="editor-preview-subpanel"
284266
>

‎client/styles/abstracts/_variables.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ $themes: (
3636
modal-background-color: #f4f4f4,
3737
modal-button-background-color: #e6e6e6,
3838
modal-border-color: rgba(17, 17, 17, 0.3),
39-
modal-boder-selected-color: #B9D0E1,
39+
modal-border-selected-color: #B9D0E1,
4040
icon-color: $icon-color,
4141
icon-hover-color: $icon-hover-color,
4242
icon-toast-hover-color: $white,

‎client/styles/components/_copyable-input.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@
5151
}
5252

5353
.tooltipped-n::before,
54-
.tooltipped::before,
54+
.tooltipped::before
5555
{
5656
@include themify() {
5757
color: getThemifyVariable('button-background-hover-color');

‎client/styles/components/_editor.scss

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -245,6 +245,35 @@ pre.CodeMirror-line {
245245
background: transparent url(../images/exit.svg) no-repeat;
246246
}
247247

248+
// foldgutter
249+
.CodeMirror-foldmarker {
250+
text-shadow: -1px 0 #ed225d, 0 1px #ed225d, 1px 0 #ed225d, 0 -1px #ed225d;
251+
color: #FFF;
252+
/* background-color: rgba(237, 34, 93, 0.42); */
253+
/* border-radius: 3px; */
254+
font-weight: bold;
255+
font-family: arial;
256+
line-height: .3;
257+
cursor: pointer;
258+
opacity: 0.75;
259+
}
260+
.CodeMirror-foldgutter {
261+
width: 2.7em;
262+
}
263+
.CodeMirror-foldgutter-open,
264+
.CodeMirror-foldgutter-folded {
265+
cursor: pointer;
266+
padding-bottom: 0.4em;
267+
text-align: right;
268+
line-height: 1.0;
269+
}
270+
.CodeMirror-foldgutter-open:after {
271+
content: "\25BE";
272+
}
273+
.CodeMirror-foldgutter-folded:after {
274+
content: "\25B8";
275+
}
276+
248277
.CodeMirror-foldgutter-open, .CodeMirror-foldgutter-folded {
249278
position: absolute;
250279
right: 100%;

‎client/styles/components/_sidebar.scss

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646

4747
.sidebar__root-item {
4848
position: relative;
49-
overflow-y: scroll;
49+
overflow-y: auto;
5050
flex: 1 1 auto;
5151
}
5252

@@ -125,7 +125,6 @@
125125
@include icon();
126126
@include themify() {
127127
padding: #{4 / $base-font-size}rem 0;
128-
background-color: map-get($theme-map, 'file-selected-color');
129128
padding-right: #{6 / $base-font-size}rem;
130129
}
131130
display: none;
@@ -137,9 +136,18 @@
137136
display: none;
138137
}
139138
}
139+
.sidebar__file-item:hover > .file-item__content & {
140+
display: inline-block;
141+
.sidebar--cant-edit & {
142+
display: none;
143+
}
144+
}
140145
& svg {
141146
width: #{10 / $base-font-size}rem;
142147
}
148+
.sidebar__file-item--open > .file-item__content & {
149+
display: inline-block;
150+
}
143151
}
144152

145153
.sidebar__file-item-options {

‎client/styles/main.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@
66
@import 'base/reset';
77
@import 'base/base';
88

9-
@import 'vendors/codemirror';
10-
@import 'vendors/lint';
11-
@import 'vendors/dropzone';
9+
@import 'node_modules/codemirror/lib/codemirror';
10+
@import 'node_modules/codemirror/addon/lint/lint';
11+
@import 'node_modules/dropzone/dist/dropzone';
1212
@import 'node_modules/primer-tooltips/build/build';
1313

1414
@import 'components/p5-light-codemirror-theme';

0 commit comments

Comments
 (0)