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

Update layout

Browse Source
This commit is contained in:
Bill 2021-11-17 03:41:29 -05:00
parent 03b140c289
commit 8efeed99c5
20 changed files with 175 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,15 +5,26 @@ $nitro-card-tabs-height: 33px;
pointer-events: all;
resize: both;
&.theme-dark {
padding: 2px;
background-color: #1C323F;
border: 2px solid rgba(255, 255, 255, 0.5);
border-radius: 0.25rem;
}
&.theme-primary {
border: $border-width solid $border-color;
.nitro-card-header-container {
background-color: $primary;
.nitro-card-header {
.header-text {
color: $white;
}
}
}
.nitro-card-tabs {
background-color: $secondary;
}
.content-area {
background-color: $light;
}
}
}
@ -27,7 +38,6 @@ $nitro-card-tabs-height: 33px;
overflow: hidden;
@include media-breakpoint-down(lg) {
.draggable-window {
top: 0 !important;
left: 0 !important;
@ -41,15 +51,10 @@ $nitro-card-tabs-height: 33px;
max-width: 75%;
max-height: calc(100% - 20px);
margin: 10px auto 10px;
// &.rounded {
// border-radius: 0 !important;
// }
}
}
@include media-breakpoint-down(sm) {
.draggable-window {
top: 0 !important;
left: 0 !important;
@ -72,8 +77,8 @@ $nitro-card-tabs-height: 33px;
}
}
@import './accordion/NitroCardAccordionView';
@import './content/NitroCardContentView';
@import './grid/NitroCardGridView';
@import './header/NitroCardHeaderView';
@import './tabs/NitroCardTabsView';
@import "./accordion/NitroCardAccordionView";
@import "./content/NitroCardContentView";
@import "./grid/NitroCardGridView";
@import "./header/NitroCardHeaderView";
@import "./tabs/NitroCardTabsView";

2
src/layout/card/accordion/NitroCardAccordionView.scss
View File

@ -1 +1 @@
@import './item/NitroCardAccordionItemView';
@import "./set/NitroCardAccordionSetView";

2
src/layout/card/accordion/NitroCardAccordionView.tsx
View File

@ -6,7 +6,7 @@ export const NitroCardAccordionView: FC<NitroCardAccordionViewProps> = props =>
const { className = '' } = props;
return (
<div className={ 'nitro-card-accordion bg-light text-black ' + className }>
<div className={ 'nitro-card-accordion text-black ' + className }>
{ props.children }
</div>
);

1
src/layout/card/accordion/index.ts
View File

@ -1,3 +1,4 @@
export * from './item';
export * from './NitroCardAccordionView';
export * from './NitroCardAccordionView.types';
export * from './set';

9
src/layout/card/accordion/item/NitroCardAccordionItemView.scss
View File

@ -1,9 +0,0 @@
.nitro-card-accordion-item {
.nitro-card-accordion-item-header {
border-bottom: 1px solid rgba($black, 0.2);
}
.nitro-card-accordion-item-content {
background: rgba($white, 0.5);
}
}

28
src/layout/card/accordion/item/NitroCardAccordionItemView.tsx
View File

@ -1,30 +1,14 @@
import { FC, useEffect, useState } from 'react';
import { FC } from 'react';
import { NitroLayoutBase } from '../../../base';
import { NitroCardAccordionItemViewProps } from './NitroCardAccordionItemView.types';
export const NitroCardAccordionItemView: FC<NitroCardAccordionItemViewProps> = props =>
{
const { className = '', headerClassName = '', contentClassName = '', headerText = '', defaultState = false } = props;
const [ isExpanded, setIsExpanded ] = useState(false);
useEffect(() =>
{
setIsExpanded(defaultState);
}, [ defaultState ]);
const { children = null, ...rest } = props;
return (
<div className={ 'nitro-card-accordion-item ' + className + (isExpanded ? ' active' : '') }>
<div className={ 'nitro-card-accordion-item-header px-2 py-1 d-flex ' + headerClassName } onClick={ () => setIsExpanded((value) => !value) }>
<div className="w-100">
{ headerText }
</div>
<div className="justify-self-center">
<i className={ 'fas fa-caret-' + (isExpanded ? 'up' : 'down') } />
</div>
</div>
<div className={ 'nitro-card-accordion-item-content ' + contentClassName + (!isExpanded ? ' d-none' : '') }>
{ props.children }
</div>
</div>
<NitroLayoutBase className="px-2 py-1 d-flex gap-1 align-items-center">
{ children }
</NitroLayoutBase>
);
}

10
src/layout/card/accordion/item/NitroCardAccordionItemView.types.ts
View File

@ -1,8 +1,6 @@
export interface NitroCardAccordionItemViewProps
import { NitroLayoutBaseProps } from '../../../base';
export interface NitroCardAccordionItemViewProps extends NitroLayoutBaseProps
{
className?: string;
headerClassName?: string;
contentClassName?: string;
headerText: string;
defaultState?: boolean;
}

9
src/layout/card/accordion/set/NitroCardAccordionSetView.scss Normal file
View File

@ -0,0 +1,9 @@
.nitro-card-accordion-set {
.nitro-card-accordion-set-header {
border-bottom: 1px solid rgba($black, 0.2);
}
.nitro-card-accordion-set-content {
background: rgba($white, 0.5);
}
}

43
src/layout/card/accordion/set/NitroCardAccordionSetView.tsx Normal file
View File

@ -0,0 +1,43 @@
import classNames from 'classnames';
import { FC, useEffect, useMemo, useState } from 'react';
import { NitroLayoutFlex } from '../../..';
import { NitroLayoutBase } from '../../../base';
import { NitroCardAccordionSetViewProps } from './NitroCardAccordionSetView.types';
export const NitroCardAccordionSetView: FC<NitroCardAccordionSetViewProps> = props =>
{
const { headerText = '', isExpanded = false, className = '', children = null, ...rest } = props;
const [ isOpen, setIsOpen ] = useState(false);
const getClassName = useMemo(() =>
{
let newClassName = 'nitro-card-accordion-set';
if(isOpen) newClassName += ' active';
if(className && className.length) newClassName += ` ${ className }`;
return newClassName;
}, [ className, isOpen ]);
useEffect(() =>
{
setIsOpen(isExpanded);
}, [ isExpanded ]);
return (
<NitroLayoutBase className={ getClassName } { ...rest }>
<NitroLayoutFlex className="nitro-card-accordion-set-header px-2 py-1" onClick={ event => setIsOpen(!isOpen) }>
<div className="w-100">
{ headerText }
</div>
<div className="justify-self-center">
<i className={ 'fas fa-caret-' + (isOpen ? 'up' : 'down') } />
</div>
</NitroLayoutFlex>
<NitroLayoutBase className={ 'nitro-card-accordion-set-content ' + classNames({ 'd-none': !isOpen }) }>
{ children }
</NitroLayoutBase>
</NitroLayoutBase>
);
}

7
src/layout/card/accordion/set/NitroCardAccordionSetView.types.ts Normal file
View File

@ -0,0 +1,7 @@
import { NitroLayoutBaseProps } from '../../../base';
export interface NitroCardAccordionSetViewProps extends NitroLayoutBaseProps
{
headerText: string;
isExpanded?: boolean;
}

2
src/layout/card/accordion/set/index.ts Normal file
View File

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

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

@ -8,7 +8,7 @@ export const NitroCardContentView: FC<NitroCardContentViewProps> = props =>
const { simple = false } = useNitroCardContext();
return (
<div className={ `container-fluid ${ theme === 'primary' ? 'bg-light' : ''} content-area d-flex flex-column overflow-auto theme-${theme} ${ (simple ? 'simple' : '') } ${ className || '' }` } { ...rest }>
<div className={ `container-fluid content-area d-flex flex-column overflow-auto ${ (simple ? 'simple' : '') } ${ className || '' }` } { ...rest }>
{ children }
</div>
);

6
src/layout/card/grid/item/NitroCardGridItemView.scss
View File

@ -22,12 +22,6 @@
background-color: rgba($success, 0.4);
}
.badge {
top: 2px;
right: 2px;
font-size: 8px;
}
.avatar-image {
background-position-y: 10px;
}

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

@ -1,4 +1,5 @@
import { FC, useMemo } from 'react';
import { ItemCountView } from '../../../../views/shared/item-count/ItemCountView';
import { LimitedEditionStyledNumberView } from '../../../../views/shared/limited-edition/styled-number/LimitedEditionStyledNumberView';
import { NitroCardGridItemViewProps } from './NitroCardGridItemView.types';
@ -39,7 +40,7 @@ export const NitroCardGridItemView: FC<NitroCardGridItemViewProps> = props =>
return (
<div className={ getClassName } style={ getStyle } { ...rest }>
{ (itemCount > itemCountMinimum) &&
<span className="position-absolute badge border bg-danger px-1 rounded-circle">{ itemCount }</span> }
<ItemCountView count={ itemCount } /> }
{ (itemUniqueNumber > 0) &&
<div className="position-absolute unique-item-counter">
<LimitedEditionStyledNumberView value={ itemUniqueNumber } />

112
src/layout/card/header/NitroCardHeaderView.scss
View File

@ -1,64 +1,66 @@
.nitro-card-header {
min-height: 33px;
max-height: 33px;
white-space: nowrap;
.nitro-card-header-container {
.nitro-card-header {
min-height: 33px;
max-height: 33px;
white-space: nowrap;
.header-text {
margin: 0 35px;
}
.header-text {
margin: 0;
}
&.simple-header {
min-height: 28px;
&.simple-header {
min-height: 28px;
.header-close {
font-size: 12px;
}
}
&.theme-dark {
background-color: #3d5f6e !important;
color: #fff;
}
.bg-tertiary-split {
position: relative;
border-bottom: 2px solid darken($quaternary, 5);
box-shadow: 0 2px white;
width: 100%;
margin: 0;
&:before {
position: absolute;
content: " ";
top: 0;
left: 0;
width: 100%;
height: 2px;
background-color: rgba($white, 0.3);
}
}
.header-close {
font-size: 12px;
}
}
right: 6px;
border-radius: $border-radius;
box-shadow: 0 0 0 1.5px $white;
border: 2px solid #921911;
background: repeating-linear-gradient(
rgba(245, 80, 65, 1),
rgba(245, 80, 65, 1) 50%,
rgba(194, 48, 39, 1) 50%,
rgba(194, 48, 39, 1) 100%
);
cursor: pointer;
line-height: 1;
padding: 1px 3px;
&.theme-dark {
background-color: #3d5f6e !important;
color: #fff;
}
&:hover {
filter: brightness(1.2);
}
.bg-tertiary-split {
position: relative;
border-bottom: 2px solid darken($quaternary, 5);
box-shadow: 0 2px white;
width: 100%;
margin: 0;
&:before {
position: absolute;
content: " ";
top: 0;
left: 0;
width: 100%;
height: 2px;
background-color: rgba($white, 0.3);
}
}
.header-close {
right: 6px;
border-radius: $border-radius;
box-shadow: 0 0 0 1.5px $white;
border: 2px solid #921911;
background: repeating-linear-gradient(
rgba(245, 80, 65, 1),
rgba(245, 80, 65, 1) 50%,
rgba(194, 48, 39, 1) 50%,
rgba(194, 48, 39, 1) 100%
);
cursor: pointer;
line-height: 1;
padding: 1px 3px;
&:hover {
filter: brightness(1.2);
}
&:active {
filter: brightness(0.8);
&:active {
filter: brightness(0.8);
}
}
}
}

16
src/layout/card/header/NitroCardHeaderView.tsx
View File

@ -4,7 +4,7 @@ import { NitroCardHeaderViewProps } from './NitroCardHeaderView.types';
export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
{
const { headerText = null, onCloseClick = null, theme= 'primary' } = props;
const { headerText = null, onCloseClick = null, theme = 'primary' } = props;
const { simple = false } = useNitroCardContext();
const onMouseDown = useCallback((event: MouseEvent<HTMLDivElement>) =>
@ -16,10 +16,10 @@ export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
if(simple)
{
return (
<div className="container-fluid bg-light">
<div className="row nitro-card-header simple-header overflow-hidden">
<div className="d-flex justify-content-center align-items-center w-100 position-relative px-0">
<div className="h5 text-white text-center text-shadow bg-tertiary-split border-top-0 drag-handler">{ headerText }</div>
<div className="drag-handler container-fluid nitro-card-header-container bg-tertiary-split">
<div className="row nitro-card-header overflow-hidden">
<div className="d-flex justify-content-center align-items-center w-100 position-relative">
<div className="h5 text-shadow header-text">{ headerText }</div>
<div className="position-absolute header-close" onMouseDownCapture={ onMouseDown } onClick={ onCloseClick }>
<i className="fas fa-times" />
</div>
@ -30,10 +30,10 @@ export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
}
return (
<div className="drag-handler container-fluid bg-primary">
<div className={`row nitro-card-header overflow-hidden theme-${theme}`}>
<div className="drag-handler container-fluid nitro-card-header-container">
<div className="row nitro-card-header overflow-hidden">
<div className="d-flex justify-content-center align-items-center w-100 position-relative">
<div className="h4 text-white text-shadow header-text">{ headerText }</div>
<div className="h4 text-shadow header-text">{ headerText }</div>
<div className="position-absolute header-close" onMouseDownCapture={ onMouseDown } onClick={ onCloseClick }>
<i className="fas fa-times" />
</div>

2
src/layout/card/tabs/NitroCardTabsView.scss
View File

@ -2,6 +2,4 @@
min-height: $nitro-card-tabs-height;
max-height: $nitro-card-tabs-height;
border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
@import './tabs-item/NitroCardTabsItemView';
}

4
src/layout/card/tabs/NitroCardTabsView.tsx
View File

@ -4,8 +4,8 @@ import { NitroCardTabsViewProps } from './NitroCardTabsView.types';
export const NitroCardTabsView: FC<NitroCardTabsViewProps> = props =>
{
return (
<div className="container-fluid d-flex bg-secondary pt-1 nitro-card-tabs justify-content-center">
<ul className="nav nav-tabs border-0">
<div className="container-fluid d-flex pt-1 nitro-card-tabs justify-content-center">
<ul className="nav nav-tabs border-0 gap-1">
{ props.children }
</ul>
</div>

13
src/layout/card/tabs/tabs-item/NitroCardTabsItemView.scss
View File

@ -1,13 +0,0 @@
.nav-item {
&:last-child() {
margin-right: 0 !important;
}
.count {
color: $white;
font-size: 10px;
line-height: 10px;
padding: 2px 3px;
}
}

11
src/layout/card/tabs/tabs-item/NitroCardTabsItemView.tsx
View File

@ -1,5 +1,6 @@
import classNames from 'classnames';
import { FC } from 'react';
import { ItemCountView } from '../../../../views/shared/item-count/ItemCountView';
import { NitroCardTabsItemViewProps } from './NitroCardTabsItemView.types';
export const NitroCardTabsItemView: FC<NitroCardTabsItemViewProps> = props =>
@ -7,12 +8,10 @@ export const NitroCardTabsItemView: FC<NitroCardTabsItemViewProps> = props =>
const { children = null, isActive = false, count = 0, onClick = null } = props;
return (
<li className="nav-item me-1 cursor-pointer" onClick={ onClick }>
<span className={ 'nav-link ' + classNames({ 'active': isActive }) }>
{ children }
{ (count > 0) &&
<span className="bg-danger ms-1 rounded count">{ count }</span> }
</span>
<li className={ 'nav-link cursor-pointer position-relative' + classNames({ ' active': isActive }) } onClick={ onClick }>
{ children }
{ (count > 0) &&
<ItemCountView count={ count } /> }
</li>
);
}