for #874, also fixes bug in which file options could be revealed by right clicking even if user isn't owner of sketch

This commit is contained in:
Cassie Tarakajian 2019-03-14 16:10:50 -04:00
parent a018929489
commit 1d2cb87c33
3 changed files with 19 additions and 7 deletions

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>
); );
} }
@ -154,7 +157,6 @@ export class FileNode extends React.Component {
tabIndex="0" tabIndex="0"
onClick={this.toggleFileOptions} onClick={this.toggleFileOptions}
onBlur={() => setTimeout(this.hideFileOptions, 200)} onBlur={() => setTimeout(this.hideFileOptions, 200)}
style={{ display: (this.state.isOptionsOpen) ? 'inline-block' : '' }}
> >
<InlineSVG src={downArrowUrl} /> <InlineSVG src={downArrowUrl} />
</button> </button>
@ -251,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 = {
@ -262,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) {

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>
); );
} }

View file

@ -138,10 +138,16 @@
} }
.sidebar__file-item:hover > .file-item__content & { .sidebar__file-item:hover > .file-item__content & {
display: inline-block; 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 {