🆙 Moved catalogue view to Tailwind

This commit is contained in:
duckietm
2026-03-27 10:08:02 +01:00
parent a095d818a3
commit a4d4764105
6 changed files with 32 additions and 38 deletions
+2 -2
View File
@@ -111,7 +111,7 @@ const CatalogModernViewInner: FC<{}> = () =>
className={ `flex items-center gap-2 mx-1 px-1.5 py-1.5 rounded cursor-pointer transition-all duration-150 ${ showFavorites ? 'bg-primary text-white' : 'hover:bg-card-grid-item-active' }` }
onClick={ () => setShowFavorites(!showFavorites) }
>
<div className="w-[28px] h-[24px] flex items-center justify-center shrink-0 relative">
<div className="w-7 h-6 flex items-center justify-center shrink-0 relative">
<FaHeart className={ `text-xs ${ showFavorites ? 'text-white' : totalFavs > 0 ? 'text-danger' : 'text-muted' }` } />
{ totalFavs > 0 &&
<span className="absolute -top-1 -right-1 min-w-[14px] h-[14px] bg-danger text-white text-[8px] font-bold rounded-full flex items-center justify-center px-0.5 leading-none">
@@ -163,7 +163,7 @@ const CatalogModernViewInner: FC<{}> = () =>
activateNode(child);
} }
>
<div className="w-[28px] h-[24px] flex items-center justify-center shrink-0 relative">
<div className="w-7 h-6 flex items-center justify-center shrink-0 relative">
<CatalogIconView icon={ child.iconId } />
{ isHidden && <FaEyeSlash className="absolute -bottom-0.5 -right-0.5 text-[7px] text-danger" /> }
</div>
@@ -1,20 +1,20 @@
import { FC, useMemo } from 'react';
import { GetConfigurationValue } from '../../../../api';
import { LayoutImage } from '../../../../common';
export interface CatalogIconViewProps
{
icon: number;
className?: string;
}
export const CatalogIconView: FC<CatalogIconViewProps> = props =>
{
const { icon = 0 } = props;
const { icon = 0, className = '' } = props;
const getIconUrl = useMemo(() =>
const iconUrl = useMemo(() =>
{
return ((GetConfigurationValue<string>('catalog.asset.icon.url')).replace('%name%', icon.toString()));
}, [ icon ]);
return <LayoutImage imageUrl={ getIconUrl } style={ { width: 20, height: 20 } } />;
return <img src={ iconUrl } alt="" className={ `w-5 h-5 object-contain image-rendering-pixelated ${ className }` } draggable={ false } />;
};
@@ -19,8 +19,8 @@ export const CatalogRailItemView: FC<CatalogRailItemViewProps> = props =>
title={ node.localization }
onClick={ onClick }
>
<div className="w-[30px] h-[30px] flex items-center justify-center shrink-0">
<CatalogIconView icon={ node.iconId } />
<div className="w-8 h-8 flex items-center justify-center shrink-0">
<CatalogIconView icon={ node.iconId } className="w-6 h-6" />
</div>
<span className={ `text-[11px] font-medium whitespace-nowrap overflow-hidden opacity-0 group-hover:opacity-100 transition-opacity duration-200 truncate ${ isActive ? 'text-catalog-accent' : 'text-catalog-text' }` }>
{ node.localization }
@@ -121,7 +121,7 @@ export const CatalogFavoritesView: FC<CatalogFavoritesViewProps> = props =>
onClick={ () => { openPageByOfferId(fav.offerId); onClose(); } }
>
{ /* Furni icon */ }
<div className="w-[28px] h-[28px] flex items-center justify-center shrink-0 bg-white rounded border border-card-grid-item-border overflow-hidden">
<div className="w-7 h-7 flex items-center justify-center shrink-0 bg-white rounded border border-card-grid-item-border overflow-hidden">
{ fav.iconUrl
? <img className="max-w-full max-h-full object-contain image-rendering-pixelated" src={ fav.iconUrl } />
: fav.nodeIconId !== null
@@ -86,7 +86,7 @@ export const CatalogNavigationItemView: FC<CatalogNavigationItemViewProps> = pro
>
{ adminMode &&
<FaArrowsAlt className="text-[7px] text-muted cursor-grab shrink-0 opacity-0 group-hover/nav:opacity-60" /> }
<div className="w-[20px] h-[20px] flex items-center justify-center shrink-0">
<div className="w-5 h-5 flex items-center justify-center shrink-0">
<CatalogIconView icon={ node.iconId } />
</div>
<span className="flex-1 truncate" title={ adminMode ? `Page ID: ${ node.pageId }` : undefined }>{ node.localization }</span>