diff --git a/src/components/widgets/glances/glances.jsx b/src/components/widgets/glances/glances.jsx index b45dfefe..e5cf3fbd 100644 --- a/src/components/widgets/glances/glances.jsx +++ b/src/components/widgets/glances/glances.jsx @@ -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>; diff --git a/src/components/widgets/openweathermap/weather.jsx b/src/components/widgets/openweathermap/weather.jsx index 30531513..a857f13a 100644 --- a/src/components/widgets/openweathermap/weather.jsx +++ b/src/components/widgets/openweathermap/weather.jsx @@ -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>; diff --git a/src/components/widgets/widget/container.jsx b/src/components/widgets/widget/container.jsx index 3a4a9f57..59ea5684 100644 --- a/src/components/widgets/widget/container.jsx +++ b/src/components/widgets/widget/container.jsx @@ -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>; } diff --git a/src/components/widgets/widget/resource.jsx b/src/components/widgets/widget/resource.jsx index e77bcb5a..18e7c800 100644 --- a/src/components/widgets/widget/resource.jsx +++ b/src/components/widgets/widget/resource.jsx @@ -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"> diff --git a/src/components/widgets/widget/resources.jsx b/src/components/widgets/widget/resources.jsx index 19fb021d..394a3058 100644 --- a/src/components/widgets/widget/resources.jsx +++ b/src/components/widgets/widget/resources.jsx @@ -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>; } diff --git a/src/components/widgets/widget/widget_label.jsx b/src/components/widgets/widget/widget_label.jsx index dcb9b9e9..5fc6ced0 100644 --- a/src/components/widgets/widget/widget_label.jsx +++ b/src/components/widgets/widget/widget_label.jsx @@ -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> } diff --git a/src/pages/index.jsx b/src/pages/index.jsx index 7611aed5..d91a8339 100644 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -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}`,