leyoda/rqbit
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Styling configure - a more consistent style

Browse source
This commit is contained in:
Igor Katson 2023-12-06 21:35:00 +00:00
parent 11953883c9
commit 9ab6fb03ce
No known key found for this signature in database
GPG key ID: B4EC22B66D61A3F5
1 changed files with 93 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

164
desktop/src/configure.tsx
View file

@ -1,6 +1,6 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { RqbitDesktopConfig } from "./configuration"; import { RqbitDesktopConfig } from "./configuration";
import { Button, Form, Modal, Tab, Tabs } from "react-bootstrap"; import { Button, Form, Modal, Row, Tab, Tabs } from "react-bootstrap";
import { ErrorComponent } from "./rqbit-webui-src/rqbit-web"; import { ErrorComponent } from "./rqbit-webui-src/rqbit-web";
import { invokeAPI } from "./api"; import { invokeAPI } from "./api";
import { ErrorDetails } from "./rqbit-webui-src/api-types"; import { ErrorDetails } from "./rqbit-webui-src/api-types";
@ -79,14 +79,17 @@ export const ConfigModal: React.FC<{
className="mb-3"> className="mb-3">
<Tab className="mb-3" eventKey="home" title="Home"> <Tab className="mb-3" eventKey="home" title="Home">
<Form.Group controlId="default_download_location" className="mb-3"> <Form.Group as={Row} controlId="default_download_location" className="mb-3">
<Form.Label>Default download folder</Form.Label> <Form.Label className="col-4 col-form-label">Default download folder</Form.Label>
<Form.Control <div className="col-8">
type="text" <Form.Control
name="default_download_location" type="text"
value={config.default_download_location} name="default_download_location"
onChange={handleInputChange} value={config.default_download_location}
/> onChange={handleInputChange}
/>
</div>
</Form.Group> </Form.Group>
</Tab> </Tab>
@ -114,20 +117,21 @@ export const ConfigModal: React.FC<{
/> />
</Form.Group> </Form.Group>
<Form.Group controlId="dht_persistence_filename" className="mb-3"> <Form.Group as={Row} controlId="dht_persistence_filename" className="mb-3">
<Form.Label>Persistence Filename</Form.Label> <Form.Label className="col-4 col-form-label">Persistence Filename</Form.Label>
<Form.Control <div className="col-8">
type="text" <Form.Control
name="dht.persistence_filename" type="text"
value={config.dht.persistence_filename} name="dht.persistence_filename"
disabled={config.dht.disable} value={config.dht.persistence_filename}
onChange={handleInputChange} disabled={config.dht.disable}
/> onChange={handleInputChange}
/>
</div>
</Form.Group> </Form.Group>
</Tab> </Tab>
<Tab className="mb-3" eventKey="tcp_listen" title="TCP"> <Tab className="mb-3" eventKey="tcp_listen" title="TCP">
<legend>TCP Listener config</legend> <legend>TCP Listener config</legend>
<Form.Group controlId="tcp_listen_disable" className="mb-3"> <Form.Group controlId="tcp_listen_disable" className="mb-3">
@ -140,26 +144,32 @@ export const ConfigModal: React.FC<{
/> />
</Form.Group> </Form.Group>
<Form.Group controlId="tcp_listen_min_port" className="mb-3"> <Form.Group as={Row} controlId="tcp_listen_min_port" className="mb-3">
<Form.Label>Min port</Form.Label> <Form.Label className="col-4 col-form-label">Min port</Form.Label>
<Form.Control <div className="col-8">
type="number" <Form.Control
name="tcp_listen.min_port" type="number"
value={config.tcp_listen.min_port} name="tcp_listen.min_port"
disabled={config.tcp_listen.disable} value={config.tcp_listen.min_port}
onChange={handleInputChange} disabled={config.tcp_listen.disable}
/> onChange={handleInputChange}
/>
</div>
</Form.Group> </Form.Group>
<Form.Group controlId="tcp_listen_max_port" className="mb-3"> <Form.Group as={Row} controlId="tcp_listen_max_port" className="mb-3">
<Form.Label>Max Port</Form.Label> <Form.Label className="col-4 col-form-label">Max Port</Form.Label>
<Form.Control <div className="col-8">
type="number" <Form.Control
name="tcp_listen.max_port" type="number"
value={config.tcp_listen.max_port} name="tcp_listen.max_port"
disabled={config.tcp_listen.disable} value={config.tcp_listen.max_port}
onChange={handleInputChange} disabled={config.tcp_listen.disable}
/> onChange={handleInputChange}
/>
</div>
</Form.Group> </Form.Group>
<Form.Group controlId="upnp_disable" className="mb-3"> <Form.Group controlId="upnp_disable" className="mb-3">
@ -189,15 +199,18 @@ export const ConfigModal: React.FC<{
/> />
</Form.Group> </Form.Group>
<Form.Group controlId="persistence_filename" className="mb-3"> <Form.Group as={Row} controlId="persistence_filename" className="mb-3">
<Form.Label>Persistence Filename</Form.Label> <Form.Label className="col-4 col-form-label">Persistence Filename</Form.Label>
<Form.Control <div className="col-8">
type="text" <Form.Control
name="persistence.filename" type="text"
value={config.persistence.filename} name="persistence.filename"
disabled={config.persistence.disable} value={config.persistence.filename}
onChange={handleInputChange} disabled={config.persistence.disable}
/> onChange={handleInputChange}
/>
</div>
</Form.Group> </Form.Group>
</Tab> </Tab>
@ -205,24 +218,30 @@ export const ConfigModal: React.FC<{
<Tab className="mb-3" eventKey="peer_opts" title="Peer options"> <Tab className="mb-3" eventKey="peer_opts" title="Peer options">
<legend>Peer connection options</legend> <legend>Peer connection options</legend>
<Form.Group controlId="peer_opts_connect_timeout" className="mb-3"> <Form.Group as={Row} controlId="peer_opts_connect_timeout" className="mb-3">
<Form.Label>Connect timeout</Form.Label> <Form.Label className="col-4 col-form-label">Connect timeout (seconds)</Form.Label>
<Form.Control <div className="col-8">
type="text" <Form.Control
name="peer_opts.connect_timeout" type="number"
value={config.peer_opts.connect_timeout} name="peer_opts.connect_timeout"
onChange={handleInputChange} value={config.peer_opts.connect_timeout}
/> onChange={handleInputChange}
/>
</div>
</Form.Group> </Form.Group>
<Form.Group controlId="peer_opts_read_write_timeout" className="mb-3"> <Form.Group as={Row} controlId="peer_opts_read_write_timeout" className="mb-3">
<Form.Label>Read/write timeout</Form.Label> <Form.Label className="col-4 col-form-label">Read/write timeout (seconds)</Form.Label>
<Form.Control <div className="col-8">
type="text" <Form.Control
name="peer_opts.read_write_timeout" type="number"
value={config.peer_opts.read_write_timeout} name="peer_opts.read_write_timeout"
onChange={handleInputChange} value={config.peer_opts.read_write_timeout}
/> onChange={handleInputChange}
/>
</div>
</Form.Group> </Form.Group>
</Tab> </Tab>
@ -239,15 +258,18 @@ export const ConfigModal: React.FC<{
/> />
</Form.Group> </Form.Group>
<Form.Group controlId="http_api_listen_addr" className="mb-3"> <Form.Group as={Row} controlId="http_api_listen_addr" className="mb-3">
<Form.Label>HTTP API Listen Address</Form.Label> <Form.Label className="col-4 col-form-label">HTTP API Listen Address</Form.Label>
<Form.Control <div className="col-8">
type="text" <Form.Control
name="http_api.listen_addr" type="text"
value={config.http_api.listen_addr} name="http_api.listen_addr"
disabled={config.http_api.disable} value={config.http_api.listen_addr}
onChange={handleInputChange} disabled={config.http_api.disable}
/> onChange={handleInputChange}
/>
</div>
</Form.Group> </Form.Group>
<Form.Group controlId="http_api_read_only" className="mb-3"> <Form.Group controlId="http_api_read_only" className="mb-3">