hamcha/strimertul
1
0
Fork 0
mirror of https://git.sr.ht/~ashkeel/strimertul synced 2024-09-20 02:00:49 +00:00
Code Activity Actions

Some stylish tweaks

Browse source
This commit is contained in:
Ash Keel 2022-01-20 12:22:42 +01:00
parent b8b7f2347e
commit dfeb2fbf65
No known key found for this signature in database
GPG key ID: BAD8D93E7314ED3E
2 changed files with 65 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
frontend/src/ui/pages/BotCommands.tsx
View file

@ -96,6 +96,14 @@ const ACLIndicator = styled('span', {
marginRight: '0.5rem', marginRight: '0.5rem',
}); });
const NoneText = styled('div', {
color: '$gray9',
fontSize: '1.2em',
textAlign: 'center',
fontStyle: 'italic',
paddingTop: '1rem',
});
interface CommandItemProps { interface CommandItemProps {
name: string; name: string;
item: TwitchBotCustomCommand; item: TwitchBotCustomCommand;
@ -358,25 +366,33 @@ export default function TwitchBotCommandsPage(): React.ReactElement {
/> />
</FlexRow> </FlexRow>
<CommandList> <CommandList>
{Object.keys(commands ?? {}) {commands ? (
?.filter((cmd) => cmd.toLowerCase().includes(filterLC)) Object.keys(commands ?? {})
.sort() ?.filter(
.map((cmd) => ( (cmd) =>
<CommandItem cmd.toLowerCase().includes(filterLC) ||
key={cmd} commands[cmd].description.toLowerCase().includes(filterLC),
name={cmd} )
item={commands[cmd]} .sort()
onToggle={() => toggleCommand(cmd)} .map((cmd) => (
onEdit={() => <CommandItem
setActiveDialog({ key={cmd}
kind: 'edit', name={cmd}
name: cmd, item={commands[cmd]}
item: commands[cmd], onToggle={() => toggleCommand(cmd)}
}) onEdit={() =>
} setActiveDialog({
onDelete={() => deleteCommand(cmd)} kind: 'edit',
/> name: cmd,
))} item: commands[cmd],
})
}
onDelete={() => deleteCommand(cmd)}
/>
))
) : (
<NoneText>{t('pages.botcommands.no-commands')}</NoneText>
)}
</CommandList> </CommandList>
<Dialog <Dialog

49
frontend/src/ui/pages/BotTimers.tsx
View file

@ -89,6 +89,13 @@ const TimerText = styled('div', {
marginBottom: '-0.5rem', marginBottom: '-0.5rem',
}, },
}); });
const NoneText = styled('div', {
color: '$gray9',
fontSize: '1.2em',
textAlign: 'center',
fontStyle: 'italic',
paddingTop: '1rem',
});
function humanTime(t: TFunction<'translation'>, secs: number): string { function humanTime(t: TFunction<'translation'>, secs: number): string {
const mins = Math.floor(secs / 60); const mins = Math.floor(secs / 60);
@ -384,25 +391,29 @@ export default function TwitchBotTimersPage(): React.ReactElement {
/> />
</FlexRow> </FlexRow>
<TimerList> <TimerList>
{Object.keys(timerConfig?.timers ?? {}) {!timerConfig?.timers ? (
?.filter((cmd) => cmd.toLowerCase().includes(filterLC)) Object.keys(timerConfig?.timers ?? {})
.sort() ?.filter((cmd) => cmd.toLowerCase().includes(filterLC))
.map((cmd) => ( .sort()
<TimerItem .map((cmd) => (
key={cmd} <TimerItem
name={cmd} key={cmd}
item={timerConfig.timers[cmd]} name={cmd}
onToggle={() => toggleTimer(cmd)} item={timerConfig.timers[cmd]}
onEdit={() => onToggle={() => toggleTimer(cmd)}
setActiveDialog({ onEdit={() =>
kind: 'edit', setActiveDialog({
name: cmd, kind: 'edit',
item: timerConfig.timers[cmd], name: cmd,
}) item: timerConfig.timers[cmd],
} })
onDelete={() => deleteTimer(cmd)} }
/> onDelete={() => deleteTimer(cmd)}
))} />
))
) : (
<NoneText>{t('pages.bottimers.no-timers')}</NoneText>
)}
</TimerList> </TimerList>
<Dialog <Dialog