mirror of
https://git.sr.ht/~ashkeel/strimertul
synced 2024-09-20 02:00:49 +00:00
Minor fixes and WIP command page
This commit is contained in:
parent
006ad71a19
commit
139294d0c8
7 changed files with 72 additions and 3 deletions
4
frontend/src/assets/icon-logo.svg
Normal file
4
frontend/src/assets/icon-logo.svg
Normal file
|
@ -0,0 +1,4 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 400 300">
|
||||
<path d="m338 136-22 44a17 17 0 0 0 15 25h45a17 17 0 0 0 15-25l-22-44a17 17 0 0 0-31 0Zm4 2a13 13 0 0 1 23 0l22 44a13 13 0 0 1-11 19h-45a13 13 0 0 1-11-19l22-44Z" class="icon" style="fill:#fff" transform="rotate(-90 489 788) scale(3.18767)"/>
|
||||
<path d="m338 136-22 44a17 17 0 0 0 15 25h45a17 17 0 0 0 15-25l-22-44a17 17 0 0 0-31 0Zm4 2a13 13 0 0 1 23 0l22 44a13 13 0 0 1-11 19h-45a13 13 0 0 1-11-19l22-44Z" class="icon" style="fill:#fff" transform="rotate(90 838 -139) scale(3.18767)"/>
|
||||
</svg>
|
After Width: | Height: | Size: 663 B |
|
@ -69,7 +69,7 @@
|
|||
"channel.raid": "Raid"
|
||||
},
|
||||
"sim-events": "Send test event",
|
||||
"auth-button": "Authenticate as Twitch",
|
||||
"auth-button": "Authenticate with Twitch",
|
||||
"auth-message": "Click the following button to authenticate the back-end with your Twitch account:",
|
||||
"current-status": "Current status"
|
||||
},
|
||||
|
@ -99,6 +99,12 @@
|
|||
"bot-chat-history": "How many messages to keep in history",
|
||||
"bot-chat-history-suffix": "messages",
|
||||
"bot-chat-history-desc": "Chat logging allows for pages and modules to read messages from chat. It's recommended to keep chat logging enabled with a reasonable history size (eg. 6)"
|
||||
},
|
||||
"botcommands": {
|
||||
"title": "Bot commands",
|
||||
"desc": "Define custom chat commands to set up autoresponders, counters, etc.",
|
||||
"add-button": "New command",
|
||||
"search-placeholder": "Search command by name"
|
||||
}
|
||||
},
|
||||
"form-actions": {
|
||||
|
|
|
@ -26,6 +26,7 @@ import { styled } from './theme';
|
|||
import spinner from '../assets/icon-loading.svg';
|
||||
import BackendIntegrationPage from './pages/BackendIntegration';
|
||||
import TwitchSettingsPage from './pages/TwitchSettings';
|
||||
import TwitchBotCommandsPage from './pages/BotCommands';
|
||||
|
||||
const LoadingDiv = styled('div', {
|
||||
display: 'flex',
|
||||
|
@ -189,6 +190,10 @@ export default function App(): JSX.Element {
|
|||
<Route path="/http" element={<ServerSettingsPage />} />
|
||||
<Route path="/backend" element={<BackendIntegrationPage />} />
|
||||
<Route path="/twitch/settings" element={<TwitchSettingsPage />} />
|
||||
<Route
|
||||
path="/twitch/bot/commands"
|
||||
element={<TwitchBotCommandsPage />}
|
||||
/>
|
||||
</Routes>
|
||||
</PageWrapper>
|
||||
</PageContent>
|
||||
|
|
|
@ -7,6 +7,9 @@ import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
|
|||
import { RootState } from '../../store';
|
||||
import { APPNAME, APPREPO } from '../theme';
|
||||
|
||||
// @ts-expect-error Asset import
|
||||
import logo from '../../assets/icon-logo.svg';
|
||||
|
||||
export interface RouteSection {
|
||||
title: string;
|
||||
links: Route[];
|
||||
|
@ -33,8 +36,12 @@ const Header = styled('div', {
|
|||
});
|
||||
|
||||
const AppName = styled('h1', {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '0.2rem',
|
||||
fontSize: '1.4rem',
|
||||
margin: '0.5rem 0 0.2rem 0',
|
||||
margin: '0.5rem 0 0.5rem 0',
|
||||
fontWeight: 300,
|
||||
});
|
||||
|
||||
const VersionLabel = styled('div', {
|
||||
|
@ -42,6 +49,7 @@ const VersionLabel = styled('div', {
|
|||
fontSize: '0.75rem',
|
||||
fontWeight: 'bold',
|
||||
color: '$teal8',
|
||||
paddingLeft: '12px',
|
||||
});
|
||||
|
||||
const UpdateButton = styled('a', {
|
||||
|
@ -168,7 +176,10 @@ export default function Sidebar({
|
|||
options={{ scrollbars: { autoHide: 'scroll' } }}
|
||||
>
|
||||
<Header>
|
||||
<AppName>{APPNAME}</AppName>
|
||||
<AppName>
|
||||
<img src={logo} style={{ height: '28px', marginBottom: '-2px' }} />
|
||||
{APPNAME}
|
||||
</AppName>
|
||||
<VersionLabel>
|
||||
{version && !dev ? version : t('debug.dev-build')}
|
||||
</VersionLabel>
|
||||
|
|
35
frontend/src/ui/pages/BotCommands.tsx
Normal file
35
frontend/src/ui/pages/BotCommands.tsx
Normal file
|
@ -0,0 +1,35 @@
|
|||
import { PlusIcon } from '@radix-ui/react-icons';
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
Button,
|
||||
FlexRow,
|
||||
InputBox,
|
||||
PageContainer,
|
||||
PageHeader,
|
||||
PageTitle,
|
||||
TextBlock,
|
||||
} from '../theme';
|
||||
|
||||
export default function TwitchBotCommandsPage(): React.ReactElement {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<PageContainer>
|
||||
<PageHeader>
|
||||
<PageTitle>{t('pages.botcommands.title')}</PageTitle>
|
||||
<TextBlock>{t('pages.botcommands.desc')}</TextBlock>
|
||||
</PageHeader>
|
||||
|
||||
<FlexRow spacing="1" align="left">
|
||||
<Button>
|
||||
<PlusIcon /> {t('pages.botcommands.add-button')}
|
||||
</Button>
|
||||
<InputBox
|
||||
css={{ flex: 1 }}
|
||||
placeholder={t('pages.botcommands.search-placeholder')}
|
||||
/>
|
||||
</FlexRow>
|
||||
</PageContainer>
|
||||
);
|
||||
}
|
|
@ -70,6 +70,9 @@ export const Button = styled('button', {
|
|||
fontSize: '1.1rem',
|
||||
border: '1px solid $teal6',
|
||||
backgroundColor: '$teal4',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '0.5rem',
|
||||
'&:hover': {
|
||||
backgroundColor: '$teal5',
|
||||
},
|
||||
|
|
|
@ -11,5 +11,10 @@ export const FlexRow = styled('div', {
|
|||
gap: '0.5rem',
|
||||
},
|
||||
},
|
||||
align: {
|
||||
left: {
|
||||
justifyContent: 'flex-start',
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue