From 55698a006e6b0192d488fdac6afcb373524eeecf Mon Sep 17 00:00:00 2001 From: laynester Date: Fri, 5 Aug 2022 02:01:44 -0400 Subject: [PATCH] tab icons, navigation indent, catalog headers --- public/ui-config.json.example | 2 + src/components/catalog/CatalogView.scss | 46 +++++++++++++------ src/components/catalog/CatalogView.tsx | 16 ++++--- .../catalog-header/CatalogHeaderView.tsx | 33 +++++++++++++ .../navigation/CatalogNavigationItemView.tsx | 13 +++--- .../navigation/CatalogNavigationSetView.tsx | 5 +- .../page/layout/CatalogLayoutDefaultView.tsx | 26 ++++++----- 7 files changed, 101 insertions(+), 40 deletions(-) create mode 100644 src/components/catalog/views/catalog-header/CatalogHeaderView.tsx diff --git a/public/ui-config.json.example b/public/ui-config.json.example index 403bb68a..863d4609 100644 --- a/public/ui-config.json.example +++ b/public/ui-config.json.example @@ -120,6 +120,8 @@ "catalog.asset.url": "${image.library.url}catalogue", "catalog.asset.image.url": "${catalog.asset.url}/%name%.gif", "catalog.asset.icon.url": "${catalog.asset.url}/icon_%name%.png", + "catalog.tab.icons": false, + "catalog.headers": false, "chat.input.maxlength": 100, "chat.styles.disabled": [], "chat.styles": [ diff --git a/src/components/catalog/CatalogView.scss b/src/components/catalog/CatalogView.scss index 4101cd13..dde64cfc 100644 --- a/src/components/catalog/CatalogView.scss +++ b/src/components/catalog/CatalogView.scss @@ -2,7 +2,7 @@ width: $catalog-width; height: $catalog-height; - font[size='16'] { + font[size="16"] { font-size: 20px; } @@ -22,7 +22,7 @@ .nitro-catalog-gift { width: 325px; - + .gift-preview { width: 80px; height: 80px; @@ -37,15 +37,24 @@ } .nitro-catalog-navigation-grid-container { - border-color: #B6BEC5 !important; - background-color: #CDD3D9; + border-color: #b6bec5 !important; + background-color: #cdd3d9; border: 2px solid; + .nitro-catalog-navigation-section { + display: grid; + + .nitro-catalog-navigation-section { + padding-left: 5px; + border-left: 2px solid #b6bec5; + } + } + .layout-grid-item { font-size: $font-size-sm; height: 23px !important; border-color: unset !important; - background-color: #CDD3D9; + background-color: #cdd3d9; border: 0 !important; padding: 1px 3px; @@ -58,23 +67,21 @@ } .nitro-catalog-layout-info-loyalty { - .info-loyalty-content { background-repeat: no-repeat; background-position: top right; - background-image: url('../../assets/images/catalog/diamond_info_illustration.gif'); - padding-right:123px; + background-image: url("../../assets/images/catalog/diamond_info_illustration.gif"); + padding-right: 123px; } .info-image { width: 123px; - height:350px; - background-image: url('../../assets/images/catalog/diamond_info_illustration.gif'); + height: 350px; + background-image: url("../../assets/images/catalog/diamond_info_illustration.gif"); } } .nitro-catalog-layout-vip-buy-grid { - .layout-grid-item { height: 50px !important; max-height: 50px !important; @@ -82,20 +89,19 @@ .icon-hc-banner { width: 68px; height: 40px; - background: url('../../assets/images/catalog/hc_big.png') center no-repeat; + background: url("../../assets/images/catalog/hc_big.png") center + no-repeat; } } } .nitro-catalog-layout-marketplace-grid { - .layout-grid-item { height: 75px !important; } } .nitro-catalog-layout-vip-gifts-grid { - .layout-grid-item { height: 55px !important; max-height: 55px !important; @@ -108,8 +114,18 @@ } .nitro-catalog-layout-bundle-grid { - .layout-grid-item { background-color: transparent; } } + +.nitro-catalog-header { + width: 290px; + height: 60px; + align-self: center; + + display: flex; + justify-content: center; + overflow: hidden; + flex-shrink: 0; +} diff --git a/src/components/catalog/CatalogView.tsx b/src/components/catalog/CatalogView.tsx index 3af9b189..f15fe8d2 100644 --- a/src/components/catalog/CatalogView.tsx +++ b/src/components/catalog/CatalogView.tsx @@ -1,8 +1,9 @@ import { ILinkEventTracker } from '@nitrots/nitro-renderer'; import { FC, useEffect } from 'react'; -import { AddEventLinkTracker, LocalizeText, RemoveLinkEventTracker } from '../../api'; -import { Column, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common'; +import { AddEventLinkTracker, GetConfiguration, LocalizeText, RemoveLinkEventTracker } from '../../api'; +import { Column, Flex, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common'; import { useCatalog } from '../../hooks'; +import { CatalogIconView } from './views/catalog-icon/CatalogIconView'; import { CatalogGiftView } from './views/gift/CatalogGiftView'; import { CatalogNavigationView } from './views/navigation/CatalogNavigationView'; import { GetCatalogLayout } from './views/page/layout/GetCatalogLayout'; @@ -10,7 +11,7 @@ import { MarketplacePostOfferView } from './views/page/layout/marketplace/Market export const CatalogView: FC<{}> = props => { - const { isVisible = false, setIsVisible = null, rootNode = null, currentPage = null, navigationHidden = false, setNavigationHidden = null, activeNodes = [], searchResult = null, setSearchResult = null, openPageByName = null, openPageByOfferId = null, activateNode = null } = useCatalog(); + const { isVisible = false, setIsVisible = null, rootNode = null, currentPage = null, navigationHidden = false, setNavigationHidden = null, activeNodes = [], searchResult = null, setSearchResult = null, openPageByName = null, openPageByOfferId = null, activateNode = null, getNodeById } = useCatalog(); useEffect(() => { @@ -68,7 +69,7 @@ export const CatalogView: FC<{}> = props => return ( <> { isVisible && - + setIsVisible(false) } /> { rootNode && (rootNode.children.length > 0) && rootNode.children.map(child => @@ -81,8 +82,11 @@ export const CatalogView: FC<{}> = props => if(searchResult) setSearchResult(null); activateNode(child); - } }> - { child.localization } + } } > + + { GetConfiguration('catalog.tab.icons') && } + { child.localization } + ); }) } diff --git a/src/components/catalog/views/catalog-header/CatalogHeaderView.tsx b/src/components/catalog/views/catalog-header/CatalogHeaderView.tsx new file mode 100644 index 00000000..e6f02bc2 --- /dev/null +++ b/src/components/catalog/views/catalog-header/CatalogHeaderView.tsx @@ -0,0 +1,33 @@ +import { FC, useEffect, useMemo, useRef } from 'react'; +import { GetConfiguration } from '../../../../api'; +import { Base } from '../../../../common'; + +export interface CatalogHeaderViewProps +{ + image?: string; +} + +export const CatalogHeaderView: FC = props => +{ + let { image = null } = props; + + const imageEl = useRef(); + + const fallback = useMemo(()=> + { + return ((GetConfiguration('catalog.asset.image.url')).replace('%name%', 'catalog_header_roombuilder')); + },[]) + + useEffect(()=> + { + if(image == null && imageEl !== null) imageEl.current.src = fallback; + },[ image, imageEl,fallback ]) + + return + + { + currentTarget.src = fallback; + } + } /> + ; +} diff --git a/src/components/catalog/views/navigation/CatalogNavigationItemView.tsx b/src/components/catalog/views/navigation/CatalogNavigationItemView.tsx index 5eb1c45c..9179edba 100644 --- a/src/components/catalog/views/navigation/CatalogNavigationItemView.tsx +++ b/src/components/catalog/views/navigation/CatalogNavigationItemView.tsx @@ -1,7 +1,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FC } from 'react'; import { ICatalogNode } from '../../../../api'; -import { LayoutGridItem, Text } from '../../../../common'; +import { Base, LayoutGridItem, Text } from '../../../../common'; import { useCatalog } from '../../../../hooks'; import { CatalogIconView } from '../catalog-icon/CatalogIconView'; import { CatalogNavigationSetView } from './CatalogNavigationSetView'; @@ -9,23 +9,24 @@ import { CatalogNavigationSetView } from './CatalogNavigationSetView'; export interface CatalogNavigationItemViewProps { node: ICatalogNode; + child?: boolean; } export const CatalogNavigationItemView: FC = props => { - const { node = null } = props; + const { node = null, child = false } = props; const { activateNode = null } = useCatalog(); return ( - <> - activateNode(node) }> + + activateNode(node) } className={ child ? 'inset' : '' }> { node.localization } { node.isBranch && } { node.isOpen && node.isBranch && - } - + } + ); } diff --git a/src/components/catalog/views/navigation/CatalogNavigationSetView.tsx b/src/components/catalog/views/navigation/CatalogNavigationSetView.tsx index 19f71f47..8bfdd480 100644 --- a/src/components/catalog/views/navigation/CatalogNavigationSetView.tsx +++ b/src/components/catalog/views/navigation/CatalogNavigationSetView.tsx @@ -5,11 +5,12 @@ import { CatalogNavigationItemView } from './CatalogNavigationItemView'; export interface CatalogNavigationSetViewProps { node: ICatalogNode; + child?: boolean; } export const CatalogNavigationSetView: FC = props => { - const { node = null } = props; + const { node = null, child = false } = props; return ( <> @@ -17,7 +18,7 @@ export const CatalogNavigationSetView: FC = props { if(!n.isVisible) return null; - return + return }) } ); diff --git a/src/components/catalog/views/page/layout/CatalogLayoutDefaultView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutDefaultView.tsx index 262685ae..adde3fb8 100644 --- a/src/components/catalog/views/page/layout/CatalogLayoutDefaultView.tsx +++ b/src/components/catalog/views/page/layout/CatalogLayoutDefaultView.tsx @@ -1,7 +1,8 @@ import { FC } from 'react'; -import { ProductTypeEnum } from '../../../../../api'; +import { GetConfiguration, ProductTypeEnum } from '../../../../../api'; import { Column, Flex, Grid, Text } from '../../../../../common'; import { useCatalog } from '../../../../../hooks'; +import { CatalogHeaderView } from '../../catalog-header/CatalogHeaderView'; import { CatalogAddOnBadgeWidgetView } from '../widgets/CatalogAddOnBadgeWidgetView'; import { CatalogItemGridWidgetView } from '../widgets/CatalogItemGridWidgetView'; import { CatalogLimitedItemWidgetView } from '../widgets/CatalogLimitedItemWidgetView'; @@ -14,20 +15,22 @@ import { CatalogLayoutProps } from './CatalogLayout.types'; export const CatalogLayoutDefaultView: FC = props => { const { page = null } = props; - const { currentOffer = null } = useCatalog(); + const { currentOffer = null,currentPage } = useCatalog(); return ( - - - - - - { !currentOffer && + <> + + + { GetConfiguration('catalog.headers') && } + + + + { !currentOffer && <> { !!page.localization.getImage(1) && } } - { currentOffer && + { currentOffer && <> { (currentOffer.product.productType !== ProductTypeEnum.BADGE) && @@ -49,7 +52,8 @@ export const CatalogLayoutDefaultView: FC = props => } - - + + + ); }