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

* 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

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,