makes only the title clickable for collapse instead the whole panel header

This commit is contained in:
Sebastian Sdorra
2019-03-06 15:03:08 +01:00
parent c672b6603e
commit b1335b17ee

View File

@@ -16,7 +16,7 @@ const styles = {
panel: { panel: {
fontSize: "1rem" fontSize: "1rem"
}, },
header: { titleHeader: {
cursor: "pointer" cursor: "pointer"
}, },
title: { title: {
@@ -139,18 +139,26 @@ class DiffFile extends React.Component<Props, State> {
}; };
render() { render() {
const { file, fileControlFactory, fileAnnotationFactory, sideBySide, classes } = this.props; const {
file,
fileControlFactory,
fileAnnotationFactory,
sideBySide,
classes
} = this.props;
const { collapsed } = this.state; const { collapsed } = this.state;
const viewType = sideBySide ? "split" : "unified"; const viewType = sideBySide ? "split" : "unified";
let body = null; let body = null;
let icon = "fa fa-angle-right"; let icon = "fa fa-angle-right";
if (!collapsed) { if (!collapsed) {
const fileAnnotations = fileAnnotationFactory ? fileAnnotationFactory(file) : null; const fileAnnotations = fileAnnotationFactory
? fileAnnotationFactory(file)
: null;
icon = "fa fa-angle-down"; icon = "fa fa-angle-down";
body = ( body = (
<div className="panel-block is-paddingless is-size-7"> <div className="panel-block is-paddingless is-size-7">
{ fileAnnotations } {fileAnnotations}
<DiffComponent viewType={viewType}> <DiffComponent viewType={viewType}>
{file.hunks.map(this.renderHunk)} {file.hunks.map(this.renderHunk)}
</DiffComponent> </DiffComponent>
@@ -161,12 +169,12 @@ class DiffFile extends React.Component<Props, State> {
const fileControls = fileControlFactory ? fileControlFactory(file) : null; const fileControls = fileControlFactory ? fileControlFactory(file) : null;
return ( return (
<div className={classNames("panel", classes.panel)}> <div className={classNames("panel", classes.panel)}>
<div <div className="panel-heading">
className={classNames("panel-heading", classes.header)}
onClick={this.toggleCollapse}
>
<div className="level"> <div className="level">
<div className="level-left"> <div
className={classNames("level-left", classes.titleHeader)}
onClick={this.toggleCollapse}
>
<i className={icon} /> <i className={icon} />
<span className={classes.title}> <span className={classes.title}>
{this.renderFileTitle(file)} {this.renderFileTitle(file)}
@@ -175,9 +183,7 @@ class DiffFile extends React.Component<Props, State> {
{this.renderChangeTag(file)} {this.renderChangeTag(file)}
</span> </span>
</div> </div>
<div className="level-right"> <div className="level-right">{fileControls}</div>
{ fileControls }
</div>
</div> </div>
</div> </div>
{body} {body}