Properly show disabled Link events and adapt the rendering to the theme (#916)

This commit is contained in:
Kink
2019-02-04 00:23:18 +01:00
committed by Florian Rival
parent 26dd33854f
commit cf7db809ac
4 changed files with 70 additions and 33 deletions

View File

@@ -19,3 +19,5 @@ export const eventsTreeWithSearchResults = 'with-search-results';
export const dropIndicator = 'drop-indicator';
export const cantDropIndicator = 'cant-drop-indicator';
export const linkContainer = 'link-container';

View File

@@ -7,6 +7,8 @@ import {
largeSelectedArea,
largeSelectableArea,
selectableArea,
linkContainer,
disabledText,
} from '../ClassNames';
import InlinePopover from '../../InlinePopover';
import ExternalEventsField from '../../ParameterFields/ExternalEventsField';
@@ -78,43 +80,51 @@ export default class LinkEvent extends React.Component<EventRendererProps, *> {
className={classNames({
[largeSelectableArea]: true,
[largeSelectedArea]: this.props.selected,
[linkContainer]: true,
})}
style={styles.container}
>
<span style={styles.title}>
Include events from{' '}
<i
className={classNames({
[selectableArea]: true,
})}
onClick={this.edit}
>
{target || '< Enter the name of external events >'}
</i>
</span>
<IconButton onClick={this.openTarget} disabled={!target}>
<OpenInNew />
</IconButton>
<InlinePopover
open={this.state.editing}
anchorEl={this.state.anchorEl}
onRequestClose={this.endEditing}
<span
className={classNames({
[selectableArea]: true,
[disabledText]: this.props.disabled,
})}
>
<ExternalEventsField
project={this.props.project}
globalObjectsContainer={this.props.globalObjectsContainer}
objectsContainer={this.props.objectsContainer}
value={target}
onChange={text => {
linkEvent.setTarget(text);
this.props.onUpdate();
}}
isInline
ref={externalEventsField =>
(this._externalEventsField = externalEventsField)
}
/>
</InlinePopover>
<span style={styles.title}>
Include events from{' '}
<i
className={classNames({
[selectableArea]: true,
})}
onClick={this.edit}
>
{target || '< Enter the name of external events >'}
</i>
</span>
<IconButton onClick={this.openTarget} disabled={!target}>
<OpenInNew />
</IconButton>
<InlinePopover
open={this.state.editing}
anchorEl={this.state.anchorEl}
onRequestClose={this.endEditing}
>
<ExternalEventsField
project={this.props.project}
globalObjectsContainer={this.props.globalObjectsContainer}
objectsContainer={this.props.objectsContainer}
value={target}
onChange={text => {
linkEvent.setTarget(text);
this.props.onUpdate();
}}
isInline
ref={externalEventsField =>
(this._externalEventsField = externalEventsField)
}
/>
</InlinePopover>
</span>
</div>
);
}

View File

@@ -165,3 +165,17 @@
width: '100%';
box-sizing: 'border-box';
}
/**
* Skinning the "Link" event
*/
.gd-events-sheet-dark-theme .link-container {
background: #505050;
}
.gd-events-sheet-dark-theme .link-container span {
color: rgb(209, 209, 209);
}
.gd-events-sheet-dark-theme .link-container .selectable {
color: #b77cff;
font-weight: bold;
}

View File

@@ -163,3 +163,14 @@
width: '100%';
box-sizing: 'border-box';
}
/**
* Skinning the "Link" event
*/
.gd-events-sheet-default-theme .link-container {
background: #f1f2f2;
}
.gd-events-sheet-default-theme .link-container .selectable {
color: #3c4698;
}