arriej/homepage-Mirror
1
0
Fork 0
mirror of https://github.com/gethomepage/homepage.git synced 2025-12-05 21:47:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix valueOnly to apply highlighting to value only, not hide label

Browse Source 
Co-authored-by: shamoon <4887959+shamoon@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
2025-12-03 23:12:35 +00:00
parent 40fb55ced0
commit 384eaae6c1
2 changed files with 8 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/configs/services.md
View File

@@ -159,9 +159,9 @@ Widgets can tint their metric block text automatically based on rules defined al
Supported numeric operators for the `when` property are `gt`, `gte`, `lt`, `lte`, `eq`, `ne`, `between`, and `outside`. String rules support `equals`, `includes`, `startsWith`, `endsWith`, and `regex`. Each rule can be inverted with `negate: true`, and string rules may pass `caseSensitive: true` or custom regex `flags`. The highlight engine does its best to coerce formatted values, but you will get the most reliable results when you pass plain numbers or strings into `<Block>`. Supported numeric operators for the `when` property are `gt`, `gte`, `lt`, `lte`, `eq`, `ne`, `between`, and `outside`. String rules support `equals`, `includes`, `startsWith`, `endsWith`, and `regex`. Each rule can be inverted with `negate: true`, and string rules may pass `caseSensitive: true` or custom regex `flags`. The highlight engine does its best to coerce formatted values, but you will get the most reliable results when you pass plain numbers or strings into `<Block>`.
#### Value Only Display #### Value Only Highlighting
You can optionally hide the label and show only the value when a block is highlighted by setting `valueOnly: true` on the field configuration. This is useful when you want the highlighted value to stand out without the label text. You can optionally apply highlighting only to the value portion of a block (not the label) by setting `valueOnly: true` on the field configuration. This keeps the label visible while highlighting only the metric value itself.
```yaml ```yaml
- Sonarr: - Sonarr:

10
src/components/services/widget/block.jsx
View File

@@ -32,21 +32,23 @@ export default function Block({ value, label, field }) {
return getHighlightClass(highlight.level, highlightConfig); return getHighlightClass(highlight.level, highlightConfig);
}, [highlight, highlightConfig]); }, [highlight, highlightConfig]);
const showLabel = !highlight?.valueOnly; const applyToValueOnly = highlight?.valueOnly === true;
return ( return (
<div <div
className={classNames( className={classNames(
"bg-theme-200/50 dark:bg-theme-900/20 rounded-sm m-1 flex-1 flex flex-col items-center justify-center text-center p-1", "bg-theme-200/50 dark:bg-theme-900/20 rounded-sm m-1 flex-1 flex flex-col items-center justify-center text-center p-1",
value === undefined ? "animate-pulse" : "", value === undefined ? "animate-pulse" : "",
highlightClass, !applyToValueOnly && highlightClass,
"service-block", "service-block",
)} )}
data-highlight-level={highlight?.level} data-highlight-level={highlight?.level}
data-highlight-source={highlight?.source} data-highlight-source={highlight?.source}
> >
<div className="font-thin text-sm">{value === undefined || value === null ? "-" : value}</div> <div className={classNames("font-thin text-sm", applyToValueOnly && highlightClass)}>
{showLabel && <div className="font-bold text-xs uppercase">{t(label)}</div>} {value === undefined || value === null ? "-" : value}
</div>
<div className="font-bold text-xs uppercase">{t(label)}</div>
</div> </div>
); );
} }