From 55cb5712904fa29f1c77d34959bd8f0b8902ff90 Mon Sep 17 00:00:00 2001 From: Bill Date: Tue, 1 Feb 2022 01:58:28 -0500 Subject: [PATCH] Random changes --- src/common/Flex.tsx | 8 +++-- src/common/types/AlignSelfType.ts | 1 + src/common/utils/CreateTransitionToIcon.ts | 14 +++++++++ .../shared/badge-image/BadgeImageView.tsx | 29 ++++++++++--------- .../shared/currency-icon/CurrencyIcon.scss | 4 +-- .../room-previewer/RoomPreviewerView.scss | 1 + 6 files changed, 39 insertions(+), 18 deletions(-) create mode 100644 src/common/types/AlignSelfType.ts create mode 100644 src/common/utils/CreateTransitionToIcon.ts diff --git a/src/common/Flex.tsx b/src/common/Flex.tsx index e3d81b9d..42d32f80 100644 --- a/src/common/Flex.tsx +++ b/src/common/Flex.tsx @@ -1,6 +1,7 @@ import { FC, useMemo } from 'react'; import { Base, BaseProps } from './Base'; import { AlignItemType } from './types/AlignItemType'; +import { AlignSelfType } from './types/AlignSelfType'; import { JustifyContentType } from './types/JustifyContentType'; import { SpacingType } from './types/SpacingType'; @@ -11,13 +12,14 @@ export interface FlexProps extends BaseProps reverse?: boolean; gap?: SpacingType; center?: boolean; + alignSelf?: AlignSelfType; alignItems?: AlignItemType; justifyContent?: JustifyContentType; } export const Flex: FC = props => { - const { inline = false, column = undefined, reverse = false, gap = null, center = false, alignItems = null, justifyContent = null, classNames = [], ...rest } = props; + const { inline = false, column = undefined, reverse = false, gap = null, center = false, alignSelf = null, alignItems = null, justifyContent = null, classNames = [], ...rest } = props; const getClassNames = useMemo(() => { @@ -38,6 +40,8 @@ export const Flex: FC = props => if(gap) newClassNames.push('gap-' + gap); + if(alignSelf) newClassNames.push('align-self-' + alignSelf); + if(alignItems) newClassNames.push('align-items-' + alignItems); if(justifyContent) newClassNames.push('justify-content-' + justifyContent); @@ -47,7 +51,7 @@ export const Flex: FC = props => if(classNames.length) newClassNames.push(...classNames); return newClassNames; - }, [ inline, column, reverse, gap, center, alignItems, justifyContent, classNames ]); + }, [ inline, column, reverse, gap, center, alignSelf, alignItems, justifyContent, classNames ]); return ; } diff --git a/src/common/types/AlignSelfType.ts b/src/common/types/AlignSelfType.ts new file mode 100644 index 00000000..8e26378b --- /dev/null +++ b/src/common/types/AlignSelfType.ts @@ -0,0 +1 @@ +export type AlignSelfType = 'start' | 'end' | 'center' | 'baseline' | 'stretch'; diff --git a/src/common/utils/CreateTransitionToIcon.ts b/src/common/utils/CreateTransitionToIcon.ts new file mode 100644 index 00000000..dbc59029 --- /dev/null +++ b/src/common/utils/CreateTransitionToIcon.ts @@ -0,0 +1,14 @@ +import { NitroToolbarAnimateIconEvent } from '@nitrots/nitro-renderer'; +import { GetRoomEngine } from '../../api'; + +export const CreateTransitionToIcon = (image: HTMLImageElement, fromElement: HTMLElement, icon: string) => +{ + const bounds = fromElement.getBoundingClientRect(); + const x = (bounds.x + (bounds.width / 2)); + const y = (bounds.y + (bounds.height / 2)); + const event = new NitroToolbarAnimateIconEvent(image, x, y); + + event.iconName = icon; + + GetRoomEngine().events.dispatchEvent(event); +} diff --git a/src/views/shared/badge-image/BadgeImageView.tsx b/src/views/shared/badge-image/BadgeImageView.tsx index 84f8fb4d..4cbb0ec6 100644 --- a/src/views/shared/badge-image/BadgeImageView.tsx +++ b/src/views/shared/badge-image/BadgeImageView.tsx @@ -1,8 +1,7 @@ import { BadgeImageReadyEvent, NitroSprite, TextureUtils } from '@nitrots/nitro-renderer'; -import { FC, useEffect, useMemo, useState } from 'react'; +import { CSSProperties, FC, useEffect, useMemo, useState } from 'react'; import { GetSessionDataManager, LocalizeBadgeDescription, LocalizeBadgeName, LocalizeText } from '../../../api'; -import { BaseProps } from '../../../common/Base'; -import { NitroLayoutBase } from '../../../layout/base'; +import { Base, BaseProps } from '../../../common/Base'; import { BadgeInformationView } from './badge-info/BadgeInformationView'; export interface BadgeImageViewProps extends BaseProps @@ -17,7 +16,7 @@ export interface BadgeImageViewProps extends BaseProps export const BadgeImageView: FC = props => { - const { badgeCode = null, isGroup = false, showInfo = false, customTitle = null, isGrayscale = false, scale = 1, className = '', style = null, children = null, ...rest } = props; + const { badgeCode = null, isGroup = false, showInfo = false, customTitle = null, isGrayscale = false, scale = 1, classNames = [], style = {}, children = null, ...rest } = props; const [ badgeUrl, setBadgeUrl ] = useState(''); const [ isListening, setIsListening ] = useState(true); @@ -36,25 +35,27 @@ export const BadgeImageView: FC = props => return `scale-${ scaleName }`; }, [ scale ]); - const getClassName = useMemo(() => + const getClassNames = useMemo(() => { - let newClassName = 'badge-image'; + const newClassNames: string[] = [ 'badge-image' ]; - if(isGrayscale) newClassName += ' grayscale'; + if(isGrayscale) newClassNames.push('grayscale'); - if((scale !== 1) && getScaleClass.length) newClassName += ` ${ getScaleClass }`; + if((scale !== 1) && getScaleClass.length) newClassNames.push(getScaleClass); - if(className && className.length) newClassName += ' ' + className; + if(classNames.length) newClassNames.push(...classNames); - return newClassName; - }, [ className, isGrayscale, scale, getScaleClass ]); + return newClassNames; + }, [ classNames, isGrayscale, scale, getScaleClass ]); const getStyle = useMemo(() => { - const newStyle = { ...style }; + let newStyle: CSSProperties = {}; if(badgeUrl && badgeUrl.length) newStyle.backgroundImage = `url(${ badgeUrl })`; + if(Object.keys(style).length) newStyle = { ...newStyle, ...style }; + return newStyle; }, [ style, badgeUrl ]); @@ -99,9 +100,9 @@ export const BadgeImageView: FC = props => }, [ badgeCode, isGroup, isListening ]); return ( - + { showInfo && } { children } - + ); } diff --git a/src/views/shared/currency-icon/CurrencyIcon.scss b/src/views/shared/currency-icon/CurrencyIcon.scss index 743b94ec..88462829 100644 --- a/src/views/shared/currency-icon/CurrencyIcon.scss +++ b/src/views/shared/currency-icon/CurrencyIcon.scss @@ -1,6 +1,6 @@ .nitro-currency-icon { background-position: center; background-repeat: no-repeat; - width: 18px; - height: 17px; + width: 15px; + height: 15px; } diff --git a/src/views/shared/room-previewer/RoomPreviewerView.scss b/src/views/shared/room-previewer/RoomPreviewerView.scss index e6192624..0de55bf3 100644 --- a/src/views/shared/room-previewer/RoomPreviewerView.scss +++ b/src/views/shared/room-previewer/RoomPreviewerView.scss @@ -12,6 +12,7 @@ background-color: $light; background-repeat: no-repeat; background-position: center; + overflow: hidden; &.border-0 { &::after {