LogalDeveloper/owncast
0
Fork 0
Code Activity

Split up user lists into tabs

Browse Source
This commit is contained in:
Gabe Kangas
2021-11-12 21:28:29 -08:00
parent 1cde33ca03
commit 6de509f723
2 changed files with 29 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
web/pages/chat/users.tsx
View File

@@ -1,11 +1,12 @@
import React, { useState, useEffect, useContext } from 'react'; import React, { useState, useEffect, useContext } from 'react';
import { Typography } from 'antd'; import { Typography, Tabs } from 'antd';
import { ServerStatusContext } from '../../utils/server-status-context'; import { ServerStatusContext } from '../../utils/server-status-context';
import { CONNECTED_CLIENTS, fetchData, DISABLED_USERS, MODERATORS } from '../../utils/apis'; import { CONNECTED_CLIENTS, fetchData, DISABLED_USERS, MODERATORS } from '../../utils/apis';
import UserTable from '../../components/user-table'; import UserTable from '../../components/user-table';
import ClientTable from '../../components/client-table'; import ClientTable from '../../components/client-table';
const { Title } = Typography; const { Title } = Typography;
const { TabPane } = Tabs;
export const FETCH_INTERVAL = 10 * 1000; // 10 sec export const FETCH_INTERVAL = 10 * 1000; // 10 sec
@@ -74,16 +75,16 @@ export default function ChatUsers() {
); );
return ( return (
<> <Tabs defaultActiveKey="1">
<Title>Connected Chat Participants {online ? `(${clients.length})` : null}</Title> <TabPane tab={<span>Connected {online ? `(${clients.length})` : '(offline)'}</span>} key="1">
{connectedUsers} {connectedUsers}
<br /> </TabPane>
<br /> <TabPane tab={<span>Banned {online ? `(${disabledUsers.length})` : null}</span>} key="2">
<Title>Banned Users {online ? `(${disabledUsers.length})` : null}</Title> <UserTable data={disabledUsers} />
<UserTable data={disabledUsers} /> </TabPane>
<TabPane tab={<span>Moderators {online ? `(${moderators.length})` : null}</span>} key="3">
<Title>Moderators {online ? `(${moderators.length})` : null}</Title> <UserTable data={moderators} />
<UserTable data={moderators} /> </TabPane>
</> </Tabs>
); );
} }

16
web/styles/globals.scss
View File

@@ -142,3 +142,19 @@ input {
text-align: right; text-align: right;
} }
} }
.ant-tabs-tab {
color:var(--owncast-purple);
.ant-tabs-tab-active {
border-color: var(--nav-selected-text);
}
}
.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
color: var(--nav-selected-text);
}
.ant-tabs-ink-bar {
background: var(--nav-selected-text);
}