Merge pull request #1298 from asaadmahmoodspin/ui-improvements

Multiple UI Improvements
2025-02-25 18:55:24 -06:00 · 2015-11-04 21:23:02 -08:00
parent 8c2dace188 8e03642935
commit 72a18e7d10
9 changed files with 45 additions and 24 deletions
--- a/web/react/components/edit_channel_modal.jsx
+++ b/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}
--- a/web/react/components/edit_channel_purpose_modal.jsx
+++ b/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}
            >
--- a/web/react/components/member_list.jsx
+++ b/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>
        );
    }
--- a/web/react/components/rename_channel_modal.jsx
+++ b/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}
--- a/web/react/components/tutorial/tutorial_tip.jsx
+++ b/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}
--- a/web/react/utils/utils.jsx
+++ b/web/react/utils/utils.jsx
@@ -533,7 +533,7 @@ export function applyTheme(theme) {
        changeCss('.dropdown-menu, .popover ', 'box-shadow:' + changeOpacity(theme.centerChannelColor, 0.1) + ' 0px 6px 12px', 3);
        changeCss('.dropdown-menu, .popover ', '-webkit-box-shadow:' + changeOpacity(theme.centerChannelColor, 0.1) + ' 0px 6px 12px', 2);
        changeCss('.dropdown-menu, .popover ', '-moz-box-shadow:' + changeOpacity(theme.centerChannelColor, 0.1) + ' 0px 6px 12px', 1);
-        changeCss('.post-body hr, .loading-screen .loading__content .round, .tutorial__circles .circle, .tip-overlay .tutorial__circles .circle.active', 'background:' + theme.centerChannelColor, 1);
+        changeCss('.post-body hr, .loading-screen .loading__content .round, .tutorial__circles .circle', 'background:' + theme.centerChannelColor, 1);
        changeCss('.channel-header .heading', 'color:' + theme.centerChannelColor, 1);
        changeCss('.markdown__table tbody tr:nth-child(2n)', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1);
        changeCss('.channel-header__info>div.dropdown .header-dropdown__icon', 'color:' + changeOpacity(theme.centerChannelColor, 0.8), 1);
--- a/web/sass-files/sass/partials/_base.scss
+++ b/web/sass-files/sass/partials/_base.scss
@@ -31,7 +31,7 @@ body {
 }

 .container-fluid {
-    @include clearfix;
+    @include legacy-pie-clearfix;
    height: 100%;
    position: relative;
 }
--- a/web/sass-files/sass/partials/_modal.scss
+++ b/web/sass-files/sass/partials/_modal.scss
@@ -368,7 +368,7 @@
 	}

 	.modal-body {
-		padding: 10px 0 0;
+		padding: 10px 0 20px;
 		@include clearfix;
 	}

--- a/web/sass-files/sass/partials/_tutorial.scss
+++ b/web/sass-files/sass/partials/_tutorial.scss
@@ -107,11 +107,6 @@
            width: 7px;
            height: 7px;
            margin: 0 4px;
-            &.active {
-                background: #000;
-                @include opacity(0.4);
-            }
-
        }

    }
@@ -153,10 +148,17 @@
        padding-bottom: 100px;
        padding: 20px 40px 40px;
        .tutorial__steps {
+            position: relative;
            max-width: 310px;
-            min-height: 420px;
+            min-height: 350px;
+            margin-bottom: 50px;
            text-align: left;
            display: inline-block;
+                padding-bottom: 30px;
+        }
+        .btn-primary {
+            position: absolute;
+            bottom: 0;
        }
    }
    h1 {