Implement progress bar style options: not animated and colorful

Issue #170
openscopeproject · Apr 7, 2024 · 05303b6 · 05303b6
1 parent 3990b38
commit 05303b6
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 11 deletions.
diff --git a/src/components/modals/interfacepanel.tsx b/src/components/modals/interfacepanel.tsx
@@ -22,7 +22,8 @@ import { Checkbox, Grid, MultiSelect, NativeSelect, NumberInput, Textarea, useMa
 import type { UseFormReturnType } from "@mantine/form";
 import ColorChooser from "components/colorchooser";
 import { useGlobalStyleOverrides } from "themehooks";
-import { DeleteTorrentDataOptions, type ColorSetting, type DeleteTorrentDataOption, type StyleOverrides } from "config";
+import { DeleteTorrentDataOptions, ProgressbarStyleOptions } from "config";
+import type { ProgressbarStyleOption, ColorSetting, DeleteTorrentDataOption, StyleOverrides } from "config";
 import { ColorSchemeToggle } from "components/miscbuttons";
 import { Label } from "./common";
 const { TAURI, invoke } = await import(/* webpackChunkName: "taurishim" */"taurishim");
@@ -33,6 +34,7 @@ export interface InterfaceFormValues {
         styleOverrides: StyleOverrides,
         skipAddDialog: boolean,
         deleteTorrentData: DeleteTorrentDataOption,
+        progressbarStyle: ProgressbarStyleOption,
         numLastSaveDirs: number,
         preconfiguredLabels: string[],
         defaultTrackers: string[],
@@ -120,26 +122,31 @@ export function InterfaceSettigsPanel<V extends InterfaceFormValues>(props: { fo
             <Grid.Col span={1}>
                 <ColorChooser value={style[theme.colorScheme].backgroundColor ?? defaultBg} onChange={setBgColor} />
             </Grid.Col>
-            <Grid.Col span={4}>
+            <Grid.Col span={3}>
                 Delete torrent data
             </Grid.Col>
-            <Grid.Col span={4}>
+            <Grid.Col span={3}>
                 <NativeSelect data={DeleteTorrentDataOptions as unknown as string[]}
                     value={props.form.values.interface.deleteTorrentData}
                     onChange={(e) => { setFieldValue("interface.deleteTorrentData", e.target.value); }} />
             </Grid.Col>
-            <Grid.Col span={4}>
+            <Grid.Col span={6}>
                 <Checkbox label="Skip add torrent dialog"
                     {...props.form.getInputProps("interface.skipAddDialog", { type: "checkbox" })} />
             </Grid.Col>
-            <Grid.Col span={6}>Max number of saved download directories</Grid.Col>
+            <Grid.Col span={4}>Max number of saved download directories</Grid.Col>
             <Grid.Col span={2}>
                 <NumberInput
                     min={1}
                     max={100}
                     {...props.form.getInputProps("interface.numLastSaveDirs")} />
             </Grid.Col>
-            <Grid.Col span={4}></Grid.Col>
+            <Grid.Col span={3}>Progressbars</Grid.Col>
+            <Grid.Col span={3}>
+                <NativeSelect data={ProgressbarStyleOptions as unknown as string[]}
+                    value={props.form.values.interface.progressbarStyle}
+                    onChange={(e) => { setFieldValue("interface.progressbarStyle", e.target.value); }} />
+            </Grid.Col>
             <Grid.Col>
                 <MultiSelect
                     data={props.form.values.interface.preconfiguredLabels}

diff --git a/src/components/progressbar.tsx b/src/components/progressbar.tsx
@@ -19,19 +19,25 @@
 import "../css/progressbar.css";
 import React from "react";
 
+export type ProgressBarVariant = "default" | "green" | "dark-green" | "red" | "grey";
+
 interface ProgressBarProps {
     now: number,
     max?: number,
     label?: string,
     animate?: boolean,
+    variant?: ProgressBarVariant,
     className?: string,
 }
 
 export function ProgressBar(props: ProgressBarProps) {
     const max = props.max ?? 100;
     const percent = Math.floor(1000 * props.now / max) / 10;
     const label = props.label ?? `${percent}%`;
-    const className = `progressbar ${props.animate === true ? "animate" : ""} ${props.className ?? ""}`;
+    const className = "progressbar " +
+        `${props.animate === true ? "animate" : ""} ` +
+        `${props.variant !== undefined && props.variant !== "default" ? props.variant : ""} ` +
+        `${props.className ?? ""}`;
     return (
         <div className={className}>
             <div>{label}</div>

diff --git a/src/components/tables/filetreetable.tsx b/src/components/tables/filetreetable.tsx
@@ -23,6 +23,7 @@ import { isDirEntry } from "../../cachedfiletree";
 import { ConfigContext, ServerConfigContext } from "../../config";
 import { PriorityColors, PriorityStrings } from "../../rpc/transmission";
 import { bytesToHumanReadableStr, fileSystemSafeName, pathMapFromServer } from "../../trutil";
+import type { ProgressBarVariant } from "../progressbar";
 import { ProgressBar } from "../progressbar";
 import * as Icon from "react-bootstrap-icons";
 import type { TrguiTableRef } from "./common";
@@ -141,9 +142,15 @@ function ByteSizeField(props: TableFieldProps) {
 }
 
 function PercentBarField(props: TableFieldProps) {
+    const config = useContext(ConfigContext);
     const now = props.entry.percent ?? 0;
+    let variant: ProgressBarVariant = "default";
+    if (config.values.interface.progressbarStyle === "colorful") {
+        if (props.entry.want === false) variant = "grey";
+        else if (now === 100) variant = "dark-green";
+    }
 
-    return <ProgressBar now={now} className="white-outline" />;
+    return <ProgressBar now={now} className="white-outline" variant={variant} />;
 }
 
 function PriorityField(props: TableFieldProps) {

diff --git a/src/components/tables/peerstable.tsx b/src/components/tables/peerstable.tsx
@@ -17,12 +17,13 @@
  */
 
 import type { AccessorFn, CellContext, ColumnDef } from "@tanstack/react-table";
-import React, { useMemo, useCallback } from "react";
+import React, { useMemo, useCallback, useContext } from "react";
 import type { Torrent, PeerStats } from "rpc/torrent";
 import { bytesToHumanReadableStr } from "trutil";
 import { TrguiTable, useStandardSelect } from "./common";
 import { ProgressBar } from "components/progressbar";
 import { Flex } from "@mantine/core";
+import { ConfigContext } from "config";
 const { TAURI } = await import(/* webpackChunkName: "taurishim" */"taurishim");
 if (TAURI) await import(/* webpackChunkName: "flag-icons" */"flagsshim");
 
@@ -74,13 +75,15 @@ function ByteRateField(props: TableFieldProps) {
 }
 
 function PercentField(props: TableFieldProps) {
+    const config = useContext(ConfigContext);
     const now = props.entry[props.fieldName] * 100;
     const active = props.entry.rateToClient > 0 || props.entry.rateToPeer > 0;
 
     return <ProgressBar
         now={now}
         className="white-outline"
-        animate={active} />;
+        animate={config.values.interface.progressbarStyle === "animated" && active}
+        variant={config.values.interface.progressbarStyle === "colorful" && active ? "green" : "default"} />;
 }
 
 const Columns = AllFields.map((field): ColumnDef<PeerStats> => {

diff --git a/src/components/tables/torrenttable.tsx b/src/components/tables/torrenttable.tsx
@@ -24,6 +24,7 @@ import type { TorrentAllFieldsType, TorrentFieldsType } from "rpc/transmission";
 import { PriorityColors, PriorityStrings, Status, StatusStrings, TorrentMinimumFields } from "rpc/transmission";
 import type { ColumnDef, VisibilityState } from "@tanstack/react-table";
 import { bytesToHumanReadableStr, fileSystemSafeName, modKeyString, pathMapFromServer, secondsToHumanReadableStr, timestampToDateString } from "trutil";
+import type { ProgressBarVariant } from "../progressbar";
 import { ProgressBar } from "../progressbar";
 import type { AccessorFn, CellContext } from "@tanstack/table-core";
 import type { TableSelectReducer } from "./common";
@@ -324,13 +325,26 @@ function ByteRateField(props: TableFieldProps) {
 }
 
 function PercentBarField(props: TableFieldProps) {
+    const config = useContext(ConfigContext);
     const now = props.torrent[props.fieldName] * 100;
     const active = props.torrent.rateDownload > 0 || props.torrent.rateUpload > 0;
+    let variant: ProgressBarVariant = "default";
+    if (config.values.interface.progressbarStyle === "colorful") {
+        if ((props.torrent.error !== undefined && props.torrent.error > 0) ||
+            props.torrent.cachedError !== "") variant = "red";
+        else {
+            if (active) variant = "green";
+            else if (props.torrent.status === Status.stopped &&
+                props.torrent.sizeWhenDone > 0 &&
+                props.torrent.leftUntilDone === 0) variant = "dark-green";
+        }
+    }
 
     return <ProgressBar
         now={now}
         className="white-outline"
-        animate={active} />;
+        animate={config.values.interface.progressbarStyle === "animated" && active}
+        variant={variant} />;
 }
 
 const Columns = AllFields.map((f): ColumnDef<Torrent> => {

diff --git a/src/config.ts b/src/config.ts
@@ -96,9 +96,11 @@ export type SectionsVisibility<S extends string> = Array<{
 export const WindowMinimizeOptions = ["minimize", "hide"] as const;
 export const WindowCloseOptions = ["hide", "close", "quit"] as const;
 export const DeleteTorrentDataOptions = ["default off", "default on", "remember selection"] as const;
+export const ProgressbarStyleOptions = ["plain", "animated", "colorful"] as const;
 export type WindowMinimizeOption = typeof WindowMinimizeOptions[number];
 export type WindowCloseOption = typeof WindowCloseOptions[number];
 export type DeleteTorrentDataOption = typeof DeleteTorrentDataOptions[number];
+export type ProgressbarStyleOption = typeof ProgressbarStyleOptions[number];
 
 export interface ColorSetting {
     color: DefaultMantineColor,
@@ -158,6 +160,7 @@ interface Settings {
         preconfiguredLabels: string[],
         defaultTrackers: string[],
         styleOverrides: StyleOverrides,
+        progressbarStyle: ProgressbarStyleOption,
     },
 }
 
@@ -276,6 +279,7 @@ const DefaultSettings: Settings = {
             dark: {},
             light: {},
         },
+        progressbarStyle: "animated",
     },
 };
 

diff --git a/src/css/progressbar.css b/src/css/progressbar.css
@@ -17,6 +17,22 @@
     color: white;
 }
 
+.progressbar.red>:first-child {
+    background: #fa5252;
+}
+
+.progressbar.green>:first-child {
+    background: #37b24d;
+}
+
+.progressbar.dark-green>:first-child {
+    background: #0f6d20;
+}
+
+.progressbar.grey>:first-child {
+    background: #677274;
+}
+
 .progressbar>:last-child {
     position: absolute;
     display: flex;