summaryrefslogtreecommitdiffstats
path: root/web
diff options
context:
space:
mode:
Diffstat (limited to 'web')
-rw-r--r--web/react/components/admin_console/admin_controller.jsx12
-rw-r--r--web/react/components/admin_console/admin_sidebar.jsx1
-rw-r--r--web/react/components/more_channels.jsx6
-rw-r--r--web/react/components/more_direct_channels.jsx84
-rw-r--r--web/react/components/sidebar.jsx4
-rw-r--r--web/react/components/user_profile.jsx4
-rw-r--r--web/react/pages/admin_console.jsx7
-rw-r--r--web/sass-files/sass/partials/_modal.scss76
-rw-r--r--web/sass-files/sass/partials/_responsive.scss7
-rw-r--r--web/sass-files/sass/partials/_settings.scss7
-rw-r--r--web/templates/admin_console.html2
-rw-r--r--web/web.go10
12 files changed, 129 insertions, 91 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/components/user_profile.jsx b/web/react/components/user_profile.jsx
index da0c1aaf9..540331663 100644
--- a/web/react/components/user_profile.jsx
+++ b/web/react/components/user_profile.jsx
@@ -86,11 +86,11 @@ export default class UserProfile extends React.Component {
dataContent.push(
<div
data-toggle='tooltip'
- title="' + this.state.profile.email + '"
+ title={this.state.profile.email}
key='user-popover-email'
>
<a
- href="mailto:' + this.state.profile.email + '"
+ href={'mailto:' + this.state.profile.email}
className='text-nowrap text-lowercase user-popover__email'
>
{this.state.profile.email}
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)
}
generated by cgit v1.2.3-1-g7c22 (git 2.25.1) at 2024-07-03 06:43:14 +0000