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

Layout updates

Browse Source
This commit is contained in:
Bill 2022-01-11 23:01:59 -05:00
parent 1308036a51
commit bf06c4a58f
9 changed files with 42 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/assets/styles/utils.scss
View File

@ -47,6 +47,10 @@ ul {
cursor: pointer;
}
.cursor-not-allowed {
cursor: not-allowed;
}
.pointer-events-none {
pointer-events: none;
}

10
src/common/Grid.tsx
View File

@ -16,24 +16,22 @@ export interface GridProps extends BaseProps<HTMLDivElement>
export const Grid: FC<GridProps> = props =>
{
const { columnCount = 0, columnMinWidth = 40, columnMinHeight = 40, grow = false, inline = false, gap = 2, maxContent = false, classNames = [], style = {}, ...rest } = props;
const { columnCount = 0, columnMinWidth = 40, columnMinHeight = 40, grow = false, fullHeight = undefined, inline = false, gap = 2, maxContent = false, classNames = [], style = {}, ...rest } = props;
const getClassNames = useMemo(() =>
{
const newClassNames: string[] = [];
if(!grow) newClassNames.push('h-100');
else newClassNames.push('flex-basis-fit-content');
if(inline) newClassNames.push('inline-grid');
else newClassNames.push('grid');
if(gap) newClassNames.push('gap-' + gap);
else if(gap === 0) newClassNames.push('gap-0');
if(classNames.length) newClassNames.push(...classNames);
return newClassNames;
}, [ grow, inline, gap, classNames ]);
}, [ inline, gap, classNames ]);
const getStyle = useMemo(() =>
{
@ -60,7 +58,7 @@ export const Grid: FC<GridProps> = props =>
return (
<GridContextProvider value={ { isCssGrid: true } }>
<Base classNames={ getClassNames } style={ getStyle } { ...rest } />
<Base classNames={ getClassNames } style={ getStyle } fullHeight={ ((fullHeight !== undefined) ? fullHeight : !grow) } { ...rest } />
</GridContextProvider>
);
}

9
src/common/index.scss
View File

@ -9,6 +9,15 @@
background-color: $grid-active-bg-color !important;
}
&.disabled {
cursor: not-allowed;
img {
opacity: .5;
filter: grayscale(1);
}
}
&.unseen {
background-color: rgba($success, 0.4);
}

7
src/common/layout/LayoutGridItem.tsx
View File

@ -14,11 +14,12 @@ export interface LayoutGridItemProps extends ColumnProps
itemUniqueSoldout?: boolean;
itemUniqueNumber?: number;
itemUnseen?: boolean;
disabled?: boolean;
}
export const LayoutGridItem: FC<LayoutGridItemProps> = props =>
{
const { itemImage = undefined, itemColor = undefined, itemActive = false, itemCount = 1, itemCountMinimum = 1, itemUniqueSoldout = false, itemUniqueNumber = -2, itemUnseen = false, center = true, column = true, style = {}, classNames = [], position = 'relative', overflow = 'hidden', children = null, ...rest } = props;
const { itemImage = undefined, itemColor = undefined, itemActive = false, itemCount = 1, itemCountMinimum = 1, itemUniqueSoldout = false, itemUniqueNumber = -2, itemUnseen = false, disabled = false, center = true, column = true, style = {}, classNames = [], position = 'relative', overflow = 'hidden', children = null, ...rest } = props;
const getClassNames = useMemo(() =>
{
@ -32,12 +33,14 @@ export const LayoutGridItem: FC<LayoutGridItemProps> = props =>
if(itemUnseen) newClassNames.push('unseen');
if(disabled) newClassNames.push('disabled')
if(itemImage === null) newClassNames.push('icon', 'loading-icon');
if(classNames.length) newClassNames.push(...classNames);
return newClassNames;
}, [ itemActive, itemUniqueSoldout, itemUniqueNumber, itemUnseen, itemImage, classNames ]);
}, [ itemActive, itemUniqueSoldout, itemUniqueNumber, itemUnseen, disabled, itemImage, classNames ]);
const getStyle = useMemo(() =>
{

3
src/layout/card/NitroCardView.scss
View File

@ -4,8 +4,9 @@ $nitro-card-tabs-height: 33px;
.nitro-card {
resize: both;
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(lg) {
max-width: 100vw !important;
max-height: 100vh !important;
}
&.theme-primary {

6
src/layout/draggable-window/DraggableWindow.scss
View File

@ -10,11 +10,11 @@
@include media-breakpoint-down(lg) {
display: flex;
justify-content: center;
transform: none !important;
.draggable-window {
top: 10px !important;
left: 0 !important;
top: unset !important;
left: unset !important;
transform: none !important;
}
}

25
src/layout/user-profile-icon/UserProfileIconView.tsx
View File

@ -1,24 +1,29 @@
import { FC, useMemo } from 'react';
import { GetUserProfile } from '../../api';
import { NitroLayoutBase } from '../base';
import { UserProfileIconViewProps } from './UserProfileIconView.types';
import { Base, BaseProps } from '../../common/Base';
export interface UserProfileIconViewProps extends BaseProps<HTMLDivElement>
{
userId?: number;
userName?: string;
}
export const UserProfileIconView: FC<UserProfileIconViewProps> = props =>
{
const { userId = 0, userName = null, className = '', children = null, ...rest } = props;
const { userId = 0, userName = null, classNames = [], pointer = true, children = null, ...rest } = props;
const getClassName = useMemo(() =>
const getClassNames = useMemo(() =>
{
let newClassName = 'nitro-friends-spritesheet icon-profile-sm me-1 cursor-pointer';
const newClassNames: string[] = [ 'nitro-friends-spritesheet', 'icon-profile-sm' ];
if(className && className.length) newClassName += ` ${ className }`;
if(classNames.length) newClassNames.push(...classNames);
return newClassName;
}, [ className ]);
return newClassNames;
}, [ classNames ]);
return (
<NitroLayoutBase className={ getClassName } onClick={ event => GetUserProfile(userId) } { ... rest }>
<Base classNames={ getClassNames } onClick={ event => GetUserProfile(userId) } { ... rest }>
{ children }
</NitroLayoutBase>
</Base>
);
}

7
src/layout/user-profile-icon/UserProfileIconView.types.ts
View File

@ -1,7 +0,0 @@
import { NitroLayoutBaseProps } from '../base';
export interface UserProfileIconViewProps extends NitroLayoutBaseProps
{
userId?: number;
userName?: string;
}

1
src/layout/user-profile-icon/index.ts
View File

@ -1,2 +1 @@
export * from './UserProfileIconView';
export * from './UserProfileIconView.types';