r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

Merge branch 'nimishagarwal76-blur_file_menu'

Browse source
This commit is contained in:
Cassie Tarakajian 2019-03-14 16:12:44 -04:00
commit 8bd698a8fe
3 changed files with 22 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
client/modules/IDE/components/FileNode.jsx
View file

@ -65,6 +65,9 @@ export class FileNode extends React.Component {
toggleFileOptions(e) { toggleFileOptions(e) {
e.preventDefault(); e.preventDefault();
if (!this.props.canEdit) {
return;
}
if (this.state.isOptionsOpen) { if (this.state.isOptionsOpen) {
this.setState({ isOptionsOpen: false }); this.setState({ isOptionsOpen: false });
} else { } else {
@ -88,7 +91,7 @@ export class FileNode extends React.Component {
renderChild(childId) { renderChild(childId) {
return ( return (
<li key={childId}> <li key={childId}>
<ConnectedFileNode id={childId} parentId={this.props.id} /> <ConnectedFileNode id={childId} parentId={this.props.id} canEdit={this.props.canEdit} />
</li> </li>
); );
} }
@ -250,7 +253,8 @@ FileNode.propTypes = {
newFile: PropTypes.func.isRequired, newFile: PropTypes.func.isRequired,
newFolder: PropTypes.func.isRequired, newFolder: PropTypes.func.isRequired,
showFolderChildren: PropTypes.func.isRequired, showFolderChildren: PropTypes.func.isRequired,
hideFolderChildren: PropTypes.func.isRequired hideFolderChildren: PropTypes.func.isRequired,
canEdit: PropTypes.bool.isRequired
}; };
FileNode.defaultProps = { FileNode.defaultProps = {
@ -261,8 +265,7 @@ FileNode.defaultProps = {
function mapStateToProps(state, ownProps) { function mapStateToProps(state, ownProps) {
// this is a hack, state is updated before ownProps // this is a hack, state is updated before ownProps
return state.files.find(file => file.id === ownProps.id) || { ...ownProps, name: 'test', fileType: 'file' }; return state.files.find(file => file.id === ownProps.id) || { name: 'test', fileType: 'file' };
// return state.files.find(file => file.id === ownProps.id);
} }
function mapDispatchToProps(dispatch) { function mapDispatchToProps(dispatch) {

8
client/modules/IDE/components/Sidebar.jsx
View file

@ -41,11 +41,12 @@ class Sidebar extends React.Component {
} }
render() { render() {
const canEditProject = this.userCanEditProject();
const sidebarClass = classNames({ const sidebarClass = classNames({
'sidebar': true, 'sidebar': true,
'sidebar--contracted': !this.props.isExpanded, 'sidebar--contracted': !this.props.isExpanded,
'sidebar--project-options': this.props.projectOptionsVisible, 'sidebar--project-options': this.props.projectOptionsVisible,
'sidebar--cant-edit': !this.userCanEditProject() 'sidebar--cant-edit': !canEditProject
}); });
return ( return (
@ -82,7 +83,10 @@ class Sidebar extends React.Component {
</ul> </ul>
</div> </div>
</div> </div>
<ConnectedFileNode id={this.props.files.filter(file => file.name === 'root')[0].id} /> <ConnectedFileNode
id={this.props.files.filter(file => file.name === 'root')[0].id}
canEdit={canEditProject}
/>
</nav> </nav>
); );
} }

10
client/styles/components/_sidebar.scss
View file

@ -125,7 +125,6 @@
@include icon(); @include icon();
@include themify() { @include themify() {
padding: #{4 / $base-font-size}rem 0; padding: #{4 / $base-font-size}rem 0;
background-color: map-get($theme-map, 'file-selected-color');
padding-right: #{6 / $base-font-size}rem; padding-right: #{6 / $base-font-size}rem;
} }
display: none; display: none;
@ -137,9 +136,18 @@
display: none; display: none;
} }
} }
.sidebar__file-item:hover > .file-item__content & {
display: inline-block;
.sidebar--cant-edit & {
display: none;
}
}
& svg { & svg {
width: #{10 / $base-font-size}rem; width: #{10 / $base-font-size}rem;
} }
.sidebar__file-item--open > .file-item__content & {
display: inline-block;
}
} }
.sidebar__file-item-options { .sidebar__file-item-options {