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": [
"error",
{
"overrides":
{
"if":
{
"overrides": {
"if": {
"after": false
},
"for":
{
"for": {
"after": false
},
"while":
{
"while": {
"after": false
},
"switch":
{
"switch": {
"after": false
}
}
@ -96,8 +91,7 @@
"@typescript-eslint/ban-types": [
"error",
{
"types":
{
"types": {
"String": true,
"Boolean": true,
"Number": true,

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

@ -9,8 +9,6 @@
position: relative;
width: 100%;
height: 100%;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
&.theme-default {
@ -69,6 +67,15 @@
background-position-y: 12px !important;
}
.background {
background-position: center;
background-repeat: no-repeat;
&.disabled {
opacity: 0.5;
}
}
.trade-button {
position: absolute;
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 { LimitedEditionStyledNumberView } from '../../../../views/shared/limited-edition/styled-number/LimitedEditionStyledNumberView';
import { useNitroCardGridContext } from '../context';
@ -6,14 +7,15 @@ import { NitroCardGridItemViewProps } from './NitroCardGridItemView.types';
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 imageUrl = `url(${ itemImage })`;
return (
<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) &&
<span className="position-absolute badge border bg-danger px-1 rounded-circle">{ itemCount }</span> }
{ itemUnique &&

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

@ -10,4 +10,5 @@ export interface NitroCardGridItemViewProps extends DetailsHTMLAttributes<HTMLDi
itemUniqueNumber?: number;
itemUnseen?: boolean;
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;
}
if(this._isDisabled) this.setAlpha(container, 0.2);
//if(this._isDisabled) this.setAlpha(container, 0.2);
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 (
<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.isClear && <i className="icon clear-icon" /> }
{ partItem.isSellable && <i className="position-absolute icon sellable-icon end-1 bottom-1" /> }