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

Avatar editor disabled items fix

Browse Source
This commit is contained in:
MyNameIsBatman 2021-08-28 00:25:23 -03:00
parent fe22d0b183
commit 0878625181
6 changed files with 22 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
package.json
View File

@ -50,22 +50,17 @@
"keyword-spacing": [ "keyword-spacing": [
"error", "error",
{ {
"overrides": "overrides": {
{ "if": {
"if":
{
"after": false "after": false
}, },
"for": "for": {
{
"after": false "after": false
}, },
"while": "while": {
{
"after": false "after": false
}, },
"switch": "switch": {
{
"after": false "after": false
} }
} }
@ -96,8 +91,7 @@
"@typescript-eslint/ban-types": [ "@typescript-eslint/ban-types": [
"error", "error",
{ {
"types": "types": {
{
"String": true, "String": true,
"Boolean": true, "Boolean": true,
"Number": true, "Number": true,

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

@ -9,8 +9,6 @@
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-position: center;
background-repeat: no-repeat;
overflow: hidden; overflow: hidden;
&.theme-default { &.theme-default {
@ -69,6 +67,15 @@
background-position-y: 12px !important; background-position-y: 12px !important;
} }
.background {
background-position: center;
background-repeat: no-repeat;
&.disabled {
opacity: 0.5;
}
}
.trade-button { .trade-button {
position: absolute; position: absolute;
bottom: 2px; bottom: 2px;

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

@ -1,3 +1,4 @@
import classNames from 'classnames';
import { FC } from 'react'; import { FC } from 'react';
import { LimitedEditionStyledNumberView } from '../../../../views/shared/limited-edition/styled-number/LimitedEditionStyledNumberView'; import { LimitedEditionStyledNumberView } from '../../../../views/shared/limited-edition/styled-number/LimitedEditionStyledNumberView';
import { useNitroCardGridContext } from '../context'; import { useNitroCardGridContext } from '../context';
@ -6,14 +7,15 @@ import { NitroCardGridItemViewProps } from './NitroCardGridItemView.types';
export const NitroCardGridItemView: FC<NitroCardGridItemViewProps> = props => export const NitroCardGridItemView: FC<NitroCardGridItemViewProps> = props =>
{ {
const { itemImage = undefined, itemColor = undefined, itemActive = false, itemCount = 1, itemUnique = false, itemUniqueNumber = 0, itemUnseen = false, columns = undefined, className = '', style = {}, children = null, ...rest } = props; const { itemImage = undefined, itemColor = undefined, itemActive = false, itemCount = 1, itemUnique = false, itemUniqueNumber = 0, itemUnseen = false, columns = undefined, className = '', style = {}, backgroundDisabled = false, children = null, ...rest } = props;
const { theme = NitroCardGridThemes.THEME_DEFAULT } = useNitroCardGridContext(); const { theme = NitroCardGridThemes.THEME_DEFAULT } = useNitroCardGridContext();
const imageUrl = `url(${ itemImage })`; const imageUrl = `url(${ itemImage })`;
return ( return (
<div className={ `${ columns === undefined ? 'col' : ('col-' + columns) } pb-1 grid-item-container` }> <div className={ `${ columns === undefined ? 'col' : ('col-' + columns) } pb-1 grid-item-container` }>
<div className={ `grid-item ${ theme } cursor-pointer${ itemActive ? ' active' : '' }${ itemUnique ? ' unique-item' : '' }${ itemUnseen ? ' unseen' : ''}${ (itemImage === null ? ' icon loading-icon': '')} ${ className || '' }` } style={ itemImage ? { ...style, backgroundImage: imageUrl } : (itemColor ? { ...style, backgroundColor: itemColor } : style) } { ...rest }> <div className={ `grid-item ${ theme } cursor-pointer${ itemActive ? ' active' : '' }${ itemUnique ? ' unique-item' : '' }${ itemUnseen ? ' unseen' : ''}${ (itemImage === null ? ' icon loading-icon': '')} ${ className || '' }` } { ...rest }>
<div className={'background position-absolute w-100 h-100' + classNames({ ' disabled': backgroundDisabled })} style={ itemImage ? { ...style, backgroundImage: imageUrl } : (itemColor ? { ...style, backgroundColor: itemColor } : style) }></div>
{ (itemCount > 1) && { (itemCount > 1) &&
<span className="position-absolute badge border bg-danger px-1 rounded-circle">{ itemCount }</span> } <span className="position-absolute badge border bg-danger px-1 rounded-circle">{ itemCount }</span> }
{ itemUnique && { itemUnique &&

1
src/layout/card/grid/item/NitroCardGridItemView.types.ts
View File

@ -10,4 +10,5 @@ export interface NitroCardGridItemViewProps extends DetailsHTMLAttributes<HTMLDi
itemUniqueNumber?: number; itemUniqueNumber?: number;
itemUnseen?: boolean; itemUnseen?: boolean;
columns?: number; columns?: number;
backgroundDisabled?: boolean;
} }

2
src/views/avatar-editor/common/AvatarEditorGridPartItem.ts
View File

@ -209,7 +209,7 @@ export class AvatarEditorGridPartItem implements IAvatarImageListener
this._isSellable = false; this._isSellable = false;
} }
if(this._isDisabled) this.setAlpha(container, 0.2); //if(this._isDisabled) this.setAlpha(container, 0.2);
this._imageUrl = TextureUtils.generateImageUrl(container); this._imageUrl = TextureUtils.generateImageUrl(container);

2
src/views/avatar-editor/views/figure-set-item/AvatarEditorFigureSetItemView.tsx
View File

@ -24,7 +24,7 @@ export const AvatarEditorFigureSetItemView: FC<AvatarEditorFigureSetItemViewProp
}) })
return ( return (
<NitroCardGridItemView itemImage={ (partItem.isClear ? undefined : partItem.imageUrl) } itemActive={ partItem.isSelected } onClick={ () => onClick(partItem) }> <NitroCardGridItemView backgroundDisabled={ partItem.isDisabled } itemImage={ (partItem.isClear ? undefined : partItem.imageUrl) } itemActive={ partItem.isSelected } onClick={ () => onClick(partItem) }>
{ partItem.isHC && <CurrencyIcon className="position-absolute end-1 bottom-1" type={ 'hc' } /> } { partItem.isHC && <CurrencyIcon className="position-absolute end-1 bottom-1" type={ 'hc' } /> }
{ partItem.isClear && <i className="icon clear-icon" /> } { partItem.isClear && <i className="icon clear-icon" /> }
{ partItem.isSellable && <i className="position-absolute icon sellable-icon end-1 bottom-1" /> } { partItem.isSellable && <i className="position-absolute icon sellable-icon end-1 bottom-1" /> }