Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add source editor component #4419

Merged
merged 23 commits into from
Jan 11, 2018
Merged

Add source editor component #4419

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
eea3972
Add react-ace dependency
Dec 12, 2017
4e61dab
Add first version of SourceCodeEditor
Dec 12, 2017
ee2005f
Add read-only flag to SourceCodeEditor
Dec 12, 2017
e044cb4
Make SourceCodeEditor resizable
Dec 13, 2017
7b8d069
Do not require onChange prop
Dec 13, 2017
42b0151
Allow to resize editor in all axes
Dec 13, 2017
49646a7
Do not clear editor textarea on undo
Dec 13, 2017
b62bcaa
Add property to disable ClipboardButton
Dec 13, 2017
0db23c5
Add toolbar with undo/redo controls
Dec 13, 2017
540b2fb
Enable/disable undo and redo buttons
Dec 13, 2017
93864e3
Add copy/paste buttons
Dec 13, 2017
ea97c69
Add support for annotations
Dec 13, 2017
c8c54ee
Add button titles to toolbar actions
Dec 13, 2017
abf3a66
Adapt copy message to macOS too
Dec 13, 2017
f591eaa
Improve message when clicking on paste button
Dec 13, 2017
8ff42eb
Make source editor non-resizable
Dec 20, 2017
21e74e4
Add support for multiple modes
Dec 20, 2017
b50090f
Disable copy and paste buttons for read-only editors
Dec 20, 2017
cf8081b
Avoid some computations when disabled
Dec 20, 2017
df5f171
Update examples with latest changes
Dec 20, 2017
33b80fa
Upgrade react-ace to 5.9.0
Jan 2, 2018
367638d
Remove hack to reset undo history
Jan 2, 2018
67f7b57
Fix copy and paste disabled state
Jan 11, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Add button titles to toolbar actions 
Hovering over the buttons should display a tooltip with the action they
perform.
  • Loading branch information
Edmundo Alvarez committed Jan 2, 2018
commit c8c54eeaa84219ed76992a0c80ac044dd477363a
6 changes: 5 additions & 1 deletion graylog2-web-interface/src/components/common/ClipboardButton.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,11 +29,14 @@ const ClipboardButton = React.createClass({
bsSize: PropTypes.string,
/** Specifies if the button is disabled or not. */
disabled: PropTypes.bool,
/** Text to display when hovering over the button. */
buttonTitle: PropTypes.string,
},
getDefaultProps() {
return {
action: 'copy',
disabled: false,
buttonTitle: undefined,
};
},
getInitialState() {
Expand Down Expand Up @@ -65,13 +68,14 @@ const ClipboardButton = React.createClass({
this.setState({ tooltipMessage: `Press Ctrl+${key} to ${event.action}` });
},
_getFilteredProps() {
const { className, style, bsStyle, bsSize, disabled } = this.props;
const { className, style, bsStyle, bsSize, disabled, buttonTitle } = this.props;
return {
className: className,
style: style,
bsStyle: bsStyle,
bsSize: bsSize,
disabled: disabled,
title: buttonTitle,
};
},
render() {
Expand Down
17 changes: 13 additions & 4 deletions graylog2-web-interface/src/components/common/SourceCodeEditor.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,7 @@ class SourceCodeEditor extends React.Component {
const validCssWidth = Number.isNaN(width) ? '100%' : width;
const { theme, resizable } = this.props;
const containerStyle = `${style.sourceCodeEditor} ${theme !== 'light' && style.darkMode} ${!resizable && style.static}`;
const overlay = <Tooltip id={'copy-button-tooltip'}>Click Paste on the Edit menu to paste.</Tooltip>;
const overlay = <Tooltip id={'paste-button-tooltip'}>Click Paste on the Edit menu to paste.</Tooltip>;
return (
<div>
{this.props.toolbar &&
Expand All @@ -146,18 +146,27 @@ class SourceCodeEditor extends React.Component {
bsSize="sm"
onSuccess={this.focusEditor}
text={this.state.selectedText}
buttonTitle="Copy (Ctrl+C / &#8984;C)"
disabled={this.state.selectedText === ''} />
<OverlayTrigger placement="top" trigger="click" overlay={overlay} rootClose>
<Button bsStyle="link" bsSize="sm" onClick={this.handlePaste}>
<Button bsStyle="link" bsSize="sm" title="Paste (Ctrl+V / &#8984;V)">
<i className="fa fa-paste fa-fw" />
</Button>
</OverlayTrigger>
</ButtonGroup>
<ButtonGroup>
<Button bsStyle="link" bsSize="sm" onClick={this.handleUndo} disabled={this.isUndoDisabled()}>
<Button bsStyle="link"
bsSize="sm"
onClick={this.handleUndo}
title="Undo (Ctrl+Z / &#8984;Z)"
disabled={this.isUndoDisabled()}>
<i className="fa fa-undo fa-fw" />
</Button>
<Button bsStyle="link" bsSize="sm" onClick={this.handleRedo} disabled={this.isRedoDisabled()}>
<Button bsStyle="link"
bsSize="sm"
onClick={this.handleRedo}
title="Redo (Ctrl+Shift+Z / &#8984;&#8679;Z)"
disabled={this.isRedoDisabled()}>
<i className="fa fa-repeat fa-fw" />
</Button>
</ButtonGroup>
Expand Down