dominik/homepage-plus
1
0
Fork 0
mirror of https://github.com/DI0IK/homepage-plus.git synced 2025-07-15 01:10:35 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Further improvements to simplify information widgets

Browse source 
Signed-off-by: Denis Papec <denis.papec@gmail.com>
This commit is contained in:
Denis Papec 2023-06-05 23:18:18 +01:00
parent cd5162e39c
commit 6f750dd83c
No known key found for this signature in database
GPG key ID: DE0912C69A47222C
12 changed files with 181 additions and 267 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/components/widgets/widget/resource.jsx Normal file
View file

@ -0,0 +1,22 @@
import UsageBar from "../resources/usage-bar";
export default function Resource({ children, icon, value, label, expandedValue, expandedLabel, percentage, key, expanded = false }) {
const Icon = icon;
return <div key={key} className="flex-none flex flex-row items-center mr-3 py-1.5">
<Icon className="text-theme-800 dark:text-theme-200 w-5 h-5"/>
<div className="flex flex-col ml-3 text-left min-w-[85px]">
<div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
<div className="pl-0.5">{value}</div>
<div className="pr-1">{label}</div>
</div>
{ expanded && <div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
<div className="pl-0.5">{expandedValue}</div>
<div className="pr-1">{expandedLabel}</div>
</div>
}
{ percentage && <UsageBar percent={percentage} /> }
{ children }
</div>
</div>;
}

5
src/components/widgets/widget/resource_label.jsx
View file

@ -1,5 +0,0 @@
export default function ResourceLabel({ children }) {
return (
<div className="pr-1">{children}</div>
);
}

5
src/components/widgets/widget/resource_value.jsx
View file

@ -1,5 +0,0 @@
export default function ResourceValue({ children }) {
return (
<div className="pl-0.5">{children}</div>
);
}

6
src/components/widgets/widget/resources.jsx
View file

@ -1,5 +1,5 @@
import ContainerLink from "./container_link";
import SingleResource from "./single_resource";
import Resource from "./resource";
import Raw from "./raw";
import WidgetLabel from "./widget_label";
@ -7,9 +7,9 @@ export default function Resources({ options, children, target }) {
return <ContainerLink options={options} target={target}>
<Raw>
<div className="flex flex-row self-center flex-wrap justify-between">
{children.filter(child => child && child.type === SingleResource)}
{ children.filter(child => child && child.type === Resource) }
</div>
{children.filter(child => child && child.type === WidgetLabel)}
{ children.filter(child => child && child.type === WidgetLabel) }
</Raw>
</ContainerLink>;
}

28
src/components/widgets/widget/single_resource.jsx
View file

@ -1,28 +0,0 @@
import UsageBar from "../resources/usage-bar";
import WidgetIcon from "./widget_icon";
import ResourceValue from "./resource_value";
import ResourceLabel from "./resource_label";
import Raw from "./raw";
export default function SingleResource({ children, key, expanded = false }) {
const values = children.filter(child => child.type === ResourceValue);
const labels = children.filter(child => child.type === ResourceLabel);
return <div key={key} className="flex-none flex flex-row items-center mr-3 py-1.5">
{children.find(child => child.type === WidgetIcon)}
<div className="flex flex-col ml-3 text-left min-w-[85px]">
<div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
{values.pop()}
{labels.pop()}
</div>
{ expanded && <div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
{values.pop()}
{labels.pop()}
</div>
}
{children.find(child => child.type === UsageBar)}
</div>
{children.find(child => child.type === Raw)}
</div>;
}