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

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ū",

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
+			}
+
 		}
 	}
 

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
 }

model/utils.go

@@ -17,7 +17,7 @@ import (
 )
 
 const (
-	ETAG_ROOT_VERSION = "10"
+	ETAG_ROOT_VERSION = "11"
 )
 
 type StringMap map[string]string

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())
 		}

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;
+        var count = this.props.members.length == 0 ? "-" : this.props.members.length;
-        count = this.state.extra_info.members.length > 19 ? "20+" : count;
+        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"}}>

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() {
+    componentWillUnmount: function() {
-        return { notify_level: "", title: "", channel_id: "" };
+        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() {
+    handleQuietToggle: function(quietMode) {
-        if (this.state.notify_level === "quiet") {
+        this.setState({ notify_level: "none", quiet_mode: quietMode });
-            this.setState({ notify_level: "none" });
+        this.refs.modal.getDOMNode().focus();
-            this.refs.modal.getDOMNode().focus();
-        } else {
-            this.setState({ notify_level: "quiet" });
-            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 self = this;
-        var mentionActive = "";
-        var noneActive = "";
-        var quietActive = "";
-        var desktopHidden = "";
 
-        if (this.state.notify_level === "quiet") {
+        var desktopSection;
-            desktopHidden = "hidden";
+        if (this.state.activeSection === 'desktop') {
-            quietActive = "active";
+            var notifyActive = [false, false, false];
-        } else if (this.state.notify_level === "mention") {
+            if (this.state.notify_level === "mention") {
-            mentionActive = "active";
+                notifyActive[1] = true;
-        } else if (this.state.notify_level === "none") {
+            } else if (this.state.notify_level === "all") {
-            noneActive = "active";
+                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}>
+                            <div className="settings-table">
-                                <span>Desktop Notifications</span>
+                            <div className="settings-content">
-                                <br/>
+                                <div ref="wrapper" className="user-settings">
-                                <div className="btn-group" data-toggle="buttons-radio">
+                                    <br/>
-                                    <button className={"btn btn-default "+allActive} onClick={function(){self.handleRadioClick("all")}}>Any activity (default)</button>
+                                    <div className="divider-dark first"/>
-                                    <button className={"btn btn-default "+mentionActive} onClick={function(){self.handleRadioClick("mention")}}>Mentions of my name</button>
+                                    {desktopSection}
-                                    <button className={"btn btn-default "+noneActive} onClick={function(){self.handleRadioClick("none")}}>Nothing</button>
+                                    <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>
-
         );
     }
 });

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),

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"}/>
+                <img className="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>
+                <span>@{this.props.username}</span><span className="mention-fullname">{this.props.name}</span>
             </div>
         );
     }

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">

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 }

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>

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}

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 = ""
+        var data_content = "<img style='margin: 10px' src='/api/v1/users/" + this.state.profile.id + "/image' height='128' width='128' />";
-        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 (

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>

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}

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;
+		border: $border-gray;
-        overflow:scroll;
+        overflow-x: hidden;
+        overflow-y: scroll;
         bottom:0;
 	}
 }
@@ -29,10 +27,10 @@
 	height:37px;
 	padding:2px;
 	z-index:101;
-}
+    cursor: pointer;
-
+    &:hover {
-.mentions-name:hover {
+        background-color:#e8eaed;
-	background-color:#e8eaed;
+    }
 }
 
 .mentions-text {
@@ -46,6 +44,11 @@
 	border-radius: 10%;
 }
 
+.mention-fullname {
+    color: grey;
+    padding-left: 10px;
+}
+
 .mention-highlight {
 	background-color:#fff2bb;
 }

web/sass-files/sass/partials/_responsive.scss

@@ -258,9 +258,11 @@
             .settings-table {
                 display: block;
                 .settings-content {
-                    display: block;
+                    &.minimize-settings {
-                    .section-edit {
+                        display: block;
-                        text-align: left;
+                        .section-edit {
+                            text-align: left;
+                        }
                     }
                 }
                 .settings-links {
@@ -284,10 +286,12 @@
         }
         .settings-table {
             .settings-content {
-                padding: 0;
+                &.minimize-settings {
-                display: none;
+                    padding: 0;
-                .user-settings {
+                    display: none;
-                    padding: 70px 20px 30px;
+                    .user-settings {
+                        padding: 70px 20px 30px;
+                    }
                 }
             }
             .settings-links {