Merge pull request #1298 from asaadmahmoodspin/ui-improvements

Multiple UI Improvements

web/react/components/edit_channel_modal.jsx

@@ -12,6 +12,7 @@ export default class EditChannelModal extends React.Component {
         this.handleUserInput = this.handleUserInput.bind(this);
         this.handleClose = this.handleClose.bind(this);
         this.onShow = this.onShow.bind(this);
+        this.handleShown = this.handleShown.bind(this);
 
         this.state = {
             header: '',
@@ -55,9 +56,13 @@ export default class EditChannelModal extends React.Component {
         const button = e.relatedTarget;
         this.setState({header: $(button).attr('data-header'), title: $(button).attr('data-title'), channelId: $(button).attr('data-channelid'), serverError: ''});
     }
+    handleShown() {
+        $('#edit_channel #edit_header').focus();
+    }
     componentDidMount() {
         $(ReactDOM.findDOMNode(this.refs.modal)).on('show.bs.modal', this.onShow);
         $(ReactDOM.findDOMNode(this.refs.modal)).on('hidden.bs.modal', this.handleClose);
+        $(ReactDOM.findDOMNode(this.refs.modal)).on('shown.bs.modal', this.handleShown);
     }
     componentWillUnmount() {
         $(ReactDOM.findDOMNode(this.refs.modal)).off('hidden.bs.modal', this.handleClose);
@@ -114,6 +119,7 @@ export default class EditChannelModal extends React.Component {
                             <textarea
                                 className='form-control no-resize'
                                 rows='6'
+                                id='edit_header'
                                 maxLength='1024'
                                 value={this.state.header}
                                 onChange={this.handleUserInput}

web/react/components/edit_channel_purpose_modal.jsx

@@ -15,6 +15,12 @@ export default class EditChannelPurposeModal extends React.Component {
         this.state = {serverError: ''};
     }
 
+    componentDidUpdate() {
+        if (this.props.show) {
+            $(ReactDOM.findDOMNode(this.refs.purpose)).focus();
+        }
+    }
+
     handleHide() {
         this.setState({serverError: ''});
 
@@ -77,6 +83,7 @@ export default class EditChannelPurposeModal extends React.Component {
         return (
             <Modal
                 className='modal-edit-channel-purpose'
+                ref='modal'
                 show={this.props.show}
                 onHide={this.handleHide}
             >

web/react/components/member_list.jsx

@@ -17,26 +17,26 @@ export default class MemberList extends React.Component {
 
         var message = '';
         if (members.length === 0) {
-            message = <span>No users to add.</span>;
+            message = <tr><td>No users to add.</td></tr>;
         }
 
         return (
             <table className='table more-table member-list-holder'>
                 <tbody>
-                {members.map(function mymembers(member) {
-                    return (
-                        <MemberListItem
-                            key={member.id}
-                            member={member}
-                            isAdmin={this.props.isAdmin}
-                            handleInvite={this.props.handleInvite}
-                            handleRemove={this.props.handleRemove}
-                            handleMakeAdmin={this.props.handleMakeAdmin}
-                        />
-                    );
-                }, this)}
+                    {members.map(function mymembers(member) {
+                        return (
+                            <MemberListItem
+                                key={member.id}
+                                member={member}
+                                isAdmin={this.props.isAdmin}
+                                handleInvite={this.props.handleInvite}
+                                handleRemove={this.props.handleRemove}
+                                handleMakeAdmin={this.props.handleMakeAdmin}
+                            />
+                        );
+                    }, this)}
+                    {message}
                 </tbody>
-                {message}
             </table>
         );
     }

web/react/components/rename_channel_modal.jsx

@@ -16,6 +16,7 @@ export default class RenameChannelModal extends React.Component {
         this.displayNameKeyUp = this.displayNameKeyUp.bind(this);
         this.handleClose = this.handleClose.bind(this);
         this.handleShow = this.handleShow.bind(this);
+        this.handleShown = this.handleShown.bind(this);
         this.handleSubmit = this.handleSubmit.bind(this);
 
         this.state = {
@@ -118,9 +119,13 @@ export default class RenameChannelModal extends React.Component {
         const button = $(e.relatedTarget);
         this.setState({displayName: button.attr('data-display'), channelName: button.attr('data-name'), channelId: button.attr('data-channelid')});
     }
+    handleShown() {
+        $('#rename_channel #display_name').focus();
+    }
     componentDidMount() {
         $(ReactDOM.findDOMNode(this.refs.modal)).on('show.bs.modal', this.handleShow);
         $(ReactDOM.findDOMNode(this.refs.modal)).on('hidden.bs.modal', this.handleClose);
+        $(ReactDOM.findDOMNode(this.refs.modal)).on('shown.bs.modal', this.handleShown);
     }
     componentWillUnmount() {
         $(ReactDOM.findDOMNode(this.refs.modal)).off('hidden.bs.modal', this.handleClose);
@@ -176,6 +181,7 @@ export default class RenameChannelModal extends React.Component {
                                         onChange={this.onDisplayNameChange}
                                         type='text'
                                         ref='displayName'
+                                        id='display_name'
                                         className='form-control'
                                         placeholder='Enter display name'
                                         value={this.state.displayName}

web/react/components/tutorial/tutorial_tip.jsx

@@ -98,7 +98,7 @@ export default class TutorialTip extends React.Component {
                         <div className='tutorial__circles'>{dots}</div>
                         <div className='text-right'>
                             <button
-                                className='btn btn-default'
+                                className='btn btn-primary'
                                 onClick={this.handleNext}
                             >
                                 {buttonText}