diff options
Diffstat (limited to 'web')
-rw-r--r-- | web/react/components/navbar.jsx | 272 | ||||
-rw-r--r-- | web/react/components/notify_counts.jsx | 49 |
2 files changed, 169 insertions, 152 deletions
diff --git a/web/react/components/navbar.jsx b/web/react/components/navbar.jsx index 6d23c0d9b..3e0a66e92 100644 --- a/web/react/components/navbar.jsx +++ b/web/react/components/navbar.jsx @@ -1,111 +1,62 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. - -var utils = require('../utils/utils.jsx'); var client = require('../utils/client.jsx'); var AsyncClient = require('../utils/async_client.jsx'); var UserStore = require('../stores/user_store.jsx'); var ChannelStore = require('../stores/channel_store.jsx'); var TeamStore = require('../stores/team_store.jsx'); - -var UserProfile = require('./user_profile.jsx'); var MessageWrapper = require('./message_wrapper.jsx'); +var NotifyCounts = require('./notify_counts.jsx'); var Constants = require('../utils/constants.jsx'); var ActionTypes = Constants.ActionTypes; var AppDispatcher = require('../dispatcher/app_dispatcher.jsx'); -function getCountsStateFromStores() { - var count = 0; - var channels = ChannelStore.getAll(); - var members = ChannelStore.getAllMembers(); - - channels.forEach(function(channel) { - var channelMember = members[channel.id]; - if (channel.type === 'D') { - count += channel.total_msg_count - channelMember.msg_count; - } else { - if (channelMember.mention_count > 0) { - count += channelMember.mention_count; - } else if (channelMember.notify_level !== "quiet" && channel.total_msg_count - channelMember.msg_count > 0) { - count += 1; - } - } - }); - - return { count: count }; -} - -var NotifyCounts = React.createClass({ - componentDidMount: function() { - ChannelStore.addChangeListener(this._onChange); - }, - componentWillUnmount: function() { - ChannelStore.removeChangeListener(this._onChange); - }, - _onChange: function() { - var newState = getCountsStateFromStores(); - if (!utils.areStatesEqual(newState, this.state)) { - this.setState(newState); - } - }, - getInitialState: function() { - return getCountsStateFromStores(); - }, - render: function() { - if (this.state.count) { - return <span className="badge badge-notify">{ this.state.count }</span>; - } else { - return null; - } - } -}); - function getStateFromStores() { - return { - channel: ChannelStore.getCurrent(), - member: ChannelStore.getCurrentMember(), - users: ChannelStore.getCurrentExtraInfo().members - }; + return { + channel: ChannelStore.getCurrent(), + member: ChannelStore.getCurrentMember(), + users: ChannelStore.getCurrentExtraInfo().members + }; } module.exports = React.createClass({ displayName: 'Navbar', - + propTypes: { + teamDisplayName: React.PropTypes.string + }, componentDidMount: function() { - ChannelStore.addChangeListener(this._onChange); - ChannelStore.addExtraInfoChangeListener(this._onChange); + ChannelStore.addChangeListener(this.onListenerChange); + ChannelStore.addExtraInfoChangeListener(this.onListenerChange); $('.inner__wrap').click(this.hideSidebars); - $('body').on('click.infopopover', function(e) { - if ($(e.target).attr('data-toggle') !== 'popover' - && $(e.target).parents('.popover.in').length === 0) { + $('body').on('click.infopopover', function handlePopoverClick(e) { + if ($(e.target).attr('data-toggle') !== 'popover' && $(e.target).parents('.popover.in').length === 0) { $('.info-popover').popover('hide'); } }); - }, componentWillUnmount: function() { - ChannelStore.removeChangeListener(this._onChange); + ChannelStore.removeChangeListener(this.onListenerChange); }, handleSubmit: function(e) { e.preventDefault(); }, - handleLeave: function(e) { + handleLeave: function() { client.leaveChannel(this.state.channel.id, - function(data, text, req) { + function success() { AsyncClient.getChannels(true); window.location.href = TeamStore.getCurrentTeamUrl() + '/channels/town-square'; - }.bind(this), - function(err) { - AsyncClient.dispatchError(err, "handleLeave"); + }, + function error(err) { + AsyncClient.dispatchError(err, 'handleLeave'); } ); }, hideSidebars: function(e) { var windowWidth = $(window).outerWidth(); - if(windowWidth <= 768) { + if (windowWidth <= 768) { AppDispatcher.handleServerAction({ type: ActionTypes.RECIEVED_SEARCH, results: null @@ -116,7 +67,7 @@ module.exports = React.createClass({ results: null }); - if (e.target.className != 'navbar-toggle' && e.target.className != 'icon-bar') { + if (e.target.className !== 'navbar-toggle' && e.target.className !== 'icon-bar') { $('.inner__wrap').removeClass('move--right move--left move--left-small'); $('.sidebar--left').removeClass('move--right'); $('.sidebar--right').removeClass('move--left'); @@ -132,27 +83,24 @@ module.exports = React.createClass({ $('.inner__wrap').toggleClass('move--left-small'); $('.sidebar--menu').toggleClass('move--left'); }, - _onChange: function() { + onListenerChange: function() { this.setState(getStateFromStores()); - $("#navbar .navbar-brand .description").popover({placement : 'bottom', trigger: 'click', html: true}); + $('#navbar .navbar-brand .description').popover({placement: 'bottom', trigger: 'click', html: true}); }, getInitialState: function() { return getStateFromStores(); }, render: function() { - var currentId = UserStore.getCurrentId(); - var popoverContent = ""; + var popoverContent = ''; var channelTitle = this.props.teamDisplayName; var isAdmin = false; var isDirect = false; - var description = "" var channel = this.state.channel; if (channel) { - description = utils.textToJsx(channel.description, {"singleline": true, "noMentionHighlight": true}); - popoverContent = React.renderToString(<MessageWrapper message={channel.description}/>); - isAdmin = this.state.member.roles.indexOf("admin") > -1; + popoverContent = React.renderToString(<MessageWrapper message={channel.description} options={{singleline: true, noMentionHighlight: true}}/>); + isAdmin = this.state.member.roles.indexOf('admin') > -1; if (channel.type === 'O') { channelTitle = channel.display_name; @@ -162,92 +110,112 @@ module.exports = React.createClass({ isDirect = true; if (this.state.users.length > 1) { if (this.state.users[0].id === currentId) { - channelTitle = <UserProfile userId={this.state.users[1].id} />; + channelTitle = UserStore.getProfile(this.state.users[1].id).username; } else { - channelTitle = <UserProfile userId={this.state.users[0].id} />; + channelTitle = UserStore.getProfile(this.state.users[0].id).username; } } } - if (channel.description.length == 0) { + if (channel.description.length === 0) { popoverContent = React.renderToString(<div>No channel description yet. <br /><a href='#' data-toggle='modal' data-desc={channel.description} data-title={channel.display_name} data-channelid={channel.id} data-target='#edit_channel'>Click here</a> to add one.</div>); } } - var navbar_collapse_button = currentId != null ? null : - <button type="button" className="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"> - <span className="sr-only">Toggle sidebar</span> - <span className="icon-bar"></span> - <span className="icon-bar"></span> - <span className="icon-bar"></span> - </button>; - var sidebar_collapse_button = currentId == null ? null : - <button type="button" className="navbar-toggle" data-toggle="collapse" data-target="#sidebar-nav" onClick={this.toggleLeftSidebar}> - <span className="sr-only">Toggle sidebar</span> - <span className="icon-bar"></span> - <span className="icon-bar"></span> - <span className="icon-bar"></span> - <NotifyCounts /> - </button>; - var right_sidebar_collapse_button= currentId == null ? null : - <button type="button" className="navbar-toggle menu-toggle pull-right" data-toggle="collapse" data-target="#sidebar-nav" onClick={this.toggleRightSidebar}> - <span dangerouslySetInnerHTML={{__html: Constants.MENU_ICON }} /> - </button>; + var navbarCollapseButton = null; + if (currentId == null) { + navbarCollapseButton = (<button type='button' className='navbar-toggle' data-toggle='collapse' data-target='#navbar-collapse-1'> + <span className='sr-only'>Toggle sidebar</span> + <span className='icon-bar'></span> + <span className='icon-bar'></span> + <span className='icon-bar'></span> + </button>); + } + + var sidebarCollapseButton = null; + if (currentId != null) { + sidebarCollapseButton = (<button type='button' className='navbar-toggle' data-toggle='collapse' data-target='#sidebar-nav' onClick={this.toggleLeftSidebar}> + <span className='sr-only'>Toggle sidebar</span> + <span className='icon-bar'></span> + <span className='icon-bar'></span> + <span className='icon-bar'></span> + <NotifyCounts /> + </button>); + } + + var rightSidebarCollapseButton = null; + if (currentId != null) { + rightSidebarCollapseButton = (<button type='button' className='navbar-toggle menu-toggle pull-right' data-toggle='collapse' data-target='#sidebar-nav' onClick={this.toggleRightSidebar}> + <span dangerouslySetInnerHTML={{__html: Constants.MENU_ICON}} /> + </button>); + } + + var channelMenuDropdown = null; + if (channel) { + var addMembersOption = null; + if (!isDirect && !ChannelStore.isDefault(channel)) { + addMembersOption = <li role='presentation'><a role='menuitem' data-toggle='modal' data-target='#channel_invite' href='#'>Add Members</a></li>; + } + + var manageMembersOption = null; + if (!isDirect && isAdmin && !ChannelStore.isDefault(channel)) { + manageMembersOption = <li role='presentation'><a role='menuitem' data-toggle='modal' data-target='#channel_members' href='#'>Manage Members</a></li>; + } + + var setChannelDescriptionOption = <li role='presentation'><a role='menuitem' href='#' data-toggle='modal' data-target='#edit_channel' data-desc={channel.description} data-title={channel.display_name} data-channelid={channel.id}>Set Channel Description...</a></li>; + + var notificationPreferenceOption = null; + if (!isDirect) { + notificationPreferenceOption = <li role='presentation'><a role='menuitem' href='#' data-toggle='modal' data-target='#channel_notifications' data-title={channel.display_name} data-channelid={channel.id}>Notification Preferences</a></li>; + } + + var renameChannelOption = null; + if (!isDirect && isAdmin && !ChannelStore.isDefault(channel)) { + renameChannelOption = <li role='presentation'><a role='menuitem' href='#' data-toggle='modal' data-target='#rename_channel' data-display={channel.display_name} data-name={channel.name} data-channelid={channel.id}>Rename Channel...</a></li>; + } + var deleteChannelOption = null; + if (!isDirect && isAdmin && !ChannelStore.isDefault(channel)) { + deleteChannelOption = <li role='presentation'><a role='menuitem' href='#' data-toggle='modal' data-target='#delete_channel' data-title={channel.display_name} data-channelid={channel.id}>Delete Channel...</a></li>; + } + + var leaveChannelOption = null; + if (!isDirect && !ChannelStore.isDefault(channel)) { + leaveChannelOption = <li role='presentation'><a role='menuitem' href='#' onClick={this.handleLeave}>Leave Channel</a></li>; + } + + channelMenuDropdown = (<div className='navbar-brand'> + <div className='dropdown'> + <div data-toggle='popover' data-content={popoverContent} className='description info-popover'></div> + <a href='#' className='dropdown-toggle theme' type='button' id='channel_header_dropdown' data-toggle='dropdown' aria-expanded='true'> + <span className='heading'>{channelTitle} </span> + <span className='glyphicon glyphicon-chevron-down header-dropdown__icon'></span> + </a> + <ul className='dropdown-menu' role='menu' aria-labelledby='channel_header_dropdown'> + {addMembersOption} + {manageMembersOption} + {setChannelDescriptionOption} + {notificationPreferenceOption} + {renameChannelOption} + {deleteChannelOption} + {leaveChannelOption} + </ul> + </div> + </div>); + } else { + channelMenuDropdown = (<div className='navbar-brand'> + <a href='/' className='heading'>{channelTitle}</a> + </div>); + } return ( - <nav className="navbar navbar-default navbar-fixed-top" role="navigation"> - <div className="container-fluid theme"> - <div className="navbar-header"> - { navbar_collapse_button } - { sidebar_collapse_button } - { right_sidebar_collapse_button } - { !isDirect && channel ? - <div className="navbar-brand"> - <div className="dropdown"> - <div data-toggle="popover" data-content={popoverContent} className="description info-popover"></div> - <a href="#" className="dropdown-toggle theme" type="button" id="channel_header_dropdown" data-toggle="dropdown" aria-expanded="true"> - <span className="heading">{channelTitle} </span> - <span className="glyphicon glyphicon-chevron-down header-dropdown__icon"></span> - </a> - <ul className="dropdown-menu" role="menu" aria-labelledby="channel_header_dropdown"> - { !ChannelStore.isDefault(channel) ? - <li role="presentation"><a role="menuitem" data-toggle="modal" data-target="#channel_invite" href="#">Add Members</a></li> - : null - } - { isAdmin && !ChannelStore.isDefault(channel) ? - <li role="presentation"><a role="menuitem" data-toggle="modal" data-target="#channel_members" href="#">Manage Members</a></li> - : null - } - <li role="presentation"><a role="menuitem" href="#" data-toggle="modal" data-target="#edit_channel" data-desc={channel.description} data-title={channel.display_name} data-channelid={channel.id}>Set Channel Description...</a></li> - <li role="presentation"><a role="menuitem" href="#" data-toggle="modal" data-target="#channel_notifications" data-title={channel.display_name} data-channelid={channel.id}>Notification Preferences</a></li> - { isAdmin && !ChannelStore.isDefault(channel) ? - <li role="presentation"><a role="menuitem" href="#" data-toggle="modal" data-target="#rename_channel" data-display={channel.display_name} data-name={channel.name} data-channelid={channel.id}>Rename Channel...</a></li> - : null - } - { isAdmin && !ChannelStore.isDefault(channel) ? - <li role="presentation"><a role="menuitem" href="#" data-toggle="modal" data-target="#delete_channel" data-title={channel.display_name} data-channelid={channel.id}>Delete Channel...</a></li> - : null - } - { !ChannelStore.isDefault(channel) ? - <li role="presentation"><a role="menuitem" href="#" onClick={this.handleLeave}>Leave Channel</a></li> - : null - } - </ul> - </div> - </div> - : null - } - { isDirect && channel ? - <div className="navbar-brand"> - <a href="#" className="heading">{ channelTitle }</a> - </div> - : null } - { !channel ? - <div className="navbar-brand"> - <a href="/" className="heading">{ channelTitle }</a> - </div> - : "" } + <nav className='navbar navbar-default navbar-fixed-top' role='navigation'> + <div className='container-fluid theme'> + <div className='navbar-header'> + {navbarCollapseButton} + {sidebarCollapseButton} + {rightSidebarCollapseButton} + {channelMenuDropdown} </div> </div> </nav> diff --git a/web/react/components/notify_counts.jsx b/web/react/components/notify_counts.jsx new file mode 100644 index 000000000..ebc49882b --- /dev/null +++ b/web/react/components/notify_counts.jsx @@ -0,0 +1,49 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +var utils = require('../utils/utils.jsx'); +var ChannelStore = require('../stores/channel_store.jsx'); + +function getCountsStateFromStores() { + var count = 0; + var channels = ChannelStore.getAll(); + var members = ChannelStore.getAllMembers(); + + channels.forEach(function setChannelInfo(channel) { + var channelMember = members[channel.id]; + if (channel.type === 'D') { + count += channel.total_msg_count - channelMember.msg_count; + } else if (channelMember.mention_count > 0) { + count += channelMember.mention_count; + } else if (channelMember.notify_level !== 'quiet' && channel.total_msg_count - channelMember.msg_count > 0) { + count += 1; + } + }); + + return {count: count}; +} + +module.exports = React.createClass({ + displayName: 'NotifyCounts', + componentDidMount: function() { + ChannelStore.addChangeListener(this.onListenerChange); + }, + componentWillUnmount: function() { + ChannelStore.removeChangeListener(this.onListenerChange); + }, + onListenerChange: function() { + var newState = getCountsStateFromStores(); + if (!utils.areStatesEqual(newState, this.state)) { + this.setState(newState); + } + }, + getInitialState: function() { + return getCountsStateFromStores(); + }, + render: function() { + if (this.state.count) { + return <span className='badge badge-notify'>{this.state.count}</span>; + } + return null; + } +}); |