0ct0pu5/homepage
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fixes for existing header styles, fix for glances

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

2
src/components/widgets/glances/glances.jsx
View file

@ -36,6 +36,8 @@ export default function Widget({ options }) {
<Resource icon={FiCpu} label={t("glances.wait")} percentage="0" />
<Resource icon={FaMemory} label={t("glances.wait")} percentage="0" />
{ options.cputemp && <Resource icon={FaThermometerHalf} label={t("glances.wait")} percentage="0" /> }
{ options.disk && !Array.isArray(options.disk) && <Resource key={options.disk} icon={FiHardDrive} label={t("glances.wait")} percentage="0" /> }
{ options.disk && Array.isArray(options.disk) && options.disk.map((disk) => <Resource key={disk.mnt_point} icon={FiHardDrive} label={t("glances.wait")} percentage="0" /> )}
{ options.uptime && <Resource icon={FaRegClock} label={t("glances.wait")} percentage="0" /> }
{ options.label && <WidgetLabel label={options.label} /> }
</Resources>;

3
src/components/widgets/openweathermap/weather.jsx
View file

@ -41,8 +41,7 @@ function Widget({ options }) {
};
return <Container options={options}>
<PrimaryText>{options.label && `${options.label}, `}</PrimaryText>
<PrimaryText>{t("common.number", { value: data.main.temp, style: "unit", unit })}</PrimaryText>
<PrimaryText>{options.label && `${options.label}, ` }{t("common.number", { value: data.main.temp, style: "unit", unit })}</PrimaryText>
<SecondaryText>{data.weather[0].description}</SecondaryText>
<WidgetIcon icon={Icon} size="xl" weatherInfo={weatherInfo} />
</Container>;

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

@ -6,10 +6,22 @@ import SecondaryText from "./secondary_text";
import Raw from "./raw";
export function getAllClasses(options, additionalClassNames = '') {
if (options?.style?.header === "boxedWidgets") {
return classNames(
"flex flex-col justify-center first:ml-0 ml-2 mr-2",
"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 pr-3",
additionalClassNames
);
}
let widgetAlignedClasses = "flex flex-col max-w:full sm:basis-auto self-center grow-0 flex-wrap";
if (options?.style?.isRightAligned) {
widgetAlignedClasses = "flex flex-col justify-center first:ml-auto ml-2 mr-2 ";
}
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",
widgetAlignedClasses,
additionalClassNames
);
}
@ -18,8 +30,8 @@ export function getInnerBlock(children) {
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>
{children.find(child => child.type === PrimaryText)}
{children.find(child => child.type === SecondaryText)}
</div>
</div>;
}

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

@ -1,9 +1,9 @@
import UsageBar from "../resources/usage-bar";
export default function Resource({ children, icon, value, label, expandedValue, expandedLabel, percentage, key, expanded = false }) {
export default function Resource({ children, icon, value, label, expandedValue = "", expandedLabel = "", percentage, expanded = false }) {
const Icon = icon;
return <div key={key} className="flex-none flex flex-row items-center mr-3 py-1.5">
return <div 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">

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

@ -4,12 +4,14 @@ import Raw from "./raw";
import WidgetLabel from "./widget_label";
export default function Resources({ options, children, target }) {
const widgetParts = [].concat(...children);
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) }
{ widgetParts.filter(child => child && child.type === Resource) }
</div>
{ children.filter(child => child && child.type === WidgetLabel) }
{ widgetParts.filter(child => child && child.type === WidgetLabel) }
</Raw>
</ContainerLink>;
}

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

@ -1,3 +1,3 @@
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>
return <div className="pt-1 text-center text-theme-800 dark:text-theme-200 text-xs">{label}</div>
}

11
src/pages/index.jsx
View file

@ -274,14 +274,17 @@ function Home({ initialSettings }) {
{widgets
.filter((widget) => !rightAlignedWidgets.includes(widget.type))
.map((widget, i) => (
<Widget key={i} widget={widget} style={headerStyle} />
<Widget key={i} widget={widget} style={{ header: headerStyle, isRightAligned: false}} />
))}
<div className="m-auto sm:ml-4 flex flex-wrap grow sm:basis-auto justify-between md:justify-end">
<div className={classNames(
"m-auto flex flex-wrap grow sm:basis-auto justify-between md:justify-end",
headerStyle === "boxedWidgets" ? "sm:ml-4" : "sm:ml-2"
)}>
{widgets
.filter((widget) => rightAlignedWidgets.includes(widget.type))
.map((widget, i) => (
<Widget key={i} widget={widget} style={headerStyle} />
<Widget key={i} widget={widget} style={{ header: headerStyle, isRightAligned: true}} />
))}
</div>
</>
@ -361,7 +364,7 @@ export default function Wrapper({ initialSettings, fallback }) {
style={wrappedStyle}
>
<div
id="inner_wrapper"
id="inner_wrapper"
className={classNames(
'fixed overflow-auto w-full h-full',
backgroundBlur && `backdrop-blur${initialSettings.background.blur.length ? '-' : ""}${initialSettings.background.blur}`,