diff --git a/src/common/layout/LayoutGridItem.tsx b/src/common/layout/LayoutGridItem.tsx index e8d66ef..54a7ad4 100644 --- a/src/common/layout/LayoutGridItem.tsx +++ b/src/common/layout/LayoutGridItem.tsx @@ -24,10 +24,10 @@ export const LayoutGridItem: FC = props => const getClassNames = useMemo(() => { - const newClassNames: string[] = [ 'layout-grid-item', 'border', 'border-2', 'border-[#c4cabf]', 'rounded-[6px]' ]; + const newClassNames: string[] = [ 'layout-grid-item' ]; - if(itemActive) newClassNames.push('bg-[#e4e7df]! border-[#aeb7aa]!'); + if(itemActive) newClassNames.push('is-grid-active', 'bg-[#e4e7df]!'); if(itemUniqueSoldout || (itemUniqueNumber > 0)) newClassNames.push('unique-item'); diff --git a/src/components/catalog/views/page/common/CatalogGridOfferView.tsx b/src/components/catalog/views/page/common/CatalogGridOfferView.tsx index 3926e42..a949177 100644 --- a/src/components/catalog/views/page/common/CatalogGridOfferView.tsx +++ b/src/components/catalog/views/page/common/CatalogGridOfferView.tsx @@ -1,5 +1,5 @@ import { MouseEventType } from '@nitrots/nitro-renderer'; -import { FC, MouseEvent, useMemo, useState } from 'react'; +import { CSSProperties, FC, MouseEvent, useMemo, useState } from 'react'; import { FaHeart } from 'react-icons/fa'; import { CatalogType, GetConfigurationValue, IPurchasableOffer, Offer, ProductTypeEnum } from '../../../../../api'; import { LayoutAvatarImageView, LayoutGridItem, LayoutGridItemProps } from '../../../../../common'; @@ -9,11 +9,12 @@ interface CatalogGridOfferViewProps extends LayoutGridItemProps { offer: IPurchasableOffer; selectOffer: (offer: IPurchasableOffer) => void; + tintColor?: string; } export const CatalogGridOfferView: FC = props => { - const { offer = null, selectOffer = null, itemActive = false, ...rest } = props; + const { offer = null, selectOffer = null, itemActive = false, tintColor = null, ...rest } = props; const [ isMouseDown, setMouseDown ] = useState(false); const { requestOfferToMover = null } = useCatalogActions(); const { currentType = CatalogType.NORMAL } = useCatalogUiState(); @@ -113,9 +114,10 @@ export const CatalogGridOfferView: FC = props => return ( = props =>
+ { LocalizeText('catalog.bundlewidget.price') }
} diff --git a/src/components/catalog/views/page/layout/CatalogLayoutGuildCustomFurniView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutGuildCustomFurniView.tsx index 863b39e..6f381c7 100644 --- a/src/components/catalog/views/page/layout/CatalogLayoutGuildCustomFurniView.tsx +++ b/src/components/catalog/views/page/layout/CatalogLayoutGuildCustomFurniView.tsx @@ -1,7 +1,8 @@ -import { FC } from 'react'; +import { StringDataType } from '@nitrots/nitro-renderer'; +import { FC, useMemo } from 'react'; import { FaExchangeAlt, FaSyncAlt } from 'react-icons/fa'; import { Column } from '../../../../../common'; -import { useCatalogData, useUserGroups } from '../../../../../hooks'; +import { useCatalogData, useCatalogUiState, useUserGroups } from '../../../../../hooks'; import { CatalogFirstProductSelectorWidgetView } from '../widgets/CatalogFirstProductSelectorWidgetView'; import { CatalogGuildBadgeWidgetView } from '../widgets/CatalogGuildBadgeWidgetView'; import { CatalogGuildSelectorWidgetView } from '../widgets/CatalogGuildSelectorWidgetView'; @@ -14,9 +15,29 @@ import { CatalogLayoutProps } from './CatalogLayout.types'; export const CatalogLayouGuildCustomFurniView: FC = () => { const { currentOffer = null, roomPreviewer = null } = useCatalogData(); + const { purchaseOptions = null } = useCatalogUiState(); const { data: groups = null } = useUserGroups(); const hasGroups = !!(groups && groups.length); + const tintColor = useMemo(() => + { + const previewStuffData = purchaseOptions?.previewStuffData ?? null; + + if(!previewStuffData) return null; + + const colorA = (previewStuffData as StringDataType).getValue(3); + const colorB = (previewStuffData as StringDataType).getValue(4); + + if(!colorA || !colorA.length) return null; + + if(colorB && colorB.length && (colorB !== colorA)) + { + return `linear-gradient(90deg, #${ colorA } 0 50%, #${ colorB } 50% 100%)`; + } + + return `#${ colorA }`; + }, [ purchaseOptions ]); + return ( <> @@ -38,7 +59,7 @@ export const CatalogLayouGuildCustomFurniView: FC = () => }
- +
{ !!currentOffer &&
diff --git a/src/components/catalog/views/page/layout/CatalogLayoutGuildForumView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutGuildForumView.tsx index 0145230..07ec5de 100644 --- a/src/components/catalog/views/page/layout/CatalogLayoutGuildForumView.tsx +++ b/src/components/catalog/views/page/layout/CatalogLayoutGuildForumView.tsx @@ -33,7 +33,9 @@ export const CatalogLayouGuildForumView: FC = props =>
{ hasGroups && - } +
+ +
} } diff --git a/src/components/catalog/views/page/widgets/CatalogItemGridWidgetView.tsx b/src/components/catalog/views/page/widgets/CatalogItemGridWidgetView.tsx index e34dbb8..c46e4e3 100644 --- a/src/components/catalog/views/page/widgets/CatalogItemGridWidgetView.tsx +++ b/src/components/catalog/views/page/widgets/CatalogItemGridWidgetView.tsx @@ -7,12 +7,12 @@ import { CatalogGridOfferView } from '../common/CatalogGridOfferView'; interface CatalogItemGridWidgetViewProps extends AutoGridProps { - + tintColor?: string; } export const CatalogItemGridWidgetView: FC = props => { - const { columnCount = 5, children = null, ...rest } = props; + const { columnCount = 5, tintColor = null, children = null, ...rest } = props; const { currentOffer = null, currentPage = null } = useCatalogData(); const { selectCatalogOffer = null } = useCatalogActions(); const catalogAdmin = useCatalogAdmin(); @@ -26,13 +26,6 @@ export const CatalogItemGridWidgetView: FC = pro if(elementRef && elementRef.current) elementRef.current.scrollTop = 0; }, [ currentPage ]); - // Drag-and-drop handlers — hooks MUST run unconditionally so the - // hook order stays stable when currentPage flips from null to a - // real value (the `if(!currentPage) return null` below would - // otherwise hide these from the first render and React would flag - // "Rendered more hooks than during the previous render"). Bodies - // are safe to evaluate pre-load: currentPage? optional chaining - // already guards the only access inside handleDrop. const handleDragStart = useCallback((index: number) => { setDragIndex(index); @@ -96,6 +89,7 @@ export const CatalogItemGridWidgetView: FC = pro itemActive={ (currentOffer && (currentOffer.offerId === offer.offerId)) } offer={ offer } selectOffer={ selectOffer } + tintColor={ tintColor } /> ); diff --git a/src/css/catalog/CatalogClassicView.css b/src/css/catalog/CatalogClassicView.css index 5f602b3..b7c6293 100644 --- a/src/css/catalog/CatalogClassicView.css +++ b/src/css/catalog/CatalogClassicView.css @@ -827,40 +827,49 @@ overflow: visible !important; } -.nitro-catalog-classic-window .layout-grid-item { - width: 100% !important; - height: var(--nitro-grid-column-min-height, 70px) !important; - min-width: 0 !important; - min-height: var(--nitro-grid-column-min-height, 70px) !important; - border: 0 !important; - border-radius: 0 !important; - background-image: none !important; - box-shadow: none !important; - overflow: visible !important; -} +@layer utilities { + .nitro-catalog-classic-window .layout-grid-item { + width: 100% !important; + height: var(--nitro-grid-column-min-height, 70px) !important; + min-width: 0 !important; + min-height: var(--nitro-grid-column-min-height, 70px) !important; + border: 0 !important; + border-radius: 0 !important; + background-image: none !important; + box-shadow: none !important; + overflow: visible !important; + } -.nitro-catalog-classic-window .layout-grid-item:not(.has-highlight) { - background-color: transparent !important; -} + .nitro-catalog-classic-window .layout-grid-item:not(.has-highlight) { + background-color: #e4e7df !important; + border: 2px solid transparent !important; + border-radius: 4px !important; + box-shadow: none !important; + } -.nitro-catalog-classic-window .nitro-catalog-classic-pet-breeds .layout-grid-item { - width: 84px !important; - min-width: 84px !important; - height: 74px !important; - min-height: 74px !important; -} + .nitro-catalog-classic-window .nitro-catalog-classic-pet-breeds .layout-grid-item { + width: 84px !important; + min-width: 84px !important; + height: 74px !important; + min-height: 74px !important; + } -.nitro-catalog-classic-window .layout-grid-item:hover { - background-image: none !important; - box-shadow: inset 0 0 0 1px #a1a19b !important; -} + .nitro-catalog-classic-window .layout-grid-item:not(.has-highlight):not(.is-active):hover { + background-image: none !important; + border-color: transparent !important; + box-shadow: none !important; + } -.nitro-catalog-classic-window .layout-grid-item.is-active { - background-image: none !important; - box-shadow: - inset 0 0 0 1px #63c5e9, - inset 2px 2px 0 #ecece4, - inset -2px -2px 0 #ecece4 !important; + .nitro-catalog-classic-window .layout-grid-item.is-active { + background-color: #ffffff !important; + background-image: none !important; + border: 2px solid #62c4e8 !important; + box-shadow: none !important; + } + + .nitro-catalog-classic-window .layout-grid-item.has-guild-tint:not(.has-highlight):not(.is-active) { + background: var(--guild-tint) !important; + } } .nitro-catalog-classic-window .layout-grid-item.has-highlight { @@ -901,13 +910,15 @@ pointer-events: none; } + .nitro-catalog-classic-grid-price { display: flex; flex-direction: row; align-items: center; - justify-content: center; + justify-content: flex-end; gap: 3px; width: 100%; + padding-right: 4px; color: #000; font-size: 11px; font-weight: 700; @@ -963,7 +974,8 @@ .nitro-catalog-classic-grid-price.is-multi-price { height: auto; min-height: 0; - flex-wrap: wrap; + flex-direction: column; + align-items: flex-end; row-gap: 1px; } @@ -971,7 +983,7 @@ display: inline-flex; align-items: center; justify-content: center; - gap: 1px; + gap: 3px; height: 13px; white-space: nowrap; } @@ -1022,8 +1034,7 @@ padding-right: 2px; } -.nitro-catalog-classic-total-price-slot::before { - content: "Prezzo"; +.nitro-catalog-classic-total-price-label { color: #666; font-size: 11px; line-height: 17px; diff --git a/src/css/index.css b/src/css/index.css index 46f219d..4d5bef5 100644 --- a/src/css/index.css +++ b/src/css/index.css @@ -714,6 +714,12 @@ body { background-position: center; background-repeat: no-repeat; background-color: #cdd3d9; + border: 2px solid #c4cabf; + border-radius: 6px; +} + +.layout-grid-item.is-grid-active { + border-color: #aeb7aa; } .nitro-friends-spritesheet {