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

More catalog updates

Browse Source
This commit is contained in:
Bill 2021-09-23 03:22:43 -04:00
parent e94977f775
commit 7581d8cdf2
9 changed files with 50 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/layout/card/grid/NitroCardGridView.tsx
View File

@ -3,16 +3,16 @@ import { NitroCardGridViewProps } from './NitroCardGridView.types';
export const NitroCardGridView: FC<NitroCardGridViewProps> = props =>
{
const { columns = 5, className = '', style = null, children = null, ...rest } = props;
const { columns = 5, gap = 2, className = '', style = null, children = null, ...rest } = props;
const getClassName = useMemo(() =>
{
let newClassName = 'grid gap-2 overflow-auto';
let newClassName = `grid gap-${ gap } overflow-auto`;
if(className && className.length) newClassName += ' ' + className;
return newClassName;
}, [ className ]);
}, [ className, gap ]);
const getStyle = useMemo(() =>
{

1
src/layout/card/grid/NitroCardGridView.types.ts
View File

@ -3,4 +3,5 @@ import { DetailsHTMLAttributes } from 'react';
export interface NitroCardGridViewProps extends DetailsHTMLAttributes<HTMLDivElement>
{
columns?: number;
gap?: number;
}

2
src/layout/card/grid/item/NitroCardGridItemView.tsx
View File

@ -8,7 +8,7 @@ export const NitroCardGridItemView: FC<NitroCardGridItemViewProps> = props =>
const getClassName = useMemo(() =>
{
let newClassName = 'grid-item cursor-pointer overflow-hidden';
let newClassName = 'grid-item gap-1 cursor-pointer overflow-hidden';
if(itemActive) newClassName += ' active';

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

@ -205,7 +205,7 @@ export const CatalogView: FC<CatalogViewProps> = props =>
<NitroCardContentView>
<div className="row h-100">
{ currentNavigationPage && !navigationHidden &&
<div className="col-3 d-flex flex-column h-100">
<div className="col-3 h-100">
<CatalogNavigationView page={ currentNavigationPage } pendingTree={ pendingTree } setPendingTree={ setPendingTree } />
</div> }
<div className="col h-100">

30
src/views/catalog/views/navigation/CatalogNavigationView.scss
View File

@ -1,11 +1,31 @@
.nitro-catalog-navigation {
border-color: $grid-border-color !important;
background-color: $grid-bg-color !important;
.nitro-catalog-navigation-grid {
border-radius: 0.25rem;
border-color: #B6BEC5 !important;
background-color: #CDD3D9;
border: 2px solid;
.navigation-container {
overflow-y: auto;
.grid-item {
font-size: $font-size-sm;
height: 23px !important;
border-color: unset !important;
background-color: #CDD3D9;
border: 0 !important;
padding: 1px 3px;
i.fas {
color: $black;
font-size: 10px;
padding: 1px;
}
}
// border-color: $grid-border-color !important;
// background-color: $grid-bg-color !important;
// .navigation-container {
// overflow-y: auto;
// }
}
@import './item/CatalogNavigationItemView';
@import './set/CatalogNavigationSetView';

11
src/views/catalog/views/navigation/CatalogNavigationView.tsx
View File

@ -1,5 +1,6 @@
import { INodeData } from '@nitrots/nitro-renderer';
import { FC, useEffect } from 'react';
import { NitroCardGridView } from '../../../../layout';
import { CatalogSearchView } from '../search/CatalogSearchView';
import { CatalogNavigationViewProps } from './CatalogNavigationView.types';
import { CatalogNavigationSetView } from './set/CatalogNavigationSetView';
@ -23,13 +24,15 @@ export const CatalogNavigationView: FC<CatalogNavigationViewProps> = props =>
}, [ page ]);
return (
<>
<div className="row h-100">
<div className="d-flex flex-column col gap-2 h-100">
<CatalogSearchView />
<div className="border border-2 rounded overflow-hidden nitro-catalog-navigation p-1 h-100">
<div className="navigation-container h-100">
<div className="d-flex flex-column overflow-hidden nitro-catalog-navigation-grid p-1 h-100">
<NitroCardGridView columns={ 1 } gap={ 1 }>
<CatalogNavigationSetView page={ page } isFirstSet={ true } pendingTree={ pendingTree } setPendingTree={ setPendingTree } />
</NitroCardGridView>
</div>
</div>
</div>
</>
);
}

15
src/views/catalog/views/navigation/item/CatalogNavigationItemView.tsx
View File

@ -1,6 +1,7 @@
import { GetCatalogPageComposer, INodeData } from '@nitrots/nitro-renderer';
import { FC, useCallback, useEffect, useState } from 'react';
import { SendMessageHook } from '../../../../../hooks/messages/message-event';
import { NitroCardGridItemView } from '../../../../../layout';
import { CatalogMode } from '../../../CatalogView.types';
import { CatalogIconView } from '../../catalog-icon/CatalogIconView';
import { ACTIVE_PAGES } from '../CatalogNavigationView';
@ -70,16 +71,14 @@ export const CatalogNavigationItemView: FC<CatalogNavigationItemViewProps> = pro
}, [ isActive, page ]);
return (
<div className="col pb-1 catalog-navigation-item-container">
<div className={ 'd-flex align-items-center cursor-pointer catalog-navigation-item ' + (isActive ? 'active ': '') } onClick={ event => select(page) }>
<>
<NitroCardGridItemView itemActive={ isActive } onClick={ event => select(page) }>
<CatalogIconView icon={ page.icon } />
<div className="flex-grow-1 text-black text-truncate px-1">{ page.localization }</div>
<div className="flex-grow-1 text-black text-truncate">{ page.localization }</div>
{ (page.children.length > 0) && <i className={ 'fas fa-caret-' + (isExpanded ? 'up' : 'down') } /> }
</div>
</NitroCardGridItemView>
{ isActive && isExpanded && page.children && (page.children.length > 0) &&
<div className="d-flex flex-column mt-1">
<CatalogNavigationSetView page={ page } pendingTree={ pendingTree } setPendingTree={ setPendingTree } />
</div> }
</div>
<CatalogNavigationSetView page={ page } pendingTree={ pendingTree } setPendingTree={ setPendingTree } /> }
</>
);
}

4
src/views/catalog/views/navigation/set/CatalogNavigationSetView.tsx
View File

@ -26,13 +26,13 @@ export const CatalogNavigationSetView: FC<CatalogNavigationSetViewProps> = props
}, [ page, isFirstSet, activeChild, pendingTree ]);
return (
<div className="row row-cols-1 g-0 catalog-navigation-set-container w-100">
<>
{ page && (page.children.length > 0) && page.children.map((page, index) =>
{
if(!page.visible) return null;
return <CatalogNavigationItemView key={ index } page={ page } isActive={ (activeChild === page) } pendingTree={ pendingTree } setPendingTree={ setPendingTree } setActiveChild={ setActiveChild } />
}) }
</div>
</>
);
}

2
src/views/catalog/views/search/CatalogSearchView.tsx
View File

@ -110,7 +110,7 @@ export const CatalogSearchView: FC<CatalogSearchViewProps> = props =>
}, [ searchValue, processSearch ]);
return (
<div className="d-flex mb-1">
<div className="d-flex">
<div className="d-flex flex-grow-1 me-1">
<input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('generic.search') } value={ searchValue } onChange={ event => setSearchValue(event.target.value) } />
</div>