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

Revert "Added optional boxed styling for information widgets and refactored information widgets"

Browse source
This commit is contained in:
shamoon 2023-06-10 23:30:44 -07:00 • committed by GitHub
parent 347761fcad
commit 6b2930ab8d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
35 changed files with 854 additions and 642 deletions
Download patch file Download diff file Expand all files Collapse all files

42
src/components/widgets/widget/container.jsx
View file

@ -1,42 +0,0 @@
import classNames from "classnames";
import WidgetIcon from "./widget_icon";
import PrimaryText from "./primary_text";
import SecondaryText from "./secondary_text";
import Raw from "./raw";
export function getAllClasses(options, additionalClassNames = '') {
return classNames(
"flex flex-col justify-center first:ml-0 ml-4 mr-2",
additionalClassNames,
options?.style === "boxedWidgets" && " ml-4 mt-2 m:mb-0 rounded-md shadow-md shadow-theme-900/10 dark:shadow-theme-900/20 bg-theme-100/20 dark:bg-white/5 p-2 pl-3",
);
}
export function getInnerBlock(children) {
// children won't be an array if it's Raw component
return Array.isArray(children) && <div className="flex flex-row items-center justify-end">
<div className="flex flex-col items-center">{children.find(child => child.type === WidgetIcon)}</div>
<div className="flex flex-col ml-3 text-left">
<span className="text-theme-800 dark:text-theme-200 text-sm">{children.find(child => child.type === PrimaryText)}</span>
<span className="text-theme-800 dark:text-theme-200 text-xs">{children.find(child => child.type === SecondaryText)}</span>
</div>
</div>;
}
export function getBottomBlock(children) {
if (children.type !== Raw) {
return children.find(child => child.type === Raw) || [];
}
return [children];
}
export default function Container({ children = [], options, additionalClassNames = '' }) {
return (
<div className={getAllClasses(options, additionalClassNames)}>
{getInnerBlock(children)}
{getBottomBlock(children)}
</div>
);
}

10
src/components/widgets/widget/container_button.jsx
View file

@ -1,10 +0,0 @@
import { getAllClasses, getInnerBlock, getBottomBlock } from "./container";
export default function ContainerButton ({ children = [], options, additionalClassNames = '', callback }) {
return (
<button type="button" onClick={callback} className={getAllClasses(options, additionalClassNames)}>
{getInnerBlock(children)}
{getBottomBlock(children)}
</button>
);
}

10
src/components/widgets/widget/container_form.jsx
View file

@ -1,10 +0,0 @@
import { getAllClasses, getInnerBlock, getBottomBlock } from "./container";
export default function ContainerForm ({ children = [], options, additionalClassNames = '', callback }) {
return (
<form type="button" onSubmit={callback} className={getAllClasses(options, additionalClassNames)}>
{getInnerBlock(children)}
{getBottomBlock(children)}
</form>
);
}

10
src/components/widgets/widget/container_link.jsx
View file

@ -1,10 +0,0 @@
import { getAllClasses, getInnerBlock, getBottomBlock } from "./container";
export default function ContainerLink ({ children = [], options, additionalClassNames = '', target }) {
return (
<a href={options.url} target={target} className={getAllClasses(options, additionalClassNames)}>
{getInnerBlock(children)}
{getBottomBlock(children)}
</a>
);
}

15
src/components/widgets/widget/error.jsx
View file

@ -1,15 +0,0 @@
import { useTranslation } from "react-i18next";
import { BiError } from "react-icons/bi";
import Container from "./container";
import PrimaryText from "./primary_text";
import WidgetIcon from "./widget_icon";
export default function Error({ options }) {
const { t } = useTranslation();
return <Container options={options}>
<PrimaryText>{t("widget.api_error")}</PrimaryText>
<WidgetIcon icon={BiError} size="l" />
</Container>;
}

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

@ -1,5 +0,0 @@
export default function PrimaryText({ children }) {
return (
<span className="text-theme-800 dark:text-theme-200 text-sm">{children}</span>
);
}

7
src/components/widgets/widget/raw.jsx
View file

@ -1,7 +0,0 @@
export default function Raw({ children }) {
if (children.type === Raw) {
return [children];
}
return children;
}

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

@ -1,22 +0,0 @@
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>;
}

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

@ -1,15 +0,0 @@
import ContainerLink from "./container_link";
import Resource from "./resource";
import Raw from "./raw";
import WidgetLabel from "./widget_label";
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 === Resource) }
</div>
{ children.filter(child => child && child.type === WidgetLabel) }
</Raw>
</ContainerLink>;
}

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

@ -1,5 +0,0 @@
export default function SecondaryText({ children }) {
return (
<span className="text-theme-800 dark:text-theme-200 text-xs">{children}</span>
);
}

18
src/components/widgets/widget/widget_icon.jsx
View file

@ -1,18 +0,0 @@
export default function WidgetIcon({ icon, size = "s", pulse = false, weatherInfo = {} }) {
const Icon = icon;
const { condition, timeOfDay } = weatherInfo;
let additionalClasses = "text-theme-800 dark:text-theme-200 ";
switch (size) {
case "m": additionalClasses += "w-6 h-6 "; break;
case "l": additionalClasses += "w-8 h-8 "; break;
case "xl": additionalClasses += "w-10 h-10 "; break;
default: additionalClasses += "w-5 h-5 ";
}
if (pulse) {
additionalClasses += "animate-pulse ";
}
return <Icon className={additionalClasses} condition={condition} timeOfDay={timeOfDay} />;
}

3
src/components/widgets/widget/widget_label.jsx
View file

@ -1,3 +0,0 @@
export default function WidgetLabel({ label = "" }) {
return <div className="ml-6 pt-1 text-center text-theme-800 dark:text-theme-200 text-xs">{label}</div>
}