Merge branch '@feature/catalog-changes' into '@fix/fixes'

tab icons, navigation indent, catalog headers See merge request nitro/nitro-react!65
2024-11-30 00:50:50 +01:00 · 2022-08-18 03:10:21 +00:00 · 2022-08-18 03:10:21 +00:00 · 9440f28a9a
commit 9440f28a9a
parent 6f191f518e 55698a006e
7 changed files with 101 additions and 40 deletions
--- a/public/ui-config.json.example
+++ b/public/ui-config.json.example
@ -125,6 +125,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": [
--- 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;
    }

@ -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;
+}
--- 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 &&
-                <NitroCardView uniqueKey="catalog" className="nitro-catalog">
+                <NitroCardView uniqueKey="catalog" className="nitro-catalog" style={ { width: GetConfiguration('catalog.headers') ? '710px' : '' } }>
                    <NitroCardHeaderView headerText={ LocalizeText('catalog.title') } onCloseClick={ event => setIsVisible(false) } />
                    <NitroCardTabsView>
                        { 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 }
+                                } } >
+                                    <Flex gap={ GetConfiguration('catalog.tab.icons') ? 1 : 0 } alignItems="center">
+                                        { GetConfiguration('catalog.tab.icons') && <CatalogIconView icon={ child.iconId } /> }
+                                        { child.localization }
+                                    </Flex>
                                </NitroCardTabsItemView>
                            );
                        }) }
--- a/src/components/catalog/views/catalog-header/CatalogHeaderView.tsx
+++ 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<CatalogHeaderViewProps> = props =>
+{
+    let { image = null } = props;
+
+    const imageEl = useRef<HTMLImageElement>();
+
+    const fallback = useMemo(()=>
+    {
+        return ((GetConfiguration<string>('catalog.asset.image.url')).replace('%name%', 'catalog_header_roombuilder'));
+    },[])
+
+    useEffect(()=> 
+    {
+        if(image == null && imageEl !== null) imageEl.current.src = fallback;
+    },[ image, imageEl,fallback ])
+
+    return <Base className="nitro-catalog-header">
+        <img ref={ imageEl } src={ image } onError={ ({ currentTarget }) => 
+        {
+            currentTarget.src = fallback;
+        }
+        } />
+    </Base>;
+}
--- 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<CatalogNavigationItemViewProps> = props =>
 {
-    const { node = null } = props;
+    const { node = null, child = false } = props;
    const { activateNode = null } = useCatalog();
    
    return (
-        <>
-            <LayoutGridItem gap={ 1 } column={ false } itemActive={ node.isActive } onClick={ event => activateNode(node) }>
+        <Base className="nitro-catalog-navigation-section">
+            <LayoutGridItem gap={ 1 } column={ false } itemActive={ node.isActive } onClick={ event => activateNode(node) } className={ child ? 'inset' : '' }>
                <CatalogIconView icon={ node.iconId } />
                <Text grow truncate>{ node.localization }</Text>
                { node.isBranch &&
                    <FontAwesomeIcon icon={ node.isOpen ? 'caret-up' : 'caret-down' } /> }
            </LayoutGridItem>
            { node.isOpen && node.isBranch &&
-                <CatalogNavigationSetView node={ node } /> }
-        </>
+                <CatalogNavigationSetView node={ node } child={ true } /> }
+        </Base>
    );
 }
--- 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<CatalogNavigationSetViewProps> = props =>
 {
-    const { node = null } = props;
+    const { node = null, child = false } = props;
    
    return (
        <>
@ -17,7 +18,7 @@ export const CatalogNavigationSetView: FC<CatalogNavigationSetViewProps> = props
            {
                if(!n.isVisible) return null;
                    
-                return <CatalogNavigationItemView key={ index } node={ n } />
+                return <CatalogNavigationItemView key={ index } node={ n } child={ child } />
            }) }
        </>
    );
--- 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<CatalogLayoutProps> = props =>
 {
    const { page = null } = props;
-    const { currentOffer = null } = useCatalog();
+    const { currentOffer = null,currentPage } = useCatalog();

    return (
-        <Grid>
-            <Column size={ 7 } overflow="hidden">
-                <CatalogItemGridWidgetView />
-            </Column>
-            <Column center={ !currentOffer } size={ 5 } overflow="hidden">
-                { !currentOffer &&
+        <>
+            <Grid>
+                <Column size={ 7 } overflow="hidden">
+                    { GetConfiguration('catalog.headers') && <CatalogHeaderView image={ currentPage.localization.getImage(0) }/> }
+                    <CatalogItemGridWidgetView />
+                </Column>
+                <Column center={ !currentOffer } size={ 5 } overflow="hidden">
+                    { !currentOffer &&
                    <>
                        { !!page.localization.getImage(1) && <img alt="" src={ page.localization.getImage(1) } /> }
                        <Text center dangerouslySetInnerHTML={ { __html: page.localization.getText(0) } } />
                    </> }
-                { currentOffer &&
+                    { currentOffer &&
                    <>
                        <Flex center overflow="hidden" style={ { height: 140 } }>
                            { (currentOffer.product.productType !== ProductTypeEnum.BADGE) &&
@ -49,7 +52,8 @@ export const CatalogLayoutDefaultView: FC<CatalogLayoutProps> = props =>
                            <CatalogPurchaseWidgetView />
                        </Column>
                    </> }
-            </Column>
-        </Grid>
+                </Column>
+            </Grid>
+        </>
    );
 }