idanoo/autobrr
1
0
Fork 0
mirror of https://github.com/idanoo/autobrr synced 2025-07-26 02:09:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(web): download client table overflow, filter alerts, dubious wording (#521)

Browse source 
* fix table overflow in settings -> download client

* fixed uneven line height in CellLine component

* filters/details: rename "Cancel" to "Reset form values"
Added log level and log path to Application settings.
Added column truncation to Download Client settings.

* feat: change settings debug toggle wording

* fix: typo in irc add form
This commit is contained in:
stacksmash76 2022-11-10 12:27:09 +01:00 • committed by GitHub
parent f811b80413
commit b6ba23d0ee
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 88 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

55
web/src/screens/settings/Application.tsx
View file

@ -3,6 +3,26 @@ import { APIClient } from "../../api/APIClient";
import { Checkbox } from "../../components/Checkbox";
import { SettingsContext } from "../../utils/Context";
interface RowItemProps {
label: string;
value?: string;
title?: string;
}
const RowItem = ({ label, value, title }: RowItemProps) => {
if (!value)
return null;
return (
<div className="py-4 sm:py-5 sm:grid sm:grid-cols-4 sm:gap-4 sm:px-6">
<dt className="font-medium text-gray-500 dark:text-white" title={title}>{label}:</dt>
<dd className="mt-1 text-gray-900 dark:text-white sm:mt-0 sm:col-span-2 break-all">
{value}
</dd>
</div>
);
};
function ApplicationSettings() {
const [settings, setSettings] = SettingsContext.use();
@ -31,7 +51,7 @@ function ApplicationSettings() {
<div className="mt-6 grid grid-cols-12 gap-6">
<div className="col-span-6 sm:col-span-4">
<label htmlFor="host" className="block text-xs font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wide">
Host
Host
</label>
<input
type="text"
@ -45,7 +65,7 @@ function ApplicationSettings() {
<div className="col-span-6 sm:col-span-4">
<label htmlFor="port" className="block text-xs font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wide">
Port
Port
</label>
<input
type="text"
@ -59,7 +79,7 @@ function ApplicationSettings() {
<div className="col-span-6 sm:col-span-4">
<label htmlFor="base_url" className="block text-xs font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wide">
Base url
Base url
</label>
<input
type="text"
@ -78,33 +98,18 @@ function ApplicationSettings() {
<div className="divide-y divide-gray-200 dark:divide-gray-700">
<div className="px-4 py-5 sm:p-0">
<dl className="sm:divide-y divide-gray-200 dark:divide-gray-700">
{data?.version ? (
<div className="py-4 sm:py-5 sm:grid sm:grid-cols-4 sm:gap-4 sm:px-6">
<dt className="font-medium text-gray-500 dark:text-white">Version:</dt>
<dd className="mt-1 text-gray-900 dark:text-white sm:mt-0 sm:col-span-2 break-all">
{data?.version}
</dd>
</div>
) : null}
{data?.commit ? (
<div className="py-4 sm:py-5 sm:grid sm:grid-cols-4 sm:gap-4 sm:px-6">
<dt className="font-medium text-gray-500 dark:text-white">Commit:</dt>
<dd className="mt-1 text-gray-900 dark:text-white sm:mt-0 sm:col-span-2 break-all">{data.commit}</dd>
</div>
) : null}
{data?.date ? (
<div className="py-4 sm:py-5 sm:grid sm:grid-cols-4 sm:gap-4 sm:px-6">
<dt className="font-medium text-gray-500 dark:text-white">Date:</dt>
<dd className="mt-1 text-gray-900 dark:text-white sm:mt-0 sm:col-span-2 break-all">{data?.date}</dd>
</div>
) : null}
<RowItem label="Version" value={data?.version} />
<RowItem label="Commit" value={data?.commit} />
<RowItem label="Build date" value={data?.date} />
<RowItem label="Log path" value={data?.log_path} title="Set in config.toml" />
<RowItem label="Log level" value={data?.log_level} title="Set in config.toml" />
</dl>
</div>
<ul className="divide-y divide-gray-200 dark:divide-gray-700">
<div className="px-4 sm:px-6 py-1">
<Checkbox
label="Debug"
description="Enable debug mode to get more logs."
label="Debug mode"
description="Frontend only. To change log level for backend, update config.toml"
value={settings.debug}
setValue={(newValue: boolean) => setSettings({
...settings,

14
web/src/screens/settings/DownloadClient.tsx
View file

@ -61,9 +61,9 @@ function DownloadClientSettingsListItem({ client, idx }: DLSettingsItemProps) {
/>
</Switch>
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">{client.name}</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">{client.host}</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">{DownloadClientTypeNameMap[client.type]}</td>
<td className="px-6 py-4 whitespace-nowrap text-sm truncate max-w-sm font-medium text-gray-900 dark:text-white">{client.name}</td>
<td className="px-6 py-4 whitespace-nowrap text-sm truncate max-w-sm text-gray-500 dark:text-gray-400">{client.host}</td>
<td className="px-6 py-4 whitespace-nowrap text-sm truncate max-w-sm text-gray-500 dark:text-gray-400">{DownloadClientTypeNameMap[client.type]}</td>
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<span className="text-blue-600 dark:text-gray-300 hover:text-blue-900 cursor-pointer" onClick={toggleUpdateClient}>
Edit
@ -91,8 +91,8 @@ function DownloadClientSettings() {
<DownloadClientAddForm isOpen={addClientIsOpen} toggle={toggleAddClient} />
<div className="py-6 px-4 sm:p-6 lg:pb-8">
<div className="-ml-4 -mt-4 flex justify-between items-center flex-wrap sm:flex-nowrap">
<div className="py-6 px-2 lg:pb-8">
<div className="px-4 -ml-4 -mt-4 flex justify-between items-center flex-wrap sm:flex-nowrap">
<div className="ml-4 mt-4">
<h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-white">Clients</h3>
<p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
@ -112,8 +112,8 @@ function DownloadClientSettings() {
<div className="flex flex-col mt-6">
{data && data.length > 0 ?
<div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
<div className="-my-2 overflow-x-auto">
<div className="py-2 align-middle inline-block min-w-full">
<div className="light:shadow overflow-hidden light:border-b light:border-gray-200 sm:rounded-lg">
<table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<thead className="light:bg-gray-50">