Skip to content

Commit

Permalink
💄 Fix scrollbar bookmark widget (ajnart#957)
Browse files Browse the repository at this point in the history
  • Loading branch information
manuel-rw authored May 20, 2023
1 parent f8e0ffa commit 336aff1
Showing 1 changed file with 15 additions and 4 deletions.
19 changes: 15 additions & 4 deletions src/widgets/bookmark/BookmarkWidgetTile.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ import { z } from 'zod';
import { IconSelector } from '../../components/IconSelector/IconSelector';
import { defineWidget } from '../helper';
import { IDraggableEditableListInputValue, IWidget } from '../widgets';
import { useEditModeStore } from '../../components/Dashboard/Views/useEditModeStore';

interface BookmarkItem {
id: string;
Expand Down Expand Up @@ -175,14 +176,19 @@ interface BookmarkWidgetTileProps {
function BookmarkWidgetTile({ widget }: BookmarkWidgetTileProps) {
const { t } = useTranslation('modules/bookmark');
const { classes } = useStyles();
const { enabled: isEditModeEnabled } = useEditModeStore();

if (widget.properties.items.length === 0) {
return (
<Stack align="center">
<IconPlaylistX />
<Stack spacing={0}>
<Title order={5} align="center">{t('card.noneFound.title')}</Title>
<Text align="center" size="sm">{t('card.noneFound.text')}</Text>
<Title order={5} align="center">
{t('card.noneFound.title')}
</Title>
<Text align="center" size="sm">
{t('card.noneFound.text')}
</Text>
</Stack>
</Stack>
);
Expand All @@ -191,7 +197,7 @@ function BookmarkWidgetTile({ widget }: BookmarkWidgetTileProps) {
switch (widget.properties.layout) {
case 'autoGrid':
return (
<Box className={classes.grid} display="grid">
<Box className={classes.grid} display="grid" mr={isEditModeEnabled ? 'xl' : undefined}>
{widget.properties.items.map((item: BookmarkItem, index) => (
<Card
className={classes.autoGridItem}
Expand All @@ -209,7 +215,12 @@ function BookmarkWidgetTile({ widget }: BookmarkWidgetTileProps) {
case 'horizontal':
case 'vertical':
return (
<ScrollArea offsetScrollbars type="always" h="100%">
<ScrollArea
offsetScrollbars
type="always"
h="100%"
mr={isEditModeEnabled ? 'xl' : undefined}
>
<Flex
style={{ flexDirection: widget.properties.layout === 'vertical' ? 'column' : 'row' }}
gap="md"
Expand Down

0 comments on commit 336aff1

Please sign in to comment.