From 1a3e85aa05aefa11837137f5d5c36c99dd774f59 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Fri, 24 Sep 2021 01:39:27 -0400
Subject: [PATCH] Update inventory

---
 src/views/inventory/InventoryView.scss        |  3 -
 src/views/inventory/views/InventoryViews.scss |  2 -
 .../views/badge/InventoryBadgeView.scss       | 13 ----
 .../views/badge/InventoryBadgeView.tsx        | 72 ++++++-------------
 .../badge/item/InventoryBadgeItemView.scss    | 17 -----
 .../inventory/views/bot/InventoryBotView.tsx  | 25 ++++---
 .../furniture/InventoryFurnitureView.scss     |  5 --
 .../furniture/InventoryFurnitureView.tsx      | 29 ++++----
 .../search/InventoryFurnitureSearchView.tsx   |  2 +-
 .../inventory/views/pet/InventoryPetView.tsx  | 25 ++++---
 10 files changed, 68 insertions(+), 125 deletions(-)
 delete mode 100644 src/views/inventory/views/InventoryViews.scss
 delete mode 100644 src/views/inventory/views/badge/InventoryBadgeView.scss
 delete mode 100644 src/views/inventory/views/badge/item/InventoryBadgeItemView.scss
 delete mode 100644 src/views/inventory/views/furniture/InventoryFurnitureView.scss

diff --git a/src/views/inventory/InventoryView.scss b/src/views/inventory/InventoryView.scss
index 8d5953d9..e01335a2 100644
--- a/src/views/inventory/InventoryView.scss
+++ b/src/views/inventory/InventoryView.scss
@@ -8,6 +8,3 @@
         height: 181px;
     }
 }
-
-
-@import './views/InventoryViews';
diff --git a/src/views/inventory/views/InventoryViews.scss b/src/views/inventory/views/InventoryViews.scss
deleted file mode 100644
index cd28a3b0..00000000
--- a/src/views/inventory/views/InventoryViews.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import './badge/InventoryBadgeView';
-@import './furniture/InventoryFurnitureView';
diff --git a/src/views/inventory/views/badge/InventoryBadgeView.scss b/src/views/inventory/views/badge/InventoryBadgeView.scss
deleted file mode 100644
index fc975ace..00000000
--- a/src/views/inventory/views/badge/InventoryBadgeView.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.current-badge-container {
-
-    .badge-image {
-        width: 45px;
-        height: 45px;
-    }
-}
-
-.inventory-badge-overflow {
-    height: calc(100% - 91px);
-}
-
-@import './item/InventoryBadgeItemView';
diff --git a/src/views/inventory/views/badge/InventoryBadgeView.tsx b/src/views/inventory/views/badge/InventoryBadgeView.tsx
index 3bcd03b6..1e02c3b0 100644
--- a/src/views/inventory/views/badge/InventoryBadgeView.tsx
+++ b/src/views/inventory/views/badge/InventoryBadgeView.tsx
@@ -2,6 +2,9 @@ import { RequestBadgesComposer } from '@nitrots/nitro-renderer';
 import { FC, useEffect } from 'react';
 import { LocalizeBadgeName, LocalizeText } from '../../../../api';
 import { SendMessageHook } from '../../../../hooks/messages/message-event';
+import { NitroLayoutFlexColumn } from '../../../../layout/flex-column/NitroLayoutFlexColumn';
+import { NitroLayoutGridColumn } from '../../../../layout/grid/column/NitroLayoutGridColumn';
+import { NitroLayoutGrid } from '../../../../layout/grid/NitroLayoutGrid';
 import { BadgeImageView } from '../../../shared/badge-image/BadgeImageView';
 import { useInventoryContext } from '../../context/InventoryContext';
 import { InventoryBadgeActions } from '../../reducers/InventoryBadgeReducer';
@@ -74,55 +77,26 @@ export const InventoryBadgeView: FC<InventoryBadgeViewProps> = props =>
     }
 
     return (
-        <div className="d-flex flex-column h-100 overflow-hidden">
-            <div className="row h-100">
-                <div className="d-flex flex-column col-7 h-100">
-                    <InventoryBadgeResultsView badges={ badges } activeBadges={ activeBadges } />
-                </div>
-                <div className="d-flex flex-column justify-content-between col-5 gap-2 h-100 overflow-hidden">
-                    <div className="d-flex flex-column overflow-hidden">
-                        <p className="mb-1 text-black">{ LocalizeText('inventory.badges.activebadges') }</p>
-                        <InventoryActiveBadgeResultsView badges={ activeBadges }  />
-                    </div>
-                    { badge && badge.length &&
-                        <div className="d-flex flex-column gap-2">
-                            <div className="d-flex justify-content-between align-items-center">
-                                <div className="d-flex flex-grow-1 gap-2 align-items-center current-badge-container overflow-hidden">
-                                    <BadgeImageView badgeCode={ badge } />
-                                    <div className="flex-grow-1 text-black text-truncate">{ LocalizeBadgeName(badge) }</div>
-                                </div>
+        <NitroLayoutGrid>
+            <NitroLayoutGridColumn size={ 7 } gap={ 2 }>
+                <InventoryBadgeResultsView badges={ badges } activeBadges={ activeBadges } />
+            </NitroLayoutGridColumn>
+            <NitroLayoutGridColumn className="justify-content-between" size={ 5 } gap={ 2 } overflow="auto">
+                <NitroLayoutFlexColumn overflow="hidden" gap={ 2 }>
+                    <div className="text-black text-truncate">{ LocalizeText('inventory.badges.activebadges') }</div>
+                    <InventoryActiveBadgeResultsView badges={ activeBadges }  />
+                </NitroLayoutFlexColumn>
+                { badge && (badge.length > 0) &&
+                    <NitroLayoutFlexColumn gap={ 2 }>
+                        <div className="d-flex justify-content-between align-items-center">
+                            <div className="d-flex flex-grow-1 gap-2 align-items-center overflow-hidden">
+                                <BadgeImageView badgeCode={ badge } />
+                                <div className="flex-grow-1 text-black text-truncate">{ LocalizeBadgeName(badge) }</div>
                             </div>
-                            <button type="button" className={ 'btn btn-sm btn-' + (isWearingBadge(badge) ? 'danger' : 'success') } disabled={ !isWearingBadge(badge) && !canWearBadges() } onClick={ toggleBadge }>{ LocalizeText(isWearingBadge(badge) ? 'inventory.badges.clearbadge' : 'inventory.badges.wearbadge')}</button>
-                        </div> }
-                </div>
-            </div>
-        </div>
-    //     <div className="d-flex flex-column h-100 overflow-hidden">
-    //         <div className="row inventory-badge-overflow">
-    //             <div className="col-7 d-flex flex-column h-100">
-    //                 <InventoryBadgeResultsView badges={ badges } activeBadges={ activeBadges }  />
-    //             </div>
-    //             <div className="col">
-    //                 <p className="mb-1 text-black">{ LocalizeText('inventory.badges.activebadges') }</p>
-    //                 <InventoryActiveBadgeResultsView badges={ activeBadges }  />
-    //             </div>
-    //         </div>
-    //         <div className="my-auto">
-    //             { badge && badge.length &&
-    //                 <div className="d-flex justify-content-between align-items-center bg-secondary rounded px-2 py-1 mb-1 mt-1">
-    //                     <div className="d-flex flex-grow-1 current-badge-container">
-    //                         <BadgeImageView badgeCode={ badge } />
-    //                         <div className="d-flex flex-column justify-content-center flex-grow-1 ms-2">
-    //                             <p className="mb-0">{ LocalizeBadgeName(badge) }</p>
-    //                         </div>
-    //                     </div>
-    //                     <button type="button" className={ 'btn btn-sm btn-' + (isWearingBadge(badge) ? 'danger' : 'success') } disabled={ !isWearingBadge(badge) && !canWearBadges() } onClick={ toggleBadge }>{ LocalizeText(isWearingBadge(badge) ? 'inventory.badges.clearbadge' : 'inventory.badges.wearbadge')}</button>
-    //                 </div> }
-    //             <div className="d-flex justify-content-center align-items-center bg-primary rounded p-1">
-    //                 <div className="h6 m-0 text-white">{ LocalizeText('achievements_score_description', [ 'score' ], [ '0' ]) }</div>
-    //             </div>
-    //         </div>
-    //     </div>
-    // </>
+                        </div>
+                        <button type="button" className={ 'btn btn-sm btn-' + (isWearingBadge(badge) ? 'danger' : 'success') } disabled={ !isWearingBadge(badge) && !canWearBadges() } onClick={ toggleBadge }>{ LocalizeText(isWearingBadge(badge) ? 'inventory.badges.clearbadge' : 'inventory.badges.wearbadge')}</button>
+                    </NitroLayoutFlexColumn> }
+            </NitroLayoutGridColumn>
+        </NitroLayoutGrid>
     );
 }
diff --git a/src/views/inventory/views/badge/item/InventoryBadgeItemView.scss b/src/views/inventory/views/badge/item/InventoryBadgeItemView.scss
deleted file mode 100644
index d17f5451..00000000
--- a/src/views/inventory/views/badge/item/InventoryBadgeItemView.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.inventory-badge-item-container {
-    height: 48px;
-    max-height: 48px;
-
-    .inventory-badge-item {
-        width: 100%;
-        height: 100%;
-        border-color: $grid-border-color !important;
-        background-color: $grid-bg-color;
-        overflow: hidden;
-    
-        &.active {
-            border-color: $grid-active-border-color !important;
-            background-color: $grid-active-bg-color;
-        }
-    }
-}
diff --git a/src/views/inventory/views/bot/InventoryBotView.tsx b/src/views/inventory/views/bot/InventoryBotView.tsx
index d4828b31..13e985af 100644
--- a/src/views/inventory/views/bot/InventoryBotView.tsx
+++ b/src/views/inventory/views/bot/InventoryBotView.tsx
@@ -2,6 +2,9 @@ import { GetBotInventoryComposer, RoomObjectVariable } from '@nitrots/nitro-rend
 import { FC, useEffect } from 'react';
 import { GetRoomEngine, LocalizeText } from '../../../../api';
 import { SendMessageHook } from '../../../../hooks/messages/message-event';
+import { NitroLayoutFlexColumn } from '../../../../layout/flex-column/NitroLayoutFlexColumn';
+import { NitroLayoutGridColumn } from '../../../../layout/grid/column/NitroLayoutGridColumn';
+import { NitroLayoutGrid } from '../../../../layout/grid/NitroLayoutGrid';
 import { RoomPreviewerView } from '../../../shared/room-previewer/RoomPreviewerView';
 import { attemptBotPlacement } from '../../common/BotUtilities';
 import { useInventoryContext } from '../../context/InventoryContext';
@@ -80,20 +83,20 @@ export const InventoryBotView: FC<InventoryBotViewProps> = props =>
     }
 
     return (
-        <div className="row h-100">
-            <div className="d-flex flex-column col-7 h-100">
+        <NitroLayoutGrid>
+            <NitroLayoutGridColumn size={ 7 } gap={ 2 }>
                 <InventoryBotResultsView botItems={ botItems } />
-            </div>
-            <div className="d-flex flex-column col-5 gap-2 h-100 overflow-hidden">
-                <div className="position-relative d-flex flex-column overflow-auto h-100">
+            </NitroLayoutGridColumn>
+            <NitroLayoutGridColumn size={ 5 } gap={ 2 } overflow="auto">
+                <NitroLayoutFlexColumn overflow="hidden" position="relative">
                     <RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
-                </div>
+                </NitroLayoutFlexColumn>
                 { botItem &&
-                    <div className="d-flex flex-column gap-2">
-                        <p className="flex-grow-1 text-black text-truncate">{ botItem.botData.name }</p>
+                    <NitroLayoutFlexColumn className="flex-grow-1" gap={ 2 }>
+                        <div className="flex-grow-1 text-black text-truncate">{ botItem.botData.name }</div>
                         { !!roomSession && <button type="button" className="btn btn-success btn-sm" onClick={ event => attemptBotPlacement(botItem) }>{ LocalizeText('inventory.furni.placetoroom') }</button> }
-                    </div> }
-            </div>
-        </div>
+                    </NitroLayoutFlexColumn> }
+            </NitroLayoutGridColumn>
+        </NitroLayoutGrid>
     );
 }
diff --git a/src/views/inventory/views/furniture/InventoryFurnitureView.scss b/src/views/inventory/views/furniture/InventoryFurnitureView.scss
deleted file mode 100644
index 089af5ef..00000000
--- a/src/views/inventory/views/furniture/InventoryFurnitureView.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.stuffdata-extra-container {
-    position: absolute;
-    top: 5px;
-    right: 15px;
-}
diff --git a/src/views/inventory/views/furniture/InventoryFurnitureView.tsx b/src/views/inventory/views/furniture/InventoryFurnitureView.tsx
index 0a4f93cc..06518c2f 100644
--- a/src/views/inventory/views/furniture/InventoryFurnitureView.tsx
+++ b/src/views/inventory/views/furniture/InventoryFurnitureView.tsx
@@ -2,6 +2,9 @@ import { FurnitureListComposer, RoomObjectVariable, Vector3d } from '@nitrots/ni
 import { FC, useEffect, useState } from 'react';
 import { GetRoomEngine, GetSessionDataManager, LocalizeText } from '../../../../api';
 import { SendMessageHook } from '../../../../hooks/messages';
+import { NitroLayoutFlexColumn } from '../../../../layout/flex-column/NitroLayoutFlexColumn';
+import { NitroLayoutGridColumn } from '../../../../layout/grid/column/NitroLayoutGridColumn';
+import { NitroLayoutGrid } from '../../../../layout/grid/NitroLayoutGrid';
 import { LimitedEditionCompactPlateView } from '../../../shared/limited-edition/compact-plate/LimitedEditionCompactPlateView';
 import { RarityLevelView } from '../../../shared/rarity-level/RarityLevelView';
 import { RoomPreviewerView } from '../../../shared/room-previewer/RoomPreviewerView';
@@ -116,30 +119,30 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
     }
 
     return (
-        <div className="row h-100">
-            <div className="d-flex flex-column col-7 h-100">
+        <NitroLayoutGrid>
+            <NitroLayoutGridColumn size={ 7 } gap={ 2 }>
                 <InventoryFurnitureSearchView groupItems={ groupItems } setGroupItems={ setFilteredGroupItems } />
                 <InventoryFurnitureResultsView groupItems={ filteredGroupItems }  />
-            </div>
-            <div className="d-flex flex-column col-5 gap-2 h-100 overflow-hidden">
-                <div className="position-relative d-flex flex-column overflow-auto h-100">
+            </NitroLayoutGridColumn>
+            <NitroLayoutGridColumn size={ 5 } gap={ 2 } overflow="auto">
+                <NitroLayoutFlexColumn overflow="hidden" position="relative">
                     <RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
                     { groupItem && groupItem.stuffData.isUnique &&
-                        <div className="stuffdata-extra-container">
+                        <div className="position-absolute top-2 end-2">
                             <LimitedEditionCompactPlateView uniqueNumber={ groupItem.stuffData.uniqueNumber } uniqueSeries={ groupItem.stuffData.uniqueSeries } />
                         </div> }
                     { (groupItem && groupItem.stuffData.rarityLevel > -1) &&
-                        <div className="stuffdata-extra-container">
+                        <div className="position-absolute top-2 end-2">
                             <RarityLevelView level={ groupItem.stuffData.rarityLevel } />
                         </div> }
-                </div>
+                </NitroLayoutFlexColumn>
                 { groupItem &&
-                    <div className="d-flex flex-column gap-2">
-                        <p className="flex-grow-1 text-black text-truncate">{ groupItem.name }</p>
+                    <NitroLayoutFlexColumn className="flex-grow-1" gap={ 2 }>
+                        <div className="flex-grow-1 text-black text-truncate">{ groupItem.name }</div>
                         { !!roomSession &&
                             <button type="button" className="btn btn-success btn-sm" onClick={ event => attemptItemPlacement(groupItem) }>{ LocalizeText('inventory.furni.placetoroom') }</button> }
-                    </div> }
-            </div>
-        </div>
+                    </NitroLayoutFlexColumn> }
+            </NitroLayoutGridColumn>
+        </NitroLayoutGrid>
     );
 }
diff --git a/src/views/inventory/views/furniture/search/InventoryFurnitureSearchView.tsx b/src/views/inventory/views/furniture/search/InventoryFurnitureSearchView.tsx
index 599214cd..f7934a19 100644
--- a/src/views/inventory/views/furniture/search/InventoryFurnitureSearchView.tsx
+++ b/src/views/inventory/views/furniture/search/InventoryFurnitureSearchView.tsx
@@ -30,7 +30,7 @@ export const InventoryFurnitureSearchView: FC<InventoryFurnitureSearchViewProps>
     }, [ groupItems, setGroupItems, searchValue ]);
 
     return (
-        <div className="d-flex mb-1">
+        <div className="d-flex">
             <div className="d-flex flex-grow-1 me-1">
                 <input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('generic.search') } value={ searchValue } onChange={ event => setSearchValue(event.target.value) } />
             </div>
diff --git a/src/views/inventory/views/pet/InventoryPetView.tsx b/src/views/inventory/views/pet/InventoryPetView.tsx
index a90faef1..bcfcc715 100644
--- a/src/views/inventory/views/pet/InventoryPetView.tsx
+++ b/src/views/inventory/views/pet/InventoryPetView.tsx
@@ -2,6 +2,9 @@ import { RequestPetsComposer, RoomObjectVariable } from '@nitrots/nitro-renderer
 import { FC, useEffect } from 'react';
 import { GetRoomEngine, LocalizeText } from '../../../../api';
 import { SendMessageHook } from '../../../../hooks/messages/message-event';
+import { NitroLayoutFlexColumn } from '../../../../layout/flex-column/NitroLayoutFlexColumn';
+import { NitroLayoutGridColumn } from '../../../../layout/grid/column/NitroLayoutGridColumn';
+import { NitroLayoutGrid } from '../../../../layout/grid/NitroLayoutGrid';
 import { RoomPreviewerView } from '../../../shared/room-previewer/RoomPreviewerView';
 import { attemptPetPlacement } from '../../common/PetUtilities';
 import { useInventoryContext } from '../../context/InventoryContext';
@@ -80,20 +83,20 @@ export const InventoryPetView: FC<InventoryPetViewProps> = props =>
     }
 
     return (
-        <div className="row h-100">
-            <div className="d-flex flex-column col-7 h-100">
+        <NitroLayoutGrid>
+            <NitroLayoutGridColumn size={ 7 } gap={ 2 }>
                 <InventoryPetResultsView petItems={ petItems }  />
-            </div>
-            <div className="d-flex flex-column col-5 gap-2 h-100 overflow-hidden">
-                <div className="position-relative d-flex flex-column overflow-auto h-100">
+            </NitroLayoutGridColumn>
+            <NitroLayoutGridColumn size={ 5 } gap={ 2 } overflow="auto">
+                <NitroLayoutFlexColumn overflow="hidden" position="relative">
                     <RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
-                </div>
+                </NitroLayoutFlexColumn>
                 { petItem &&
-                    <div className="d-flex flex-column gap-2">
-                        <p className="flex-grow-1 text-black text-truncate">{ petItem.petData.name }</p>
+                    <NitroLayoutFlexColumn className="flex-grow-1" gap={ 2 }>
+                        <div className="flex-grow-1 text-black text-truncate">{ petItem.petData.name }</div>
                         { !!roomSession && <button type="button" className="btn btn-success btn-sm" onClick={ event => attemptPetPlacement(petItem) }>{ LocalizeText('inventory.furni.placetoroom') }</button> }
-                    </div> }
-            </div>
-        </div>
+                    </NitroLayoutFlexColumn> }
+            </NitroLayoutGridColumn>
+        </NitroLayoutGrid>
     );
 }