diff --git a/src/common/layout/LayoutAvatarImageView.tsx b/src/common/layout/LayoutAvatarImageView.tsx index 75233a8..bd640e2 100644 --- a/src/common/layout/LayoutAvatarImageView.tsx +++ b/src/common/layout/LayoutAvatarImageView.tsx @@ -12,35 +12,51 @@ export interface LayoutAvatarImageViewProps extends BaseProps headOnly?: boolean; direction?: number; scale?: number; + fit?: boolean; } export const LayoutAvatarImageView: FC = props => { - const { figure = '', gender = '', headOnly = false, direction = 0, scale = 1, classNames = [], style = {}, ...rest } = props; + const { figure = '', gender = '', headOnly = false, direction = 0, scale = 1, fit = false, classNames = [], style = {}, ...rest } = props; const [ avatarUrl, setAvatarUrl ] = useState(null); const [ isReady, setIsReady ] = useState(false); const isDisposed = useRef(false); - // Request id bumped on every prop change. The SDK can call - // resetFigure asynchronously when server-side figure data lands; - // if props change in quick succession the older callback could - // otherwise overwrite the newer image. The closure captures the - // id and bails when stale. const requestIdRef = useRef(0); const getClassNames = useMemo(() => { - const newClassNames: string[] = [ 'avatar-image relative w-[90px] h-[130px] bg-no-repeat left-[-2px] pointer-events-none' ]; + let newClassNames: string[]; + + if(fit) + { + newClassNames = [ 'avatar-image absolute inset-0 pointer-events-none' ]; + } + else if(headOnly) + { + newClassNames = [ 'avatar-image absolute inset-0 bg-no-repeat pointer-events-none' ]; + } + else + { + newClassNames = [ 'avatar-image relative w-[90px] h-[130px] bg-no-repeat left-[-2px] pointer-events-none' ]; + } if(classNames.length) newClassNames.push(...classNames); return newClassNames; - }, [ classNames ]); + }, [ classNames, headOnly, fit ]); const getStyle = useMemo(() => { let newStyle: CSSProperties = {}; - if(avatarUrl && avatarUrl.length) newStyle.backgroundImage = `url('${ avatarUrl }')`; + if(!fit && avatarUrl && avatarUrl.length) newStyle.backgroundImage = `url('${ avatarUrl }')`; + + if(headOnly && !fit) + { + newStyle.backgroundSize = '130px auto'; + newStyle.backgroundPosition = '51% 40%'; + newStyle.imageRendering = 'pixelated'; + } if(scale !== 1) { @@ -52,7 +68,7 @@ export const LayoutAvatarImageView: FC = props => if(Object.keys(style).length) newStyle = { ...newStyle, ...style }; return newStyle; - }, [ avatarUrl, scale, style ]); + }, [ avatarUrl, scale, style, headOnly, fit ]); useEffect(() => { @@ -116,5 +132,17 @@ export const LayoutAvatarImageView: FC = props => }; }, []); - return ; + return ( + + { fit && avatarUrl && avatarUrl.length > 0 && ( + + ) } + + ); }; diff --git a/src/components/catalog/views/page/common/CatalogGridOfferView.tsx b/src/components/catalog/views/page/common/CatalogGridOfferView.tsx index 936b8dc..6fa45ba 100644 --- a/src/components/catalog/views/page/common/CatalogGridOfferView.tsx +++ b/src/components/catalog/views/page/common/CatalogGridOfferView.tsx @@ -76,7 +76,7 @@ export const CatalogGridOfferView: FC = props => { iconUrl && !(offer.product.productType === ProductTypeEnum.ROBOT) &&
} { (offer.product.productType === ProductTypeEnum.ROBOT) && - } + }
diff --git a/src/components/catalog/views/page/layout/CatalogLayoutDefaultView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutDefaultView.tsx index dd55268..3490e60 100644 --- a/src/components/catalog/views/page/layout/CatalogLayoutDefaultView.tsx +++ b/src/components/catalog/views/page/layout/CatalogLayoutDefaultView.tsx @@ -88,7 +88,6 @@ export const CatalogLayoutDefaultView: FC = props =>
} - { /* Welcome/description card */ } { !currentOffer &&
{ !!page.localization.getImage(1) && @@ -96,11 +95,10 @@ export const CatalogLayoutDefaultView: FC = props =>
} - { /* Item grid */ }
{ GetConfigurationValue('catalog.headers') && } - +
); diff --git a/src/components/inventory/views/bot/InventoryBotItemView.tsx b/src/components/inventory/views/bot/InventoryBotItemView.tsx index 9a084cf..4a48485 100644 --- a/src/components/inventory/views/bot/InventoryBotItemView.tsx +++ b/src/components/inventory/views/bot/InventoryBotItemView.tsx @@ -38,8 +38,8 @@ export const InventoryBotItemView: FC - + + { children } ); diff --git a/src/components/inventory/views/bot/InventoryBotView.tsx b/src/components/inventory/views/bot/InventoryBotView.tsx index 87b8adf..2882ea0 100644 --- a/src/components/inventory/views/bot/InventoryBotView.tsx +++ b/src/components/inventory/views/bot/InventoryBotView.tsx @@ -68,7 +68,7 @@ export const InventoryBotView: FC<{
- columnCount={ 6 } + columnCount={ 4 } itemRender={ item => } items={ botItems } />
diff --git a/src/components/toolbar/ToolbarView.tsx b/src/components/toolbar/ToolbarView.tsx index edf59e6..6bcc9a3 100644 --- a/src/components/toolbar/ToolbarView.tsx +++ b/src/components/toolbar/ToolbarView.tsx @@ -69,10 +69,10 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props => toggleTimeoutRef.current = setTimeout(() => { toggleLockRef.current = false; }, TOGGLE_LOCK_MS); }, []); - const compactFramePosition = (isToolbarOpen && isInRoom) ? 'bottom-[90px] min-[1540px]:bottom-0' : 'bottom-0'; - const mobileOnlyClasses = isTouchLayout ? '' : 'min-[1540px]:hidden'; - const desktopBlockClasses = isTouchLayout ? 'hidden' : 'hidden min-[1540px]:block'; - const desktopFlexClasses = isTouchLayout ? 'hidden' : 'hidden min-[1540px]:flex'; + const compactFramePosition = (isToolbarOpen && isInRoom) ? 'bottom-[90px] min-[1700px]:bottom-0' : 'bottom-0'; + const mobileOnlyClasses = isTouchLayout ? '' : 'min-[1700px]:hidden'; + const desktopBlockClasses = isTouchLayout ? 'hidden' : 'hidden min-[1700px]:block'; + const desktopFlexClasses = isTouchLayout ? 'hidden' : 'hidden min-[1700px]:flex'; const leftNavVariants = useMemo(() => ({ hidden: { opacity: 0, x: isInRoom ? -10 : 0, y: isInRoom ? 0 : 8, pointerEvents: 'none' }, visible: { opacity: 1, x: 0, y: 0, pointerEvents: 'auto' } @@ -216,14 +216,6 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props => CreateLinkEvent('catalog/toggle/normal') } className="tb-icon" /> - - CreateLinkEvent('catalog/toggle/builder') } className="tb-icon" /> - - - CreateLinkEvent('inventory/toggle') } className="tb-icon" /> - { (getFullCount > 0) && - } - { isMeExpanded && @@ -237,7 +229,7 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props => } @@ -245,11 +237,19 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props => setMeExpanded(value => !value); event.stopPropagation(); } }> - + { (getTotalUnseen > 0) && } + + CreateLinkEvent('catalog/toggle/builder') } className="tb-icon" /> + + + CreateLinkEvent('inventory/toggle') } className="tb-icon" /> + { (getFullCount > 0) && + } + { (isInRoom && showToolbarButton) && @@ -268,14 +268,14 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props => { (openTicketsCount > 0) && } } - { isMod && - - CreateLinkEvent('furni-editor/toggle') } className="tb-icon" /> - } { (isHk && hkEnabled) && CreateLinkEvent('housekeeping/toggle') } className="tb-icon" /> } + { isMod && + + CreateLinkEvent('furni-editor/toggle') } className="tb-icon" /> + } = props => CreateLinkEvent('catalog/toggle/normal') } className="tb-icon" /> + + + { isMeExpanded && + + + } + + + { + setMeExpanded(value => !value); + event.stopPropagation(); + } }> + + + { (getTotalUnseen > 0) && + } + CreateLinkEvent('catalog/toggle/builder') } className="tb-icon" /> @@ -333,32 +359,6 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props => } - - - { isMeExpanded && - - - } - - - { - setMeExpanded(value => !value); - event.stopPropagation(); - } }> - - - { (getTotalUnseen > 0) && - } - @@ -380,14 +380,14 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props => { (openTicketsCount > 0) && } } - { isMod && - - CreateLinkEvent('furni-editor/toggle') } className="tb-icon" /> - } { (isHk && hkEnabled) && CreateLinkEvent('housekeeping/toggle') } className="tb-icon" /> } + { isMod && + + CreateLinkEvent('furni-editor/toggle') } className="tb-icon" /> + } CreateLinkEvent('friends/toggle') } className="tb-icon" /> { (requests.length > 0) &&