duckietm/Nitro-Cool-UI
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-Cool-UI.git synced 2025-06-21 22:36:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added: Default Search tekst in Inventory & some cleanup

Browse Source
This commit is contained in:
duckietm 2024-05-03 11:08:14 +02:00
parent 5e3f028d2d
commit fc4924a368
3 changed files with 5 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/inventory/InventoryView.scss
View File

@ -42,25 +42,7 @@
width: 129px; width: 129px;
height: 181px; height: 181px;
} }
.empty-petsimage {
background: url("@/assets/images/inventory/petsempty.png");
background-repeat: no-repeat;
width: 220px;
height: 220px;
}
.empty-furniimage {
background: url("@/assets/images/inventory/furniempty.png");
background-repeat: no-repeat;
width: 220px;
height: 220px;
}
.empty-botsimage {
background: url("@/assets/images/inventory/botsempty.png");
background-repeat: no-repeat;
width: 220px;
height: 220px;
}
.bubble-inventory { .bubble-inventory {
position: relative; position: relative;
font-family: sans-serif; font-family: sans-serif;
@ -161,7 +143,7 @@
.calc-wrapper { .calc-wrapper {
width: 96%; width: 96%;
height: calc(100% - 100px); height: calc(100% - 90px);
} }
.size-list-badges { .size-list-badges {

2
src/components/inventory/views/InventoryCategoryFilterView.tsx
View File

@ -84,7 +84,7 @@ export const InventoryCategoryFilterView: FC<InventoryCategoryFilterViewProps> =
<Flex className="nitro-inventory-category-filter rounded p-1 mt-n1" style={ { width: currentTab === TAB_BADGES ? '320px' : '100%' } }> <Flex className="nitro-inventory-category-filter rounded p-1 mt-n1" style={ { width: currentTab === TAB_BADGES ? '320px' : '100%' } }>
<Flex className="position-relative"> <Flex className="position-relative">
<Flex fullWidth alignItems="center" position="relative"> <Flex fullWidth alignItems="center" position="relative">
<input type="text" className="form-control form-control-sm" value={ searchValue } onChange={ event => setSearchValue(event.target.value) } /> <input type="text" className="form-control form-control-sm" value={ searchValue } onChange={ event => setSearchValue(event.target.value) } placeholder={ LocalizeText('catalog.search') }/>
</Flex> </Flex>
{ (searchValue && !!searchValue.length) && <i className="icon icon-clear position-absolute cursor-pointer end-1 top-1" onClick={ event => setSearchValue('') } /> } { (searchValue && !!searchValue.length) && <i className="icon icon-clear position-absolute cursor-pointer end-1 top-1" onClick={ event => setSearchValue('') } /> }
</Flex> </Flex>

8
src/components/inventory/views/badge/InventoryBadgeView.tsx
View File

@ -1,7 +1,7 @@
import { FC, useEffect, useState } from 'react'; import { FC, useEffect, useState } from 'react';
import { LocalizeBadgeName, LocalizeText, UnseenItemCategory } from '../../../../api'; import { LocalizeBadgeName, LocalizeText, UnseenItemCategory } from '../../../../api';
import { AutoGrid, Button, Column, Flex, Grid, LayoutBadgeImageView, Text } from '../../../../common'; import { AutoGrid, Button, Column, Flex, Grid, LayoutBadgeImageView, Text } from '../../../../common';
import { useAchievements, useInventoryBadges, useInventoryUnseenTracker } from '../../../../hooks'; import { useInventoryBadges, useInventoryUnseenTracker } from '../../../../hooks';
import { InventoryBadgeItemView } from './InventoryBadgeItemView'; import { InventoryBadgeItemView } from './InventoryBadgeItemView';
interface InventoryBadgeViewProps interface InventoryBadgeViewProps
@ -15,7 +15,6 @@ export const InventoryBadgeView: FC<InventoryBadgeViewProps> = props =>
const [ isVisible, setIsVisible ] = useState(false); const [ isVisible, setIsVisible ] = useState(false);
const { activeBadgeCodes = [], selectedBadgeCode = null, isWearingBadge = null, canWearBadges = null, toggleBadge = null, getBadgeId = null, activate = null, deactivate = null } = useInventoryBadges(); const { activeBadgeCodes = [], selectedBadgeCode = null, isWearingBadge = null, canWearBadges = null, toggleBadge = null, getBadgeId = null, activate = null, deactivate = null } = useInventoryBadges();
const { isUnseen = null, removeUnseen = null } = useInventoryUnseenTracker(); const { isUnseen = null, removeUnseen = null } = useInventoryUnseenTracker();
const { achievementScore = 0 } = useAchievements();
useEffect(() => useEffect(() =>
{ {
@ -41,7 +40,7 @@ export const InventoryBadgeView: FC<InventoryBadgeViewProps> = props =>
}, []); }, []);
return ( return (
<div className="badge-wrapper calc-wrapper mt-n2"> <div className="calc-wrapper mt-n2">
<Grid gap={ 1 }> <Grid gap={ 1 }>
<Column overflow="hidden" className="size-list-badges mt-1"> <Column overflow="hidden" className="size-list-badges mt-1">
<AutoGrid gap={ 1 } columnCount={ 5 }> <AutoGrid gap={ 1 } columnCount={ 5 }>
@ -72,9 +71,6 @@ export const InventoryBadgeView: FC<InventoryBadgeViewProps> = props =>
<Button className="btn btn-primary mb-1" style={ { fontSize: '12px' } } disabled={ !isWearingBadge(selectedBadgeCode) && !canWearBadges() } onClick={ event => toggleBadge(selectedBadgeCode) }>{ LocalizeText(isWearingBadge(selectedBadgeCode) ? 'inventory.badges.clearbadge' : 'inventory.badges.wearbadge') }</Button> <Button className="btn btn-primary mb-1" style={ { fontSize: '12px' } } disabled={ !isWearingBadge(selectedBadgeCode) && !canWearBadges() } onClick={ event => toggleBadge(selectedBadgeCode) }>{ LocalizeText(isWearingBadge(selectedBadgeCode) ? 'inventory.badges.clearbadge' : 'inventory.badges.wearbadge') }</Button>
</Flex> </Flex>
} }
<div className="nitro-progress-bar mt-1">
<Text small center variant="white" style={ { marginTop: '-1px' } }>{ LocalizeText('achievements.categories.score', [ 'score' ], [ achievementScore.toString() ]) }</Text>
</div>
</Column> </Column>
</div> </div>
); );