mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-10-24 13:35:57 +03:00
Code Issues Projects Releases Packages Wiki 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
Show stats 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 { Typography } from 'antd';
import { Typography, Tabs } from 'antd';
import { ServerStatusContext } from '../../utils/server-status-context';
import { CONNECTED_CLIENTS, fetchData, DISABLED_USERS, MODERATORS } from '../../utils/apis';
import UserTable from '../../components/user-table';
import ClientTable from '../../components/client-table';
const { Title } = Typography;
const { TabPane } = Tabs;
export const FETCH_INTERVAL = 10 * 1000; // 10 sec
@ -74,16 +75,16 @@ export default function ChatUsers() {
);
return (
<>
<Title>Connected Chat Participants {online ? `(${clients.length})` : null}</Title>
{connectedUsers}
<br />
<br />
<Title>Banned Users {online ? `(${disabledUsers.length})` : null}</Title>
<UserTable data={disabledUsers} />
<Title>Moderators {online ? `(${moderators.length})` : null}</Title>
<UserTable data={moderators} />
</>
<Tabs defaultActiveKey="1">
<TabPane tab={<span>Connected {online ? `(${clients.length})` : '(offline)'}</span>} key="1">
{connectedUsers}
</TabPane>
<TabPane tab={<span>Banned {online ? `(${disabledUsers.length})` : null}</span>} key="2">
<UserTable data={disabledUsers} />
</TabPane>
<TabPane tab={<span>Moderators {online ? `(${moderators.length})` : null}</span>} key="3">
<UserTable data={moderators} />
</TabPane>
</Tabs>
);
}

16
web/styles/globals.scss
View file

@ -142,3 +142,19 @@ input {
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);
}