mirror of
https://github.com/4ian/GDevelop.git
synced 2025-10-15 10:19:04 +00:00
Properly show disabled Link events and adapt the rendering to the theme (#916)
This commit is contained in:
@@ -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';
|
||||
|
@@ -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>
|
||||
);
|
||||
}
|
||||
|
@@ -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;
|
||||
}
|
||||
|
@@ -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;
|
||||
}
|
||||
|
||||
|
Reference in New Issue
Block a user