duckietm/Nitro-V3
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-V3.git synced 2026-06-19 15:06:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

🆙 Fix move avatar-editor to Tailwind

Browse Source
This commit is contained in:
duckietm
2026-03-27 09:53:55 +01:00
parent 7c39dcb513
commit a095d818a3
2 changed files with 65 additions and 241 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/avatar-editor/AvatarEditorIcon.tsx
+63 -27
View File
@@ -1,45 +1,81 @@
import { DetailedHTMLProps, HTMLAttributes, PropsWithChildren, forwardRef } from 'react';
import { classNames } from '../../layout';
type AvatarIconType = 'male' | 'female' | 'clear' | 'sellable';
import arrowLeftIcon from '../../assets/images/avatareditor/arrow-left-icon.png';
import arrowRightIcon from '../../assets/images/avatareditor/arrow-right-icon.png';
import caIcon from '../../assets/images/avatareditor/ca-icon.png';
import caSelectedIcon from '../../assets/images/avatareditor/ca-selected-icon.png';
import ccIcon from '../../assets/images/avatareditor/cc-icon.png';
import ccSelectedIcon from '../../assets/images/avatareditor/cc-selected-icon.png';
import chIcon from '../../assets/images/avatareditor/ch-icon.png';
import chSelectedIcon from '../../assets/images/avatareditor/ch-selected-icon.png';
import clearIcon from '../../assets/images/avatareditor/clear-icon.png';
import cpIcon from '../../assets/images/avatareditor/cp-icon.png';
import cpSelectedIcon from '../../assets/images/avatareditor/cp-selected-icon.png';
import eaIcon from '../../assets/images/avatareditor/ea-icon.png';
import eaSelectedIcon from '../../assets/images/avatareditor/ea-selected-icon.png';
import faIcon from '../../assets/images/avatareditor/fa-icon.png';
import faSelectedIcon from '../../assets/images/avatareditor/fa-selected-icon.png';
import femaleIcon from '../../assets/images/avatareditor/female-icon.png';
import femaleSelectedIcon from '../../assets/images/avatareditor/female-selected-icon.png';
import haIcon from '../../assets/images/avatareditor/ha-icon.png';
import haSelectedIcon from '../../assets/images/avatareditor/ha-selected-icon.png';
import heIcon from '../../assets/images/avatareditor/he-icon.png';
import heSelectedIcon from '../../assets/images/avatareditor/he-selected-icon.png';
import hrIcon from '../../assets/images/avatareditor/hr-icon.png';
import hrSelectedIcon from '../../assets/images/avatareditor/hr-selected-icon.png';
import lgIcon from '../../assets/images/avatareditor/lg-icon.png';
import lgSelectedIcon from '../../assets/images/avatareditor/lg-selected-icon.png';
import maleIcon from '../../assets/images/avatareditor/male-icon.png';
import maleSelectedIcon from '../../assets/images/avatareditor/male-selected-icon.png';
import sellableIcon from '../../assets/images/avatareditor/sellable-icon.png';
import shIcon from '../../assets/images/avatareditor/sh-icon.png';
import shSelectedIcon from '../../assets/images/avatareditor/sh-selected-icon.png';
import waIcon from '../../assets/images/avatareditor/wa-icon.png';
import waSelectedIcon from '../../assets/images/avatareditor/wa-selected-icon.png';
const ICON_MAP: Record<string, { normal: string; selected?: string }> = {
'arrow-left': { normal: arrowLeftIcon },
'arrow-right': { normal: arrowRightIcon },
'ca': { normal: caIcon, selected: caSelectedIcon },
'cc': { normal: ccIcon, selected: ccSelectedIcon },
'ch': { normal: chIcon, selected: chSelectedIcon },
'clear': { normal: clearIcon },
'cp': { normal: cpIcon, selected: cpSelectedIcon },
'ea': { normal: eaIcon, selected: eaSelectedIcon },
'fa': { normal: faIcon, selected: faSelectedIcon },
'female': { normal: femaleIcon, selected: femaleSelectedIcon },
'ha': { normal: haIcon, selected: haSelectedIcon },
'he': { normal: heIcon, selected: heSelectedIcon },
'hr': { normal: hrIcon, selected: hrSelectedIcon },
'lg': { normal: lgIcon, selected: lgSelectedIcon },
'male': { normal: maleIcon, selected: maleSelectedIcon },
'sellable': { normal: sellableIcon },
'sh': { normal: shIcon, selected: shSelectedIcon },
'wa': { normal: waIcon, selected: waSelectedIcon },
};
export const AvatarEditorIcon = forwardRef<HTMLDivElement, PropsWithChildren<{
icon: AvatarIconType;
icon: string;
selected?: boolean;
}> & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>>((props, ref) =>
{
const { icon = null, selected = false, className = null, ...rest } = props;
const { icon = null, selected = false, className = null, children, ...rest } = props;
/*
switch (icon)
{
case 'male':
const iconEntry = icon ? ICON_MAP[icon] : null;
if(!iconEntry) return null;
break;
const src = (selected && iconEntry.selected) ? iconEntry.selected : iconEntry.normal;
case 'arrow-left':
break;
default:
//statements;
break;
}
*/
return (
<div
ref={ ref }
className={ classNames(
'nitro-avatar-editor-spritesheet',
'cursor-pointer',
`${ icon }-icon`,
selected && 'selected',
className
) }
{ ...rest } />
className={ classNames('flex items-center justify-center cursor-pointer', className) }
{ ...rest }>
<img src={ src } alt={ icon } className="h-[22px] w-auto object-contain pointer-events-none" draggable={ false } />
{ children }
</div>
);
});
src/css/index.css
+2 -214
View File
@@ -447,219 +447,7 @@ body {
}
}
.nitro-avatar-editor-spritesheet {
background: url('@/assets/images/avatareditor/avatar-editor-spritesheet.png') transparent no-repeat;
&.arrow-left-icon {
width: 28px;
height: 21px;
background-position: -226px -131px;
}
&.arrow-right-icon {
width: 28px;
height: 21px;
background-position: -226px -162px;
}
&.ca-icon {
width: 25px;
height: 25px;
background-position: -226px -61px;
&.selected {
width: 25px;
height: 25px;
background-position: -226px -96px;
}
}
&.cc-icon {
width: 31px;
height: 29px;
background-position: -145px -5px;
&.selected {
width: 31px;
height: 29px;
background-position: -145px -44px;
}
}
&.ch-icon {
width: 29px;
height: 24px;
background-position: -186px -39px;
&.selected {
width: 29px;
height: 24px;
background-position: -186px -73px;
}
}
&.clear-icon {
width: 27px;
height: 27px;
background-position: -145px -157px;
}
&.cp-icon {
width: 30px;
height: 24px;
background-position: -145px -264px;
&.selected {
width: 30px;
height: 24px;
background-position: -186px -5px;
}
}
&.ea-icon {
width: 35px;
height: 16px;
background-position: -226px -193px;
&.selected {
width: 35px;
height: 16px;
background-position: -226px -219px;
}
}
&.fa-icon {
width: 27px;
height: 20px;
background-position: -186px -137px;
&.selected {
width: 27px;
height: 20px;
background-position: -186px -107px;
}
}
&.female-icon {
width: 18px;
height: 27px;
background-position: -186px -202px;
&.selected {
width: 18px;
height: 27px;
background-position: -186px -239px;
}
}
&.ha-icon {
width: 25px;
height: 22px;
background-position: -226px -245px;
&.selected {
width: 25px;
height: 22px;
background-position: -226px -277px;
}
}
&.he-icon {
width: 31px;
height: 27px;
background-position: -145px -83px;
&.selected {
width: 31px;
height: 27px;
background-position: -145px -120px;
}
}
&.hr-icon {
width: 29px;
height: 25px;
background-position: -145px -194px;
&.selected {
width: 29px;
height: 25px;
background-position: -145px -229px;
}
}
&.lg-icon {
width: 19px;
height: 20px;
background-position: -303px -45px;
&.selected {
width: 19px;
height: 20px;
background-position: -303px -75px;
}
}
&.loading-icon {
width: 21px;
height: 25px;
background-position: -186px -167px;
}
&.male-icon {
width: 21px;
height: 21px;
background-position: -186px -276px;
&.selected {
width: 21px;
height: 21px;
background-position: -272px -5px;
}
}
&.sellable-icon {
width: 17px;
height: 15px;
background-position: -303px -105px;
}
&.sh-icon {
width: 37px;
height: 10px;
background-position: -303px -5px;
&.selected {
width: 37px;
height: 10px;
background-position: -303px -25px;
}
}
&.spotlight-icon {
width: 130px;
height: 305px;
background-position: -5px -5px;
}
&.wa-icon {
width: 36px;
height: 18px;
background-position: -226px -5px;
&.selected {
width: 36px;
height: 18px;
background-position: -226px -33px;
}
}
}
/* Avatar editor icons are now rendered as <img> tags via AvatarEditorIcon.tsx */
.nitro-avatar-editor-wardrobe-figure-preview {
background-color: #677181;
@@ -710,7 +498,7 @@ body {
.category-item {
height: 40px;
height: 32px;
}
.figure-preview-container {