From 34ab1e6fd381722f401f86551e2a449ad10c707f Mon Sep 17 00:00:00 2001 From: Bill Date: Wed, 22 Sep 2021 15:01:56 -0400 Subject: [PATCH] Layout updates --- src/App.scss | 15 +++ src/assets/styles/bootstrap/_variables.scss | 3 +- src/assets/styles/utils.scss | 8 ++ src/layout/card/NitroCardView.scss | 1 + .../card/content/NitroCardContentView.scss | 1 - .../card/content/NitroCardContentView.tsx | 2 +- src/layout/card/grid/NitroCardGridView.scss | 4 +- src/layout/card/grid/NitroCardGridView.tsx | 35 ++++-- .../card/grid/NitroCardGridView.types.ts | 7 -- .../grid/context/NitroCardGridContext.tsx | 13 -- .../context/NitroCardGridContext.types.ts | 11 -- src/layout/card/grid/context/index.ts | 2 - src/layout/card/grid/index.ts | 1 - .../card/grid/item/NitroCardGridItemView.scss | 112 ++++++------------ .../card/grid/item/NitroCardGridItemView.tsx | 53 ++++++--- .../grid/item/NitroCardGridItemView.types.ts | 2 - src/views/achievements/AchievementsView.scss | 8 +- src/views/avatar-editor/AvatarEditorView.scss | 39 +++++- .../figure-set/AvatarEditorFigureSetView.tsx | 3 +- .../views/model/AvatarEditorModelView.tsx | 2 +- .../AvatarEditorPaletteSetView.tsx | 3 +- .../wardrobe/AvatarEditorWardrobeView.tsx | 3 +- src/views/catalog/CatalogView.scss | 9 +- src/views/inventory/InventoryView.scss | 9 +- .../item/InventoryFurnitureItemView.tsx | 2 +- .../views/trade/InventoryTradeView.tsx | 6 +- src/views/navigator/NavigatorView.scss | 9 +- .../shared/avatar-image/AvatarImage.scss | 3 +- .../shared/avatar-image/AvatarImageView.tsx | 6 + 29 files changed, 183 insertions(+), 189 deletions(-) delete mode 100644 src/layout/card/grid/context/NitroCardGridContext.tsx delete mode 100644 src/layout/card/grid/context/NitroCardGridContext.types.ts delete mode 100644 src/layout/card/grid/context/index.ts diff --git a/src/App.scss b/src/App.scss index 8d450e5a..474a2f07 100644 --- a/src/App.scss +++ b/src/App.scss @@ -17,6 +17,21 @@ $grid-active-border-color: $white; $toolbar-height: 55px; +$achievement-width: 650px; +$achievement-height: 400px; + +$avatar-editor-width: 620px; +$avatar-editor-height: 374px; + +$catalog-width: 620px; +$catalog-height: 400px; + +$inventory-width: 485px; +$inventory-height: 315px; + +$navigator-width: 400px; +$navigator-height: 420px; + .nitro-app { width: 100%; height: 100%; diff --git a/src/assets/styles/bootstrap/_variables.scss b/src/assets/styles/bootstrap/_variables.scss index 57aa9b7d..feb71255 100644 --- a/src/assets/styles/bootstrap/_variables.scss +++ b/src/assets/styles/bootstrap/_variables.scss @@ -85,6 +85,7 @@ $ghost: #c8cad0 !default; $gray-chateau: #a3a7b1 !default; $gable-green: #1C323F !default; $william: #3d5f6e !default; +$bluewood: #304059 !default; $success: $green !default; $info: $cyan !default; $warning: $yellow !default; @@ -385,7 +386,7 @@ $enable-transitions: true !default; $enable-reduced-motion: true !default; $enable-smooth-scroll: true !default; $enable-grid-classes: true !default; -$enable-cssgrid: false !default; +$enable-cssgrid: true !default; $enable-button-pointers: true !default; $enable-rfs: true !default; $enable-validation-icons: true !default; diff --git a/src/assets/styles/utils.scss b/src/assets/styles/utils.scss index 0050c41b..cc44e17f 100644 --- a/src/assets/styles/utils.scss +++ b/src/assets/styles/utils.scss @@ -10,6 +10,14 @@ transform: scale(1) translateZ(0); } +.scale-1-25 { + transform: scale(1.25) translateZ(0); +} + +.scale-1-50 { + transform: scale(1.50) translateZ(0); +} + .scale-2 { transform: scale(2) translateZ(0); } diff --git a/src/layout/card/NitroCardView.scss b/src/layout/card/NitroCardView.scss index cd7bfebf..84390259 100644 --- a/src/layout/card/NitroCardView.scss +++ b/src/layout/card/NitroCardView.scss @@ -3,6 +3,7 @@ $nitro-card-tabs-height: 33px; .nitro-card { pointer-events: all; + resize: both; @import './accordion/NitroCardAccordionView'; @import './content/NitroCardContentView'; diff --git a/src/layout/card/content/NitroCardContentView.scss b/src/layout/card/content/NitroCardContentView.scss index 4cbe6ee3..c56cad8c 100644 --- a/src/layout/card/content/NitroCardContentView.scss +++ b/src/layout/card/content/NitroCardContentView.scss @@ -10,6 +10,5 @@ height: 100% !important; min-height: auto !important; max-height: 100% !important; - resize: none !important; } } diff --git a/src/layout/card/content/NitroCardContentView.tsx b/src/layout/card/content/NitroCardContentView.tsx index 969069b2..ee3c1a72 100644 --- a/src/layout/card/content/NitroCardContentView.tsx +++ b/src/layout/card/content/NitroCardContentView.tsx @@ -8,7 +8,7 @@ export const NitroCardContentView: FC = props => const { simple = false } = useNitroCardContext(); return ( -
+
{ children }
); diff --git a/src/layout/card/grid/NitroCardGridView.scss b/src/layout/card/grid/NitroCardGridView.scss index f5794406..71acb2ee 100644 --- a/src/layout/card/grid/NitroCardGridView.scss +++ b/src/layout/card/grid/NitroCardGridView.scss @@ -66,6 +66,6 @@ } } } - - @import './item/NitroCardGridItemView.scss'; } + +@import './item/NitroCardGridItemView.scss'; diff --git a/src/layout/card/grid/NitroCardGridView.tsx b/src/layout/card/grid/NitroCardGridView.tsx index a9a85c64..033927a4 100644 --- a/src/layout/card/grid/NitroCardGridView.tsx +++ b/src/layout/card/grid/NitroCardGridView.tsx @@ -1,18 +1,31 @@ -import { FC } from 'react'; -import { NitroCardGridContextProvider } from './context/NitroCardGridContext'; -import { NitroCardGridThemes, NitroCardGridViewProps } from './NitroCardGridView.types'; +import { FC, useMemo } from 'react'; +import { NitroCardGridViewProps } from './NitroCardGridView.types'; export const NitroCardGridView: FC = props => { - const { columns = 5, theme = NitroCardGridThemes.THEME_DEFAULT, className = '', children = null, ...rest } = props; + const { columns = 5, className = '', style = null, children = null, ...rest } = props; + + const getClassName = useMemo(() => + { + let newClassName = 'grid gap-2 overflow-auto'; + + if(className && className.length) newClassName += ' ' + className; + + return newClassName; + }, [ className ]); + + const getStyle = useMemo(() => + { + const newStyle = { ...style }; + + newStyle['--bs-columns'] = columns.toString(); + + return newStyle; + }, [ style, columns ]); return ( - -
-
- { children } -
-
- +
+ { children } +
); } diff --git a/src/layout/card/grid/NitroCardGridView.types.ts b/src/layout/card/grid/NitroCardGridView.types.ts index f3cc6c80..d5dc256d 100644 --- a/src/layout/card/grid/NitroCardGridView.types.ts +++ b/src/layout/card/grid/NitroCardGridView.types.ts @@ -3,11 +3,4 @@ import { DetailsHTMLAttributes } from 'react'; export interface NitroCardGridViewProps extends DetailsHTMLAttributes { columns?: number; - theme?: string; -} - -export class NitroCardGridThemes -{ - public static THEME_DEFAULT: string = 'theme-default'; - public static THEME_SHADOWED: string = 'theme-shadowed'; } diff --git a/src/layout/card/grid/context/NitroCardGridContext.tsx b/src/layout/card/grid/context/NitroCardGridContext.tsx deleted file mode 100644 index 18661b76..00000000 --- a/src/layout/card/grid/context/NitroCardGridContext.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { createContext, FC, useContext } from 'react'; -import { INitroCardGridContext, NitroCardGridContextProps } from './NitroCardGridContext.types'; - -const NitroCardGridContext = createContext({ - theme: null -}); - -export const NitroCardGridContextProvider: FC = props => -{ - return { props.children } -} - -export const useNitroCardGridContext = () => useContext(NitroCardGridContext); diff --git a/src/layout/card/grid/context/NitroCardGridContext.types.ts b/src/layout/card/grid/context/NitroCardGridContext.types.ts deleted file mode 100644 index a0f97c95..00000000 --- a/src/layout/card/grid/context/NitroCardGridContext.types.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { ProviderProps } from 'react'; - -export interface INitroCardGridContext -{ - theme: string; -} - -export interface NitroCardGridContextProps extends ProviderProps -{ - -} diff --git a/src/layout/card/grid/context/index.ts b/src/layout/card/grid/context/index.ts deleted file mode 100644 index 9e3f79e8..00000000 --- a/src/layout/card/grid/context/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './NitroCardGridContext'; -export * from './NitroCardGridContext.types'; diff --git a/src/layout/card/grid/index.ts b/src/layout/card/grid/index.ts index 4b3dea50..8a191eec 100644 --- a/src/layout/card/grid/index.ts +++ b/src/layout/card/grid/index.ts @@ -1,4 +1,3 @@ -export * from './context'; export * from './item'; export * from './NitroCardGridView'; export * from './NitroCardGridView.types'; diff --git a/src/layout/card/grid/item/NitroCardGridItemView.scss b/src/layout/card/grid/item/NitroCardGridItemView.scss index b2959864..ab6ad600 100644 --- a/src/layout/card/grid/item/NitroCardGridItemView.scss +++ b/src/layout/card/grid/item/NitroCardGridItemView.scss @@ -1,86 +1,48 @@ -.grid-item-container { +.grid-item { + position: relative; + display: flex; + justify-content: center; + align-items: center; height: 50px; max-height: 50px; + width: 100%; + background-position: center; + background-repeat: no-repeat; + border-radius: $border-radius; + border-color: $grid-border-color !important; + background-color: $grid-bg-color; + border: nth(map-values($border-widths), 2) solid; - .grid-item { - display: flex; - justify-content: center; - align-items: center; - position: relative; - width: 100%; - height: 100%; - background-position: center; - background-repeat: no-repeat; - overflow: hidden; + &.active { + border-color: $grid-active-border-color !important; + background-color: $grid-active-bg-color !important; + } - &.theme-default { - border-radius: $border-radius; - border-color: $grid-border-color !important; - background-color: $grid-bg-color; - border: nth(map-values($border-widths), 2) solid; - } + &.unseen { + background-color: rgba($success, 0.4); + } - &.theme-shadowed { - border-radius: $border-radius; - background-color: $light; + .badge { + top: 2px; + right: 2px; + font-size: 8px; + } - &::after { - position: absolute; - content: ''; - top: 0; - bottom: 0; - left: 0; - right: 0; - border-radius: $border-radius; - border-bottom: 2px solid white; - border-right: 2px solid white; - box-shadow: -2px -2px rgba(0, 0, 0, .4), inset 3px 3px rgba(0, 0, 0, .2); - } + .avatar-image { + background-position-y: 10px; + } - &.active { - border: nth(map-values($border-widths), 2) solid; - border-color: $oslo-gray !important; - background-color: #F5F5F5; + .trade-button { + position: absolute; + bottom: 2px; + right: 2px; + font-size: 5px; + padding: 3px; + min-height: unset; - &:after { - content: unset; - } - } - } - - &.active { - border-color: $grid-active-border-color !important; - background-color: $grid-active-bg-color !important; - } - - &.unseen { - background-color: rgba($success, 0.4); - } - - .badge { - top: 2px; - right: 2px; - font-size: 8px; - } - - .avatar-image { - background-position: center; - background-repeat: no-repeat; - background-position-y: 12px !important; - } - - .trade-button { - position: absolute; - bottom: 2px; - right: 2px; - font-size: 5px; - padding: 3px; - min-height: unset; - - &.left { - right: unset; - left: 2px; - } + &.left { + right: unset; + left: 2px; } } } diff --git a/src/layout/card/grid/item/NitroCardGridItemView.tsx b/src/layout/card/grid/item/NitroCardGridItemView.tsx index a1e4b253..3713b490 100644 --- a/src/layout/card/grid/item/NitroCardGridItemView.tsx +++ b/src/layout/card/grid/item/NitroCardGridItemView.tsx @@ -1,27 +1,48 @@ -import { FC } from 'react'; +import { FC, useMemo } from 'react'; import { LimitedEditionStyledNumberView } from '../../../../views/shared/limited-edition/styled-number/LimitedEditionStyledNumberView'; -import { useNitroCardGridContext } from '../context'; -import { NitroCardGridThemes } from '../NitroCardGridView.types'; import { NitroCardGridItemViewProps } from './NitroCardGridItemView.types'; export const NitroCardGridItemView: FC = 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 { theme = NitroCardGridThemes.THEME_DEFAULT } = useNitroCardGridContext(); + const { itemImage = undefined, itemColor = undefined, itemActive = false, itemCount = 1, itemUniqueNumber = 0, itemUnseen = false, className = '', style = {}, children = null, ...rest } = props; - const imageUrl = `url(${ itemImage })`; + const getClassName = useMemo(() => + { + let newClassName = 'grid-item cursor-pointer overflow-hidden'; + + if(itemActive) newClassName += ' active'; + + if(itemUniqueNumber > 0) newClassName += ' unique-item'; + + if(itemUnseen) newClassName += ' unseen'; + + if(itemImage === null) newClassName += ' icon loading-icon'; + + if(className && className.length) newClassName += ' ' + className; + + return newClassName; + }, [ className, itemActive, itemUniqueNumber, itemUnseen, itemImage ]); + + const getStyle = useMemo(() => + { + const newStyle = { ...style }; + + if(itemImage) newStyle.backgroundImage = `url(${ itemImage })`; + + if(itemColor) newStyle.backgroundColor = itemColor; + + return newStyle; + }, [ style, itemImage, itemColor ]); return ( -
-
- { (itemCount > 1) && - { itemCount } } - { itemUnique && -
- -
} - { children } -
+
+ { (itemCount > 1) && + { itemCount } } + { (itemUniqueNumber > 0) && +
+ +
} + { children }
); } diff --git a/src/layout/card/grid/item/NitroCardGridItemView.types.ts b/src/layout/card/grid/item/NitroCardGridItemView.types.ts index bf005811..97861569 100644 --- a/src/layout/card/grid/item/NitroCardGridItemView.types.ts +++ b/src/layout/card/grid/item/NitroCardGridItemView.types.ts @@ -6,8 +6,6 @@ export interface NitroCardGridItemViewProps extends DetailsHTMLAttributes = pro }, [ model, category, setMaxPaletteCount ]); return ( - + { (category.parts.length > 0) && category.parts.map((item, index) => { return ; diff --git a/src/views/avatar-editor/views/model/AvatarEditorModelView.tsx b/src/views/avatar-editor/views/model/AvatarEditorModelView.tsx index 68e1645b..7bce299c 100644 --- a/src/views/avatar-editor/views/model/AvatarEditorModelView.tsx +++ b/src/views/avatar-editor/views/model/AvatarEditorModelView.tsx @@ -71,7 +71,7 @@ export const AvatarEditorModelView: FC = props =>
-
+
{ (maxPaletteCount >= 1) && } { (maxPaletteCount === 2) && diff --git a/src/views/avatar-editor/views/palette-set/AvatarEditorPaletteSetView.tsx b/src/views/avatar-editor/views/palette-set/AvatarEditorPaletteSetView.tsx index 65c2968f..8b32c044 100644 --- a/src/views/avatar-editor/views/palette-set/AvatarEditorPaletteSetView.tsx +++ b/src/views/avatar-editor/views/palette-set/AvatarEditorPaletteSetView.tsx @@ -1,6 +1,5 @@ import { FC, useCallback } from 'react'; import { NitroCardGridView } from '../../../../layout/card/grid/NitroCardGridView'; -import { NitroCardGridThemes } from '../../../../layout/card/grid/NitroCardGridView.types'; import { AvatarEditorGridColorItem } from '../../common/AvatarEditorGridColorItem'; import { AvatarEditorPaletteSetItem } from '../palette-set-item/AvatarEditorPaletteSetItem'; import { AvatarEditorPaletteSetViewProps } from './AvatarEditorPaletteSetView.types'; @@ -19,7 +18,7 @@ export const AvatarEditorPaletteSetView: FC = p }, [ model, category, paletteSet, paletteIndex ]); return ( - + { (paletteSet.length > 0) && paletteSet.map((item, index) => { return selectColor(item) } />; diff --git a/src/views/avatar-editor/views/wardrobe/AvatarEditorWardrobeView.tsx b/src/views/avatar-editor/views/wardrobe/AvatarEditorWardrobeView.tsx index fd0e756b..f6c4e68d 100644 --- a/src/views/avatar-editor/views/wardrobe/AvatarEditorWardrobeView.tsx +++ b/src/views/avatar-editor/views/wardrobe/AvatarEditorWardrobeView.tsx @@ -5,7 +5,6 @@ import { GetAvatarRenderManager, GetSessionDataManager } from '../../../../api'; import { SendMessageHook } from '../../../../hooks'; import { NitroCardGridItemView } from '../../../../layout/card/grid/item/NitroCardGridItemView'; import { NitroCardGridView } from '../../../../layout/card/grid/NitroCardGridView'; -import { NitroCardGridThemes } from '../../../../layout/card/grid/NitroCardGridView.types'; import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView'; import { CurrencyIcon } from '../../../shared/currency-icon/CurrencyIcon'; import { AvatarEditorWardrobeViewProps } from './AvatarEditorWardrobeView.types'; @@ -68,7 +67,7 @@ export const AvatarEditorWardrobeView: FC = props return (
- + { figures }
diff --git a/src/views/catalog/CatalogView.scss b/src/views/catalog/CatalogView.scss index 4061767a..ec71c0ad 100644 --- a/src/views/catalog/CatalogView.scss +++ b/src/views/catalog/CatalogView.scss @@ -1,11 +1,6 @@ .nitro-catalog { - width: 620px; - - .content-area { - min-height: 350px; - height: 350px; - resize: vertical; - } + width: $catalog-width; + height: $catalog-height; font[size="16"] { font-size: 20px; diff --git a/src/views/inventory/InventoryView.scss b/src/views/inventory/InventoryView.scss index 2da93ac4..8d5953d9 100644 --- a/src/views/inventory/InventoryView.scss +++ b/src/views/inventory/InventoryView.scss @@ -1,11 +1,6 @@ .nitro-inventory { - width: 475px; - - .content-area { - min-height: 240px; - height: 240px; - resize: vertical; - } + width: $inventory-width; + height: $inventory-height; .empty-image { background: url('../../assets/images/inventory/empty.png'); diff --git a/src/views/inventory/views/furniture/item/InventoryFurnitureItemView.tsx b/src/views/inventory/views/furniture/item/InventoryFurnitureItemView.tsx index 4b49d6a3..a75cf789 100644 --- a/src/views/inventory/views/furniture/item/InventoryFurnitureItemView.tsx +++ b/src/views/inventory/views/furniture/item/InventoryFurnitureItemView.tsx @@ -46,5 +46,5 @@ export const InventoryFurnitureItemView: FC = p const count = groupItem.getUnlockedCount(); - return ; + return ; } diff --git a/src/views/inventory/views/trade/InventoryTradeView.tsx b/src/views/inventory/views/trade/InventoryTradeView.tsx index 5969daec..c5f9b47d 100644 --- a/src/views/inventory/views/trade/InventoryTradeView.tsx +++ b/src/views/inventory/views/trade/InventoryTradeView.tsx @@ -233,7 +233,7 @@ export const InventoryTradeView: FC = props => const count = item.getUnlockedCount(); return ( - (count && setGroupItem(item)) }> + (count && setGroupItem(item)) }> { ((count > 0) && (groupItem === item)) &&