diff options
Diffstat (limited to 'web')
-rw-r--r-- | web/react/components/admin_console/admin_controller.jsx | 12 | ||||
-rw-r--r-- | web/react/components/admin_console/admin_sidebar.jsx | 1 | ||||
-rw-r--r-- | web/react/components/more_channels.jsx | 6 | ||||
-rw-r--r-- | web/react/components/more_direct_channels.jsx | 84 | ||||
-rw-r--r-- | web/react/components/sidebar.jsx | 4 | ||||
-rw-r--r-- | web/react/pages/admin_console.jsx | 7 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_modal.scss | 76 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_responsive.scss | 7 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_settings.scss | 7 | ||||
-rw-r--r-- | web/templates/admin_console.html | 2 | ||||
-rw-r--r-- | web/web.go | 10 |
11 files changed, 127 insertions, 89 deletions
diff --git a/web/react/components/admin_console/admin_controller.jsx b/web/react/components/admin_console/admin_controller.jsx index f2fb8ac78..f770d166c 100644 --- a/web/react/components/admin_console/admin_controller.jsx +++ b/web/react/components/admin_console/admin_controller.jsx @@ -40,9 +40,13 @@ export default class AdminController extends React.Component { config: AdminStore.getConfig(), teams: AdminStore.getAllTeams(), selectedTeams, - selected: 'service_settings', - selectedTeam: null + selected: props.tab || 'service_settings', + selectedTeam: props.teamId || null }; + + if (!props.tab) { + history.replaceState(null, null, `/admin_console/${this.state.selected}`); + } } componentDidMount() { @@ -142,7 +146,9 @@ export default class AdminController extends React.Component { } else if (this.state.selected === 'service_settings') { tab = <ServiceSettingsTab config={this.state.config} />; } else if (this.state.selected === 'team_users') { - tab = <TeamUsersTab team={this.state.teams[this.state.selectedTeam]} />; + if (this.state.teams) { + tab = <TeamUsersTab team={this.state.teams[this.state.selectedTeam]} />; + } } } diff --git a/web/react/components/admin_console/admin_sidebar.jsx b/web/react/components/admin_console/admin_sidebar.jsx index 4c2a473b6..c7faa83fe 100644 --- a/web/react/components/admin_console/admin_sidebar.jsx +++ b/web/react/components/admin_console/admin_sidebar.jsx @@ -24,6 +24,7 @@ export default class AdminSidebar extends React.Component { handleClick(name, teamId, e) { e.preventDefault(); this.props.selectTab(name, teamId); + history.pushState({name: name, teamId: teamId}, null, `/admin_console/${name}/${teamId || ''}`); } isSelected(name, teamId) { diff --git a/web/react/components/more_channels.jsx b/web/react/components/more_channels.jsx index a20c5cad5..a0084ad30 100644 --- a/web/react/components/more_channels.jsx +++ b/web/react/components/more_channels.jsx @@ -83,7 +83,7 @@ export default class MoreChannels extends React.Component { moreChannels = <LoadingScreen />; } else if (channels.length) { moreChannels = ( - <table className='more-channel-table table'> + <table className='more-table table'> <tbody> {channels.map(function cMap(channel, index) { var joinButton; @@ -108,8 +108,8 @@ export default class MoreChannels extends React.Component { return ( <tr key={channel.id}> <td> - <p className='more-channel-name'>{channel.display_name}</p> - <p className='more-channel-description'>{channel.description}</p> + <p className='more-name'>{channel.display_name}</p> + <p className='more-description'>{channel.description}</p> </td> <td className='td--action'> {joinButton} diff --git a/web/react/components/more_direct_channels.jsx b/web/react/components/more_direct_channels.jsx index 08b64de8b..105199035 100644 --- a/web/react/components/more_direct_channels.jsx +++ b/web/react/components/more_direct_channels.jsx @@ -140,12 +140,12 @@ export default class MoreDirectChannels extends React.Component { if (user.nickname) { const separator = fullName ? ' - ' : ''; details.push( - <span + <p key={`${user.nickname}__nickname`} - className='nickname' + className='more-description' > {separator + user.nickname} - </span> + </p> ); } @@ -170,31 +170,38 @@ export default class MoreDirectChannels extends React.Component { } return ( - <li - key={user.id} - className='direct-channel' - > - <div className='col-xs-1 image-div'> + <tr> + <td + key={user.id} + className='direct-channel' + > <img - className='profile-image' + className='profile-img pull-left' + width='38' + height='38' src={`/api/v1/users/${user.id}/image?time=${user.update_at}`} /> - </div> - <div className='col-xs-9'> - <div className='username'> + <div className='more-name'> {user.username} </div> - <div> - {details} - </div> - </div> - <div className='col-xs-2 btn-div'> + {details} + </td> + <td className='td--action lg'> {joinButton} - </div> - </li> + </td> + </tr> ); } + componentDidUpdate(prevProps) { + if (!prevProps.show && this.props.show) { + $(ReactDOM.findDOMNode(this.refs.userList)).css('max-height', $(window).height() - 300); + if ($(window).width() > 768) { + $(ReactDOM.findDOMNode(this.refs.userList)).perfectScrollbar(); + } + } + } + render() { if (!this.props.show) { return null; @@ -213,7 +220,7 @@ export default class MoreDirectChannels extends React.Component { const userEntries = users.map(this.createRowForUser); if (userEntries.length === 0) { - userEntries.push(<li key='no-users-found'>{'No users found :('}</li>); + userEntries.push(<tr key='no-users-found'><td>{'No users found :('}</td></tr>); } let memberString = 'Member'; @@ -232,26 +239,35 @@ export default class MoreDirectChannels extends React.Component { <Modal className='modal-direct-channels' show={this.props.show} - bsSize='large' onHide={this.handleHide} > <Modal.Header closeButton={true}> - <Modal.Title>{'More Direct Messages'}</Modal.Title> + <Modal.Title>{'Team Directory'}</Modal.Title> </Modal.Header> <Modal.Body> - <div> - <input - ref='filter' - className='form-control filter-textbox' - placeholder='Search members' - onInput={this.handleFilterChange} - style={{width: '200px', display: 'inline'}} - /> - <span className='member-count pull-right'>{count}</span> + <div className='row filter-row'> + <div className='col-sm-6'> + <input + ref='filter' + className='form-control filter-textbox' + placeholder='Search members' + onInput={this.handleFilterChange} + /> + </div> + <div className='col-sm-6'> + <span className='member-count'>{count}</span> + </div> + </div> + <div + ref='userList' + className='user-list' + > + <table className='more-table table'> + <tbody> + {userEntries} + </tbody> + </table> </div> - <ul className='user-list'> - {userEntries} - </ul> </Modal.Body> <Modal.Footer> <button diff --git a/web/react/components/sidebar.jsx b/web/react/components/sidebar.jsx index 889bc0fbd..6e4a53e1b 100644 --- a/web/react/components/sidebar.jsx +++ b/web/react/components/sidebar.jsx @@ -132,7 +132,9 @@ export default class Sidebar extends React.Component { SocketStore.addChangeListener(this.onSocketChange); PreferenceStore.addChangeListener(this.onChange); - $('.nav-pills__container').perfectScrollbar(); + if ($(window).width() > 768) { + $('.nav-pills__container').perfectScrollbar(); + } this.updateTitle(); this.updateUnreadIndicators(); diff --git a/web/react/pages/admin_console.jsx b/web/react/pages/admin_console.jsx index c89cb4edc..ea9ae06f4 100644 --- a/web/react/pages/admin_console.jsx +++ b/web/react/pages/admin_console.jsx @@ -5,9 +5,12 @@ var ErrorBar = require('../components/error_bar.jsx'); var SelectTeamModal = require('../components/admin_console/select_team_modal.jsx'); var AdminController = require('../components/admin_console/admin_controller.jsx'); -export function setupAdminConsolePage() { +export function setupAdminConsolePage(props) { ReactDOM.render( - <AdminController />, + <AdminController + tab={props.ActiveTab} + teamId={props.TeamId} + />, document.getElementById('admin_controller') ); diff --git a/web/sass-files/sass/partials/_modal.scss b/web/sass-files/sass/partials/_modal.scss index b942a5a40..0e474a1e2 100644 --- a/web/sass-files/sass/partials/_modal.scss +++ b/web/sass-files/sass/partials/_modal.scss @@ -140,7 +140,7 @@ padding: 0; } } - .more-channel-table { + .more-table { margin: 0; table-layout: fixed; p { @@ -150,9 +150,11 @@ @include opacity(0.8); margin: 5px 0; } - .more-channel-name { + .more-name { font-weight: 600; font-size: 0.95em; + overflow: hidden; + text-overflow: ellipsis; } tbody { > tr { @@ -175,6 +177,9 @@ padding: 8px 15px 8px 8px; width: 80px; vertical-align: middle; + &.lg { + width: 110px; + } } } } @@ -331,47 +336,42 @@ } .modal-direct-channels { - .user-list { - list-style-type: none; - margin: 15px 0px 0px; - max-height: 600px; - padding: 0px; - overflow: auto; - li { - border-bottom: 1px solid #ddd; - height: 60px; - padding: 10px 0px; + .user-list { + margin-top: 20px; + overflow: auto; + -webkit-overflow-scrolling: touch; + max-height: 500px; + position: relative; + } - .image-div { - padding: 0px; + .table { + margin-top: 10px; + } - .profile-image { - width: 40px; - height: 40px; - @include border-radius(20px); - } - } + .modal-body { + padding: 20px 0 0; + @include clearfix; + } - .username { - font-weight: bold; - } + .filter-row { + padding: 0 15px; + } - .nickname { - color: #888; - } + .member-count { + margin-top: 5px; + float: right; + @include opacity(0.8); + } - .btn-div { - padding: 0px; - .btn-message { - position: relative; - top: 5px; - } - } + .more-description { + @include opacity(0.7); + } - &:last-child { - border-bottom: 0px; - } - } - } + .profile-img { + -moz-border-radius: 50px; + -webkit-border-radius: 50px; + border-radius: 50px; + margin-right: 8px; + } } diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss index 09f2c179e..c41199cac 100644 --- a/web/sass-files/sass/partials/_responsive.scss +++ b/web/sass-files/sass/partials/_responsive.scss @@ -270,6 +270,13 @@ height: auto; } } + .modal-direct-channels { + .member-count { + float: none; + margin-top: 10px; + display: block; + } + } .center-file-overlay { font-size: 1.3em; } diff --git a/web/sass-files/sass/partials/_settings.scss b/web/sass-files/sass/partials/_settings.scss index 0c2f25eab..3146c16d5 100644 --- a/web/sass-files/sass/partials/_settings.scss +++ b/web/sass-files/sass/partials/_settings.scss @@ -230,13 +230,6 @@ font-weight:500; } -.profile-img { - width:128px; - height:128px; - margin-bottom: 10px; - @include border-radius(128px); -} - .sel-btn { margin-right:5px; } diff --git a/web/templates/admin_console.html b/web/templates/admin_console.html index a046478f6..574caf730 100644 --- a/web/templates/admin_console.html +++ b/web/templates/admin_console.html @@ -12,7 +12,7 @@ <div id='select_team_modal'></div> <script> - window.setup_admin_console_page(); + window.setup_admin_console_page({{ .Props }}); $(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip(); diff --git a/web/web.go b/web/web.go index 00e00b3b9..f10c4f2a1 100644 --- a/web/web.go +++ b/web/web.go @@ -64,6 +64,9 @@ func InitWeb() { mainrouter.Handle("/signup/{service:[A-Za-z]+}/complete", api.AppHandlerIndependent(signupCompleteOAuth)).Methods("GET") mainrouter.Handle("/admin_console", api.UserRequired(adminConsole)).Methods("GET") + mainrouter.Handle("/admin_console/", api.UserRequired(adminConsole)).Methods("GET") + mainrouter.Handle("/admin_console/{tab:[A-Za-z0-9-_]+}", api.UserRequired(adminConsole)).Methods("GET") + mainrouter.Handle("/admin_console/{tab:[A-Za-z0-9-_]+}/{team:[A-Za-z0-9-]*}", api.UserRequired(adminConsole)).Methods("GET") mainrouter.Handle("/hooks/{id:[A-Za-z0-9]+}", api.ApiAppHandler(incomingWebhook)).Methods("POST") @@ -699,7 +702,14 @@ func adminConsole(c *api.Context, w http.ResponseWriter, r *http.Request) { return } + params := mux.Vars(r) + activeTab := params["tab"] + teamId := params["team"] + page := NewHtmlTemplatePage("admin_console", "Admin Console") + + page.Props["ActiveTab"] = activeTab + page.Props["TeamId"] = teamId page.Render(c, w) } |