aljaz/boris
1
1
Fork 0
mirror of https://github.com/dergigi/boris.git synced 2026-01-07 08:54:25 +01:00
Code Issues Packages Projects Releases Wiki Activity

style: left-align support button, right-align view mode buttons

Browse Source
This commit is contained in:
Gigi
2025-10-15 15:01:25 +02:00
parent 65d330d5ed
commit 99a9709605
2 changed files with 49 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/components/BookmarkList.tsx
View File

@@ -155,46 +155,50 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
</div>
)}
<div className="view-mode-controls">
<IconButton
icon={faHeart}
onClick={() => navigate('/support')}
title="Support Boris"
ariaLabel="Support"
variant="ghost"
style={{ color: friendsColor }}
/>
{onRefresh && (
<div className="view-mode-left">
<IconButton
icon={faRotate}
onClick={onRefresh}
title={lastFetchTime ? `Refresh bookmarks (updated ${formatDistanceToNow(lastFetchTime, { addSuffix: true })})` : 'Refresh bookmarks'}
ariaLabel="Refresh bookmarks"
icon={faHeart}
onClick={() => navigate('/support')}
title="Support Boris"
ariaLabel="Support"
variant="ghost"
disabled={isRefreshing}
spin={isRefreshing}
style={{ color: friendsColor }}
/>
)}
<IconButton
icon={faList}
onClick={() => onViewModeChange('compact')}
title="Compact list view"
ariaLabel="Compact list view"
variant={viewMode === 'compact' ? 'primary' : 'ghost'}
/>
<IconButton
icon={faThLarge}
onClick={() => onViewModeChange('cards')}
title="Cards view"
ariaLabel="Cards view"
variant={viewMode === 'cards' ? 'primary' : 'ghost'}
/>
<IconButton
icon={faImage}
onClick={() => onViewModeChange('large')}
title="Large preview view"
ariaLabel="Large preview view"
variant={viewMode === 'large' ? 'primary' : 'ghost'}
/>
</div>
<div className="view-mode-right">
{onRefresh && (
<IconButton
icon={faRotate}
onClick={onRefresh}
title={lastFetchTime ? `Refresh bookmarks (updated ${formatDistanceToNow(lastFetchTime, { addSuffix: true })})` : 'Refresh bookmarks'}
ariaLabel="Refresh bookmarks"
variant="ghost"
disabled={isRefreshing}
spin={isRefreshing}
/>
)}
<IconButton
icon={faList}
onClick={() => onViewModeChange('compact')}
title="Compact list view"
ariaLabel="Compact list view"
variant={viewMode === 'compact' ? 'primary' : 'ghost'}
/>
<IconButton
icon={faThLarge}
onClick={() => onViewModeChange('cards')}
title="Cards view"
ariaLabel="Cards view"
variant={viewMode === 'cards' ? 'primary' : 'ghost'}
/>
<IconButton
icon={faImage}
onClick={() => onViewModeChange('large')}
title="Large preview view"
ariaLabel="Large preview view"
variant={viewMode === 'large' ? 'primary' : 'ghost'}
/>
</div>
</div>
</div>
)

9
src/styles/layout/sidebar.css
View File

@@ -81,7 +81,14 @@
.view-mode-controls {
display: flex;
align-items: center;
justify-content: center;
justify-content: space-between;
gap: 0.5rem;
}
.view-mode-left,
.view-mode-right {
display: flex;
align-items: center;
gap: 0.5rem;
}