nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2025-01-18 13:26:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

More layout changes

Browse Source
This commit is contained in:
Bill 2021-12-04 01:28:34 -05:00
parent b486f17e3f
commit 357fab357e
5 changed files with 35 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/layout/card/content/NitroCardContentView.tsx
View File

@ -1,15 +1,23 @@
import { FC } from 'react';
import { FC, useMemo } from 'react';
import { Column } from '../../../common/Column';
import { useNitroCardContext } from '../context';
import { NitroCardContentViewProps } from './NitroCardContextView.types';
export const NitroCardContentView: FC<NitroCardContentViewProps> = props =>
{
const { theme = 'primary', children = null, className = '', ...rest } = props;
const { theme = 'primary', classNames = [], ...rest } = props;
const { simple = false } = useNitroCardContext();
return (
<div className={ `container-fluid content-area d-flex flex-column overflow-auto ${ (simple ? 'simple' : '') } ${ className || '' }` } { ...rest }>
{ children }
</div>
);
const getClassNames = useMemo(() =>
{
const newClassNames: string[] = [ 'container-fluid', 'content-area' ];
if(simple) newClassNames.push('simple');
if(classNames.length) newClassNames.push(...classNames);
return newClassNames;
}, [ simple, classNames ]);
return <Column classNames={ getClassNames } overflow="auto" { ...rest } />;
}

4
src/layout/card/content/NitroCardContextView.types.ts
View File

@ -1,7 +1,7 @@
import { DetailsHTMLAttributes } from 'react';
import { ColumnProps } from '../../../common/Column';
export interface NitroCardContentViewProps extends DetailsHTMLAttributes<HTMLDivElement>
export interface NitroCardContentViewProps extends ColumnProps
{
theme?: string;
}

18
src/views/catalog/CatalogView.tsx
View File

@ -1,10 +1,12 @@
import { GetCatalogIndexComposer, GetCatalogPageComposer, GetGiftWrappingConfigurationComposer, ILinkEventTracker, INodeData, RoomPreviewer } from '@nitrots/nitro-renderer';
import { FC, useCallback, useEffect, useReducer, useState } from 'react';
import { AddEventLinkTracker, GetRoomEngine, LocalizeText, RemoveLinkEventTracker } from '../../api';
import { Column } from '../../common/Column';
import { Grid } from '../../common/Grid';
import { CatalogEvent } from '../../events';
import { useUiEvent } from '../../hooks/events/ui/ui-event';
import { SendMessageHook } from '../../hooks/messages/message-event';
import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView, NitroLayoutGrid, NitroLayoutGridColumn } from '../../layout';
import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../layout';
import { CatalogMessageHandler } from './CatalogMessageHandler';
import { CatalogMode, CatalogViewProps } from './CatalogView.types';
import { BuildCatalogPageTree } from './common/CatalogUtilities';
@ -195,6 +197,8 @@ export const CatalogView: FC<CatalogViewProps> = props =>
<NitroCardTabsView>
{ root && root.children.length && root.children.map((page, index) =>
{
if(!page.visible) return null;
return (
<NitroCardTabsItemView key={ index } isActive={ (currentTab === page) } onClick={ event => setCurrentTab(page) }>
{ page.localization }
@ -203,15 +207,15 @@ export const CatalogView: FC<CatalogViewProps> = props =>
}) }
</NitroCardTabsView>
<NitroCardContentView>
<NitroLayoutGrid>
<Grid>
{ currentNavigationPage && !navigationHidden &&
<NitroLayoutGridColumn size={ 3 }>
<Column size={ 3 }>
<CatalogNavigationView page={ currentNavigationPage } pendingTree={ pendingTree } setPendingTree={ setPendingTree } />
</NitroLayoutGridColumn> }
<NitroLayoutGridColumn size={ (navigationHidden ? 12 : 9) }>
</Column> }
<Column size={ (navigationHidden ? 12 : 9) }>
<CatalogPageView roomPreviewer={ roomPreviewer } />
</NitroLayoutGridColumn>
</NitroLayoutGrid>
</Column>
</Grid>
</NitroCardContentView>
</NitroCardView> }
<CatalogGiftView />

7
src/views/friends/views/friend-bar/FriendBarView.tsx
View File

@ -1,5 +1,6 @@
import { FC, useMemo, useState } from 'react';
import { NitroLayoutButton, NitroLayoutFlex } from '../../../../layout';
import { Flex } from '../../../../common/Flex';
import { NitroLayoutButton } from '../../../../layout';
import { NitroLayoutBase } from '../../../../layout/base';
import { FriendBarItemView } from '../friend-bar-item/FriendBarItemView';
import { FriendBarViewProps } from './FriendBarView.types';
@ -26,7 +27,7 @@ export const FriendBarView: FC<FriendBarViewProps> = props =>
}, [ maxDisplayCount, indexOffset, onlineFriends ]);
return (
<NitroLayoutFlex className="friend-bar align-items-center">
<Flex alignItems="center" className="friend-bar">
<NitroLayoutButton className="friend-bar-button" variant="black" size="sm" disabled={ !canDecreaseIndex } onClick={ event => setIndexOffset(indexOffset - 1) }>
<NitroLayoutBase className="fas fa-chevron-left" />
</NitroLayoutButton>
@ -37,6 +38,6 @@ export const FriendBarView: FC<FriendBarViewProps> = props =>
<button type="button" className="btn btn-sm btn-black align-self-center friend-bar-button" disabled={ !canIncreaseIndex } onClick={ event => setIndexOffset(indexOffset + 1) }>
<i className="fas fa-chevron-right" />
</button>
</NitroLayoutFlex>
</Flex>
);
}

2
src/views/notification-center/common/NotificationUtilities.ts
View File

@ -161,6 +161,8 @@ export class NotificationUtilities
public static openUrl(url: string): void
{
if(!url || !url.length) return;
if(url.startsWith('http'))
{
HabboWebTools.openWebPage(url);