Merge branch 'master' of https://github.com/mattermost/platform

2015-06-29 20:38:02 +05:00
--- a/api/channel_test.go
+++ b/api/channel_test.go
@@ -679,6 +679,8 @@ func TestUpdateNotifyLevel(t *testing.T) {
 	data["user_id"] = user.Id
 	data["notify_level"] = model.CHANNEL_NOTIFY_MENTION

+	timeBeforeUpdate := model.GetMillis()
+
 	if _, err := Client.UpdateNotifyLevel(data); err != nil {
 		t.Fatal(err)
 	}
@@ -689,6 +691,10 @@ func TestUpdateNotifyLevel(t *testing.T) {
 		t.Fatal("NotifyLevel did not update properly")
 	}

+	if rdata.Members[channel1.Id].LastUpdateAt <= timeBeforeUpdate {
+		t.Fatal("LastUpdateAt did not update")
+	}
+
 	data["user_id"] = "junk"
 	if _, err := Client.UpdateNotifyLevel(data); err == nil {
 		t.Fatal("Should have errored - bad user id")
@@ -735,7 +741,7 @@ func TestUpdateNotifyLevel(t *testing.T) {
 }

 func TestFuzzyChannel(t *testing.T) {
-	Setup();
+	Setup()

 	team := &model.Team{Name: "Name", Domain: "z-z-" + model.NewId() + "a", Email: "test@nowhere.com", Type: model.TEAM_OPEN}
 	team = Client.Must(Client.CreateTeam(team)).Data.(*model.Team)
@@ -747,9 +753,9 @@ func TestFuzzyChannel(t *testing.T) {
 	Client.LoginByEmail(team.Domain, user.Email, "pwd")

 	// Strings that should pass as acceptable channel names
-	var fuzzyStringsPass = []string { 
+	var fuzzyStringsPass = []string{
 		"*", "?", ".", "}{][)(><", "{}[]()<>",
-		
+
 		"qahwah ( قهوة)",
 		"שָׁלוֹם עֲלֵיכֶם",
 		"Ramen チャーシュー chāshū",
--- a/model/channel_list.go
+++ b/model/channel_list.go
@@ -53,6 +53,12 @@ func (o *ChannelList) Etag() string {
 				t = member.LastViewedAt
 				id = v.Id
 			}
+
+			if member.LastUpdateAt > t {
+				t = member.LastUpdateAt
+				id = v.Id
+			}
+
 		}
 	}

--- a/model/channel_member.go
+++ b/model/channel_member.go
@@ -25,6 +25,7 @@ type ChannelMember struct {
 	MsgCount     int64  `json:"msg_count"`
 	MentionCount int64  `json:"mention_count"`
 	NotifyLevel  string `json:"notify_level"`
+	LastUpdateAt int64  `json:"last_update_at"`
 }

 func (o *ChannelMember) ToJson() string {
@@ -70,6 +71,10 @@ func (o *ChannelMember) IsValid() *AppError {
 	return nil
 }

+func (o *ChannelMember) PreSave() {
+	o.LastUpdateAt = GetMillis()
+}
+
 func IsChannelNotifyLevelValid(notifyLevel string) bool {
 	return notifyLevel == CHANNEL_NOTIFY_ALL || notifyLevel == CHANNEL_NOTIFY_MENTION || notifyLevel == CHANNEL_NOTIFY_NONE || notifyLevel == CHANNEL_NOTIFY_QUIET
 }
--- a/model/utils.go
+++ b/model/utils.go
@@ -17,7 +17,7 @@ import (
 )

 const (
-	ETAG_ROOT_VERSION = "10"
+	ETAG_ROOT_VERSION = "11"
 )

 type StringMap map[string]string
--- a/store/sql_channel_store.go
+++ b/store/sql_channel_store.go
@@ -37,6 +37,7 @@ func NewSqlChannelStore(sqlStore *SqlStore) ChannelStore {
 }

 func (s SqlChannelStore) UpgradeSchemaIfNeeded() {
+	s.CreateColumnIfNotExists("ChannelMembers", "LastUpdateAt", "NotifyLevel", "bigint(20)", "0") // Remove after 6/7/2015 prod push
 }

 func (s SqlChannelStore) CreateIndexesIfNotExists() {
@@ -273,6 +274,7 @@ func (s SqlChannelStore) SaveMember(member *model.ChannelMember) StoreChannel {
 	go func() {
 		result := StoreResult{}

+		member.PreSave()
 		if result.Err = member.IsValid(); result.Err != nil {
 			storeChannel <- result
 			return
@@ -484,7 +486,8 @@ func (s SqlChannelStore) UpdateLastViewedAt(channelId string, userId string) Sto
 			SET
 			    ChannelMembers.MentionCount = 0,
 			    ChannelMembers.MsgCount = Channels.TotalMsgCount,
-			    ChannelMembers.LastViewedAt = Channels.LastPostAt
+			    ChannelMembers.LastViewedAt = Channels.LastPostAt,
+			    ChannelMembers.LastUpdateAt = Channels.LastPostAt
 			WHERE
 			    Channels.Id = ChannelMembers.ChannelId
 			        AND UserId = ?
@@ -533,15 +536,18 @@ func (s SqlChannelStore) UpdateNotifyLevel(channelId, userId, notifyLevel string
 	go func() {
 		result := StoreResult{}

+		updateAt := model.GetMillis()
+
 		_, err := s.GetMaster().Exec(
 			`UPDATE
 				ChannelMembers
 			SET
-				NotifyLevel = ?
+				NotifyLevel = ?,
+				LastUpdateAt = ?
 			WHERE
 				UserId = ?
 					AND ChannelId = ?`,
-			notifyLevel, userId, channelId)
+			notifyLevel, updateAt, userId, channelId)
 		if err != nil {
 			result.Err = model.NewAppError("SqlChannelStore.UpdateNotifyLevel", "We couldn't update the notify level", "channel_id="+channelId+", user_id="+userId+", "+err.Error())
 		}
--- a/web/react/components/channel_header.jsx
+++ b/web/react/components/channel_header.jsx
@@ -15,17 +15,8 @@ var AppDispatcher = require('../dispatcher/app_dispatcher.jsx');
 var Constants = require('../utils/constants.jsx');
 var ActionTypes = Constants.ActionTypes;

-function getExtraInfoStateFromStores() {
-  return {
-    extra_info: ChannelStore.getCurrentExtraInfo()
-  };
-}
-
 var ExtraMembers = React.createClass({
    componentDidMount: function() {
-        ChannelStore.addExtraInfoChangeListener(this._onChange);
-        ChannelStore.addChangeListener(this._onChange);
-
        var originalLeave = $.fn.popover.Constructor.prototype.leave;
        $.fn.popover.Constructor.prototype.leave = function(obj) {
            var self = obj instanceof this.constructor ? obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type);
@@ -49,25 +40,12 @@ var ExtraMembers = React.createClass({
        });

    },
-    componentWillUnmount: function() {
-        ChannelStore.removeExtraInfoChangeListener(this._onChange);
-        ChannelStore.removeChangeListener(this._onChange);
-    },
-    _onChange: function() {
-        var newState = getExtraInfoStateFromStores();
-        if (!utils.areStatesEqual(newState, this.state)) {
-            this.setState(newState);
-        }
-    },
-    getInitialState: function() {
-        return getExtraInfoStateFromStores();
-    },
    render: function() {
-        var count = this.state.extra_info.members.length == 0 ? "-" : this.state.extra_info.members.length;
-        count = this.state.extra_info.members.length > 19 ? "20+" : count;
+        var count = this.props.members.length == 0 ? "-" : this.props.members.length;
+        count = this.props.members.length > 19 ? "20+" : count;
        var data_content = "";

-        this.state.extra_info.members.forEach(function(m) {
+        this.props.members.forEach(function(m) {
            data_content += "<div style='white-space: nowrap'>" + m.username + "</div>";
        });

@@ -228,7 +206,7 @@ module.exports = React.createClass({
                        <a href="#"><strong className="heading">{channelTitle}</strong></a>
                    }
                    </th>
-                    <th><ExtraMembers channelId={this.state.channel.id} /></th>
+                    <th><ExtraMembers members={this.state.users} channelId={this.state.channel.id} /></th>
                    { searchForm }
                    <th>
                        <div className="dropdown" style={{"marginLeft":"5px", "marginRight":"10px"}}>
--- a/web/react/components/channel_notifications.jsx
+++ b/web/react/components/channel_notifications.jsx
@@ -1,6 +1,8 @@
 // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
 // See License.txt for license information.

+var SettingItemMin = require('./setting_item_min.jsx');
+var SettingItemMax = require('./setting_item_max.jsx');

 var utils = require('../utils/utils.jsx');
 var client = require('../utils/client.jsx');
@@ -9,26 +11,50 @@ var ChannelStore = require('../stores/channel_store.jsx');

 module.exports = React.createClass({
    componentDidMount: function() {
+        ChannelStore.addChangeListener(this._onChange);
+
        var self = this;
        $(this.refs.modal.getDOMNode()).on('show.bs.modal', function(e) {
            var button = e.relatedTarget;
            var channel_id = button.dataset.channelid;

            var notifyLevel = ChannelStore.getMember(channel_id).notify_level;
-            self.setState({ notify_level: notifyLevel, title: button.dataset.title, channel_id: channel_id });
+            var quietMode = false;
+            if (notifyLevel === "quiet") quietMode = true;
+            self.setState({ notify_level: notifyLevel, quiet_mode: quietMode, title: button.dataset.title, channel_id: channel_id });
        });
    },
-    getInitialState: function() {
-        return { notify_level: "", title: "", channel_id: "" };
+    componentWillUnmount: function() {
+        ChannelStore.removeChangeListener(this._onChange);
    },
-    handleUpdate: function(e) {
+    _onChange: function() {
+        if (!this.state.channel_id) return;
+        var notifyLevel = ChannelStore.getMember(this.state.channel_id).notify_level;
+        var quietMode = false;
+        if (notifyLevel === "quiet") quietMode = true;
+
+        var newState = this.state;
+        newState.notify_level = notifyLevel;
+        newState.quiet_mode = quietMode;
+
+        if (!utils.areStatesEqual(this.state, newState)) {
+            this.setState(newState);
+        }
+    },
+    updateSection: function(section) {
+        this.setState({ activeSection: section });
+    },
+    getInitialState: function() {
+        return { notify_level: "", title: "", channel_id: "", activeSection: "" };
+    },
+    handleUpdate: function() {
        var channel_id = this.state.channel_id;
-        var notify_level = this.state.notify_level;
+        var notify_level = this.state.quiet_mode ? "quiet" : this.state.notify_level;

        var data = {};
        data["channel_id"] = channel_id;
        data["user_id"] = UserStore.getCurrentId();
-        data["notify_level"] = this.state.notify_level;
+        data["notify_level"] = notify_level;

        if (!data["notify_level"] || data["notify_level"].length === 0) return;

@@ -37,7 +63,7 @@ module.exports = React.createClass({
                var member = ChannelStore.getMember(channel_id);
                member.notify_level = notify_level;
                ChannelStore.setChannelMember(member);
-                $(this.refs.modal.getDOMNode()).modal('hide');
+                this.updateSection("");
            }.bind(this),
            function(err) {
                this.setState({ server_error: err.message });
@@ -45,42 +71,138 @@ module.exports = React.createClass({
        );
    },
    handleRadioClick: function(notifyLevel) {
-        this.setState({ notify_level: notifyLevel });
+        this.setState({ notify_level: notifyLevel, quiet_mode: false });
        this.refs.modal.getDOMNode().focus();
    },
-    handleQuietToggle: function() {
-        if (this.state.notify_level === "quiet") {
-            this.setState({ notify_level: "none" });
-            this.refs.modal.getDOMNode().focus();
-        } else {
-            this.setState({ notify_level: "quiet" });
-            this.refs.modal.getDOMNode().focus();
-        }
+    handleQuietToggle: function(quietMode) {
+        this.setState({ notify_level: "none", quiet_mode: quietMode });
+        this.refs.modal.getDOMNode().focus();
    },
    render: function() {
        var server_error = this.state.server_error ? <div className='form-group has-error'><label className='control-label'>{ this.state.server_error }</label></div> : null;

-        var allActive = "";
-        var mentionActive = "";
-        var noneActive = "";
-        var quietActive = "";
-        var desktopHidden = "";
+        var self = this;

-        if (this.state.notify_level === "quiet") {
-            desktopHidden = "hidden";
-            quietActive = "active";
-        } else if (this.state.notify_level === "mention") {
-            mentionActive = "active";
-        } else if (this.state.notify_level === "none") {
-            noneActive = "active";
+        var desktopSection;
+        if (this.state.activeSection === 'desktop') {
+            var notifyActive = [false, false, false];
+            if (this.state.notify_level === "mention") {
+                notifyActive[1] = true;
+            } else if (this.state.notify_level === "all") {
+                notifyActive[0] = true;
+            } else {
+                notifyActive[2] = true;
+            }
+
+            var inputs = [];
+
+            inputs.push(
+                <div className="col-sm-12">
+                    <div className="radio">
+                        <label>
+                            <input type="radio" checked={notifyActive[0]} onClick={function(){self.handleRadioClick("all")}}>For all activity</input>
+                        </label>
+                        <br/>
+                    </div>
+                    <div className="radio">
+                        <label>
+                            <input type="radio" checked={notifyActive[1]} onClick={function(){self.handleRadioClick("mention")}}>Only for mentions</input>
+                        </label>
+                        <br/>
+                    </div>
+                    <div className="radio">
+                        <label>
+                            <input type="radio" checked={notifyActive[2]} onClick={function(){self.handleRadioClick("none")}}>Never</input>
+                        </label>
+                    </div>
+                </div>
+            );
+
+            desktopSection = (
+                <SettingItemMax
+                    title="Send desktop notifications"
+                    inputs={inputs}
+                    submit={this.handleUpdate}
+                    server_error={server_error}
+                    updateSection={function(e){self.updateSection("");self._onChange();e.preventDefault();}}
+                />
+            );
        } else {
-            allActive = "active";
+            var describe = "";
+            if (this.state.notify_level === "mention") {
+                describe = "Only for mentions";
+            } else if (this.state.notify_level === "all") {
+                describe = "For all activity";
+            } else {
+                describe = "Never";
+            }
+
+            desktopSection = (
+                <SettingItemMin
+                    title="Send desktop notifications"
+                    describe={describe}
+                    updateSection={function(e){self.updateSection("desktop");e.preventDefault();}}
+                />
+            );
+        }
+
+        var quietSection;
+        if (this.state.activeSection === 'quiet') {
+            var quietActive = ["",""];
+            if (this.state.quiet_mode) {
+                quietActive[0] = "active";
+            } else {
+                quietActive[1] = "active";
+            }
+
+            var inputs = [];
+
+            inputs.push(
+                <div className="col-sm-12">
+                    <div className="btn-group" data-toggle="buttons-radio">
+                        <button className={"btn btn-default "+quietActive[0]} onClick={function(){self.handleQuietToggle(true)}}>On</button>
+                        <button className={"btn btn-default "+quietActive[1]} onClick={function(){self.handleQuietToggle(false)}}>Off</button>
+                    </div>
+                </div>
+            );
+
+            inputs.push(
+                <div className="col-sm-12">
+                    <br/>
+                    Enabling quiet mode will turn off desktop notifications and only mark the channel as unread if you have been mentioned.
+                </div>
+            );
+
+            quietSection = (
+                <SettingItemMax
+                    title="Quiet mode"
+                    inputs={inputs}
+                    submit={this.handleUpdate}
+                    server_error={server_error}
+                    updateSection={function(e){self.updateSection("");self._onChange();e.preventDefault();}}
+                />
+            );
+        } else {
+            var describe = "";
+            if (this.state.quiet_mode) {
+                describe = "On";
+            } else {
+                describe = "Off";
+            }
+
+            quietSection = (
+                <SettingItemMin
+                    title="Quiet mode"
+                    describe={describe}
+                    updateSection={function(e){self.updateSection("quiet");e.preventDefault();}}
+                />
+            );
        }

        var self = this;
        return (
            <div className="modal fade" id="channel_notifications" ref="modal" tabIndex="-1" role="dialog" aria-hidden="true">
-                <div className="modal-dialog">
+                <div className="modal-dialog settings-modal">
                    <div className="modal-content">
                        <div className="modal-header">
                            <button type="button" className="close" data-dismiss="modal">
@@ -90,31 +212,23 @@ module.exports = React.createClass({
                            <h4 className="modal-title">{"Notification Preferences for " + this.state.title}</h4>
                        </div>
                        <div className="modal-body">
-                            <div className={desktopHidden}>
-                                <span>Desktop Notifications</span>
-                                <br/>
-                                <div className="btn-group" data-toggle="buttons-radio">
-                                    <button className={"btn btn-default "+allActive} onClick={function(){self.handleRadioClick("all")}}>Any activity (default)</button>
-                                    <button className={"btn btn-default "+mentionActive} onClick={function(){self.handleRadioClick("mention")}}>Mentions of my name</button>
-                                    <button className={"btn btn-default "+noneActive} onClick={function(){self.handleRadioClick("none")}}>Nothing</button>
+                            <div className="settings-table">
+                            <div className="settings-content">
+                                <div ref="wrapper" className="user-settings">
+                                    <br/>
+                                    <div className="divider-dark first"/>
+                                    {desktopSection}
+                                    <div className="divider-light"/>
+                                    {quietSection}
+                                    <div className="divider-dark"/>
                                </div>
-                                <br/>
-                                <br/>
                            </div>
-                            <span>Quiet Mode</span>
-                            <br/>
-                            <div className="btn-group" data-toggle="buttons-checkbox">
-                                <button className={"btn btn-default "+quietActive} onClick={this.handleQuietToggle}>Quiet Mode</button>
                            </div>
                            { server_error }
                        </div>
-                        <div className="modal-footer">
-                            <button type="button" className="btn btn-primary" onClick={this.handleUpdate}>Done</button>
-                        </div>
                    </div>
                </div>
            </div>
-
        );
    }
 });
--- a/web/react/components/login.jsx
+++ b/web/react/components/login.jsx
@@ -37,7 +37,7 @@ var FindTeamDomain = React.createClass({
                    window.location.href = window.location.protocol + "//" + domain + "." + utils.getDomainWithOutSub();
                }
                else {
-                    this.state.server_error = "We couldn't find your " + strings.TeamPlural + ".";
+                    this.state.server_error = "We couldn't find your " + strings.Team + ".";
                    this.setState(this.state);
                }
            }.bind(this),
--- a/web/react/components/mention.jsx
+++ b/web/react/components/mention.jsx
@@ -8,8 +8,8 @@ module.exports = React.createClass({
    render: function() {
        return (
            <div className="mentions-name" onClick={this.handleClick}>
-                <img className="pull-left mention-img" src={"/api/v1/users/" + this.props.id + "/image"}/>
-                <span>@{this.props.username}</span><span style={{'color':'grey', 'marginLeft':'10px'}}>{this.props.name}</span>
+                <img className="mention-img" src={"/api/v1/users/" + this.props.id + "/image"}/>
+                <span>@{this.props.username}</span><span className="mention-fullname">{this.props.name}</span>
            </div>
        );
    }
--- a/web/react/components/setting_item_max.jsx
+++ b/web/react/components/setting_item_max.jsx
@@ -13,7 +13,7 @@ module.exports = React.createClass({
                <li className="col-sm-12 section-title">{this.props.title}</li>
                <li className="col-sm-9 col-sm-offset-3">
                    <ul className="setting-list">
-                        <li className="row setting-list-item form-group">
+                        <li className="setting-list-item">
                            {inputs}
                        </li>
                        <li className="setting-list-item">
--- a/web/react/components/sidebar_right_menu.jsx
+++ b/web/react/components/sidebar_right_menu.jsx
@@ -60,6 +60,7 @@ module.exports = React.createClass({
                <div className="nav-pills__container">
                    <ul className="nav nav-pills nav-stacked">
                        <li><a href="#" data-toggle="modal" data-target="#user_settings1"><i className="glyphicon glyphicon-cog"></i>Account Settings</a></li>
+                        { isAdmin ? <li><a href="#" data-toggle="modal" data-target="#team_settings"><i className="glyphicon glyphicon-globe"></i>Team Settings</a></li> : "" }
                        { invite_link }
                        { team_link }
                        { manage_link }
--- a/web/react/components/team_settings.jsx
+++ b/web/react/components/team_settings.jsx
@@ -113,7 +113,7 @@ var FeatureTab = React.createClass({
            <div>
                <div className="modal-header">
                    <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-                    <h4 className="modal-title" ref="title"><i className="modal-back"></i>General Settings</h4>
+                    <h4 className="modal-title" ref="title"><i className="modal-back"></i>Feature Settings</h4>
                </div>
                <div ref="wrapper" className="user-settings">
                    <h3 className="tab-header">Feature Settings</h3>
--- a/web/react/components/team_settings_modal.jsx
+++ b/web/react/components/team_settings_modal.jsx
@@ -45,7 +45,7 @@ module.exports = React.createClass({
                                updateTab={this.updateTab}
                            />
                        </div>
-                        <div className="settings-content">
+                        <div className="settings-content minimize-settings">
                            <TeamSettings
                                activeTab={this.state.active_tab}
                                activeSection={this.state.active_section}
--- a/web/react/components/user_profile.jsx
+++ b/web/react/components/user_profile.jsx
@@ -10,8 +10,7 @@ function getStateFromStores(userId) {

    if (profile == null) {
        return { profile: { id: "0", username: "..."} };
-    }
-    else {
+    } else {
        return { profile: profile };
    }
 }
@@ -54,12 +53,11 @@ module.exports = React.createClass({
        var name = this.props.overwriteName ? this.props.overwriteName : this.state.profile.username;


-        var data_content = ""
-        data_content += "<img style='margin: 10px' src='/api/v1/users/" + this.state.profile.id + "/image' height='128' width='128' />"
+        var data_content = "<img style='margin: 10px' src='/api/v1/users/" + this.state.profile.id + "/image' height='128' width='128' />";
        if (!config.ShowEmail) {
-            data_content += "<div><span style='white-space:nowrap;'>Email not shared</span></div>";
+            data_content += "<div class='text-nowrap'>Email not shared</div>";
        } else {
-            data_content += "<div><a href='mailto:'" + this.state.profile.email + "'' style='white-space:nowrap;text-transform:lowercase;'>" + this.state.profile.email + "</a></div>";
+            data_content += "<div><a href='mailto:" + this.state.profile.email + "' class='text-nowrap text-lowercase'>" + this.state.profile.email + "</a></div>";
        }

        return (
--- a/web/react/components/user_settings.jsx
+++ b/web/react/components/user_settings.jsx
@@ -155,7 +155,7 @@ var NotificationsTab = React.createClass({
            var inputs = [];

            inputs.push(
-                <div className="col-sm-12">
+                <div>
                    <div className="radio">
                        <label>
                            <input type="radio" checked={notifyActive[0]} onClick={function(){self.handleNotifyRadio("all")}}>For all activity</input>
@@ -216,7 +216,7 @@ var NotificationsTab = React.createClass({
            var inputs = [];

            inputs.push(
-                <div className="col-sm-12">
+                <div>
                    <div className="btn-group" data-toggle="buttons-radio">
                        <button className={"btn btn-default "+soundActive[0]} onClick={function(){self.handleSoundRadio("true")}}>On</button>
                        <button className={"btn btn-default "+soundActive[1]} onClick={function(){self.handleSoundRadio("false")}}>Off</button>
@@ -262,7 +262,7 @@ var NotificationsTab = React.createClass({
            var inputs = [];

            inputs.push(
-                <div className="col-sm-12">
+                <div>
                    <div className="btn-group" data-toggle="buttons-radio">
                        <button className={"btn btn-default "+emailActive[0]} onClick={function(){self.handleEmailRadio("true")}}>On</button>
                        <button className={"btn btn-default "+emailActive[1]} onClick={function(){self.handleEmailRadio("false")}}>Off</button>
@@ -309,7 +309,7 @@ var NotificationsTab = React.createClass({

            if (first_name != "") {
                inputs.push(
-                    <div className="col-sm-12">
+                    <div>
                        <div className="checkbox">
                            <label>
                                <input type="checkbox" checked={this.state.first_name_key} onChange={function(e){self.updateFirstNameKey(e.target.checked);}}>{'Your case sensitive first name "' + first_name + '"'}</input>
@@ -320,7 +320,7 @@ var NotificationsTab = React.createClass({
            }

            inputs.push(
-                <div className="col-sm-12">
+                <div>
                    <div className="checkbox">
                        <label>
                            <input type="checkbox" checked={this.state.username_key} onChange={function(e){self.updateUsernameKey(e.target.checked);}}>{'Your non-case sensitive username "' + user.username + '"'}</input>
@@ -330,7 +330,7 @@ var NotificationsTab = React.createClass({
            );

            inputs.push(
-                <div className="col-sm-12">
+                <div>
                    <div className="checkbox">
                        <label>
                            <input type="checkbox" checked={this.state.mention_key} onChange={function(e){self.updateMentionKey(e.target.checked);}}>{'Your username mentioned "@' + user.username + '"'}</input>
@@ -340,7 +340,7 @@ var NotificationsTab = React.createClass({
            );

            inputs.push(
-                <div className="col-sm-12">
+                <div>
                    <div className="checkbox">
                        <label>
                            <input ref="customcheck" type="checkbox" checked={this.state.custom_keys_checked} onChange={this.updateCustomMentionKeys}>{'Other non-case sensitive words, separated by commas:'}</input>
@@ -622,7 +622,7 @@ var SecurityTab = React.createClass({
            var inputs = [];

            inputs.push(
-                <div>
+                <div className="form-group">
                    <label className="col-sm-5 control-label">Current Password</label>
                    <div className="col-sm-7">
                        <input className="form-control" type="password" onChange={this.updateCurrentPassword} value={this.state.current_password}/>
@@ -630,7 +630,7 @@ var SecurityTab = React.createClass({
                </div>
            );
            inputs.push(
-                <div>
+                <div className="form-group">
                    <label className="col-sm-5 control-label">New Password</label>
                    <div className="col-sm-7">
                        <input className="form-control" type="password" onChange={this.updateNewPassword} value={this.state.new_password}/>
@@ -638,7 +638,7 @@ var SecurityTab = React.createClass({
                </div>
            );
            inputs.push(
-                <div>
+                <div className="form-group">
                    <label className="col-sm-5 control-label">Retype New Password</label>
                    <div className="col-sm-7">
                        <input className="form-control" type="password" onChange={this.updateConfirmPassword} value={this.state.confirm_password}/>
@@ -837,7 +837,7 @@ var GeneralTab = React.createClass({
            var inputs = [];

            inputs.push(
-                <div>
+                <div className="form-group">
                    <label className="col-sm-5 control-label">First Name</label>
                    <div className="col-sm-7">
                        <input className="form-control" type="text" onChange={this.updateFirstName} value={this.state.first_name}/>
@@ -846,7 +846,7 @@ var GeneralTab = React.createClass({
            );

            inputs.push(
-                <div>
+                <div className="form-group">
                    <label className="col-sm-5 control-label">Last Name</label>
                    <div className="col-sm-7">
                        <input className="form-control" type="text" onChange={this.updateLastName} value={this.state.last_name}/>
@@ -879,7 +879,7 @@ var GeneralTab = React.createClass({
            var inputs = [];

            inputs.push(
-                <div>
+                <div className="form-group">
                    <label className="col-sm-5 control-label">{utils.isMobile() ? "": "Username"}</label>
                    <div className="col-sm-7">
                        <input className="form-control" type="text" onChange={this.updateUsername} value={this.state.username}/>
@@ -911,7 +911,7 @@ var GeneralTab = React.createClass({
            var inputs = [];

            inputs.push(
-                <div>
+                <div className="form-group">
                    <label className="col-sm-5 control-label">Primary Email</label>
                    <div className="col-sm-7">
                        <input className="form-control" type="text" onChange={this.updateEmail} value={this.state.email}/>
@@ -1048,7 +1048,7 @@ var AppearanceTab = React.createClass({
                var inputs = [];

                inputs.push(
-                    <li className="row setting-list-item form-group">
+                    <li className="setting-list-item">
                        <div className="btn-group" data-toggle="buttons-radio">
                            { theme_buttons }
                        </div>
--- a/web/react/components/user_settings_modal.jsx
+++ b/web/react/components/user_settings_modal.jsx
@@ -50,7 +50,7 @@ module.exports = React.createClass({
                                updateTab={this.updateTab}
                            />
                        </div>
-                        <div className="settings-content">
+                        <div className="settings-content minimize-settings">
                            <UserSettings
                                activeTab={this.state.active_tab}
                                activeSection={this.state.active_section}
--- a/web/sass-files/sass/partials/_mentions.scss
+++ b/web/sass-files/sass/partials/_mentions.scss
@@ -3,21 +3,19 @@
 	background: $primary-color;
 	position: relative;
 	z-index: 10;
-	padding-bottom: 1px;
+	padding-bottom: 2px;
 	@include border-radius(3px);
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
 }

 .mentions--top {
 	position: absolute;
-    z-index:99999;
+    z-index: 1040;
 	.mentions-box {
 		position:absolute;
 		background-color:#fff;
-		border:1px solid #ddd;
-        overflow:scroll;
+		border: $border-gray;
+        overflow-x: hidden;
+        overflow-y: scroll;
        bottom:0;
 	}
 }
@@ -29,10 +27,10 @@
 	height:37px;
 	padding:2px;
 	z-index:101;
-}
-
-.mentions-name:hover {
-	background-color:#e8eaed;
+    cursor: pointer;
+    &:hover {
+        background-color:#e8eaed;
+    }
 }

 .mentions-text {
@@ -46,6 +44,11 @@
 	border-radius: 10%;
 }

+.mention-fullname {
+    color: grey;
+    padding-left: 10px;
+}
+
 .mention-highlight {
 	background-color:#fff2bb;
 }
--- a/web/sass-files/sass/partials/_responsive.scss
+++ b/web/sass-files/sass/partials/_responsive.scss
@@ -258,9 +258,11 @@
            .settings-table {
                display: block;
                .settings-content {
-                    display: block;
-                    .section-edit {
-                        text-align: left;
+                    &.minimize-settings {
+                        display: block;
+                        .section-edit {
+                            text-align: left;
+                        }
                    }
                }
                .settings-links {
@@ -284,10 +286,12 @@
        }
        .settings-table {
            .settings-content {
-                padding: 0;
-                display: none;
-                .user-settings {
-                    padding: 70px 20px 30px;
+                &.minimize-settings {
+                    padding: 0;
+                    display: none;
+                    .user-settings {
+                        padding: 70px 20px 30px;
+                    }
                }
            }
            .settings-links {