duckietm/Nitro-V3
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-V3.git synced 2026-06-19 15:06:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

🆙 Update catalogue Forum view

Browse Source
This commit is contained in:
duckietm
2026-06-10 10:17:20 +02:00
parent e5ca4936ea
commit 4bfd5e96ec
4 changed files with 78 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/catalog/views/page/layout/CatalogLayoutGuildForumView.tsx
+22 -22
View File
@@ -1,7 +1,8 @@
import { FC, useState } from 'react'; import { FC } from 'react';
import { SanitizeHtml } from '../../../../../api'; import { SanitizeHtml } from '../../../../../api';
import { Column, Grid, Text } from '../../../../../common'; import { Column, Flex, Grid } from '../../../../../common';
import { useCatalogData, useCatalogUiState, useUserGroups } from '../../../../../hooks'; import { LayoutImage } from '../../../../../common/layout/LayoutImage';
import { useCatalogData, useUserGroups } from '../../../../../hooks';
import { CatalogFirstProductSelectorWidgetView } from '../widgets/CatalogFirstProductSelectorWidgetView'; import { CatalogFirstProductSelectorWidgetView } from '../widgets/CatalogFirstProductSelectorWidgetView';
import { CatalogGuildSelectorWidgetView } from '../widgets/CatalogGuildSelectorWidgetView'; import { CatalogGuildSelectorWidgetView } from '../widgets/CatalogGuildSelectorWidgetView';
import { CatalogPurchaseWidgetView } from '../widgets/CatalogPurchaseWidgetView'; import { CatalogPurchaseWidgetView } from '../widgets/CatalogPurchaseWidgetView';
@@ -11,32 +12,31 @@ import { CatalogLayoutProps } from './CatalogLayout.types';
export const CatalogLayouGuildForumView: FC<CatalogLayoutProps> = props => export const CatalogLayouGuildForumView: FC<CatalogLayoutProps> = props =>
{ {
const { page = null } = props; const { page = null } = props;
const [ selectedGroupIndex, setSelectedGroupIndex ] = useState<number>(0);
const { currentOffer = null } = useCatalogData(); const { currentOffer = null } = useCatalogData();
const { setCurrentOffer = null } = useCatalogUiState();
const { data: groups = null } = useUserGroups(); const { data: groups = null } = useUserGroups();
const teaserImage = page.localization.getImage(1);
const hasGroups = !!(groups && groups.length);
return ( return (
<> <>
<CatalogFirstProductSelectorWidgetView /> <CatalogFirstProductSelectorWidgetView />
<Grid> <Grid overflow="hidden">
<Column className="bg-muted rounded p-2 text-black" overflow="hidden" size={ 7 }> <Column overflow="hidden" size={ 8 }>
<div className="overflow-auto" dangerouslySetInnerHTML={ { __html: SanitizeHtml(page.localization.getText(1)) } } /> <div className="nitro-catalog-forum-text grow! min-h-0 overflow-auto text-black" dangerouslySetInnerHTML={ { __html: SanitizeHtml(page.localization.getText(1)) } } />
</Column>
<Column gap={ 1 } overflow="hidden" size={ 5 }>
{ !!currentOffer && { !!currentOffer &&
<> <Flex alignItems="center" className="shrink-0" gap={ 2 }>
<Column grow gap={ 1 }> <CatalogTotalPriceWidget />
<Text truncate>{ currentOffer.localizationName }</Text> <div className="grow!">
<div className="grow!"> <CatalogGuildSelectorWidgetView />
<CatalogGuildSelectorWidgetView /> </div>
</div> { hasGroups &&
<div className="flex justify-end"> <CatalogPurchaseWidgetView noGiftOption={ true } /> }
<CatalogTotalPriceWidget alignItems="end" /> </Flex> }
</div> </Column>
<CatalogPurchaseWidgetView noGiftOption={ true } /> <Column alignItems="center" overflow="hidden" size={ 4 }>
</Column> { !!teaserImage &&
</> } <LayoutImage className="max-w-full" imageUrl={ teaserImage } /> }
</Column> </Column>
</Grid> </Grid>
</> </>
src/components/catalog/views/page/widgets/CatalogGuildSelectorWidgetView.tsx
+7 -5
View File
@@ -1,4 +1,4 @@
import { StringDataType } from '@nitrots/nitro-renderer'; import { CreateLinkEvent, StringDataType } from '@nitrots/nitro-renderer';
import { FC, useEffect, useMemo, useState } from 'react'; import { FC, useEffect, useMemo, useState } from 'react';
import { LocalizeText } from '../../../../../api'; import { LocalizeText } from '../../../../../api';
import { Button, Flex } from '../../../../../common'; import { Button, Flex } from '../../../../../common';
@@ -45,11 +45,13 @@ export const CatalogGuildSelectorWidgetView: FC<{}> = props =>
if(!groups || !groups.length) if(!groups || !groups.length)
{ {
return ( return (
<div className="bg-muted rounded p-1 text-black text-center"> <div className="bg-[#5da0aa] rounded-lg p-2 text-black text-center">
{ LocalizeText('catalog.guild_selector.members_only') } { LocalizeText('catalog.guild_selector.members_only') }
<Button fullWidth classNames={ [ 'mt-1', 'nitro-catalog-swf-button', 'nitro-catalog-swf-buy-button', 'whitespace-normal!', 'text-[10px]!', 'leading-tight!', 'py-1!' ] }> <div className="mt-1">
{ LocalizeText('catalog.guild_selector.find_groups') } <Button classNames={ [ 'nitro-catalog-guild-join-btn' ] } onClick={ () => CreateLinkEvent('navigator/search/hotel_view/group:') }>
</Button> { LocalizeText('catalog.guild_selector.find_groups') }
</Button>
</div>
</div> </div>
); );
} }
src/components/catalog/views/page/widgets/CatalogPurchaseWidgetView.tsx
+5 -4
View File
@@ -1,9 +1,9 @@
import { CreateLinkEvent, PurchaseFromCatalogComposer } from '@nitrots/nitro-renderer'; import { CreateLinkEvent, PurchaseFromCatalogComposer } from '@nitrots/nitro-renderer';
import { FC, useCallback, useEffect, useMemo, useState } from 'react'; import { FC, useCallback, useEffect, useMemo, useState } from 'react';
import { BuilderFurniPlaceableStatus, CatalogPurchaseState, CatalogType, DispatchUiEvent, GetClubMemberLevel, LocalizeText, NotificationBubbleType, Offer, ProductTypeEnum, SendMessageComposer } from '../../../../../api'; import { BuilderFurniPlaceableStatus, CatalogPurchaseState, CatalogType, DispatchUiEvent, GetClubMemberLevel, LocalStorageKeys, LocalizeText, NotificationBubbleType, Offer, ProductTypeEnum, SendMessageComposer } from '../../../../../api';
import { Button, LayoutLoadingSpinnerView, Text } from '../../../../../common'; import { Button, LayoutLoadingSpinnerView, Text } from '../../../../../common';
import { CatalogEvent, CatalogInitGiftEvent, CatalogPurchaseFailureEvent, CatalogPurchaseNotAllowedEvent, CatalogPurchaseSoldOutEvent, CatalogPurchasedEvent } from '../../../../../events'; import { CatalogEvent, CatalogInitGiftEvent, CatalogPurchaseFailureEvent, CatalogPurchaseNotAllowedEvent, CatalogPurchaseSoldOutEvent, CatalogPurchasedEvent } from '../../../../../events';
import { useCatalogActions, useCatalogData, useCatalogSkipPurchaseConfirmation, useCatalogUiState, useNotification, usePurse, useUiEvent } from '../../../../../hooks'; import { useCatalogActions, useCatalogData, useCatalogUiState, useLocalStorage, useNotification, usePurse, useUiEvent } from '../../../../../hooks';
interface CatalogPurchaseWidgetViewProps interface CatalogPurchaseWidgetViewProps
{ {
@@ -17,8 +17,9 @@ export const CatalogPurchaseWidgetView: FC<CatalogPurchaseWidgetViewProps> = pro
{ {
const { noGiftOption = false, purchaseCallback = null } = props; const { noGiftOption = false, purchaseCallback = null } = props;
const [ builderPlaceableRefreshTick, setBuilderPlaceableRefreshTick ] = useState(0); const [ builderPlaceableRefreshTick, setBuilderPlaceableRefreshTick ] = useState(0);
const [ purchaseWillBeGift, setPurchaseWillBeGift ] = useState(false);
const [ purchaseState, setPurchaseState ] = useState(CatalogPurchaseState.NONE); const [ purchaseState, setPurchaseState ] = useState(CatalogPurchaseState.NONE);
const [ catalogSkipPurchaseConfirmation ] = useCatalogSkipPurchaseConfirmation(); const [ catalogSkipPurchaseConfirmation, setCatalogSkipPurchaseConfirmation ] = useLocalStorage(LocalStorageKeys.CATALOG_SKIP_PURCHASE_CONFIRMATION, false);
const { currentOffer = null, currentPage = null } = useCatalogData(); const { currentOffer = null, currentPage = null } = useCatalogData();
const { currentType = CatalogType.NORMAL, purchaseOptions = null, setPurchaseOptions = null, setCatalogPlaceMultipleObjects = null } = useCatalogUiState(); const { currentType = CatalogType.NORMAL, purchaseOptions = null, setPurchaseOptions = null, setCatalogPlaceMultipleObjects = null } = useCatalogUiState();
const { requestOfferToMover = null, getBuilderFurniPlaceableStatus = null, getNodesByOfferId = null } = useCatalogActions(); const { requestOfferToMover = null, getBuilderFurniPlaceableStatus = null, getNodesByOfferId = null } = useCatalogActions();
@@ -241,7 +242,7 @@ export const CatalogPurchaseWidgetView: FC<CatalogPurchaseWidgetViewProps> = pro
return <Button classNames={ swfButtonClassNames } variant="danger">{ LocalizeText('generic.failed') + ' - ' + LocalizeText('catalog.alert.limited_edition_sold_out.title') }</Button>; return <Button classNames={ swfButtonClassNames } variant="danger">{ LocalizeText('generic.failed') + ' - ' + LocalizeText('catalog.alert.limited_edition_sold_out.title') }</Button>;
case CatalogPurchaseState.NONE: case CatalogPurchaseState.NONE:
default: default:
return <Button classNames={ [ ...swfButtonClassNames, 'nitro-catalog-swf-buy-button' ] } variant="success" disabled={ (purchaseOptions.extraParamRequired && (!purchaseOptions.extraData || !purchaseOptions.extraData.length)) } onClick={ event => catalogSkipPurchaseConfirmation ? purchase() : setPurchaseState(CatalogPurchaseState.CONFIRM) }>{ LocalizeText('catalog.purchase_confirmation.' + (currentOffer.isRentOffer ? 'rent' : 'buy')) }</Button>; return <Button classNames={ [ ...swfButtonClassNames, 'nitro-catalog-swf-buy-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>;
} }
}; };
src/css/catalog/CatalogClassicView.css
+44
View File
@@ -639,6 +639,50 @@
overflow: hidden; overflow: hidden;
} }
.nitro-catalog-classic-window .nitro-catalog-forum-text {
scrollbar-width: none !important;
font-size: 12px;
line-height: 15px;
}
.nitro-catalog-classic-window .nitro-catalog-forum-text::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
display: none !important;
}
.nitro-catalog-classic-window .nitro-catalog-forum-text p,
.nitro-catalog-classic-window .nitro-catalog-forum-text div {
margin: 0 0 8px;
}
.nitro-catalog-classic-window .nitro-catalog-forum-text > :last-child {
margin-bottom: 0;
}
.nitro-catalog-classic-window .nitro-catalog-guild-join-btn {
min-height: 20px !important;
width: auto !important;
padding: 1px 10px !important;
border: 1px solid #1c1c1c !important;
border-radius: 5px !important;
background: linear-gradient(180deg, #ffffff 0%, #eaeaea 55%, #d8d8d8 100%) !important;
box-shadow: inset 0 1px 0 #ffffff !important;
color: #000 !important;
font-size: 11px !important;
font-weight: 400 !important;
text-shadow: none !important;
}
.nitro-catalog-classic-window .nitro-catalog-guild-join-btn:hover {
background: linear-gradient(180deg, #ffffff 0%, #f2f2f2 55%, #e2e2e2 100%) !important;
}
.nitro-catalog-classic-window .nitro-catalog-guild-join-btn:active {
background: linear-gradient(180deg, #d8d8d8 0%, #eaeaea 100%) !important;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}
.nitro-catalog-classic-default-layout { .nitro-catalog-classic-default-layout {
position: relative; position: relative;
display: block !important; display: block !important;