nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-23 06:40:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

Gift updates

Browse Source
This commit is contained in:
MyNameIsBatman 2021-09-12 01:26:53 -03:00
parent 52e9e3208a
commit 8fcbe14418
10 changed files with 82 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
src/assets/images/catalog/gift/gift_tag.png → src/assets/images/gift/gift_tag.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 795 B

After

Width:  |  Height:  |  Size: 795 B

0
src/assets/images/catalog/gift/incognito.png → src/assets/images/gift/incognito.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

1
src/layout/Layout.scss
View File

@ -29,3 +29,4 @@
@import './mini-camera/NitroLayoutMiniCameraView';
@import './notification-bubble/NotificationBubbleView';
@import './trophy/NitroLayoutTrophyView';
@import './gift-card/NitroLayoutGiftCardView';

41
src/layout/gift-card/NitroLayoutGiftCardView.scss Normal file
View File

@ -0,0 +1,41 @@
.nitro-gift-card {
width: 306px;
height: 159px;
background: url(../../assets/images/gift/gift_tag.png) center no-repeat;
.gift-face {
width: 65px;
.gift-incognito {
width: 37px;
height: 48px;
background: url(../../assets/images/gift/incognito.png) center no-repeat;
}
.gift-avatar {
position: relative;
overflow: hidden;
width: 40px;
height: 50px;
.avatar-image {
position: absolute;
left: -25px;
top: -20px;
}
}
}
.gift-message {
width: 100%;
min-width: 100%;
max-width: 100%;
height: 90px;
min-height: 90px;
max-height: 90px;
border: none;
resize: none;
outline: none;
line-height: 17px;
}
}

25
src/layout/gift-card/NitroLayoutGiftCardView.tsx Normal file
View File

@ -0,0 +1,25 @@
import { FC } from 'react';
import { LocalizeText } from '../../api';
import { AvatarImageView } from '../../views/shared/avatar-image/AvatarImageView';
import { NitroLayoutGiftCardViewProps } from './NitroLayoutGiftCardView.types';
export const NitroLayoutGiftCardView: FC<NitroLayoutGiftCardViewProps> = props =>
{
const { figure = null, userName = null, message = null, editable = false, onChange = null } = props;
return (
<div className="nitro-gift-card d-flex">
<div className="d-flex align-items-center justify-content-center gift-face flex-shrink-0">
{ !userName && <div className="gift-incognito"></div> }
{ figure && <div className="gift-avatar">
<AvatarImageView figure={ figure } direction={ 2 } headOnly={ true } />
</div> }
</div>
<div className="d-flex flex-column w-100 pt-4 pb-4 pe-4 ps-3">
{ !editable && <div className="gift-message">{ message }</div> }
{ editable && onChange && <textarea className="gift-message" maxLength={ 140 } value={ message } onChange={ (e) => onChange(e.target.value) } placeholder={ LocalizeText('catalog.gift_wrapping_new.message_hint') }></textarea> }
{ userName && <div className="mt-auto text-end fst-italic">{ LocalizeText('catalog.gift_wrapping_new.message_from', ['name'], [userName]) }</div> }
</div>
</div>
);
};

8
src/layout/gift-card/NitroLayoutGiftCardView.types.ts Normal file
View File

@ -0,0 +1,8 @@
export interface NitroLayoutGiftCardViewProps
{
figure?:string;
userName?: string;
message?: string;
editable?: boolean;
onChange?: (value: string) => void;
}

2
src/layout/gift-card/index.ts Normal file
View File

@ -0,0 +1,2 @@
export * from './NitroLayoutGiftCardView';
export * from './NitroLayoutGiftCardView.types';

1
src/layout/index.ts
View File

@ -1,5 +1,6 @@
export * from './card';
export * from './draggable-window';
export * from './gift-card';
export * from './loading-spinner';
export * from './mini-camera';
export * from './notification-bubble';

42
src/views/catalog/views/gift/CatalogPageGiftView.scss
View File

@ -1,47 +1,5 @@
.nitro-catalog-gift {
.gift-tag {
width: 306px;
height: 159px;
background: url(../../../../assets/images/catalog/gift/gift_tag.png) center no-repeat;
}
.gift-face {
width: 65px;
.gift-incognito {
width: 37px;
height: 48px;
background: url(../../../../assets/images/catalog/gift/incognito.png) center no-repeat;
}
.gift-avatar {
position: relative;
overflow: hidden;
width: 40px;
height: 50px;
.avatar-image {
position: absolute;
left: -25px;
top: -20px;
}
}
}
.gift-message {
width: 100%;
min-width: 100%;
max-width: 100%;
height: 90px;
min-height: 90px;
max-height: 90px;
border: none;
resize: none;
outline: none;
line-height: 17px;
}
.gift-preview {
width: 80px;
height: 80px;

16
src/views/catalog/views/gift/CatalogPageGiftView.tsx
View File

@ -5,8 +5,7 @@ import { GetSessionDataManager, LocalizeText } from '../../../../api';
import { CatalogEvent } from '../../../../events';
import { CatalogInitGiftEvent } from '../../../../events/catalog/CatalogInitGiftEvent';
import { SendMessageHook, useUiEvent } from '../../../../hooks';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroLayoutGiftCardView } from '../../../../layout';
import { CurrencyIcon } from '../../../shared/currency-icon/CurrencyIcon';
import { FurniImageView } from '../../../shared/furni-image/FurniImageView';
import { useCatalogContext } from '../../context/CatalogContext';
@ -166,17 +165,8 @@ export const CatalogPageGiftView: FC<{}> = props =>
<label>{ LocalizeText('catalog.gift_wrapping.receiver') }</label>
<input type="text" className="form-control form-control-sm" value={ receiverName } onChange={ (e) => setReceiverName(e.target.value) } />
</div>
<div className="gift-tag d-flex mt-2">
<div className="d-flex align-items-center justify-content-center gift-face flex-shrink-0">
{ !showMyFace && <div className="gift-incognito"></div> }
{ showMyFace && <div className="gift-avatar">
<AvatarImageView figure={ GetSessionDataManager().figure } direction={ 2 } headOnly={ true } />
</div> }
</div>
<div className="d-flex flex-column w-100 pt-4 pb-4 pe-4 ps-3">
<textarea className="gift-message" maxLength={ 140 } value={ message } onChange={ (e) => setMessage(e.target.value) } placeholder={ LocalizeText('catalog.gift_wrapping_new.message_hint') }></textarea>
{ showMyFace && <div className="mt-auto text-end fst-italic">{ LocalizeText('catalog.gift_wrapping_new.message_from', ['name'], [GetSessionDataManager().userName]) }</div> }
</div>
<div className="mt-2">
<NitroLayoutGiftCardView figure={ GetSessionDataManager().figure } userName={ GetSessionDataManager().userName } message={ message } editable={ true } onChange={ (value) => setMessage(value) } />
</div>
<div className="form-check mt-1">
<input className="form-check-input" type="checkbox" name="showMyFace" checked={ showMyFace } onChange={ (e) => setShowMyFace(value => !value) } />