diff options
| -rw-r--r-- | web/react/components/get_link_modal.jsx | 46 | ||||
| -rw-r--r-- | web/sass-files/sass/partials/_get-link.scss | 6 | ||||
| -rw-r--r-- | web/sass-files/sass/styles.scss | 1 |
3 files changed, 35 insertions, 18 deletions
diff --git a/web/react/components/get_link_modal.jsx b/web/react/components/get_link_modal.jsx index af5314e64..ab6045d2f 100644 --- a/web/react/components/get_link_modal.jsx +++ b/web/react/components/get_link_modal.jsx @@ -10,46 +10,56 @@ ZeroClipboardMixin.ZeroClipboard.config({ module.exports = React.createClass({ zeroclipboardElementsSelector: '[data-copy-btn]', - mixins: [ ZeroClipboardMixin ], + mixins: [ZeroClipboardMixin], componentDidMount: function() { var self = this; - if(this.refs.modal) { + if (this.refs.modal) { $(this.refs.modal.getDOMNode()).on('show.bs.modal', function(e) { var button = e.relatedTarget; - self.setState({title: $(button).attr('data-title'), value: $(button).attr('data-value') }); + self.setState({title: $(button).attr('data-title'), value: $(button).attr('data-value')}); + }); + $(this.refs.modal.getDOMNode()).on('hide.bs.modal', function() { + self.setState({copiedLink: false}); }); } }, getInitialState: function() { return { }; }, + handleClick: function() { + this.setState({copiedLink: true}); + }, render: function() { - var currentUser = UserStore.getCurrentUser() + var currentUser = UserStore.getCurrentUser(); if (currentUser != null) { return ( - <div className="modal fade" ref="modal" id="get_link" tabIndex="-1" role="dialog" aria-hidden="true"> - <div className="modal-dialog"> - <div className="modal-content"> - <div className="modal-header"> - <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> - <h4 className="modal-title" id="myModalLabel">{this.state.title} Link</h4> + <div className='modal fade' ref='modal' id='get_link' tabIndex='-1' role='dialog' aria-hidden='true'> + <div className='modal-dialog'> + <div className='modal-content'> + <div className='modal-header'> + <button type='button' className='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>×</span></button> + <h4 className='modal-title' id='myModalLabel'>{this.state.title} Link</h4> </div> - <div className="modal-body"> - <p>{"The link below is used for open " + strings.TeamPlural + " or if you allowed your " + strings.Team + " members to sign up using their " + strings.Company + " email addresses."} + <div className='modal-body'> + <p>{'The link below is used for open ' + strings.TeamPlural + ' or if you allowed your ' + strings.Team + ' members to sign up using their ' + strings.Company + ' email addresses.'} </p> - <textarea className="form-control no-resize" readOnly="true" value={this.state.value}></textarea> + <textarea className='form-control no-resize' readOnly='true' value={this.state.value}></textarea> </div> - <div className="modal-footer"> - <button type="button" className="btn btn-default" data-dismiss="modal">Close</button> - <button data-copy-btn type="button" className="btn btn-primary pull-left" data-clipboard-text={this.state.value}>Copy Link</button> + <div className='modal-footer'> + <button type='button' className='btn btn-default' data-dismiss='modal'>Close</button> + <button data-copy-btn='true' type='button' className='btn btn-primary pull-left' onClick={this.handleClick} data-clipboard-text={this.state.value}>Copy Link</button> + {this.state.copiedLink ? + <p className='copy-link-confirm'>Link copied to clipboard.</p> + : + null + } </div> </div> </div> </div> ); - } else { - return <div/>; } + return <div/>; } }); diff --git a/web/sass-files/sass/partials/_get-link.scss b/web/sass-files/sass/partials/_get-link.scss new file mode 100644 index 000000000..84b20729b --- /dev/null +++ b/web/sass-files/sass/partials/_get-link.scss @@ -0,0 +1,6 @@ +.copy-link-confirm { + color: rgb(153, 230, 153); + margin-top: -27px; + margin-bottom: -25px; + margin-right: 300px; +}
\ No newline at end of file diff --git a/web/sass-files/sass/styles.scss b/web/sass-files/sass/styles.scss index ffd1f42b8..eb5152a2c 100644 --- a/web/sass-files/sass/styles.scss +++ b/web/sass-files/sass/styles.scss @@ -33,6 +33,7 @@ @import "partials/error"; @import "partials/error-bar"; @import "partials/loading"; +@import "partials/get-link"; // Responsive Css @import "partials/responsive"; |