Skip to content

Commit

Permalink
💄 Rework the bookmark widget
Browse files Browse the repository at this point in the history
  • Loading branch information
SeDemal committed Jul 23, 2023
1 parent e6e7a5a commit cd81475
Showing 1 changed file with 52 additions and 15 deletions.
67 changes: 52 additions & 15 deletions src/widgets/bookmark/BookmarkWidgetTile.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
TextInput,
Title,
createStyles,
useMantineTheme,
} from '@mantine/core';
import { useForm } from '@mantine/form';
import {
Expand All @@ -39,6 +40,7 @@ interface BookmarkItem {
href: string;
iconUrl: string;
openNewTab: boolean;
hideLink: boolean;
}

const definition = defineWidget({
Expand All @@ -58,6 +60,7 @@ const definition = defineWidget({
href: 'https://homarr.dev',
iconUrl: '/imgs/logo/logo.png',
openNewTab: false,
hideLink: false,
};
},
itemComponent({ data, onChange, delete: deleteData }) {
Expand Down Expand Up @@ -130,6 +133,11 @@ const definition = defineWidget({
label="Open in new tab"
checked={form.values.openNewTab}
/>
<Switch
{...form.getInputProps('hideLink')}
label="Hide link"
checked={form.values.hideLink}
/>
<Button
onClick={() => deleteData()}
leftIcon={<IconTrash size="1rem" />}
Expand Down Expand Up @@ -186,6 +194,7 @@ function BookmarkWidgetTile({ widget }: BookmarkWidgetTileProps) {
const { t } = useTranslation('modules/bookmark');
const { classes } = useStyles();
const { enabled: isEditModeEnabled } = useEditModeStore();
const { fn, colors, colorScheme } = useMantineTheme();

if (widget.properties.items.length === 0) {
return (
Expand All @@ -206,7 +215,7 @@ function BookmarkWidgetTile({ widget }: BookmarkWidgetTileProps) {
switch (widget.properties.layout) {
case 'autoGrid':
return (
<Box className={classes.grid} display="grid" mr={isEditModeEnabled ? 'xl' : undefined}>
<Box className={classes.grid} mr={isEditModeEnabled ? 'xl' : undefined} h="100%">
{widget.properties.items.map((item: BookmarkItem, index) => (
<Card
className={classes.autoGridItem}
Expand All @@ -216,6 +225,10 @@ function BookmarkWidgetTile({ widget }: BookmarkWidgetTileProps) {
href={item.href}
target={item.openNewTab ? '_blank' : undefined}
withBorder
sx={{
backgroundColor: colorScheme === 'dark' ? colors.dark[5].concat('80') : colors.blue[0].concat('80'),
'&:hover': { backgroundColor: fn.primaryColor().concat('80'),}, //'40' = 25% opacity
}}
>
<BookmarkItemContent item={item} />
</Card>
Expand All @@ -226,26 +239,44 @@ function BookmarkWidgetTile({ widget }: BookmarkWidgetTileProps) {
case 'vertical':
return (
<ScrollArea
offsetScrollbars
type="always"
scrollbarSize={8}
type="auto"
h="100%"
mr={isEditModeEnabled ? 'xl' : undefined}
styles={{
viewport:{
//mantine being mantine again... this might break
'& div[style="min-width: 100%; display: table;"]':{
height:'100%',
},
},
}}
>
<Flex
style={{ flexDirection: widget.properties.layout === 'vertical' ? 'column' : 'row' }}
gap="md"
gap="0"
h="100%"
>
{widget.properties.items.map((item: BookmarkItem, index) => (
<Card
key={index}
w={widget.properties.layout === 'vertical' ? '100%' : undefined}
px="xl"
px="md"
py="0"
component="a"
href={item.href}
target={item.openNewTab ? '_blank' : undefined}
withBorder
sx={{
border:'0.1rem solid transparent',
borderRadius:'0',
borderBottomColor:(widget.properties.layout === 'vertical' && index < widget.properties.items.length - 1) ? '#343740' : 'transparent',
borderRightColor:(widget.properties.layout === 'horizontal' && index < widget.properties.items.length - 1) ? '#343740' : 'transparent',
backgroundColor: 'transparent',
'&:hover': { backgroundColor: fn.primaryColor().concat('40'),}, //'40' = 25% opacity
flex:'1 1 auto'
}}
display="flex"
>
<BookmarkItemContent item={item} />
<BookmarkItemContent item={item}/>
</Card>
))}
</Flex>
Expand All @@ -256,22 +287,28 @@ function BookmarkWidgetTile({ widget }: BookmarkWidgetTileProps) {
}
}

const BookmarkItemContent = ({ item }: { item: BookmarkItem }) => (
<Group>
<Image src={item.iconUrl} width={30} height={30} fit="contain" withPlaceholder />
const BookmarkItemContent = ({ item }: { item: BookmarkItem }) => {
const { colorScheme } = useMantineTheme();
return (
<Group spacing="0rem 1rem">
<Image src={item.iconUrl} width={47} height={47} fit="contain" withPlaceholder />
<Stack spacing={0}>
<Text>{item.name}</Text>
<Text color="dimmed" size="sm">
<Text size="md">{item.name}</Text>
<Text
color={colorScheme === 'dark' ? "gray.6" : "gray.7"}
size="sm"
hidden={item.hideLink}
>
{new URL(item.href).hostname}
</Text>
</Stack>
</Group>
);
)};

const useStyles = createStyles(() => ({
grid: {
display: 'grid',
gap: 20,
gap: 10,
gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
},
autoGridItem: {
Expand Down

0 comments on commit cd81475

Please sign in to comment.