diff options
-rw-r--r-- | api/channel_test.go | 12 | ||||
-rw-r--r-- | model/channel_list.go | 6 | ||||
-rw-r--r-- | model/channel_member.go | 5 | ||||
-rw-r--r-- | model/utils.go | 2 | ||||
-rw-r--r-- | store/sql_channel_store.go | 12 | ||||
-rw-r--r-- | web/react/components/channel_header.jsx | 30 | ||||
-rw-r--r-- | web/react/components/channel_notifications.jsx | 208 | ||||
-rw-r--r-- | web/react/components/login.jsx | 2 | ||||
-rw-r--r-- | web/react/components/mention.jsx | 4 | ||||
-rw-r--r-- | web/react/components/setting_item_max.jsx | 2 | ||||
-rw-r--r-- | web/react/components/sidebar_right_menu.jsx | 1 | ||||
-rw-r--r-- | web/react/components/team_settings.jsx | 2 | ||||
-rw-r--r-- | web/react/components/team_settings_modal.jsx | 2 | ||||
-rw-r--r-- | web/react/components/user_profile.jsx | 10 | ||||
-rw-r--r-- | web/react/components/user_settings.jsx | 30 | ||||
-rw-r--r-- | web/react/components/user_settings_modal.jsx | 2 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_mentions.scss | 25 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_responsive.scss | 18 |
18 files changed, 247 insertions, 126 deletions
diff --git a/api/channel_test.go b/api/channel_test.go index e8aaf4e3f..2e2e3683a 100644 --- 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ū", diff --git a/model/channel_list.go b/model/channel_list.go index 088dbea2a..09f14a986 100644 --- 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 + } + } } diff --git a/model/channel_member.go b/model/channel_member.go index 720ac4c42..50f51304b 100644 --- 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 } diff --git a/model/utils.go b/model/utils.go index 262bda319..cc51dfe47 100644 --- 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 diff --git a/store/sql_channel_store.go b/store/sql_channel_store.go index 592657c1c..463fce16f 100644 --- 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()) } diff --git a/web/react/components/channel_header.jsx b/web/react/components/channel_header.jsx index ade58a10a..428d3ed81 100644 --- 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"}}> diff --git a/web/react/components/channel_notifications.jsx b/web/react/components/channel_notifications.jsx index 085536a0a..fa9ab42ae 100644 --- 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 }); }); }, + componentWillUnmount: function() { + ChannelStore.removeChangeListener(this._onChange); + }, + _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: "" }; + return { notify_level: "", title: "", channel_id: "", activeSection: "" }; }, - handleUpdate: function(e) { + 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 = ""; - - 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 self = this; + + 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 { + 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 { - allActive = "active"; + 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> - ); } }); diff --git a/web/react/components/login.jsx b/web/react/components/login.jsx index 85df5f797..3b6f96c2d 100644 --- 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), diff --git a/web/react/components/mention.jsx b/web/react/components/mention.jsx index ba758688b..86a423138 100644 --- 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> ); } diff --git a/web/react/components/setting_item_max.jsx b/web/react/components/setting_item_max.jsx index 03f05b0cf..b8b667e1a 100644 --- 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"> diff --git a/web/react/components/sidebar_right_menu.jsx b/web/react/components/sidebar_right_menu.jsx index c523ce554..22d1d9ad2 100644 --- 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 } diff --git a/web/react/components/team_settings.jsx b/web/react/components/team_settings.jsx index 0cec30f3e..a43e5d2f0 100644 --- 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">×</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> diff --git a/web/react/components/team_settings_modal.jsx b/web/react/components/team_settings_modal.jsx index 08a952d2e..e50378b7f 100644 --- 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} diff --git a/web/react/components/user_profile.jsx b/web/react/components/user_profile.jsx index 8ffad737d..648960471 100644 --- 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 ( diff --git a/web/react/components/user_settings.jsx b/web/react/components/user_settings.jsx index 7d542a8b7..147973fb7 100644 --- 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> diff --git a/web/react/components/user_settings_modal.jsx b/web/react/components/user_settings_modal.jsx index ff001611d..1761e575a 100644 --- 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} diff --git a/web/sass-files/sass/partials/_mentions.scss b/web/sass-files/sass/partials/_mentions.scss index 11cd4e9e4..cb6ff16c5 100644 --- 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; } diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss index 509c764b3..25533c770 100644 --- 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 { |