mirror of
https://github.com/duckietm/Nitro-V3.git
synced 2026-06-19 15:06:20 +00:00
🆙 Complete rebuild of toolbar / catalog / inventory make it 100% mobile friendly Take #1
This commit is contained in:
duckietm
@@ -27,7 +27,6 @@
|
||||
"guides.enabled": true,
|
||||
"housekeeping.enabled": true,
|
||||
"toolbar.hide.quests": true,
|
||||
"catalog.style.new": true,
|
||||
"show.google.ads": false,
|
||||
"loginview": {
|
||||
"images": {
|
||||
@@ -39,28 +38,6 @@
|
||||
"right": "${asset.url}/c_images/reception/US_right.png",
|
||||
"right.repeat": "${asset.url}/c_images/reception/US_top_right.png"
|
||||
},
|
||||
"widgets": {
|
||||
"slot.1.widget": "promoarticle",
|
||||
"slot.1.conf": {},
|
||||
"slot.2.widget": "widgetcontainer",
|
||||
"slot.2.conf": {
|
||||
"image": "${image.library.url}web_promo_small/spromo_Canal_Bundle.png",
|
||||
"texts": "2021NitroPromo",
|
||||
"btnLink": ""
|
||||
},
|
||||
"slot.3.widget": "",
|
||||
"slot.3.conf": {},
|
||||
"slot.4.widget": "",
|
||||
"slot.4.conf": {},
|
||||
"slot.5.widget": "",
|
||||
"slot.5.conf": {},
|
||||
"slot.6.widget": "",
|
||||
"slot.6.conf": {
|
||||
"campaign": ""
|
||||
},
|
||||
"slot.7.widget": "",
|
||||
"slot.7.conf": {}
|
||||
}
|
||||
},
|
||||
"navigator.room.models": [
|
||||
{
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { AddLinkEventTracker, ILinkEventTracker, RemoveLinkEventTracker } from '@nitrots/nitro-renderer';
|
||||
import { FC, useEffect } from 'react';
|
||||
import { FaCog, FaEdit, FaEye, FaEyeSlash, FaPlus, FaTrash } from 'react-icons/fa';
|
||||
import { CatalogType, GetConfigurationValue, LocalizeText } from '../../api';
|
||||
import { CatalogType, LocalizeText } from '../../api';
|
||||
import { Column, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common';
|
||||
import { useCatalogActions, useCatalogData, useCatalogUiState, useHasPermission } from '../../hooks';
|
||||
import { CatalogAdminProvider, useCatalogAdmin } from './CatalogAdminContext';
|
||||
|
||||
@@ -1,331 +0,0 @@
|
||||
import { AddLinkEventTracker, ILinkEventTracker, RemoveLinkEventTracker } from '@nitrots/nitro-renderer';
|
||||
import { FC, useEffect, useState } from 'react';
|
||||
import { FaCog, FaEdit, FaEye, FaEyeSlash, FaHeart, FaPlus, FaStar, FaTrash } from 'react-icons/fa';
|
||||
import { CatalogType, LocalizeText } from '../../api';
|
||||
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../common';
|
||||
import { useCatalogActions, useCatalogData, useCatalogFavorites, useCatalogUiState, useHasPermission } from '../../hooks';
|
||||
import { CatalogAdminProvider, useCatalogAdmin } from './CatalogAdminContext';
|
||||
import { CatalogAdminOfferEditView } from './views/admin/CatalogAdminOfferEditView';
|
||||
import { CatalogAdminPageEditView } from './views/admin/CatalogAdminPageEditView';
|
||||
import { CatalogBuildersClubStatusView } from './views/catalog-header/CatalogBuildersClubStatusView';
|
||||
import { CatalogIconView } from './views/catalog-icon/CatalogIconView';
|
||||
import { CatalogFavoritesView } from './views/favorites/CatalogFavoritesView';
|
||||
import { CatalogGiftView } from './views/gift/CatalogGiftView';
|
||||
import { CatalogNavigationView } from './views/navigation/CatalogNavigationView';
|
||||
import { CatalogSearchView } from './views/page/common/CatalogSearchView';
|
||||
import { GetCatalogLayout } from './views/page/layout/GetCatalogLayout';
|
||||
import { MarketplacePostOfferView } from './views/page/layout/marketplace/MarketplacePostOfferView';
|
||||
|
||||
const CatalogModernViewInner: FC<{}> = () =>
|
||||
{
|
||||
const { rootNode = null, currentPage = null, searchResult = null } = useCatalogData();
|
||||
const { isVisible = false, setIsVisible = null, navigationHidden = false, setNavigationHidden = null, activeNodes = [], setSearchResult = null, currentType = CatalogType.NORMAL } = useCatalogUiState();
|
||||
const { openPageByName = null, openPageByOfferId = null, activateNode = null, openCatalogByType = null, toggleCatalogByType = null } = useCatalogActions();
|
||||
const catalogAdmin = useCatalogAdmin();
|
||||
const adminMode = catalogAdmin?.adminMode ?? false;
|
||||
const setAdminMode = catalogAdmin?.setAdminMode ?? (() =>
|
||||
{});
|
||||
const hasPendingChanges = catalogAdmin?.hasPendingChanges ?? false;
|
||||
const publishCatalog = catalogAdmin?.publishCatalog ?? (() =>
|
||||
{});
|
||||
const loading = catalogAdmin?.loading ?? false;
|
||||
const { favoriteOfferIds, favoritePageIds } = useCatalogFavorites();
|
||||
const [ showFavorites, setShowFavorites ] = useState(false);
|
||||
|
||||
const isMod = useHasPermission('acc_catalogfurni');
|
||||
const totalFavs = favoriteOfferIds.length + favoritePageIds.length;
|
||||
const buildersClubHeaderStyle = (currentType === CatalogType.BUILDER)
|
||||
? { borderColor: '#d79d2e', borderBottomColor: '#000', background: 'linear-gradient(180deg, #d89f2d 0%, #c68515 100%)' }
|
||||
: undefined;
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
const getCatalogTypeFromLink = (type?: string) =>
|
||||
{
|
||||
switch((type || '').toLowerCase())
|
||||
{
|
||||
case 'bc':
|
||||
case 'builder':
|
||||
case 'buildersclub':
|
||||
case 'builders_club':
|
||||
return CatalogType.BUILDER;
|
||||
default:
|
||||
return CatalogType.NORMAL;
|
||||
}
|
||||
};
|
||||
|
||||
const linkTracker: ILinkEventTracker = {
|
||||
linkReceived: (url: string) =>
|
||||
{
|
||||
const parts = url.split('/');
|
||||
|
||||
if(parts.length < 2) return;
|
||||
|
||||
switch(parts[1])
|
||||
{
|
||||
case 'show':
|
||||
if(parts.length > 2)
|
||||
{
|
||||
openCatalogByType(getCatalogTypeFromLink(parts[2]));
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
setIsVisible(true);
|
||||
return;
|
||||
case 'hide':
|
||||
setIsVisible(false);
|
||||
return;
|
||||
case 'toggle':
|
||||
if(parts.length > 2)
|
||||
{
|
||||
toggleCatalogByType(getCatalogTypeFromLink(parts[2]));
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
setIsVisible(prevValue => !prevValue);
|
||||
return;
|
||||
case 'open':
|
||||
if(parts.length > 2)
|
||||
{
|
||||
if(parts.length === 4)
|
||||
{
|
||||
switch(parts[2])
|
||||
{
|
||||
case 'offerId':
|
||||
openPageByOfferId(parseInt(parts[3]));
|
||||
return;
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
openPageByName(parts[2]);
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
setIsVisible(true);
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
},
|
||||
eventUrlPrefix: 'catalog/'
|
||||
};
|
||||
|
||||
AddLinkEventTracker(linkTracker);
|
||||
|
||||
return () => RemoveLinkEventTracker(linkTracker);
|
||||
}, [ setIsVisible, openPageByOfferId, openPageByName, openCatalogByType, toggleCatalogByType ]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{ isVisible &&
|
||||
<NitroCardView className="nitro-catalog w-[780px] h-[520px]" uniqueKey="catalog">
|
||||
<NitroCardHeaderView className={ currentType === CatalogType.BUILDER ? 'builders-club-card-header' : '' } headerText={ LocalizeText('catalog.title') } onCloseClick={ () => setIsVisible(false) } style={ buildersClubHeaderStyle } />
|
||||
<NitroCardContentView classNames={ [ 'p-0!', 'overflow-hidden!' ] }>
|
||||
{ /* Admin banner */ }
|
||||
{ adminMode &&
|
||||
<div className="flex items-center justify-between bg-warning text-dark text-[10px] font-bold px-3 py-0.5 uppercase tracking-wider" style={ { textShadow: '0 1px 0 rgba(255,255,255,0.3)' } }>
|
||||
<span>⚙ Admin Mode</span>
|
||||
<button
|
||||
className={ `px-3 py-0.5 rounded text-[10px] font-bold uppercase cursor-pointer transition-all ${ hasPendingChanges ? 'bg-success text-white animate-pulse shadow-md' : 'bg-white/50 text-dark hover:bg-success hover:text-white' }` }
|
||||
disabled={ loading }
|
||||
onClick={ () => publishCatalog() }
|
||||
>
|
||||
{ loading ? '...' : hasPendingChanges ? '⬆ Publish' : '⬆ Publish' }
|
||||
</button>
|
||||
</div> }
|
||||
|
||||
<CatalogBuildersClubStatusView />
|
||||
<div className="flex min-h-0 flex-1">
|
||||
{ /* === LEFT SIDEBAR === */ }
|
||||
<div className="group/rail flex flex-col w-[52px] hover:w-[175px] min-w-[52px] bg-card-grid-item border-r-2 border-card-grid-item-border py-1.5 gap-px overflow-y-auto overflow-x-hidden transition-[width] duration-200 ease-in-out">
|
||||
|
||||
{ /* Favorites toggle */ }
|
||||
<div
|
||||
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-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">
|
||||
{ totalFavs }
|
||||
</span> }
|
||||
</div>
|
||||
<span className={ `text-[11px] font-bold whitespace-nowrap opacity-0 group-hover/rail:opacity-100 transition-opacity duration-200 ${ showFavorites ? 'text-white' : '' }` }>{ LocalizeText('catalog.favorites') }</span>
|
||||
</div>
|
||||
|
||||
<div className="border-b border-card-grid-item-border mx-2 my-0.5" />
|
||||
|
||||
{ /* Admin: root page actions */ }
|
||||
{ adminMode && rootNode &&
|
||||
<div className="flex items-center gap-1 mx-1 px-1.5 py-1 opacity-0 group-hover/rail:opacity-100 transition-opacity">
|
||||
<button
|
||||
className="flex items-center gap-1 text-[9px] text-success hover:text-green-800 cursor-pointer transition-colors"
|
||||
title={ LocalizeText('catalog.admin.new.root.category') }
|
||||
onClick={ () => catalogAdmin.createPage({ caption: 'New Category', captionSave: 'New Category', catalogMode: currentType, pageLayout: 'default_3x3', iconImage: 0, minRank: 1, visible: '1', enabled: '1', orderNum: 99, parentId: rootNode.pageId }) }
|
||||
>
|
||||
<FaPlus className="text-[8px]" />
|
||||
<span className="whitespace-nowrap">{ LocalizeText('catalog.admin.new') }</span>
|
||||
</button>
|
||||
<button
|
||||
className="flex items-center gap-1 text-[9px] text-primary hover:text-dark cursor-pointer transition-colors"
|
||||
title={ LocalizeText('catalog.admin.edit.root') }
|
||||
onClick={ () =>
|
||||
{
|
||||
catalogAdmin.setEditingPageNode(null); catalogAdmin.setEditingRootPage(true); catalogAdmin.setEditingPageData(true);
|
||||
} }
|
||||
>
|
||||
<FaEdit className="text-[8px]" />
|
||||
<span className="whitespace-nowrap">{ LocalizeText('catalog.admin.root') }</span>
|
||||
</button>
|
||||
</div> }
|
||||
|
||||
{ /* Category icons */ }
|
||||
{ rootNode && rootNode.children.length > 0 && rootNode.children.map((child, index) =>
|
||||
{
|
||||
if(!adminMode && !child.isVisible) return null;
|
||||
|
||||
const isHidden = !child.isVisible;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={ `${ child.pageId }-${ index }` }
|
||||
className={ `group/cat flex items-center gap-2 mx-1 px-1.5 py-1 rounded cursor-pointer transition-all duration-150 ${ isHidden ? 'opacity-40' : '' } ${ child.isActive ? 'bg-card-grid-item-active border border-card-grid-item-border-active shadow-inner1px' : 'border border-transparent hover:bg-card-grid-item-active' }` }
|
||||
title={ adminMode ? `${ child.localization } [ID: ${ child.pageId }]${ isHidden ? ` (${ LocalizeText('catalog.admin.hidden') })` : '' }` : child.localization }
|
||||
onClick={ () =>
|
||||
{
|
||||
if(searchResult) setSearchResult(null);
|
||||
if(showFavorites) setShowFavorites(false);
|
||||
activateNode(child);
|
||||
} }
|
||||
>
|
||||
<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>
|
||||
<span className={ `text-[11px] whitespace-nowrap overflow-hidden truncate opacity-0 group-hover/rail:opacity-100 transition-opacity duration-200 flex-1 ${ child.isActive ? 'font-bold text-dark' : 'text-gray-700' }` }>
|
||||
{ child.localization }
|
||||
</span>
|
||||
{ /* Admin actions on each root category */ }
|
||||
{ adminMode &&
|
||||
<div className="flex items-center gap-1 opacity-0 group-hover/rail:opacity-100 transition-opacity shrink-0">
|
||||
<div
|
||||
className="w-[18px] h-[18px] rounded flex items-center justify-center hover:bg-primary/20 cursor-pointer transition-colors"
|
||||
title={ `${ LocalizeText('catalog.admin.edit.title') } "${ child.localization }"` }
|
||||
onClick={ e =>
|
||||
{
|
||||
e.stopPropagation();
|
||||
catalogAdmin.setEditingPageNode(child);
|
||||
catalogAdmin.setEditingRootPage(false);
|
||||
catalogAdmin.setEditingPageData(true);
|
||||
} }
|
||||
>
|
||||
<FaEdit className="text-[9px] text-primary" />
|
||||
</div>
|
||||
<div
|
||||
className="w-[18px] h-[18px] rounded flex items-center justify-center hover:bg-warning/20 cursor-pointer transition-colors"
|
||||
title={ isHidden ? LocalizeText('catalog.admin.show') : LocalizeText('catalog.admin.hide') }
|
||||
onClick={ e =>
|
||||
{
|
||||
e.stopPropagation();
|
||||
catalogAdmin.togglePageVisible(child.pageId);
|
||||
} }
|
||||
>
|
||||
{ isHidden
|
||||
? <FaEye className="text-[9px] text-success" />
|
||||
: <FaEyeSlash className="text-[9px] text-muted" /> }
|
||||
</div>
|
||||
<div
|
||||
className="w-[18px] h-[18px] rounded flex items-center justify-center hover:bg-danger/20 cursor-pointer transition-colors"
|
||||
title={ `${ LocalizeText('catalog.admin.delete.title') } "${ child.localization }"` }
|
||||
onClick={ e =>
|
||||
{
|
||||
e.stopPropagation();
|
||||
if(confirm(LocalizeText('catalog.admin.delete.category.confirm', [ 'name' ], [ child.localization ])))
|
||||
{
|
||||
catalogAdmin.deletePage(child.pageId);
|
||||
}
|
||||
} }
|
||||
>
|
||||
<FaTrash className="text-[9px] text-danger" />
|
||||
</div>
|
||||
</div> }
|
||||
</div>
|
||||
);
|
||||
}) }
|
||||
</div>
|
||||
|
||||
{ /* === MAIN AREA === */ }
|
||||
<div className="flex flex-col flex-1 overflow-hidden bg-light">
|
||||
{ /* Toolbar: search + admin */ }
|
||||
<div className="flex items-center gap-2 px-2 py-1.5 bg-card-tab-item border-b border-card-grid-item-border">
|
||||
{ /* Breadcrumb */ }
|
||||
<div className="flex items-center gap-1 text-[11px] text-gray-600 min-w-0 flex-1">
|
||||
<FaStar className="text-[9px] text-primary shrink-0" />
|
||||
{ activeNodes && activeNodes.length > 0
|
||||
? activeNodes.map((node, i) => (
|
||||
<span key={ `${ node.pageId }-${ i }` } className="flex items-center gap-1 min-w-0">
|
||||
{ i > 0 && <span className="text-[8px] opacity-30">›</span> }
|
||||
<span className={ `truncate ${ i === activeNodes.length - 1 ? 'font-bold text-dark' : 'cursor-pointer hover:text-primary' }` }
|
||||
onClick={ i < activeNodes.length - 1 ? () => activateNode(node) : undefined }>
|
||||
{ node.localization }
|
||||
</span>
|
||||
</span>
|
||||
))
|
||||
: <span className="text-muted">{ LocalizeText('catalog.title') }</span> }
|
||||
</div>
|
||||
|
||||
<div className="w-[180px] shrink-0">
|
||||
<CatalogSearchView />
|
||||
</div>
|
||||
|
||||
{ isMod &&
|
||||
<button
|
||||
className={ `flex items-center gap-1 px-2 py-1 rounded text-[10px] font-bold cursor-pointer transition-all border ${ adminMode ? 'bg-warning text-dark border-warning shadow-inner1px' : 'bg-card-grid-item text-gray-600 border-card-grid-item-border hover:bg-primary hover:text-white hover:border-primary' }` }
|
||||
onClick={ () => setAdminMode(!adminMode) }
|
||||
>
|
||||
<FaCog className={ `${ adminMode ? 'animate-spin' : '' }` } style={ adminMode ? { animationDuration: '3s' } : {} } />
|
||||
{ LocalizeText('catalog.admin') }
|
||||
</button> }
|
||||
</div>
|
||||
|
||||
{ /* Content area */ }
|
||||
<div className="flex flex-1 overflow-hidden">
|
||||
{ showFavorites
|
||||
? <div className="flex-1 overflow-auto nitro-card-content-shell">
|
||||
<CatalogFavoritesView onClose={ () => setShowFavorites(false) } />
|
||||
</div>
|
||||
: <>
|
||||
{ !navigationHidden && activeNodes && activeNodes.length > 0 &&
|
||||
<div className="w-[170px] min-w-[170px] border-r-2 border-card-grid-item-border bg-card-grid-item overflow-y-auto py-1">
|
||||
<CatalogNavigationView node={ activeNodes[0] } />
|
||||
</div> }
|
||||
<div className="flex-1 overflow-auto p-2 nitro-card-content-shell">
|
||||
{ adminMode && <CatalogAdminPageEditView /> }
|
||||
{ GetCatalogLayout(currentPage, () => setNavigationHidden(true)) }
|
||||
</div>
|
||||
</> }
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</NitroCardContentView>
|
||||
</NitroCardView> }
|
||||
<CatalogAdminOfferEditView />
|
||||
<CatalogGiftView />
|
||||
<MarketplacePostOfferView />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export const CatalogModernView: FC<{}> = () =>
|
||||
{
|
||||
return (
|
||||
<CatalogAdminProvider>
|
||||
<CatalogModernViewInner />
|
||||
</CatalogAdminProvider>
|
||||
);
|
||||
};
|
||||
@@ -1,20 +1,10 @@
|
||||
import { FC } from 'react';
|
||||
import { GetConfigurationValue } from '../../api';
|
||||
import { useCatalogData } from '../../hooks';
|
||||
import { CatalogClassicView } from './CatalogClassicView';
|
||||
import { CatalogModernView } from './CatalogModernView';
|
||||
|
||||
export const CatalogView: FC<{}> = () =>
|
||||
{
|
||||
const { catalogLocalizationVersion = 0 } = useCatalogData();
|
||||
const useNewStyle = GetConfigurationValue<boolean>('catalog.style.new', false);
|
||||
|
||||
if(useNewStyle) return (
|
||||
<>
|
||||
<div className="hidden" data-catalog-localization-version={ catalogLocalizationVersion } />
|
||||
<CatalogModernView />
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
@@ -43,9 +43,11 @@ export const CatalogLayoutDefaultView: FC<CatalogLayoutProps> = props =>
|
||||
</button>
|
||||
</div> }
|
||||
|
||||
{ /* Product detail card */ }
|
||||
{ /* Product detail card. shrink-0 + visible overflow so the Buy
|
||||
button never gets squeezed off-screen when the grid below
|
||||
holds a lot of items. */ }
|
||||
{ currentOffer &&
|
||||
<div className="nitro-catalog-classic-offer-panel flex gap-0 overflow-hidden">
|
||||
<div className="nitro-catalog-classic-offer-panel flex gap-0 shrink-0">
|
||||
{ /* Preview area */ }
|
||||
<div className="nitro-catalog-classic-offer-preview relative flex items-center justify-center">
|
||||
{ (currentOffer.product.productType !== ProductTypeEnum.BADGE) &&
|
||||
@@ -81,15 +83,16 @@ export const CatalogLayoutDefaultView: FC<CatalogLayoutProps> = props =>
|
||||
<CatalogTotalPriceWidget />
|
||||
{ /* Spinner */ }
|
||||
<CatalogSpinnerWidgetView />
|
||||
{ /* Actions */ }
|
||||
<div className="flex gap-1.5 mt-auto">
|
||||
{ /* Actions - natural flow, no mt-auto so they can't
|
||||
be pushed past the panel's bottom edge. */ }
|
||||
<div className="flex gap-1.5">
|
||||
<CatalogPurchaseWidgetView />
|
||||
</div>
|
||||
</div>
|
||||
</div> }
|
||||
|
||||
{ !currentOffer &&
|
||||
<div className="nitro-catalog-classic-welcome flex items-center gap-3">
|
||||
<div className="nitro-catalog-classic-welcome flex items-center gap-3 shrink-0">
|
||||
{ !!page.localization.getImage(1) &&
|
||||
<img className="w-[70px] h-[70px] object-contain rounded shrink-0" src={ page.localization.getImage(1) } /> }
|
||||
<Text className="text-[11px]! text-muted" dangerouslySetInnerHTML={ { __html: SanitizeHtml(page.localization.getText(0)) } } />
|
||||
|
||||
@@ -58,9 +58,11 @@ export const CatalogLayoutTrophiesView: FC<CatalogLayoutProps> = props =>
|
||||
</button>
|
||||
</div> }
|
||||
|
||||
{ /* Selected trophy card */ }
|
||||
{ /* Selected trophy card. shrink-0 + no overflow-hidden so the
|
||||
Buy button stays inside the panel even when the grid below
|
||||
holds many trophies. */ }
|
||||
{ currentOffer
|
||||
? <div className="flex gap-0 bg-white rounded border-2 border-warning/40 overflow-hidden" style={ { boxShadow: '0 0 8px rgba(255,193,7,0.15)' } }>
|
||||
? <div className="flex gap-0 bg-white rounded border-2 border-warning/40 shrink-0" style={ { boxShadow: '0 0 8px rgba(255,193,7,0.15)' } }>
|
||||
{ /* Preview */ }
|
||||
<div className="w-[120px] min-w-[120px] relative flex items-center justify-center border-r-2 border-warning/30" style={ { background: 'linear-gradient(180deg, #fff9e6 0%, #fff3cc 100%)' } }>
|
||||
{ (currentOffer.product.productType !== ProductTypeEnum.BADGE)
|
||||
@@ -90,7 +92,7 @@ export const CatalogLayoutTrophiesView: FC<CatalogLayoutProps> = props =>
|
||||
<CatalogTotalPriceWidget />
|
||||
{ !canPurchase &&
|
||||
<span className="text-[9px] text-warning italic">{ LocalizeText('catalog.trophies.write.hint') }</span> }
|
||||
<div className="flex gap-1.5 mt-auto">
|
||||
<div className="flex gap-1.5">
|
||||
<CatalogPurchaseWidgetView />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -240,7 +240,7 @@ export const CatalogPurchaseWidgetView: FC<CatalogPurchaseWidgetViewProps> = pro
|
||||
return <Button variant="danger">{ LocalizeText('generic.failed') + ' - ' + LocalizeText('catalog.alert.limited_edition_sold_out.title') }</Button>;
|
||||
case CatalogPurchaseState.NONE:
|
||||
default:
|
||||
return <Button disabled={ (purchaseOptions.extraParamRequired && (!purchaseOptions.extraData || !purchaseOptions.extraData.length)) } onClick={ event => setPurchaseState(CatalogPurchaseState.CONFIRM) }>{ LocalizeText('catalog.purchase_confirmation.' + (currentOffer.isRentOffer ? 'rent' : 'buy')) }</Button>;
|
||||
return <Button variant="success" disabled={ (purchaseOptions.extraParamRequired && (!purchaseOptions.extraData || !purchaseOptions.extraData.length)) } onClick={ event => setPurchaseState(CatalogPurchaseState.CONFIRM) }>{ LocalizeText('catalog.purchase_confirmation.' + (currentOffer.isRentOffer ? 'rent' : 'buy')) }</Button>;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { AddLinkEventTracker, BadgePointLimitsEvent, GetLocalizationManager, GetRoomEngine, ILinkEventTracker, IRoomSession, RemoveLinkEventTracker, RoomEngineObjectEvent, RoomEngineObjectPlacedEvent, RoomPreviewer, RoomSessionEvent } from '@nitrots/nitro-renderer';
|
||||
import { FC, useEffect, useState } from 'react';
|
||||
import { FC, ReactNode, useEffect, useState } from 'react';
|
||||
import { FaAward, FaCouch, FaPaw, FaRobot, FaTag } from 'react-icons/fa';
|
||||
import { GroupItem, LocalizeText, UnseenItemCategory, isObjectMoverRequested, setObjectMoverRequested } from '../../api';
|
||||
import { NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common';
|
||||
import { useInventoryBadges, useInventoryFurni, useInventoryPrefixes, useInventoryTrade, useInventoryUnseenTracker, useMessageEvent, useNitroEvent } from '../../hooks';
|
||||
@@ -19,6 +20,13 @@ const TAB_BADGES: string = 'inventory.badges';
|
||||
const TAB_PREFIXES: string = 'inventory.prefixes';
|
||||
const TABS = [ TAB_FURNITURE, TAB_PETS, TAB_BADGES, TAB_PREFIXES, TAB_BOTS ];
|
||||
const UNSEEN_CATEGORIES = [ UnseenItemCategory.FURNI, UnseenItemCategory.PET, UnseenItemCategory.BADGE, UnseenItemCategory.PREFIX, UnseenItemCategory.BOT ];
|
||||
const TAB_ICONS: Record<string, ReactNode> = {
|
||||
[TAB_FURNITURE]: <FaCouch />,
|
||||
[TAB_PETS]: <FaPaw />,
|
||||
[TAB_BADGES]: <FaAward />,
|
||||
[TAB_PREFIXES]: <FaTag />,
|
||||
[TAB_BOTS]: <FaRobot />
|
||||
};
|
||||
|
||||
export const InventoryView: FC<{}> = props =>
|
||||
{
|
||||
@@ -129,13 +137,13 @@ export const InventoryView: FC<{}> = props =>
|
||||
|
||||
return (
|
||||
<>
|
||||
<NitroCardView className="w-[528px] h-[420px] min-w-[528px] min-h-[420px]" uniqueKey="inventory">
|
||||
<NitroCardView className="nitro-inventory-window w-[528px] h-[420px] min-w-[528px] min-h-[420px]" uniqueKey="inventory">
|
||||
<NitroCardHeaderView
|
||||
headerText={ LocalizeText('inventory.title') }
|
||||
onCloseClick={ onClose } />
|
||||
{ !isTrading &&
|
||||
<>
|
||||
<NitroCardTabsView>
|
||||
<NitroCardTabsView classNames={ [ 'nitro-inventory-tabs-shell' ] }>
|
||||
{ TABS.map((name, index) =>
|
||||
{
|
||||
return (
|
||||
@@ -144,12 +152,13 @@ export const InventoryView: FC<{}> = props =>
|
||||
count={ getCount(UNSEEN_CATEGORIES[index]) }
|
||||
isActive={ (currentTab === name) }
|
||||
onClick={ event => setCurrentTab(name) }>
|
||||
{ LocalizeText(name) }
|
||||
<span className="nitro-inventory-tab-icon" title={ LocalizeText(name) }>{ TAB_ICONS[name] }</span>
|
||||
<span className="nitro-inventory-tab-label">{ LocalizeText(name) }</span>
|
||||
</NitroCardTabsItemView>
|
||||
);
|
||||
}) }
|
||||
</NitroCardTabsView>
|
||||
<div className="flex flex-col overflow-hidden bg-[#DFDFDF] p-2 h-full gap-2">
|
||||
<div className="nitro-inventory-body flex flex-col overflow-hidden p-2 h-full gap-2">
|
||||
{ showFilter &&
|
||||
<InventoryCategoryFilterView
|
||||
badgeCodes={ badgeCodes }
|
||||
@@ -175,7 +184,7 @@ export const InventoryView: FC<{}> = props =>
|
||||
</div>
|
||||
</> }
|
||||
{ isTrading &&
|
||||
<div className="flex flex-col overflow-hidden bg-[#DFDFDF] p-2 h-full">
|
||||
<div className="nitro-inventory-body flex flex-col overflow-hidden p-2 h-full">
|
||||
<InventoryTradeView cancelTrade={ onClose } />
|
||||
</div> }
|
||||
</NitroCardView>
|
||||
|
||||
@@ -87,7 +87,7 @@ export const InventoryCategoryFilterView: FC<InventoryCategoryFilterViewProps> =
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex gap-1 rounded p-1 bg-[#C9C9C9] shrink-0"
|
||||
className="nitro-inventory-filter-bar flex gap-1 rounded p-1 shrink-0"
|
||||
style={ { width: currentTab === TAB_BADGES ? '320px' : '100%' } }>
|
||||
<div className="relative flex flex-1 items-center">
|
||||
<NitroInput
|
||||
|
||||
@@ -69,8 +69,10 @@ export const InventoryBotView: FC<{
|
||||
<div className="flex flex-col col-span-7 gap-1 overflow-hidden">
|
||||
<InfiniteGrid<IBotItem>
|
||||
columnCount={ 4 }
|
||||
estimateSize={ 110 }
|
||||
itemRender={ item => <InventoryBotItemView botItem={ item } /> }
|
||||
items={ botItems } />
|
||||
items={ botItems }
|
||||
rowGap={ 4 } />
|
||||
</div>
|
||||
<div className="flex flex-col col-span-5">
|
||||
<div className="relative flex flex-col">
|
||||
@@ -80,7 +82,7 @@ export const InventoryBotView: FC<{
|
||||
<div className="flex flex-col justify-between gap-2 grow">
|
||||
<span className="truncate grow">{ selectedBot.botData.name }</span>
|
||||
{ !!roomSession &&
|
||||
<NitroButton onClick={ event => attemptBotPlacement(selectedBot) }>
|
||||
<NitroButton className="nitro-inventory-btn-place" onClick={ event => attemptBotPlacement(selectedBot) }>
|
||||
{ LocalizeText('inventory.furni.placetoroom') }
|
||||
</NitroButton> }
|
||||
</div> }
|
||||
|
||||
@@ -147,11 +147,11 @@ export const InventoryFurnitureView: FC<{
|
||||
<span className="text-xs truncate">{ selectedItem.description }</span> }
|
||||
<div className="flex flex-col gap-1">
|
||||
{ !!roomSession &&
|
||||
<NitroButton onClick={ event => attemptItemPlacement(selectedItem) }>
|
||||
<NitroButton className="nitro-inventory-btn-place" onClick={ event => attemptItemPlacement(selectedItem) }>
|
||||
{ LocalizeText('inventory.furni.placetoroom') }
|
||||
</NitroButton> }
|
||||
{ selectedItem.isSellable &&
|
||||
<NitroButton onClick={ event => attemptPlaceMarketplaceOffer(selectedItem) }>
|
||||
<NitroButton className="nitro-inventory-btn-sell" onClick={ event => attemptPlaceMarketplaceOffer(selectedItem) }>
|
||||
{ LocalizeText('inventory.marketplace.sell') }
|
||||
</NitroButton> }
|
||||
</div>
|
||||
|
||||
@@ -84,6 +84,8 @@ export const InventoryPetView: FC<{
|
||||
<div className="flex flex-col col-span-7 gap-1 overflow-hidden">
|
||||
<InfiniteGrid<IPetItem>
|
||||
columnCount={ 6 }
|
||||
estimateSize={ 46 }
|
||||
itemMinWidth={ 46 }
|
||||
itemRender={ item => <InventoryPetItemView petItem={ item } /> }
|
||||
items={ petItems } />
|
||||
</div>
|
||||
@@ -101,7 +103,7 @@ export const InventoryPetView: FC<{
|
||||
<div className="flex flex-col justify-between gap-2 grow">
|
||||
<span className="text-sm truncate grow">{ selectedPet.petData.name }</span>
|
||||
{ !!roomSession &&
|
||||
<NitroButton onClick={ event => attemptPetPlacement(selectedPet) }>
|
||||
<NitroButton className="nitro-inventory-btn-place" onClick={ event => attemptPetPlacement(selectedPet) }>
|
||||
{ LocalizeText('inventory.furni.placetoroom') }
|
||||
</NitroButton> }
|
||||
</div> }
|
||||
|
||||
@@ -84,12 +84,16 @@ export const RareValuesView: FC<{}> = () =>
|
||||
return rows.filter(row => row.name.toLocaleLowerCase().includes(query));
|
||||
}, [ rows, searchValue ]);
|
||||
|
||||
// Reset paging when the underlying list changes (typed in search, data loaded).
|
||||
useEffect(() =>
|
||||
{
|
||||
setVisibleCount(PAGE_SIZE);
|
||||
if(scrollRef.current) scrollRef.current.scrollTop = 0;
|
||||
}, [ filtered ]);
|
||||
|
||||
// Infinite scroll: grow visibleCount by PAGE_SIZE whenever the sentinel
|
||||
// enters the viewport. The root is the scroll container so the trigger
|
||||
// fires reliably inside an in-app modal (no document scroll).
|
||||
useEffect(() =>
|
||||
{
|
||||
if(!isVisible) return;
|
||||
|
||||
@@ -362,9 +362,6 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
|
||||
{ (getTotalUnseen > 0) &&
|
||||
<LayoutItemCountView count={ getTotalUnseen } className="pointer-events-none absolute -right-1 -top-1 z-10" /> }
|
||||
</motion.div>
|
||||
<motion.div variants={ itemVariants }>
|
||||
<ToolbarItemView icon="buildersclub" onClick={ () => CreateLinkEvent('catalog/toggle/builder') } className="tb-icon" />
|
||||
</motion.div>
|
||||
<motion.div variants={ itemVariants } className="relative">
|
||||
<ToolbarItemView icon="inventory" onClick={ () => CreateLinkEvent('inventory/toggle') } className="tb-icon" />
|
||||
{ (getFullCount > 0) &&
|
||||
@@ -384,10 +381,6 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
|
||||
<motion.div variants={ itemVariants }>
|
||||
<ToolbarItemView icon="wired-tools" onClick={ openMonitor } className="tb-icon" />
|
||||
</motion.div> }
|
||||
{ isInRoom &&
|
||||
<motion.div variants={ itemVariants }>
|
||||
<ToolbarItemView icon="camera" onClick={ () => CreateLinkEvent('camera/toggle') } className="tb-icon" />
|
||||
</motion.div> }
|
||||
{ (isInRoom && youtubeEnabled) &&
|
||||
<motion.div variants={ itemVariants }>
|
||||
<ToolbarItemView icon="youtube" onClick={ openYouTubePlayer } className="tb-icon" />
|
||||
@@ -396,20 +389,6 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
|
||||
<motion.div variants={ itemVariants }>
|
||||
<ToolbarItemView icon="soundboard" onClick={ () => CreateLinkEvent('soundboard/toggle') } className="tb-icon" />
|
||||
</motion.div> }
|
||||
{ isMod &&
|
||||
<motion.div variants={ itemVariants } className="relative">
|
||||
<ToolbarItemView icon="modtools" onClick={ () => CreateLinkEvent('mod-tools/toggle') } className="tb-icon" />
|
||||
{ (openTicketsCount > 0) &&
|
||||
<LayoutItemCountView count={ openTicketsCount } className="pointer-events-none absolute -right-1 -top-1 z-10" /> }
|
||||
</motion.div> }
|
||||
{ (isHk && hkEnabled) &&
|
||||
<motion.div variants={ itemVariants }>
|
||||
<ToolbarItemView icon="housekeeping" onClick={ () => CreateLinkEvent('housekeeping/toggle') } className="tb-icon" />
|
||||
</motion.div> }
|
||||
{ isMod &&
|
||||
<motion.div variants={ itemVariants }>
|
||||
<ToolbarItemView icon="furnieditor" onClick={ () => CreateLinkEvent('furni-editor/toggle') } className="tb-icon" />
|
||||
</motion.div> }
|
||||
<motion.div variants={ itemVariants } className="relative">
|
||||
<ToolbarItemView icon="friendall" onClick={ () => CreateLinkEvent('friends/toggle') } className="tb-icon" />
|
||||
{ (requests.length > 0) &&
|
||||
@@ -417,6 +396,38 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
{ /* Mobile side tools — moved out of the bottom bar into a
|
||||
vertical pill stack on the left edge so the bottom bar has
|
||||
room. Always present (Builders Club), plus camera in-room
|
||||
and the staff-only tools when permitted. */ }
|
||||
<motion.div
|
||||
initial="hidden"
|
||||
animate={ visibilityVariant }
|
||||
variants={ mobileNavVariants }
|
||||
transition={ NAV_TRANSITION }
|
||||
className={ `fixed left-1 top-1/2 z-40 flex -translate-y-1/2 flex-col items-center gap-2 rounded-[12px] border border-white/8 bg-[rgba(10,10,12,0.58)] px-[4px] py-[6px] shadow-[0_6px_18px_rgba(0,0,0,0.18)] ${ mobileOnlyClasses }` }>
|
||||
<motion.div variants={ itemVariants }>
|
||||
<ToolbarItemView icon="buildersclub" onClick={ () => CreateLinkEvent('catalog/toggle/builder') } className="tb-icon" />
|
||||
</motion.div>
|
||||
{ isInRoom &&
|
||||
<motion.div variants={ itemVariants }>
|
||||
<ToolbarItemView icon="camera" onClick={ () => CreateLinkEvent('camera/toggle') } className="tb-icon" />
|
||||
</motion.div> }
|
||||
{ isMod &&
|
||||
<motion.div variants={ itemVariants } className="relative">
|
||||
<ToolbarItemView icon="modtools" onClick={ () => CreateLinkEvent('mod-tools/toggle') } className="tb-icon" />
|
||||
{ (openTicketsCount > 0) &&
|
||||
<LayoutItemCountView count={ openTicketsCount } className="pointer-events-none absolute -right-1 -top-1 z-10" /> }
|
||||
</motion.div> }
|
||||
{ (isHk && hkEnabled) &&
|
||||
<motion.div variants={ itemVariants }>
|
||||
<ToolbarItemView icon="housekeeping" onClick={ () => CreateLinkEvent('housekeeping/toggle') } className="tb-icon" />
|
||||
</motion.div> }
|
||||
{ isMod &&
|
||||
<motion.div variants={ itemVariants }>
|
||||
<ToolbarItemView icon="furnieditor" onClick={ () => CreateLinkEvent('furni-editor/toggle') } className="tb-icon" />
|
||||
</motion.div> }
|
||||
</motion.div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -494,6 +505,14 @@ const TOOLBAR_STYLES = `
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
/* Keep each icon at its natural size so the mobile bar scrolls
|
||||
horizontally instead of squashing the items into each other.
|
||||
(Default flex-shrink:1 let the fixed-size icon backgrounds overlap
|
||||
once enough icons were present to exceed the bar width.) */
|
||||
.tb-bar-scroll > * {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tb-bar-scroll::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -1,10 +1,52 @@
|
||||
/* ---------------------------------------------------------------------------
|
||||
* Catalog "classic" window — Habbo mobile shop redesign.
|
||||
*
|
||||
* Palette (from the mobile shop mockup):
|
||||
* --cat-blue #4b7a94 header / app chrome
|
||||
* --cat-blue-dark #385d73 header borders
|
||||
* --cat-ink #233a47 strong outlines / active tab border
|
||||
* --cat-strip #d9e2e8 tab strip + footer background
|
||||
* --cat-tab #b7c7d1 inactive tab fill
|
||||
* --cat-tab-border #7a9cb0 tab outline
|
||||
* --cat-panel #eef2f5 sidebar / search panels
|
||||
* --cat-sub #e1e7ec sub-node rows
|
||||
* --cat-line #b7c7d1 card / divider lines
|
||||
* --cat-canvas #d4dadf isometric preview canvas
|
||||
* --cat-canvas-2 #c9cfd4 preview checker tiles
|
||||
* --cat-select #3a82a7 selected card outline
|
||||
* --cat-select-bg #f0f5f8 selected card fill
|
||||
* --cat-gold #f7d673 price badge fill
|
||||
* --cat-gold-border #d4af37 price badge outline
|
||||
* --cat-gold-ink #4a3300 price badge text
|
||||
* --cat-buy #009900 buy button
|
||||
* ------------------------------------------------------------------------- */
|
||||
|
||||
.nitro-catalog-classic-window {
|
||||
--cat-blue: #4b7a94;
|
||||
--cat-blue-dark: #385d73;
|
||||
--cat-ink: #233a47;
|
||||
--cat-strip: #d9e2e8;
|
||||
--cat-tab: #b7c7d1;
|
||||
--cat-tab-border: #7a9cb0;
|
||||
--cat-panel: #eef2f5;
|
||||
--cat-sub: #e1e7ec;
|
||||
--cat-line: #b7c7d1;
|
||||
--cat-canvas: #d4dadf;
|
||||
--cat-canvas-2: #c9cfd4;
|
||||
--cat-select: #3a82a7;
|
||||
--cat-select-bg: #f0f5f8;
|
||||
--cat-gold: #f7d673;
|
||||
--cat-gold-border: #d4af37;
|
||||
--cat-gold-ink: #4a3300;
|
||||
--cat-buy: #009900;
|
||||
|
||||
width: 640px !important;
|
||||
height: 600px !important;
|
||||
max-width: 640px !important;
|
||||
min-width: 640px !important;
|
||||
min-height: 600px !important;
|
||||
max-height: 600px !important;
|
||||
background: #ffffff !important;
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-window .nitro-card-title {
|
||||
@@ -17,48 +59,62 @@
|
||||
max-height: 38px;
|
||||
}
|
||||
|
||||
/* Blue Habbo-mobile header. */
|
||||
.nitro-catalog-classic-window .nitro-card-header {
|
||||
background: var(--cat-blue);
|
||||
border-color: var(--cat-blue);
|
||||
border-bottom-color: var(--cat-ink);
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-admin-banner {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.18);
|
||||
background: linear-gradient(180deg, #f4d45d 0%, #d8b43e 100%);
|
||||
}
|
||||
|
||||
/* Tab strip — light blue-grey shelf with tab "folders". */
|
||||
.nitro-catalog-classic-tabs-shell {
|
||||
flex-wrap: nowrap;
|
||||
gap: 1px;
|
||||
min-height: 30px;
|
||||
max-height: 30px;
|
||||
padding: 0 6px;
|
||||
gap: 2px;
|
||||
min-height: 32px;
|
||||
max-height: 32px;
|
||||
padding: 4px 6px 0;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
align-items: end;
|
||||
background: #e7e8df;
|
||||
border-bottom: 1px solid #b8beb4;
|
||||
background: var(--cat-strip);
|
||||
border-bottom: 2px solid var(--cat-ink);
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-tabs-shell .nitro-card-tab-item {
|
||||
min-height: 28px;
|
||||
padding: 5px 10px 4px;
|
||||
border: 1px solid #8f8f8b;
|
||||
padding: 5px 12px 4px;
|
||||
border: 1px solid var(--cat-tab-border);
|
||||
border-bottom: 0;
|
||||
border-radius: 5px 5px 0 0;
|
||||
background: linear-gradient(180deg, #fafaf7 0%, #dde2d9 100%);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
|
||||
background: var(--cat-tab);
|
||||
color: var(--cat-ink);
|
||||
box-shadow: none;
|
||||
white-space: nowrap;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-tabs-shell .nitro-card-tab-item:hover {
|
||||
background: linear-gradient(180deg, #ffffff 0%, #e7ece4 100%);
|
||||
background: #c7d4dd;
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-tabs-shell .nitro-card-tab-item-active {
|
||||
background: #f2f2eb;
|
||||
transform: translateY(0);
|
||||
background: #ffffff;
|
||||
color: #000000;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
border-color: var(--cat-ink);
|
||||
box-shadow: inset 0 -1px 0 #ffffff;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-content-shell {
|
||||
padding: 6px 8px 8px !important;
|
||||
background: #ffffff !important;
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-stage {
|
||||
@@ -82,75 +138,83 @@
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-search-shell {
|
||||
padding: 3px;
|
||||
border: 1px solid #a7aba1;
|
||||
padding: 4px;
|
||||
border: 1px solid var(--cat-line);
|
||||
border-radius: 4px;
|
||||
background: linear-gradient(180deg, #f9f8f2 0%, #eaede5 100%);
|
||||
background: var(--cat-panel);
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-search-shell input {
|
||||
height: 18px;
|
||||
height: 20px;
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
border-width: 1px !important;
|
||||
border-color: #8f9588 !important;
|
||||
border-color: var(--cat-tab-border) !important;
|
||||
border-radius: 3px !important;
|
||||
background: #fff !important;
|
||||
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.08);
|
||||
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-search-shell svg {
|
||||
color: #61645b !important;
|
||||
color: #5b7080 !important;
|
||||
}
|
||||
|
||||
/* Sidebar category tree — flat rows that echo the mockup's landscape sidebar. */
|
||||
.nitro-catalog-classic-navigation-shell {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
padding: 3px 2px 3px 3px;
|
||||
border: 1px solid #a7aba1;
|
||||
padding: 4px 0;
|
||||
border: 1px solid var(--cat-line);
|
||||
border-radius: 4px;
|
||||
background: linear-gradient(180deg, #f1f2ec 0%, #d8ddd3 100%);
|
||||
background: var(--cat-panel);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-navigation-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-navigation-node.is-child {
|
||||
margin-left: 10px;
|
||||
.nitro-catalog-classic-navigation-node.is-child .nitro-catalog-classic-navigation-item {
|
||||
padding-left: 22px;
|
||||
background: var(--cat-sub);
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-navigation-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
min-height: 21px;
|
||||
padding: 1px 6px 1px 5px;
|
||||
border: 1px solid #bdc2ba;
|
||||
border-radius: 4px;
|
||||
background: linear-gradient(180deg, #f6f7f2 0%, #e6e9e1 100%);
|
||||
color: #2e2e2e;
|
||||
gap: 6px;
|
||||
min-height: 28px;
|
||||
padding: 4px 10px;
|
||||
border: 0;
|
||||
border-left: 4px solid transparent;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
color: var(--cat-ink);
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.12s ease, border-color 0.12s ease;
|
||||
transition: background-color 0.12s ease;
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-navigation-node.is-child .nitro-catalog-classic-navigation-item {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-navigation-item:hover {
|
||||
background: linear-gradient(180deg, #ffffff 0%, #ebeee6 100%);
|
||||
border-color: #9ea79b;
|
||||
background: #dde6ec;
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-navigation-item.is-active {
|
||||
background: linear-gradient(180deg, #dae7f0 0%, #c4d2de 100%);
|
||||
border-color: #8e9ba5;
|
||||
background: #ffffff;
|
||||
border-left-color: var(--cat-blue);
|
||||
color: #000000;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-navigation-item.is-drag-over {
|
||||
outline: 2px solid rgba(48, 114, 140, 0.35);
|
||||
outline-offset: 1px;
|
||||
outline: 2px solid rgba(58, 130, 167, 0.4);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-navigation-icon {
|
||||
@@ -188,18 +252,19 @@
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-navigation-caret {
|
||||
color: #676d66 !important;
|
||||
color: #5b7080 !important;
|
||||
}
|
||||
|
||||
/* Right-hand content column. */
|
||||
.nitro-catalog-classic-layout-shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
border: 1px solid #a7aba1;
|
||||
border: 1px solid var(--cat-line);
|
||||
border-radius: 4px;
|
||||
background: linear-gradient(180deg, #eceee7 0%, #dfe4da 100%);
|
||||
background: #ffffff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -207,10 +272,10 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
min-height: 66px;
|
||||
padding: 5px 7px;
|
||||
border-bottom: 1px solid #c8cdc3;
|
||||
background: linear-gradient(180deg, #f6f6f2 0%, #e9ece4 100%);
|
||||
min-height: 0;
|
||||
padding: 6px 8px;
|
||||
border-bottom: 1px solid var(--cat-line);
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-layout-hero {
|
||||
@@ -234,7 +299,7 @@
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
padding: 6px;
|
||||
background: #f2f2eb;
|
||||
background: #ffffff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -242,58 +307,91 @@
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* Offer / detail card — the mockup's preview + info panel. */
|
||||
.nitro-catalog-classic-offer-panel,
|
||||
.nitro-catalog-classic-welcome {
|
||||
border: 1px solid #bfc4bc;
|
||||
border: 1px solid var(--cat-line);
|
||||
border-radius: 6px;
|
||||
background: linear-gradient(180deg, #ffffff 0%, #f3f3ed 100%);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-offer-panel {
|
||||
min-height: 132px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Isometric checkered preview canvas, straight from the mockup. */
|
||||
.nitro-catalog-classic-offer-preview {
|
||||
width: 136px;
|
||||
min-width: 136px;
|
||||
padding: 8px;
|
||||
border-right: 1px solid #c9cec5;
|
||||
background: linear-gradient(180deg, #eef2ea 0%, #dde3d8 100%);
|
||||
border-right: 1px solid var(--cat-line);
|
||||
background-color: var(--cat-canvas);
|
||||
background-image:
|
||||
linear-gradient(30deg, var(--cat-canvas-2) 25%, transparent 25%),
|
||||
linear-gradient(-30deg, var(--cat-canvas-2) 25%, transparent 25%),
|
||||
linear-gradient(30deg, transparent 75%, var(--cat-canvas-2) 75%),
|
||||
linear-gradient(-30deg, transparent 75%, var(--cat-canvas-2) 75%);
|
||||
background-size: 30px 17px;
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-offer-info {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
/* Solid-gold price pills (mockup price badge). */
|
||||
.nitro-catalog-classic-offer-info .rounded-full {
|
||||
background: var(--cat-gold) !important;
|
||||
border-color: var(--cat-gold-border) !important;
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-offer-info .rounded-full,
|
||||
.nitro-catalog-classic-offer-info .rounded-full * {
|
||||
color: var(--cat-gold-ink) !important;
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-welcome {
|
||||
min-height: 128px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
/* Product grid. */
|
||||
.nitro-catalog-classic-grid-shell {
|
||||
min-height: 150px;
|
||||
padding: 4px;
|
||||
border: 1px solid #bcc2b8;
|
||||
padding: 6px;
|
||||
border: 1px solid var(--cat-line);
|
||||
border-radius: 6px;
|
||||
background: linear-gradient(180deg, #f5f5f0 0%, #e4e7de 100%);
|
||||
background: #ffffff;
|
||||
height: auto;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-grid {
|
||||
gap: 4px !important;
|
||||
gap: 6px !important;
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-window .layout-grid-item {
|
||||
height: 54px;
|
||||
border: 1px solid #b8beb6 !important;
|
||||
border-radius: 6px !important;
|
||||
background-color: #d7dde2;
|
||||
border: 1px solid var(--cat-line) !important;
|
||||
border-radius: 4px !important;
|
||||
background-color: #ffffff;
|
||||
background-image: none;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
|
||||
box-shadow: none;
|
||||
transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-window .layout-grid-item:hover {
|
||||
background-color: var(--cat-select-bg) !important;
|
||||
border-color: var(--cat-select) !important;
|
||||
box-shadow: 0 0 0 1px rgba(58, 130, 167, 0.2);
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-window .layout-grid-item.is-active {
|
||||
background-color: #e5ebef !important;
|
||||
border-color: #8f978b !important;
|
||||
background-color: var(--cat-select-bg) !important;
|
||||
border-color: var(--cat-select) !important;
|
||||
border-width: 2px !important;
|
||||
box-shadow: 0 0 0 1px rgba(58, 130, 167, 0.35);
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-grid-offer-icon {
|
||||
@@ -309,9 +407,9 @@
|
||||
min-height: 56px;
|
||||
margin-bottom: 6px;
|
||||
padding: 4px 6px;
|
||||
border: 1px solid #bec3ba;
|
||||
border: 1px solid var(--cat-line);
|
||||
border-radius: 6px;
|
||||
background: linear-gradient(180deg, #ffffff 0%, #f2f2ec 100%);
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-window .nitro-catalog-header img {
|
||||
@@ -322,13 +420,19 @@
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
/* Green "buy" action button (mockup "Acquista"). */
|
||||
.nitro-catalog-classic-offer-info .bg-\[\#00800b\] {
|
||||
background-color: var(--cat-buy) !important;
|
||||
border-color: #007a00 !important;
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-breadcrumb {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
min-height: 16px;
|
||||
overflow: hidden;
|
||||
color: #666a63;
|
||||
color: #5b7080;
|
||||
font-size: 10px;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
@@ -342,9 +446,10 @@
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-breadcrumb-separator {
|
||||
color: #9ea395;
|
||||
color: #94a7b3;
|
||||
}
|
||||
|
||||
/* Scrollbars — blue-grey to match the chrome. */
|
||||
.nitro-catalog-classic-navigation-shell::-webkit-scrollbar,
|
||||
.nitro-catalog-classic-layout-container :is(.overflow-auto, .nitro-card-content-shell, .nitro-catalog-classic-grid-shell)::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
@@ -352,43 +457,166 @@
|
||||
|
||||
.nitro-catalog-classic-navigation-shell::-webkit-scrollbar-track,
|
||||
.nitro-catalog-classic-layout-container :is(.overflow-auto, .nitro-card-content-shell, .nitro-catalog-classic-grid-shell)::-webkit-scrollbar-track {
|
||||
border-left: 1px solid #c2c6be;
|
||||
background: #dde2d8;
|
||||
border-left: 1px solid var(--cat-line);
|
||||
background: var(--cat-panel);
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-navigation-shell::-webkit-scrollbar-thumb,
|
||||
.nitro-catalog-classic-layout-container :is(.overflow-auto, .nitro-card-content-shell, .nitro-catalog-classic-grid-shell)::-webkit-scrollbar-thumb {
|
||||
border: 1px solid #7d8680;
|
||||
border: 1px solid var(--cat-tab-border);
|
||||
border-radius: 6px;
|
||||
background: linear-gradient(180deg, #a8b3ae 0%, #89948f 100%);
|
||||
background: linear-gradient(180deg, #a9bcc9 0%, #89a0ae 100%);
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-navigation-shell::-webkit-scrollbar-button:single-button:vertical:decrement,
|
||||
.nitro-catalog-classic-layout-container :is(.overflow-auto, .nitro-card-content-shell, .nitro-catalog-classic-grid-shell)::-webkit-scrollbar-button:single-button:vertical:decrement {
|
||||
height: 12px;
|
||||
background: #dde2d8;
|
||||
background: var(--cat-panel);
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-navigation-shell::-webkit-scrollbar-button:single-button:vertical:increment,
|
||||
.nitro-catalog-classic-layout-container :is(.overflow-auto, .nitro-card-content-shell, .nitro-catalog-classic-grid-shell)::-webkit-scrollbar-button:single-button:vertical:increment {
|
||||
height: 12px;
|
||||
background: #dde2d8;
|
||||
background: var(--cat-panel);
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
/* ---------------------------------------------------------------------------
|
||||
* Responsive layout
|
||||
*
|
||||
* Three tiers:
|
||||
* > 1024px desktop, fixed 640x600 (default rules above)
|
||||
* 641px - 1024px tablet, fluid card, single-column stage
|
||||
* <= 640px phone, full-screen modal with stacked layout +
|
||||
* larger touch targets and a horizontally
|
||||
* scrollable tab strip
|
||||
*
|
||||
* A separate short-landscape branch trims chrome when height <= 480px
|
||||
* (typical phone-in-landscape) so the grid still has room to breathe.
|
||||
* ------------------------------------------------------------------------- */
|
||||
|
||||
/* Tablet (portrait + landscape between phone and desktop). */
|
||||
@media (max-width: 1024px) and (min-width: 641px) {
|
||||
.nitro-catalog-classic-window {
|
||||
width: min(calc(100vw - 16px), 570px) !important;
|
||||
width: min(calc(100vw - 24px), 720px) !important;
|
||||
min-width: 0 !important;
|
||||
height: min(calc(100vh - 16px), 635px) !important;
|
||||
max-width: calc(100vw - 24px) !important;
|
||||
height: min(calc(100vh - 24px), 720px) !important;
|
||||
min-height: 0 !important;
|
||||
max-width: calc(100vw - 16px) !important;
|
||||
max-height: calc(100vh - 24px) !important;
|
||||
}
|
||||
|
||||
/* Drop the sidebar to a horizontal row above the content so the grid
|
||||
* has the full card width on the narrower tablet viewports. */
|
||||
.nitro-catalog-classic-stage {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-sidebar {
|
||||
max-height: 180px;
|
||||
max-height: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Phone — portrait and landscape. */
|
||||
@media (max-width: 640px) {
|
||||
.nitro-catalog-classic-window {
|
||||
width: 100vw !important;
|
||||
min-width: 0 !important;
|
||||
max-width: 100vw !important;
|
||||
height: 100vh !important;
|
||||
min-height: 0 !important;
|
||||
max-height: 100vh !important;
|
||||
/* Drop the soft drop-shadow / outer border on full-screen so it
|
||||
* blends with the viewport edges. */
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* Tabs become a horizontally scrollable strip with bigger tap targets
|
||||
* (≥ 44px tall is the WCAG / iOS recommendation). */
|
||||
.nitro-catalog-classic-tabs-shell {
|
||||
min-height: 44px;
|
||||
max-height: 44px;
|
||||
padding: 4px 4px 0;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-tabs-shell .nitro-card-tab-item {
|
||||
min-height: 42px;
|
||||
padding: 6px 14px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-content-shell {
|
||||
padding: 6px !important;
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-stage {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
/* Sidebar above content, capped so most of the viewport is the grid. */
|
||||
.nitro-catalog-classic-sidebar {
|
||||
max-height: 33vh;
|
||||
}
|
||||
|
||||
/* Search input + nav items grow into real touch targets. */
|
||||
.nitro-catalog-classic-search-shell input {
|
||||
height: 28px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-navigation-item {
|
||||
min-height: 40px;
|
||||
padding: 6px 12px;
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-navigation-label {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* Bigger furni icons in the grid so a fingertip can hit them. */
|
||||
.nitro-catalog-classic-window .layout-grid-item {
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
/* Modal corner radius cleanups so the full-screen look is consistent. */
|
||||
.nitro-catalog-classic-window .nitro-card-header-shell,
|
||||
.nitro-catalog-classic-window .nitro-card-content-shell {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Phone in landscape — short viewport. Trim header / hero so the grid keeps
|
||||
* usable height. Triggers regardless of portrait/landscape on any short
|
||||
* screen, which is also the right answer for very small laptop windows. */
|
||||
@media (max-height: 480px) {
|
||||
.nitro-catalog-classic-window {
|
||||
height: 100vh !important;
|
||||
max-height: 100vh !important;
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-window .nitro-card-header-shell {
|
||||
min-height: 32px;
|
||||
max-height: 32px;
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-tabs-shell {
|
||||
min-height: 38px;
|
||||
max-height: 38px;
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-layout-header-shell {
|
||||
min-height: 0;
|
||||
padding: 3px 6px;
|
||||
}
|
||||
|
||||
/* Hide the marketing hero image in landscape - it's the first thing to
|
||||
* sacrifice when the user clearly wants more grid. */
|
||||
.nitro-catalog-classic-layout-hero {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-sidebar {
|
||||
max-height: 26vh;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,241 @@
|
||||
/* ---------------------------------------------------------------------------
|
||||
* Inventory window — Habbo mobile inventory skin.
|
||||
*
|
||||
* Matches the mobile inventory mockup and stays consistent with the catalog
|
||||
* redesign: blue header, beige body, folder tabs, framed preview canvas,
|
||||
* teal-accented item slots, and chunky green "place" / red "sell" buttons.
|
||||
*
|
||||
* Palette (from the mockup):
|
||||
* --inv-blue #4a7d8c header
|
||||
* --inv-beige #e2e0d6 window / body / slot fill
|
||||
* --inv-tab #c7c5ba inactive tab fill
|
||||
* --inv-line #919088 slot / preview outline
|
||||
* --inv-accent #4a7d8c selected slot glow + count text
|
||||
* --inv-place* green place button
|
||||
* --inv-sell* red sell button
|
||||
* ------------------------------------------------------------------------- */
|
||||
|
||||
.nitro-inventory-window {
|
||||
--inv-blue: #4a7d8c;
|
||||
--inv-beige: #e2e0d6;
|
||||
--inv-tab: #c7c5ba;
|
||||
--inv-line: #919088;
|
||||
--inv-accent: #4a7d8c;
|
||||
--inv-place: #5ca843;
|
||||
--inv-place-dark: #397025;
|
||||
--inv-place-light: #8ee374;
|
||||
--inv-sell: #d13e31;
|
||||
--inv-sell-dark: #881e15;
|
||||
--inv-sell-light: #f07e74;
|
||||
--inv-border: #6b6f73;
|
||||
|
||||
background: var(--inv-beige) !important;
|
||||
}
|
||||
|
||||
/* Blue Habbo header. */
|
||||
.nitro-inventory-window .nitro-card-header {
|
||||
background: var(--inv-blue);
|
||||
border-color: var(--inv-blue);
|
||||
border-bottom-color: var(--inv-border);
|
||||
box-shadow: inset 0 2px 0 #709da9, inset 0 -2px 0 #315863;
|
||||
}
|
||||
|
||||
/* Tab strip — beige shelf with folder tabs. Light, low-contrast outlines. */
|
||||
.nitro-inventory-window .nitro-inventory-tabs-shell {
|
||||
background: var(--inv-beige);
|
||||
gap: 4px;
|
||||
padding: 6px 8px 0;
|
||||
border-bottom: 1px solid #b9c4ca;
|
||||
}
|
||||
|
||||
.nitro-inventory-window .nitro-inventory-tabs-shell .nitro-card-tab-item {
|
||||
background: var(--inv-tab);
|
||||
border: 1px solid #aeb9bf;
|
||||
border-bottom: 0;
|
||||
border-radius: 6px 6px 0 0;
|
||||
color: #8a9aa2;
|
||||
font-weight: 600;
|
||||
box-shadow: inset 1px 1px 0 #fff;
|
||||
}
|
||||
|
||||
.nitro-inventory-window .nitro-inventory-tabs-shell .nitro-card-tab-item:hover {
|
||||
background: #d2d0c6;
|
||||
color: #6b7d86;
|
||||
}
|
||||
|
||||
.nitro-inventory-window .nitro-inventory-tabs-shell .nitro-card-tab-item-active {
|
||||
background: #fff;
|
||||
color: #566a74;
|
||||
border-color: #93a1a8;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
/* Tabs show the icon first, then the text label (desktop). */
|
||||
.nitro-inventory-window .nitro-inventory-tab-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 5px;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* Body — grey-beige backdrop. */
|
||||
.nitro-inventory-window .nitro-inventory-body {
|
||||
background: var(--inv-beige);
|
||||
}
|
||||
|
||||
/* Filter bar — white search box + beige select, hard outlines. */
|
||||
.nitro-inventory-window .nitro-inventory-filter-bar {
|
||||
background: #fff;
|
||||
border: 2px solid var(--inv-border);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.nitro-inventory-window .nitro-inventory-filter-bar select {
|
||||
background: var(--inv-beige);
|
||||
border: 2px solid var(--inv-border) !important;
|
||||
border-radius: 4px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Item slots — beige tiles, grey outline, teal glow when selected. */
|
||||
.nitro-inventory-window .bg-card-grid-item {
|
||||
background-color: var(--inv-beige) !important;
|
||||
}
|
||||
|
||||
.nitro-inventory-window .border-card-grid-item-border {
|
||||
border-color: var(--inv-line) !important;
|
||||
}
|
||||
|
||||
.nitro-inventory-window .bg-card-grid-item-active {
|
||||
background-color: #fff !important;
|
||||
}
|
||||
|
||||
.nitro-inventory-window .border-card-grid-item-active {
|
||||
border-color: var(--inv-border) !important;
|
||||
box-shadow: 0 0 0 2px var(--inv-accent);
|
||||
}
|
||||
|
||||
/* Count badge — white pill with a teal number (mockup). */
|
||||
.nitro-inventory-window .bg-red-700 {
|
||||
background-color: #fff !important;
|
||||
color: var(--inv-accent) !important;
|
||||
border-color: #75746e !important;
|
||||
}
|
||||
|
||||
/* Preview canvas — white framed box around the room previewer. */
|
||||
.nitro-inventory-window .shadow-room-previewer {
|
||||
background-color: #fff;
|
||||
border: 2px solid var(--inv-line);
|
||||
}
|
||||
|
||||
/* Action buttons — chunky beveled Habbo buttons. */
|
||||
.nitro-inventory-window .nitro-inventory-btn-place,
|
||||
.nitro-inventory-window .nitro-inventory-btn-sell {
|
||||
border: 2px solid var(--inv-border) !important;
|
||||
border-radius: 4px;
|
||||
color: #fff !important;
|
||||
font-weight: 700;
|
||||
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.nitro-inventory-window .nitro-inventory-btn-place {
|
||||
background: var(--inv-place) !important;
|
||||
box-shadow: inset -2px -2px 0 var(--inv-place-dark), inset 2px 2px 0 var(--inv-place-light);
|
||||
}
|
||||
|
||||
.nitro-inventory-window .nitro-inventory-btn-place:hover {
|
||||
background: #67b94e !important;
|
||||
}
|
||||
|
||||
.nitro-inventory-window .nitro-inventory-btn-sell {
|
||||
background: var(--inv-sell) !important;
|
||||
box-shadow: inset -2px -2px 0 var(--inv-sell-dark), inset 2px 2px 0 var(--inv-sell-light);
|
||||
}
|
||||
|
||||
.nitro-inventory-window .nitro-inventory-btn-sell:hover {
|
||||
background: #db4d40 !important;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
* Responsive layout
|
||||
*
|
||||
* The window ships a fixed 528x420 size (Tailwind utilities on the card).
|
||||
* Mirror the catalog's three tiers so it stays usable down to phones:
|
||||
* > 1024px desktop, fixed size (utilities)
|
||||
* 641px - 1024px tablet, fluid card
|
||||
* <= 640px phone, full-screen + stacked grid / preview
|
||||
* ------------------------------------------------------------------------- */
|
||||
|
||||
/* Tablet. */
|
||||
@media (max-width: 1024px) and (min-width: 641px) {
|
||||
.nitro-inventory-window {
|
||||
width: min(calc(100vw - 24px), 640px) !important;
|
||||
min-width: 0 !important;
|
||||
max-width: calc(100vw - 24px) !important;
|
||||
height: min(calc(100vh - 24px), 560px) !important;
|
||||
min-height: 0 !important;
|
||||
max-height: calc(100vh - 24px) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Phone — full-screen, single-column stack (grid on top, preview below). */
|
||||
@media (max-width: 640px) {
|
||||
.nitro-inventory-window {
|
||||
width: 100vw !important;
|
||||
min-width: 0 !important;
|
||||
max-width: 100vw !important;
|
||||
height: 100vh !important;
|
||||
min-height: 0 !important;
|
||||
max-height: 100vh !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
.nitro-inventory-window .nitro-card-header-shell,
|
||||
.nitro-inventory-window .nitro-card-content-shell {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* Icon-only tabs spread evenly across the width — text labels don't
|
||||
* fit on a phone, so swap them for the per-tab glyph. */
|
||||
.nitro-inventory-window .nitro-inventory-tabs-shell {
|
||||
flex-wrap: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.nitro-inventory-window .nitro-inventory-tabs-shell .nitro-card-tab-item {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
padding: 8px 0;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nitro-inventory-window .nitro-inventory-tab-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nitro-inventory-window .nitro-inventory-tab-icon {
|
||||
margin-right: 0;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
/* Stack the item grid above the preview / action panel. */
|
||||
.nitro-inventory-window .grid.grid-cols-12 {
|
||||
grid-template-columns: minmax(0, 1fr) !important;
|
||||
grid-template-rows: minmax(0, 1fr) auto !important;
|
||||
}
|
||||
|
||||
.nitro-inventory-window .grid.grid-cols-12 > .col-span-7,
|
||||
.nitro-inventory-window .grid.grid-cols-12 > .col-span-5 {
|
||||
grid-column: 1 / -1 !important;
|
||||
}
|
||||
|
||||
/* Roomier touch targets for the action buttons. */
|
||||
.nitro-inventory-window .nitro-inventory-btn-place,
|
||||
.nitro-inventory-window .nitro-inventory-btn-sell {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
@@ -1,10 +1,24 @@
|
||||
import { NavigatorSearchComposer, NavigatorSearchEvent, NavigatorSearchResultSet } from '@nitrots/nitro-renderer';
|
||||
import { NavigatorSearchComposer, NavigatorSearchEvent,
|
||||
NavigatorSearchResultSet } from '@nitrots/nitro-renderer';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { SendMessageComposer } from '../../api';
|
||||
import { useMessageEvent } from '../events';
|
||||
import { useNavigatorUiStore } from './navigatorUiStore';
|
||||
|
||||
|
||||
/**
|
||||
* Navigator search hook.
|
||||
*
|
||||
* Fires NavigatorSearchComposer(tabCode, filter) whenever the active tab
|
||||
* or filter changes (skipped when tabCode is '' — initial state, before
|
||||
* metadata arrives). Holds the latest NavigatorSearchResultSet that
|
||||
* matches the active tab.
|
||||
*
|
||||
* The TanStack Query variant (see useNitroQuery) was tried earlier but
|
||||
* its one-shot listener doesn't always reach NavigatorSearchEvent in
|
||||
* production builds with older renderer SDKs; the persistent
|
||||
* useMessageEvent listener used here matches the rest of the codebase
|
||||
* and reliably catches every server push.
|
||||
*/
|
||||
export const useNavigatorSearch = () =>
|
||||
{
|
||||
const tabCode = useNavigatorUiStore(s => s.currentTabCode);
|
||||
@@ -26,6 +40,9 @@ export const useNavigatorSearch = () =>
|
||||
const result = event.getParser()?.result;
|
||||
if(!result) return;
|
||||
|
||||
// Accept any incoming result for the currently active tab. Server
|
||||
// can push extra results unprompted (e.g. after a room is
|
||||
// created); accepting them keeps the panel in sync.
|
||||
if(tabCode && result.code !== tabCode) return;
|
||||
|
||||
setSearchResult(result);
|
||||
|
||||
@@ -4,6 +4,9 @@ import { CommandDefinition, LocalizeText } from '../../../api';
|
||||
import { createNitroStore } from '../../../state/createNitroStore';
|
||||
import { useMessageEvent } from '../../events';
|
||||
|
||||
// Client-only commands are static; safe to keep at module scope. The
|
||||
// `descriptionKey` is a LocalizeText slot resolved at merge time so
|
||||
// hotels in different locales see the right language.
|
||||
const CLIENT_COMMANDS: { key: string; descriptionKey: string }[] = [
|
||||
// Room effects
|
||||
{ key: 'shake', descriptionKey: 'chatcmd.client.shake' },
|
||||
@@ -32,6 +35,18 @@ const CLIENT_COMMANDS: { key: string; descriptionKey: string }[] = [
|
||||
{ key: 'nitro', descriptionKey: 'chatcmd.client.info' },
|
||||
];
|
||||
|
||||
/**
|
||||
* Server-pushed command cache. Lives in a Zustand store (instead of
|
||||
* module-level `let` variables) so the React Compiler can analyze the
|
||||
* surrounding hook cleanly, and so a future test can `setState({…})`
|
||||
* a deterministic fixture without monkey-patching the module.
|
||||
*
|
||||
* The `isListenerRegistered` flag prevents the renderer from getting
|
||||
* two AvailableCommandsEvent listeners — one from the module-level
|
||||
* pre-mount registration (which captures the server's reply that lands
|
||||
* during login, BEFORE any React widget mounts) and one from the
|
||||
* in-hook `useMessageEvent` (which covers later rank-change refreshes).
|
||||
*/
|
||||
interface ChatCommandStore
|
||||
{
|
||||
serverCommands: CommandDefinition[];
|
||||
@@ -62,9 +77,15 @@ const ensureGlobalListener = (): void =>
|
||||
GetCommunication().registerMessageEvent(event);
|
||||
useChatCommandStore.getState().markListenerRegistered();
|
||||
}
|
||||
catch {}
|
||||
catch
|
||||
{
|
||||
// Communication not ready yet — the in-hook useMessageEvent
|
||||
// below covers later mounts.
|
||||
}
|
||||
};
|
||||
|
||||
// Try once at module load so the server's response landing before any
|
||||
// React mount still hits the cache.
|
||||
ensureGlobalListener();
|
||||
|
||||
export const useChatCommandSelector = (chatValue: string) =>
|
||||
@@ -76,9 +97,13 @@ export const useChatCommandSelector = (chatValue: string) =>
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
// Cover the case where the module-level registration failed
|
||||
// because GetCommunication() wasn't ready at import time.
|
||||
ensureGlobalListener();
|
||||
}, []);
|
||||
|
||||
// Late updates (rank change, etc.) — go through the store so all
|
||||
// consumers see the same data.
|
||||
useMessageEvent<AvailableCommandsEvent>(AvailableCommandsEvent, event =>
|
||||
{
|
||||
const parser = event.getParser();
|
||||
@@ -142,11 +167,13 @@ export const useChatCommandSelector = (chatValue: string) =>
|
||||
setDismissed(true);
|
||||
}, []);
|
||||
|
||||
// Reset dismissed when chatValue changes to a new command start
|
||||
useEffect(() =>
|
||||
{
|
||||
if(chatValue === ':' || chatValue === '') setDismissed(false);
|
||||
}, [ chatValue ]);
|
||||
|
||||
// Reset selectedIndex when filtered list changes
|
||||
useEffect(() =>
|
||||
{
|
||||
setSelectedIndex(0);
|
||||
|
||||
@@ -37,6 +37,8 @@ import './css/login/LoginView.css';
|
||||
|
||||
import './css/icons/icons.css';
|
||||
|
||||
import './css/inventory/InventoryView.css';
|
||||
|
||||
|
||||
import './css/layout/LayoutTrophy.css';
|
||||
|
||||
|
||||
Reference in New Issue
Block a user