Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

fix(bookmarks): improve responsive styles #2536

Merged
merged 2 commits into from
Mar 8, 2025
+105 −64
Merged

fix(bookmarks): improve responsive styles #2536

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
603bdb4
fix(bookmarks): improve responsive styles
Meierschlumpf Mar 8, 2025
88bc1ba
fix: typecheck issue
Meierschlumpf Mar 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/old-import/src/widgets/options.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ const optionMapping: OptionMapping = {

return mappedLayouts[oldOptions.layout];
},
hideTitle: () => undefined,
hideIcon: (oldOptions) => oldOptions.items.some((item) => item.hideIcon),
hideHostname: (oldOptions) => oldOptions.items.some((item) => item.hideHostname),
openNewTab: (oldOptions) => oldOptions.items.some((item) => item.openNewTab),
Expand Down
6 changes: 6 additions & 0 deletions packages/translation/src/lang/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1127,9 +1127,15 @@
},
"grid": {
"label": "Grid"
},
"gridHorizontal": {
"label": "Grid horizontal"
}
}
},
"hideTitle": {
"label": "Hide title"
},
"hideIcon": {
"label": "Hide icons"
},
Expand Down
159 changes: 96 additions & 63 deletions packages/widgets/src/bookmarks/component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
"use client";

import { Anchor, Box, Card, Divider, Flex, Group, Stack, Text, Title, UnstyledButton } from "@mantine/core";
import { Anchor, Card, Flex, Group, Stack, Text, Title, UnstyledButton } from "@mantine/core";
import combineClasses from "clsx";

import type { RouterOutputs } from "@homarr/api";
Expand All @@ -12,7 +12,7 @@ import { MaskedOrNormalImage } from "@homarr/ui";
import type { WidgetComponentProps } from "../definition";
import classes from "./bookmark.module.css";

export default function BookmarksWidget({ options, width, height, itemId }: WidgetComponentProps<"bookmarks">) {
export default function BookmarksWidget({ options, itemId }: WidgetComponentProps<"bookmarks">) {
const board = useRequiredBoard();
const [data] = clientApi.app.byIds.useSuspenseQuery(options.items, {
select(data) {
Expand Down Expand Up @@ -48,21 +48,22 @@ export default function BookmarksWidget({ options, width, height, itemId }: Widg
{options.title}
</Title>
)}
{options.layout === "grid" && (
{(options.layout === "grid" || options.layout === "gridHorizontal") && (
<GridLayout
data={data}
width={width}
height={height}
itemDirection={options.layout === "gridHorizontal" ? "horizontal" : "vertical"}
hideTitle={options.hideTitle}
hideIcon={options.hideIcon}
hideHostname={options.hideHostname}
openNewTab={options.openNewTab}
hasIconColor={board.iconColor !== null}
/>
)}
{options.layout !== "grid" && (
{options.layout !== "grid" && options.layout !== "gridHorizontal" && (
<FlexLayout
data={data}
direction={options.layout}
hideTitle={options.hideTitle}
hideIcon={options.hideIcon}
hideHostname={options.hideHostname}
openNewTab={options.openNewTab}
Expand All @@ -76,23 +77,27 @@ export default function BookmarksWidget({ options, width, height, itemId }: Widg
interface FlexLayoutProps {
data: RouterOutputs["app"]["byIds"];
direction: "row" | "column";
hideTitle: boolean;
hideIcon: boolean;
hideHostname: boolean;
openNewTab: boolean;
hasIconColor: boolean;
}

const FlexLayout = ({ data, direction, hideIcon, hideHostname, openNewTab, hasIconColor }: FlexLayoutProps) => {
const FlexLayout = ({
data,
direction,
hideTitle,
hideIcon,
hideHostname,
openNewTab,
hasIconColor,
}: FlexLayoutProps) => {
const board = useRequiredBoard();
return (
<Flex direction={direction} gap="0" w="100%">
{data.map((app, index) => (
{data.map((app) => (
<div key={app.id} style={{ display: "flex", flex: "1", flexDirection: direction }}>
<Divider
m="3px"
orientation={direction !== "column" ? "vertical" : "horizontal"}
color={index === 0 ? "transparent" : undefined}
/>
<UnstyledButton
component="a"
href={app.href ?? undefined}
Expand All @@ -101,11 +106,23 @@ const FlexLayout = ({ data, direction, hideIcon, hideHostname, openNewTab, hasIc
key={app.id}
w="100%"
>
<Card radius={board.itemRadius} className={classes.card} w="100%" display="flex" p={"xs"} h={"100%"}>
<Card radius={board.itemRadius} className={classes.card} w="100%" display="flex" p={4} h="100%">
{direction === "row" ? (
<VerticalItem app={app} hideIcon={hideIcon} hideHostname={hideHostname} hasIconColor={hasIconColor} />
<VerticalItem
app={app}
hideTitle={hideTitle}
hideIcon={hideIcon}
hideHostname={hideHostname}
hasIconColor={hasIconColor}
/>
) : (
<HorizontalItem app={app} hideIcon={hideIcon} hideHostname={hideHostname} hasIconColor={hasIconColor} />
<HorizontalItem
app={app}
hideTitle={hideTitle}
hideIcon={hideIcon}
hideHostname={hideHostname}
hasIconColor={hasIconColor}
/>
)}
</Card>
</UnstyledButton>
Expand All @@ -117,95 +134,104 @@ const FlexLayout = ({ data, direction, hideIcon, hideHostname, openNewTab, hasIc

interface GridLayoutProps {
data: RouterOutputs["app"]["byIds"];
width: number;
height: number;
hideTitle: boolean;
hideIcon: boolean;
hideHostname: boolean;
openNewTab: boolean;
itemDirection: "horizontal" | "vertical";
hasIconColor: boolean;
}

const GridLayout = ({ data, width, height, hideIcon, hideHostname, openNewTab, hasIconColor }: GridLayoutProps) => {
// Calculates the perfect number of columns for the grid layout based on the width and height in pixels and the number of items
const columns = Math.ceil(Math.sqrt(data.length * (width / height)));

const GridLayout = ({
data,
hideTitle,
hideIcon,
hideHostname,
openNewTab,
itemDirection,
hasIconColor,
}: GridLayoutProps) => {
const board = useRequiredBoard();

return (
<Box
display="grid"
h="100%"
style={{
gridTemplateColumns: `repeat(${columns}, 1fr)`,
gap: 10,
}}
>
<Flex mih="100%" miw="100%" gap={4} wrap="wrap">
{data.map((app) => (
<UnstyledButton
component="a"
href={app.href ?? undefined}
target={openNewTab ? "_blank" : "_self"}
rel="noopener noreferrer"
key={app.id}
h="100%"
flex="1"
>
<Card
h="100%"
className={combineClasses(classes.card, classes["card-grid"])}
radius={board.itemRadius}
p="sm"
p="xs"
>
<VerticalItem
app={app}
hideIcon={hideIcon}
hideHostname={hideHostname}
hasIconColor={hasIconColor}
size={50}
/>
{itemDirection === "horizontal" ? (
<HorizontalItem
app={app}
hideTitle={hideTitle}
hideIcon={hideIcon}
hideHostname={hideHostname}
hasIconColor={hasIconColor}
/>
) : (
<VerticalItem
app={app}
hideTitle={hideTitle}
hideIcon={hideIcon}
hideHostname={hideHostname}
hasIconColor={hasIconColor}
/>
)}
</Card>
</UnstyledButton>
))}
</Box>
</Flex>
);
};

const VerticalItem = ({
app,
hideTitle,
hideIcon,
hideHostname,
hasIconColor,
size = 30,
}: {
app: RouterOutputs["app"]["byIds"][number];
hideTitle: boolean;
hideIcon: boolean;
hideHostname: boolean;
hasIconColor: boolean;
size?: number;
}) => {
return (
<Stack h="100%" gap="sm">
<Text fw={700} ta="center" size="lg">
{app.name}
</Text>
{!hideTitle && (
<Text fw={700} ta="center" size="xs">
{app.name}
</Text>
)}
{!hideIcon && (
<MaskedOrNormalImage
imageUrl={app.iconUrl}
hasColor={hasIconColor}
alt={app.name}
className={classes.bookmarkIcon}
style={{
width: size,
height: size,
width: hideHostname && hideTitle ? 16 : 24,
height: hideHostname && hideTitle ? 16 : 24,
overflow: "auto",
flex: 1,
scale: 0.8,
marginLeft: "auto",
marginRight: "auto",
}}
/>
)}
{!hideHostname && (
<Anchor ta="center" component="span" size="lg">
<Anchor ta="center" component="span" size="xs">
{app.href ? new URL(app.href).hostname : undefined}
</Anchor>
)}
Expand All @@ -215,17 +241,19 @@ const VerticalItem = ({

const HorizontalItem = ({
app,
hideTitle,
hideIcon,
hideHostname,
hasIconColor,
}: {
app: RouterOutputs["app"]["byIds"][number];
hideTitle: boolean;
hideIcon: boolean;
hideHostname: boolean;
hasIconColor: boolean;
}) => {
return (
<Group wrap="nowrap" gap={"xs"}>
<Group wrap="nowrap" gap="xs" h="100%" justify="center">
{!hideIcon && (
<MaskedOrNormalImage
imageUrl={app.iconUrl}
Expand All @@ -234,24 +262,29 @@ const HorizontalItem = ({
className={classes.bookmarkIcon}
style={{
overflow: "auto",
scale: 0.8,
width: 30,
height: 30,
width: hideHostname ? 16 : 24,
height: hideHostname ? 16 : 24,
flex: "unset",
}}
/>
)}
<Stack justify="space-between" gap={0}>
<Text fw={700} size="md" lineClamp={1}>
{app.name}
</Text>
{!(hideTitle && hideHostname) && (
<>
<Stack justify="space-between" gap={0}>
{!hideTitle && (
<Text fw={700} size="xs" lineClamp={hideHostname ? 2 : 1}>
{app.name}
</Text>
)}

{!hideHostname && (
<Anchor component="span" size="xs">
{app.href ? new URL(app.href).hostname : undefined}
</Anchor>
)}
</Stack>
{!hideHostname && (
<Anchor component="span" size="xs">
{app.href ? new URL(app.href).hostname : undefined}
</Anchor>
)}
</Stack>
</>
)}
</Group>
);
};
3 changes: 2 additions & 1 deletion packages/widgets/src/bookmarks/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,13 @@ export const { definition, componentLoader } = createWidgetDefinition("bookmarks
return optionsBuilder.from((factory) => ({
title: factory.text(),
layout: factory.select({
options: (["grid", "row", "column"] as const).map((value) => ({
options: (["grid", "gridHorizontal", "row", "column"] as const).map((value) => ({
value,
label: (t) => t(`widget.bookmarks.option.layout.option.${value}.label`),
})),
defaultValue: "column",
}),
hideTitle: factory.switch({ defaultValue: false }),
hideIcon: factory.switch({ defaultValue: false }),
hideHostname: factory.switch({ defaultValue: false }),
openNewTab: factory.switch({ defaultValue: true }),
Expand Down