summaryrefslogtreecommitdiffstats
path: root/web/react
diff options
context:
space:
mode:
Diffstat (limited to 'web/react')
-rw-r--r--web/react/components/channel_header.jsx30
-rw-r--r--web/react/components/channel_notifications.jsx208
-rw-r--r--web/react/components/sidebar_right_menu.jsx1
-rw-r--r--web/react/components/team_settings.jsx2
-rw-r--r--web/react/components/team_settings_modal.jsx2
-rw-r--r--web/react/components/user_settings_modal.jsx2
6 files changed, 169 insertions, 76 deletions
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/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">&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>
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_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}
generated by cgit v1.2.3-1-g7c22 (git 2.25.1) at 2024-10-30 05:08:59 +0000