Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-10 23:45:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

Added Scrollbar

Browse Source
This commit is contained in:
Larvey
2022-06-16 15:50:16 -04:00
committed by ajnart
parent 4516dde1f4
commit 544fae3808
1 changed files with 67 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
src/components/AppShelf/AddAppShelfItem.tsx
View File

@@ -14,6 +14,7 @@ import {
Text, Text,
Tabs, Tabs,
MultiSelect, MultiSelect,
ScrollArea,
} from '@mantine/core'; } from '@mantine/core';
import { useForm } from '@mantine/form'; import { useForm } from '@mantine/form';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
@@ -202,14 +203,15 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
})} })}
> >
<Tabs position="apart"> <Tabs position="apart">
<Tabs.Tab label="Options"> <Tabs.Tab label="Options">
<Group direction="column" grow> <ScrollArea style={{height:'42vh'}} scrollbarSize={4}>
<TextInput <Group direction="column" grow>
required <TextInput
label="Service name" required
placeholder="Plex" label="Service name"
{...form.getInputProps('name')} placeholder="Plex"
/> {...form.getInputProps('name')}
/>
<TextInput <TextInput
required required
@@ -276,79 +278,63 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
color: 'gray', color: 'gray',
}} }}
> >
Tip: Get your API key{' '} here.
<Anchor </Anchor>
target="_blank" </Text>
weight="bold" </>
style={{ fontStyle: 'inherit', fontSize: 'inherit' }} )}
href={`${hostname}/settings/general`} {form.values.type === 'qBittorrent' && (
> <>
here. <TextInput
</Anchor> required
</Text> label="Username"
</> placeholder="admin"
)} value={form.values.username}
{form.values.type === 'qBittorrent' && ( onChange={(event) => {
<> form.setFieldValue('username', event.currentTarget.value);
<TextInput }}
required error={form.errors.username && 'Invalid username'}
label="Username" />
placeholder="admin" <TextInput
value={form.values.username} required
onChange={(event) => { label="Password"
form.setFieldValue('username', event.currentTarget.value); placeholder="adminadmin"
}} value={form.values.password}
error={form.errors.username && 'Invalid username'} onChange={(event) => {
/> form.setFieldValue('password', event.currentTarget.value);
<TextInput }}
required error={form.errors.password && 'Invalid password'}
label="Password" />
placeholder="adminadmin" </>
value={form.values.password} )}
onChange={(event) => { {(form.values.type === 'Deluge' || form.values.type === 'Transmission') && (
form.setFieldValue('password', event.currentTarget.value); <>
}} <TextInput
error={form.errors.password && 'Invalid password'} label="Password"
/> placeholder="password"
</> value={form.values.password}
)} onChange={(event) => {
{(form.values.type === 'Deluge' || form.setFieldValue('password', event.currentTarget.value);
form.values.type === 'Transmission' || }}
form.values.type === 'qBittorrent') && ( error={form.errors.password && 'Invalid password'}
<> />
<TextInput </>
label="Username" )}
placeholder="admin" </Group>
value={form.values.username} </ScrollArea>
onChange={(event) => { </Tabs.Tab>
form.setFieldValue('username', event.currentTarget.value); <Tabs.Tab label="Advanced Options">
}} <Group direction="column" grow>
error={form.errors.username && 'Invalid username'} <MultiSelect
/> required
<TextInput label="HTTP Status Codes"
label="Password" data={statusCodes}
placeholder="password" placeholder="Select valid status codes"
value={form.values.password} clearButtonLabel="Clear selection"
onChange={(event) => { nothingFound="Nothing found"
form.setFieldValue('password', event.currentTarget.value); clearable
}} searchable
error={form.errors.password && 'Invalid password'} {...form.getInputProps('status')}
/>
</>
)}
</Group>
</Tabs.Tab>
<Tabs.Tab label="Advanced Options">
<MultiSelect
required
label="HTTP Status Codes"
data={statusCodes}
placeholder="Select valid status codes"
clearButtonLabel="Clear selection"
nothingFound="Nothing found"
clearable
searchable
{...form.getInputProps('status')}
/> />
<Select <Select
required required