nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-26 15:40:51 +01:00
Code Issues Packages Projects Releases Wiki Activity

tab icons, navigation indent, catalog headers

Browse Source
This commit is contained in:
laynester 2022-08-05 02:01:44 -04:00
parent 058397aae0
commit 55698a006e
7 changed files with 101 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/ui-config.json.example
View File

@ -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": [

44
src/components/catalog/CatalogView.scss
View File

@ -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;
}

16
src/components/catalog/CatalogView.tsx
View File

@ -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>
);
}) }

33
src/components/catalog/views/catalog-header/CatalogHeaderView.tsx Normal file
View File

@ -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>;
}

13
src/components/catalog/views/navigation/CatalogNavigationItemView.tsx
View File

@ -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>
);
}

5
src/components/catalog/views/navigation/CatalogNavigationSetView.tsx
View File

@ -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 } />
}) }
</>
);

26
src/components/catalog/views/page/layout/CatalogLayoutDefaultView.tsx
View File

@ -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>
</>
);
}