mirror of
https://github.com/billsonnn/nitro-react.git
synced 2024-11-23 14:40:50 +01:00
Merge branch '@update/groups' into dev
This commit is contained in:
Bill
commit
332c9553d5
@ -69,11 +69,17 @@ $camera-checkout-width: 350px;
|
||||
|
||||
$room-info-width: 325px;
|
||||
|
||||
$nitro-group-creator-width: 383px;
|
||||
$nitro-mod-tools-width: 175px;
|
||||
|
||||
$nitro-group-manager-width: 375px;
|
||||
$nitro-group-manager-height: 355px;
|
||||
|
||||
$nitro-chooser-width: 200px;
|
||||
$nitro-chooser-height: 200px;
|
||||
|
||||
$nitro-guide-tool-width: 250px;
|
||||
|
||||
.nitro-app {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
@ -1,7 +1,4 @@
|
||||
import { GroupJoinComposer } from '@nitrots/nitro-renderer';
|
||||
import { SendMessageHook } from '../../hooks';
|
||||
|
||||
export function TryJoinGroup(groupId: number): void
|
||||
{
|
||||
SendMessageHook(new GroupJoinComposer(groupId));
|
||||
}
|
||||
export const TryJoinGroup = (groupId: number) => SendMessageHook(new GroupJoinComposer(groupId));
|
||||
|
||||
38
src/common/HorizontalRule.tsx
Normal file
38
src/common/HorizontalRule.tsx
Normal file
@ -0,0 +1,38 @@
|
||||
import { CSSProperties, FC, useMemo } from 'react';
|
||||
import { Base, BaseProps } from './Base';
|
||||
import { ColorVariantType } from './types';
|
||||
|
||||
export interface HorizontalRuleProps extends BaseProps<HTMLDivElement>
|
||||
{
|
||||
variant?: ColorVariantType;
|
||||
height?: number;
|
||||
}
|
||||
|
||||
export const HorizontalRule: FC<HorizontalRuleProps> = props =>
|
||||
{
|
||||
const { variant = 'black', height = 1, classNames = [], style = {}, ...rest } = props;
|
||||
|
||||
const getClassNames = useMemo(() =>
|
||||
{
|
||||
const newClassNames: string[] = [];
|
||||
|
||||
if(variant) newClassNames.push('bg-' + variant);
|
||||
|
||||
if(classNames.length) newClassNames.push(...classNames);
|
||||
|
||||
return newClassNames;
|
||||
}, [ variant, classNames ]);
|
||||
|
||||
const getStyle = useMemo(() =>
|
||||
{
|
||||
let newStyle: CSSProperties = { display: 'list-item' };
|
||||
|
||||
if(height > 0) newStyle.height = height;
|
||||
|
||||
if(Object.keys(style).length) newStyle = { ...newStyle, ...style };
|
||||
|
||||
return newStyle;
|
||||
}, [ height, style ]);
|
||||
|
||||
return <Base classNames={ getClassNames } style={ getStyle } { ...rest } />;
|
||||
}
|
||||
@ -7,6 +7,7 @@ export * from './Flex';
|
||||
export * from './FormGroup';
|
||||
export * from './Grid';
|
||||
export * from './GridContext';
|
||||
export * from './HorizontalRule';
|
||||
export * from './layout';
|
||||
export * from './Text';
|
||||
export * from './types';
|
||||
|
||||
@ -1,54 +1,137 @@
|
||||
.nitro-groups {
|
||||
.tab-image {
|
||||
width: 122px;
|
||||
height: 68px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.nitro-group-tab-image {
|
||||
width: 122px;
|
||||
height: 68px;
|
||||
background: url('../../assets/images/groups/creator_images.png') no-repeat;
|
||||
|
||||
div {
|
||||
background-image: url('../../assets/images/groups/creator_images.png');
|
||||
background-repeat: no-repeat;
|
||||
&.tab-1 {
|
||||
background-position: 0px 0px;
|
||||
width: 99px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
&.tab-2 {
|
||||
background-position: -99px 0px;
|
||||
width: 98px;
|
||||
height: 62px;
|
||||
}
|
||||
|
||||
&.tab-3 {
|
||||
background-position: 0px -50px;
|
||||
width: 96px;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
&.tab-4,
|
||||
&.tab-5 {
|
||||
background-position: 0px -95px;
|
||||
width: 114px;
|
||||
height: 61px;
|
||||
}
|
||||
}
|
||||
|
||||
.group-information {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
||||
.group-badge {
|
||||
width: 78px;
|
||||
height: 78px;
|
||||
|
||||
.badge-image {
|
||||
background-size: contain;
|
||||
}
|
||||
}
|
||||
|
||||
&.tab-1 {
|
||||
div {
|
||||
background-position: 0px 0px;
|
||||
width: 99px;
|
||||
.group-description {
|
||||
height: 55px;
|
||||
}
|
||||
}
|
||||
|
||||
.nitro-group-information-standalone {
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.nitro-group-members {
|
||||
width: 400px;
|
||||
|
||||
.nitro-group-members-list-grid {
|
||||
|
||||
.member-list-item {
|
||||
height: 50px;
|
||||
max-height: 50px;
|
||||
|
||||
.avatar-head {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 40px;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
&.tab-2 {
|
||||
div {
|
||||
background-position: -99px 0px;
|
||||
width: 98px;
|
||||
height: 62px;
|
||||
}
|
||||
}
|
||||
|
||||
&.tab-3 {
|
||||
div {
|
||||
background-position: 0px -50px;
|
||||
width: 96px;
|
||||
height: 45px;
|
||||
}
|
||||
}
|
||||
|
||||
&.tab-4, &.tab-5 {
|
||||
div {
|
||||
background-position: 0px -95px;
|
||||
width: 114px;
|
||||
height: 61px;
|
||||
|
||||
.avatar-image {
|
||||
position: absolute;
|
||||
left: -25px;
|
||||
top: -20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.group-badge-preview {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
background-color: $grid-bg-color;
|
||||
|
||||
&.active {
|
||||
border-color: $grid-active-border-color !important;
|
||||
background-color: $grid-active-bg-color;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
content: ' ';
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 10px solid white;
|
||||
border-left: 10px solid transparent;
|
||||
border-right: 10px solid transparent;
|
||||
bottom: -10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.group-badge-color-swatch,
|
||||
.group-badge-position-swatch {
|
||||
position: relative;
|
||||
border-radius: $border-radius;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: $white;
|
||||
border: 2px solid $white;
|
||||
box-shadow: inset 3px 3px rgba(0, 0, 0, .1);
|
||||
|
||||
&.active {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.group-badge-position-swatch {
|
||||
box-shadow: inset 3px 3px rgba(0, 0, 0, .1);
|
||||
|
||||
&.active {
|
||||
background: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.group-badge-color-swatch {
|
||||
box-shadow: inset 2px 2px rgba(0, 0, 0, .2);
|
||||
}
|
||||
|
||||
.group-color-swatch {
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
@import './views/creator/GroupCreatorView';
|
||||
@import './views/information/GroupInformationView';
|
||||
@import './views/information-standalone/GroupInformationStandaloneView';
|
||||
@import './views/manager/GroupManagerView';
|
||||
@import './views/members/GroupMembersView';
|
||||
@import './views/room-information/GroupRoomInformationView';
|
||||
@import './views/shared-tabs/GroupSharedTabs';
|
||||
@import './views/tabs/GroupSharedTabs';
|
||||
|
||||
@ -12,30 +12,31 @@ import { GroupMembersView } from './views/members/GroupMembersView';
|
||||
|
||||
export const GroupsView: FC<{}> = props =>
|
||||
{
|
||||
const [ isCreatorVisible, setIsCreatorVisible ] = useState<boolean>(false);
|
||||
const [ groupMembersId, setGroupMembersId ] = useState<number>(null);
|
||||
const [ groupMembersLevel, setGroupMembersLevel ] = useState<number>(null);
|
||||
const [ currentGroupId, setCurrentGroupId ] = useState<number>(null);
|
||||
const [ currentGroupLevelId, setCurrentGroupLevelId ] = useState<number>(null);
|
||||
const [ isMembersVisible, setMembersVisible ] = useState<boolean>(false);
|
||||
const [ isCreatorVisible, setCreatorVisible ] = useState<boolean>(false);
|
||||
const [ groupsState, dispatchGroupsState ] = useReducer(GroupsReducer, initialGroups);
|
||||
|
||||
const onGroupPurchasedEvent = useCallback((event: GroupPurchasedEvent) =>
|
||||
{
|
||||
const parser = event.getParser();
|
||||
|
||||
setIsCreatorVisible(false);
|
||||
TryVisitRoom(parser.roomId);
|
||||
}, []);
|
||||
|
||||
CreateMessageHook(GroupPurchasedEvent, onGroupPurchasedEvent);
|
||||
|
||||
const closeMembers = () =>
|
||||
{
|
||||
BatchUpdates(() =>
|
||||
{
|
||||
setGroupMembersId(null);
|
||||
setGroupMembersLevel(null);
|
||||
setCurrentGroupId(null);
|
||||
setCurrentGroupLevelId(null);
|
||||
});
|
||||
}
|
||||
|
||||
const onGroupPurchasedEvent = useCallback((event: GroupPurchasedEvent) =>
|
||||
{
|
||||
const parser = event.getParser();
|
||||
|
||||
setCreatorVisible(false);
|
||||
TryVisitRoom(parser.roomId);
|
||||
}, []);
|
||||
|
||||
CreateMessageHook(GroupPurchasedEvent, onGroupPurchasedEvent);
|
||||
|
||||
const linkReceived = useCallback((url: string) =>
|
||||
{
|
||||
const parts = url.split('/');
|
||||
@ -45,7 +46,7 @@ export const GroupsView: FC<{}> = props =>
|
||||
switch(parts[1])
|
||||
{
|
||||
case 'create':
|
||||
setIsCreatorVisible(true);
|
||||
setCreatorVisible(true);
|
||||
return;
|
||||
case 'manage':
|
||||
if(!parts[2]) return;
|
||||
@ -55,12 +56,16 @@ export const GroupsView: FC<{}> = props =>
|
||||
case 'members':
|
||||
if(!parts[2]) return;
|
||||
|
||||
const groupId = (parseInt(parts[2]) || -1);
|
||||
const levelId = (parseInt(parts[3]) || 3);
|
||||
|
||||
BatchUpdates(() =>
|
||||
{
|
||||
setGroupMembersId(Number(parts[2]));
|
||||
|
||||
if(parts[3]) setGroupMembersLevel(Number(parts[3]));
|
||||
setCurrentGroupId(groupId);
|
||||
setCurrentGroupLevelId(levelId);
|
||||
setMembersVisible(true);
|
||||
});
|
||||
|
||||
return;
|
||||
}
|
||||
}, []);
|
||||
@ -86,9 +91,10 @@ export const GroupsView: FC<{}> = props =>
|
||||
<GroupsContextProvider value={ { groupsState, dispatchGroupsState } }>
|
||||
<GroupsMessageHandler />
|
||||
<div className="nitro-groups">
|
||||
<GroupCreatorView isVisible={ isCreatorVisible } onClose={ () => setIsCreatorVisible(false) } />
|
||||
<GroupCreatorView isVisible={ isCreatorVisible } onClose={ () => setCreatorVisible(false) } />
|
||||
<GroupManagerView />
|
||||
<GroupMembersView groupId={ groupMembersId } levelId={ groupMembersLevel } onClose={ closeMembers } />
|
||||
{ isMembersVisible &&
|
||||
<GroupMembersView groupId={ currentGroupId } levelId={ currentGroupLevelId } setLevelId={ setCurrentGroupLevelId } onClose={ closeMembers } /> }
|
||||
<GroupInformationStandaloneView />
|
||||
</div>
|
||||
</GroupsContextProvider>
|
||||
|
||||
107
src/components/groups/views/GroupBadgeCreatorView.tsx
Normal file
107
src/components/groups/views/GroupBadgeCreatorView.tsx
Normal file
@ -0,0 +1,107 @@
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { Dispatch, FC, SetStateAction, useEffect, useRef, useState } from 'react';
|
||||
import { Base, Column, Flex, Grid } from '../../../common';
|
||||
import { BatchUpdates } from '../../../hooks';
|
||||
import { BadgeImageView } from '../../../views/shared/badge-image/BadgeImageView';
|
||||
import { GroupBadgePart } from '../common/GroupBadgePart';
|
||||
import { useGroupsContext } from '../GroupsContext';
|
||||
|
||||
interface GroupBadgeCreatorViewProps
|
||||
{
|
||||
badgeParts: GroupBadgePart[];
|
||||
setBadgeParts: Dispatch<SetStateAction<GroupBadgePart[]>>;
|
||||
}
|
||||
|
||||
const POSITIONS: number[] = [ 0, 1, 2, 3, 4, 5, 6, 7, 8 ];
|
||||
|
||||
export const GroupBadgeCreatorView: FC<GroupBadgeCreatorViewProps> = props =>
|
||||
{
|
||||
const { badgeParts = [], setBadgeParts = null } = props;
|
||||
const [ selectedIndex, setSelectedIndex ] = useState<number>(-1);
|
||||
const [ copiedBadgeParts, setCopiedBadgeParts ] = useState<GroupBadgePart[]>(null);
|
||||
const { groupsState = null } = useGroupsContext();
|
||||
const { badgeBases = null, badgeSymbols = null, badgePartColors = null } = groupsState;
|
||||
const willUnmount = useRef(false);
|
||||
|
||||
const setPartProperty = (partIndex: number, property: string, value: number) =>
|
||||
{
|
||||
const newBadgeParts = [ ...copiedBadgeParts ];
|
||||
|
||||
newBadgeParts[partIndex][property] = value;
|
||||
|
||||
BatchUpdates(() =>
|
||||
{
|
||||
setCopiedBadgeParts(newBadgeParts);
|
||||
|
||||
if(property === 'key') setSelectedIndex(-1);
|
||||
});
|
||||
}
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
BatchUpdates(() =>
|
||||
{
|
||||
setCopiedBadgeParts(badgeParts);
|
||||
setSelectedIndex(-1);
|
||||
});
|
||||
}, [ badgeParts ]);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
if(!copiedBadgeParts || (copiedBadgeParts === badgeParts)) return;
|
||||
|
||||
setBadgeParts(copiedBadgeParts);
|
||||
}, [ copiedBadgeParts, badgeParts, setBadgeParts ]);
|
||||
|
||||
if(!copiedBadgeParts || !copiedBadgeParts.length) return null;
|
||||
|
||||
return (
|
||||
<>
|
||||
{ ((selectedIndex < 0) && copiedBadgeParts && (copiedBadgeParts.length > 0)) && copiedBadgeParts.map((part, index) =>
|
||||
{
|
||||
return (
|
||||
<Flex key={ index } alignItems="center" justifyContent="between" gap={ 2 } className="bg-muted rounded px-2 py-1">
|
||||
<Flex pointer center className="bg-muted rounded p-1" onClick={ event => setSelectedIndex(index) }>
|
||||
{ (copiedBadgeParts[index].code && (copiedBadgeParts[index].code.length > 0)) &&
|
||||
<BadgeImageView badgeCode={ copiedBadgeParts[index].code } isGroup={ true } /> }
|
||||
{ (!copiedBadgeParts[index].code || !copiedBadgeParts[index].code.length) &&
|
||||
<Flex center className="badge-image group-badge">
|
||||
<FontAwesomeIcon icon="plus" />
|
||||
</Flex> }
|
||||
</Flex>
|
||||
{ (part.type !== GroupBadgePart.BASE) &&
|
||||
<Grid gap={ 1 } columnCount={ 3 }>
|
||||
{ POSITIONS.map((position, posIndex) =>
|
||||
{
|
||||
return <Base key={ posIndex } pointer className={ `group-badge-position-swatch ${ (copiedBadgeParts[index].position === position) ? 'active' : '' }` } onClick={ event => setPartProperty(index, 'position', position) }></Base>
|
||||
}) }
|
||||
</Grid> }
|
||||
<Grid gap={ 1 } columnCount={ 8 }>
|
||||
{ (badgePartColors.length > 0) && badgePartColors.map((item, colorIndex) =>
|
||||
{
|
||||
return <Base key={ colorIndex } pointer className={ `group-badge-color-swatch ${ (copiedBadgeParts[index].color === (colorIndex + 1)) ? 'active' : '' }` } style={{ backgroundColor: '#' + item.color }} onClick={ event => setPartProperty(index, 'color', (colorIndex + 1)) }></Base>
|
||||
}) }
|
||||
</Grid>
|
||||
</Flex>
|
||||
);
|
||||
}) }
|
||||
{ (selectedIndex >= 0) &&
|
||||
<Grid gap={ 1 } columnCount={ 5 }>
|
||||
{ (copiedBadgeParts[selectedIndex].type === GroupBadgePart.SYMBOL) &&
|
||||
<Column pointer center className="bg-muted rounded p-1" onClick={ event => setPartProperty(selectedIndex, 'key', 0) }>
|
||||
<Flex center className="badge-image group-badge">
|
||||
<FontAwesomeIcon icon="times" />
|
||||
</Flex>
|
||||
</Column> }
|
||||
{ ((copiedBadgeParts[selectedIndex].type === GroupBadgePart.BASE) ? badgeBases : badgeSymbols).map((item, index) =>
|
||||
{
|
||||
return (
|
||||
<Column key={ index } pointer center className="bg-muted rounded p-1" onClick={ event => setPartProperty(selectedIndex, 'key', item.id) }>
|
||||
<BadgeImageView badgeCode={ GroupBadgePart.getCode(copiedBadgeParts[selectedIndex].type, item.id, copiedBadgeParts[selectedIndex].color, 4) } isGroup={ true } />
|
||||
</Column>
|
||||
);
|
||||
}) }
|
||||
</Grid> }
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
.nitro-group-creator {
|
||||
width: 433px;
|
||||
width: $nitro-group-creator-width;
|
||||
|
||||
.creator-tabs {
|
||||
display: flex;
|
||||
@ -11,14 +11,8 @@
|
||||
background-image: url('../../../../assets/images/groups/creator_tabs.png');
|
||||
background-repeat: no-repeat;
|
||||
|
||||
div {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&.tab-blue-flat {
|
||||
@ -26,10 +20,6 @@
|
||||
height: 24px;
|
||||
background-position: 0px 0px;
|
||||
|
||||
div {
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
&.active {
|
||||
height: 28px;
|
||||
background-position: 0px -24px;
|
||||
@ -41,10 +31,6 @@
|
||||
height: 24px;
|
||||
background-position: 0px -52px;
|
||||
|
||||
div {
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
&.active {
|
||||
height: 28px;
|
||||
background-position: 0px -76px;
|
||||
@ -56,10 +42,6 @@
|
||||
height: 28px;
|
||||
background-position: 0px -104px;
|
||||
|
||||
div {
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
&.active {
|
||||
height: 33px;
|
||||
background-position: 0px -132px;
|
||||
@ -67,10 +49,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.creator-tab {
|
||||
height: 260px;
|
||||
min-height: 260px;
|
||||
max-height: 260px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
import { GroupBuyComposer, GroupBuyDataComposer } from '@nitrots/nitro-renderer';
|
||||
import classNames from 'classnames';
|
||||
import { FC, useCallback, useEffect, useState } from 'react';
|
||||
import { Button } from 'react-bootstrap';
|
||||
import { HasHabboClub, LocalizeText } from '../../../../api';
|
||||
import { Base, Button, Column, Flex, Text } from '../../../../common';
|
||||
import { SendMessageHook } from '../../../../hooks';
|
||||
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
|
||||
import { NotificationUtilities } from '../../../../views/notification-center/common/NotificationUtilities';
|
||||
import { useGroupsContext } from '../../GroupsContext';
|
||||
import { GroupsActions } from '../../reducers/GroupsReducer';
|
||||
import { GroupSharedTabBadgeView } from '../shared-tabs/GroupSharedTabBadgeView';
|
||||
import { GroupSharedTabColorsView } from '../shared-tabs/GroupSharedTabColorsView';
|
||||
import { GroupSharedTabIdentityView } from '../shared-tabs/GroupSharedTabIdentityView';
|
||||
import { GroupTabBadgeView } from '../tabs/GroupTabBadgeView';
|
||||
import { GroupTabColorsView } from '../tabs/GroupTabColorsView';
|
||||
import { GroupTabIdentityView } from '../tabs/GroupTabIdentityView';
|
||||
import { GroupCreatorTabConfirmationView } from './GroupCreatorTabConfirmationView';
|
||||
|
||||
const TABS: number[] = [1, 2, 3, 4];
|
||||
@ -22,34 +22,17 @@ interface GroupCreatorViewProps
|
||||
|
||||
export const GroupCreatorView: FC<GroupCreatorViewProps> = props =>
|
||||
{
|
||||
const { isVisible = false, onClose = null } = props;
|
||||
const [ currentTab, setCurrentTab ] = useState<number>(1);
|
||||
const { groupsState = null, dispatchGroupsState = null } = useGroupsContext();
|
||||
const { groupName = null, groupDescription = null, groupHomeroomId = null, groupColors = null, groupBadgeParts = null } = groupsState;
|
||||
|
||||
const { isVisible = false, onClose = null } = props;
|
||||
|
||||
const [ currentTab, setCurrentTab ] = useState<number>(1);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
if(!isVisible)
|
||||
{
|
||||
setCurrentTab(1);
|
||||
dispatchGroupsState({
|
||||
type: GroupsActions.RESET_GROUP_SETTINGS
|
||||
});
|
||||
}
|
||||
else
|
||||
{
|
||||
SendMessageHook(new GroupBuyDataComposer());
|
||||
}
|
||||
}, [ isVisible ]);
|
||||
|
||||
const buyGroup = useCallback(() =>
|
||||
{
|
||||
const badge = [];
|
||||
|
||||
if(!groupBadgeParts) return;
|
||||
|
||||
const badge = [];
|
||||
|
||||
groupBadgeParts.forEach((part) =>
|
||||
{
|
||||
if(part.code)
|
||||
@ -77,56 +60,78 @@ export const GroupCreatorView: FC<GroupCreatorViewProps> = props =>
|
||||
case 1: {
|
||||
if(!groupName || groupName.length === 0 || !groupHomeroomId)
|
||||
{
|
||||
alert(LocalizeText('group.edit.error.no.name.or.room.selected'));
|
||||
NotificationUtilities.simpleAlert(LocalizeText('group.edit.error.no.name.or.room.selected'));
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
case 4: {
|
||||
case 4:
|
||||
buyGroup();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
setCurrentTab(value =>
|
||||
{
|
||||
return (value === 4 ? value : value + 1)
|
||||
setCurrentTab(value => (value === 4 ? value : value + 1));
|
||||
}, [ currentTab, groupName, groupHomeroomId, buyGroup ]);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
if(!isVisible)
|
||||
{
|
||||
setCurrentTab(1);
|
||||
|
||||
dispatchGroupsState({
|
||||
type: GroupsActions.RESET_GROUP_SETTINGS
|
||||
});
|
||||
}, [ currentTab, groupName, groupHomeroomId ]);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
SendMessageHook(new GroupBuyDataComposer());
|
||||
}, [ isVisible, dispatchGroupsState ]);
|
||||
|
||||
if(!isVisible) return null;
|
||||
|
||||
return (
|
||||
<NitroCardView className="nitro-group-creator" simple={ true }>
|
||||
<NitroCardHeaderView headerText={ LocalizeText('group.create.title') } onCloseClick={ onClose } />
|
||||
<NitroCardContentView className="pb-2">
|
||||
<div className="creator-tabs mb-2">
|
||||
<NitroCardContentView>
|
||||
<Flex className="creator-tabs">
|
||||
{ TABS.map((tab, index) =>
|
||||
{
|
||||
return (<div key={ index } className={ 'tab tab-' + (tab === 1 ? 'blue-flat' : tab === 4 ? 'yellow' : 'blue-arrow') + classNames({ ' active': currentTab === tab }) }>
|
||||
<div>{ LocalizeText('group.create.steplabel.' + tab) }</div>
|
||||
</div>);
|
||||
}) }
|
||||
</div>
|
||||
<div className="d-flex align-items-center mb-2">
|
||||
<div className={ 'flex-shrink-0 tab-image tab-' + currentTab }>
|
||||
<div></div>
|
||||
</div>
|
||||
<div className="w-100 text-black ms-2">
|
||||
<div className="fw-bold h4 m-0">{ LocalizeText('group.create.stepcaption.' + currentTab) }</div>
|
||||
<div>{ LocalizeText('group.create.stepdesc.' + currentTab) }</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-black creator-tab">
|
||||
{ currentTab === 1 && <GroupSharedTabIdentityView isCreator={ true } /> }
|
||||
{ currentTab === 2 && <GroupSharedTabBadgeView /> }
|
||||
{ currentTab === 3 && <GroupSharedTabColorsView /> }
|
||||
{ currentTab === 4 && <GroupCreatorTabConfirmationView /> }
|
||||
</div>
|
||||
<div className="d-flex justify-content-between mt-2">
|
||||
<Button variant="link" className="text-black" onClick={ previousStep }>{ LocalizeText(currentTab === 1 ? 'generic.cancel' : 'group.create.previousstep') }</Button>
|
||||
<button disabled={ currentTab === 4 && !HasHabboClub() } className={ 'btn ' + (currentTab === 4 ? HasHabboClub() ? 'btn-success' : 'btn-danger' : 'btn-primary') } onClick={ nextStep }>{ LocalizeText(currentTab === 4 ? HasHabboClub() ? 'group.create.confirm.buy' : 'group.create.confirm.viprequired' : 'group.create.nextstep') }</button>
|
||||
</div>
|
||||
{
|
||||
return (
|
||||
<Flex center key={ index } className={ `tab tab-${ ((tab === 1) ? 'blue-flat' : (tab === 4) ? 'yellow' : 'blue-arrow') } ${ (currentTab === tab) ? 'active' : '' }` }>
|
||||
<Text variant="white">{ LocalizeText(`group.create.steplabel.${ tab }`) }</Text>
|
||||
</Flex>
|
||||
);
|
||||
}) }
|
||||
</Flex>
|
||||
<Flex alignItems="center" gap={ 2 }>
|
||||
<Base className={ `nitro-group-tab-image tab-${ currentTab }`} />
|
||||
<Column grow gap={ 0 }>
|
||||
<Text bold fontSize={ 4 }>{ LocalizeText(`group.create.stepcaption.${ currentTab }`) }</Text>
|
||||
<Text>{ LocalizeText(`group.create.stepdesc.${ currentTab }`) }</Text>
|
||||
</Column>
|
||||
</Flex>
|
||||
<Column>
|
||||
{ (currentTab === 1) &&
|
||||
<GroupTabIdentityView isCreator={ true } /> }
|
||||
{ (currentTab === 2) &&
|
||||
<GroupTabBadgeView /> }
|
||||
{ (currentTab === 3) &&
|
||||
<GroupTabColorsView /> }
|
||||
{ (currentTab === 4) &&
|
||||
<GroupCreatorTabConfirmationView /> }
|
||||
</Column>
|
||||
<Flex justifyContent="between">
|
||||
<Button variant="link" className="text-black" onClick={ previousStep }>
|
||||
{ LocalizeText(currentTab === 1 ? 'generic.cancel' : 'group.create.previousstep') }
|
||||
</Button>
|
||||
<Button disabled={ ((currentTab === 4) && !HasHabboClub()) } variant={ ((currentTab === 4) ? HasHabboClub() ? 'success' : 'danger' : 'primary') } onClick={ nextStep }>
|
||||
{ LocalizeText((currentTab === 4) ? HasHabboClub() ? 'group.create.confirm.buy' : 'group.create.confirm.viprequired' : 'group.create.nextstep') }
|
||||
</Button>
|
||||
</Flex>
|
||||
</NitroCardContentView>
|
||||
</NitroCardView>
|
||||
);
|
||||
|
||||
@ -1,3 +0,0 @@
|
||||
.nitro-group-information-standalone {
|
||||
width: 500px;
|
||||
}
|
||||
@ -1,7 +1,7 @@
|
||||
import { GroupInformationEvent, GroupInformationParser } from '@nitrots/nitro-renderer';
|
||||
import { FC, useCallback, useState } from 'react';
|
||||
import { LocalizeText } from '../../../../api';
|
||||
import { CreateMessageHook } from '../../../../hooks';
|
||||
import { BatchUpdates, CreateMessageHook } from '../../../../hooks';
|
||||
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
|
||||
import { GroupInformationView } from '../information/GroupInformationView';
|
||||
|
||||
@ -15,8 +15,11 @@ export const GroupInformationStandaloneView: FC<{}> = props =>
|
||||
|
||||
if(!parser.flag) return;
|
||||
|
||||
setGroupInformation(null);
|
||||
setGroupInformation(parser);
|
||||
BatchUpdates(() =>
|
||||
{
|
||||
setGroupInformation(null);
|
||||
setGroupInformation(parser);
|
||||
});
|
||||
}, []);
|
||||
|
||||
CreateMessageHook(GroupInformationEvent, onGroupInformationEvent);
|
||||
@ -24,9 +27,9 @@ export const GroupInformationStandaloneView: FC<{}> = props =>
|
||||
if(!groupInformation) return null;
|
||||
|
||||
return (
|
||||
<NitroCardView className="nitro-group-information-standalone" simple={ true }>
|
||||
<NitroCardView className="nitro-group-information-standalone" simple>
|
||||
<NitroCardHeaderView headerText={ LocalizeText('group.window.title') } onCloseClick={ () => setGroupInformation(null) } />
|
||||
<NitroCardContentView className="pb-2">
|
||||
<NitroCardContentView>
|
||||
<GroupInformationView groupInformation={ groupInformation } onClose={ () => setGroupInformation(null) } />
|
||||
</NitroCardContentView>
|
||||
</NitroCardView>
|
||||
|
||||
@ -1,18 +0,0 @@
|
||||
.group-information {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
||||
.group-badge {
|
||||
width: 78px;
|
||||
height: 78px;
|
||||
|
||||
.badge-image {
|
||||
background-size: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.group-description {
|
||||
height: 55px;
|
||||
}
|
||||
}
|
||||
@ -4,7 +4,9 @@ import { CreateLinkEvent, GetSessionDataManager, LocalizeText, TryVisitRoom } fr
|
||||
import { GetGroupManager } from '../../../../api/groups/GetGroupManager';
|
||||
import { GetGroupMembers } from '../../../../api/groups/GetGroupMembers';
|
||||
import { TryJoinGroup } from '../../../../api/groups/TryJoinGroup';
|
||||
import { Button, Column, Flex, Grid, Text } from '../../../../common';
|
||||
import { SendMessageHook } from '../../../../hooks';
|
||||
import { NotificationUtilities } from '../../../../views/notification-center/common/NotificationUtilities';
|
||||
import { BadgeImageView } from '../../../../views/shared/badge-image/BadgeImageView';
|
||||
import { CatalogPageName } from '../../../catalog/common/CatalogPageName';
|
||||
import { GroupMembershipType } from '../../common/GroupMembershipType';
|
||||
@ -21,30 +23,21 @@ export const GroupInformationView: FC<GroupInformationViewProps> = props =>
|
||||
{
|
||||
const { groupInformation = null, onClose = null } = props;
|
||||
|
||||
const joinGroup = useCallback(() =>
|
||||
const isRealOwner = () => (groupInformation && (groupInformation.ownerName === GetSessionDataManager().userName));
|
||||
|
||||
const joinGroup = () => (groupInformation && TryJoinGroup(groupInformation.id));
|
||||
|
||||
const leaveGroup = () =>
|
||||
{
|
||||
if(!groupInformation) return;
|
||||
NotificationUtilities.confirm(LocalizeText('group.leaveconfirm.desc'), () =>
|
||||
{
|
||||
SendMessageHook(new GroupRemoveMemberComposer(groupInformation.id, GetSessionDataManager().userId));
|
||||
|
||||
TryJoinGroup(groupInformation.id);
|
||||
}, [ groupInformation ]);
|
||||
if(onClose) onClose();
|
||||
}, null);
|
||||
}
|
||||
|
||||
const leaveGroup = useCallback(() =>
|
||||
{
|
||||
if(window.confirm(LocalizeText('group.leaveconfirm.desc')))
|
||||
{
|
||||
SendMessageHook(new GroupRemoveMemberComposer(groupInformation.id, GetSessionDataManager().userId));
|
||||
if(onClose) onClose();
|
||||
}
|
||||
}, [ groupInformation, onClose ]);
|
||||
|
||||
const isRealOwner = useCallback(() =>
|
||||
{
|
||||
if(!groupInformation) return false;
|
||||
|
||||
return (groupInformation.ownerName === GetSessionDataManager().userName);
|
||||
}, [ groupInformation ]);
|
||||
|
||||
const getRoleIcon = useCallback(() =>
|
||||
const getRoleIcon = () =>
|
||||
{
|
||||
if(groupInformation.membershipType === GroupMembershipType.NOT_MEMBER || groupInformation.membershipType === GroupMembershipType.REQUEST_PENDING) return null;
|
||||
|
||||
@ -53,9 +46,9 @@ export const GroupInformationView: FC<GroupInformationViewProps> = props =>
|
||||
if(groupInformation.isAdmin) return <i className="icon icon-group-admin" title={ LocalizeText('group.youareadmin') } />;
|
||||
|
||||
return <i className="icon icon-group-member" title={ LocalizeText('group.youaremember') } />;
|
||||
}, [ groupInformation, isRealOwner ]);
|
||||
}
|
||||
|
||||
const getButtonText = useCallback(() =>
|
||||
const getButtonText = () =>
|
||||
{
|
||||
if(groupInformation.type === GroupType.PRIVATE) return '';
|
||||
|
||||
@ -71,16 +64,21 @@ export const GroupInformationView: FC<GroupInformationViewProps> = props =>
|
||||
|
||||
if(groupInformation.membershipType === GroupMembershipType.REQUEST_PENDING) return 'group.membershippending';
|
||||
}
|
||||
}, [ groupInformation, isRealOwner ]);
|
||||
}
|
||||
|
||||
const handleButtonClick = useCallback(() =>
|
||||
const handleButtonClick = () =>
|
||||
{
|
||||
if(groupInformation.type === GroupType.PRIVATE && groupInformation.membershipType === GroupMembershipType.NOT_MEMBER) return;
|
||||
if((groupInformation.type === GroupType.PRIVATE) && (groupInformation.membershipType === GroupMembershipType.NOT_MEMBER)) return;
|
||||
|
||||
if(groupInformation.membershipType === GroupMembershipType.MEMBER) return leaveGroup();
|
||||
if(groupInformation.membershipType === GroupMembershipType.MEMBER)
|
||||
{
|
||||
leaveGroup();
|
||||
|
||||
return joinGroup();
|
||||
}, [ groupInformation, leaveGroup, joinGroup ]);
|
||||
return;
|
||||
}
|
||||
|
||||
joinGroup();
|
||||
}
|
||||
|
||||
const handleAction = useCallback((action: string) =>
|
||||
{
|
||||
@ -102,56 +100,52 @@ export const GroupInformationView: FC<GroupInformationViewProps> = props =>
|
||||
CreateLinkEvent('catalog/open/' + CatalogPageName.GUILD_CUSTOM_FURNI);
|
||||
break;
|
||||
}
|
||||
}, [ groupInformation, onClose ]);
|
||||
}, [ groupInformation ]);
|
||||
|
||||
if(!groupInformation) return null;
|
||||
|
||||
return (
|
||||
<div className="group-information text-black p-2">
|
||||
<div>
|
||||
<div className="text-center d-flex flex-column h-100 small text-black text-decoration-underline">
|
||||
<div className="group-badge d-flex align-items-center">
|
||||
<BadgeImageView badgeCode={ groupInformation.badge } isGroup={ true } className="mx-auto d-block"/>
|
||||
</div>
|
||||
<div className="mt-3 cursor-pointer" onClick={ () => handleAction('members') }>
|
||||
{ LocalizeText('group.membercount', ['totalMembers'], [groupInformation.membersCount.toString()]) }
|
||||
</div>
|
||||
{ groupInformation.pendingRequestsCount > 0 && <div className="cursor-pointer" onClick={ () => handleAction('members_pending') }>
|
||||
{ LocalizeText('group.pendingmembercount', ['amount'], [groupInformation.pendingRequestsCount.toString()]) }
|
||||
</div> }
|
||||
{ groupInformation.isOwner && <div className="cursor-pointer" onClick={ () => handleAction('manage') }>
|
||||
{ LocalizeText('group.manage') }
|
||||
</div> }
|
||||
<div className="mt-auto mb-1">
|
||||
{ getRoleIcon() }
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ms-2 w-100">
|
||||
<div className="fw-bold d-flex align-items-center">
|
||||
<i className={ 'icon icon-group-type-' + groupInformation.type } />
|
||||
{ groupInformation.canMembersDecorate && <i className="icon icon-group-decorate ms-1" /> }
|
||||
<div className="ms-1">{ groupInformation.title }</div>
|
||||
</div>
|
||||
<div>{ LocalizeText('group.created', ['date', 'owner'], [groupInformation.createdAt, groupInformation.ownerName]) }</div>
|
||||
<div className="group-description small overflow-auto">{ groupInformation.description }</div>
|
||||
<div className="small text-black text-decoration-underline">
|
||||
<div className="cursor-pointer" onClick={ () => handleAction('homeroom') }>
|
||||
{ LocalizeText('group.linktobase') }
|
||||
</div>
|
||||
<div className="cursor-pointer" onClick={ () => handleAction('furniture') }>
|
||||
{ LocalizeText('group.buyfurni') }
|
||||
</div>
|
||||
<div className="cursor-pointer">
|
||||
{ LocalizeText('group.showgroups') }
|
||||
</div>
|
||||
</div>
|
||||
{ groupInformation.type !== GroupType.PRIVATE &&
|
||||
<button className="btn btn-primary w-100 mt-2" disabled={ groupInformation.membershipType === GroupMembershipType.REQUEST_PENDING || isRealOwner() } onClick={ handleButtonClick }>
|
||||
{ LocalizeText(getButtonText()) }
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<Grid overflow="hidden">
|
||||
<Column center size={ 3 } overflow="hidden">
|
||||
<Flex alignItems="center" overflow="hidden" className="group-badge">
|
||||
<BadgeImageView badgeCode={ groupInformation.badge } isGroup={ true } scale={ 2 } />
|
||||
</Flex>
|
||||
<Column alignItems="center" gap={ 1 }>
|
||||
<Text small underline pointer onClick={ () => handleAction('members') }>{ LocalizeText('group.membercount', [ 'totalMembers' ], [ groupInformation.membersCount.toString() ]) }</Text>
|
||||
{ (groupInformation.pendingRequestsCount > 0) &&
|
||||
<Text small underline pointer onClick={ () => handleAction('members_pending') }>{ LocalizeText('group.pendingmembercount', [ 'amount' ], [ groupInformation.pendingRequestsCount.toString() ]) }</Text> }
|
||||
{ groupInformation.isOwner &&
|
||||
<Text small underline pointer onClick={ () => handleAction('manage') }>{ LocalizeText('group.manage') }</Text> }
|
||||
</Column>
|
||||
{ getRoleIcon() }
|
||||
</Column>
|
||||
<Column size={ 9 } justifyContent="between" overflow="auto">
|
||||
<Column overflow="hidden">
|
||||
<Column gap={ 1 }>
|
||||
<Flex alignItems="center" gap={ 2 }>
|
||||
<Text bold>{ groupInformation.title }</Text>
|
||||
<Flex gap={ 1 }>
|
||||
<i className={ 'icon icon-group-type-' + groupInformation.type } />
|
||||
{ groupInformation.canMembersDecorate &&
|
||||
<i className="icon icon-group-decorate" /> }
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Text small>{ LocalizeText('group.created', ['date', 'owner'], [groupInformation.createdAt, groupInformation.ownerName]) }</Text>
|
||||
</Column>
|
||||
<Text small overflow="auto" className="group-description">{ groupInformation.description }</Text>
|
||||
</Column>
|
||||
<Column>
|
||||
<Column gap={ 1 }>
|
||||
<Text small underline pointer onClick={ () => handleAction('homeroom') }>{ LocalizeText('group.linktobase') }</Text>
|
||||
<Text small underline pointer onClick={ () => handleAction('furniture') }>{ LocalizeText('group.buyfurni') }</Text>
|
||||
<Text small underline pointer>{ LocalizeText('group.showgroups') }</Text>
|
||||
</Column>
|
||||
{ (groupInformation.type !== GroupType.PRIVATE) &&
|
||||
<Button disabled={ (groupInformation.membershipType === GroupMembershipType.REQUEST_PENDING) || isRealOwner() } onClick={ handleButtonClick }>
|
||||
{ LocalizeText(getButtonText()) }
|
||||
</Button> }
|
||||
</Column>
|
||||
</Column>
|
||||
</Grid>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,9 +1,4 @@
|
||||
.nitro-group-manager {
|
||||
width: 385px;
|
||||
|
||||
.manager-tab {
|
||||
height: 260px;
|
||||
min-height: 260px;
|
||||
max-height: 260px;
|
||||
}
|
||||
height: $nitro-group-manager-height;
|
||||
width: $nitro-group-manager-width;
|
||||
}
|
||||
|
||||
@ -1,14 +1,15 @@
|
||||
import { GroupDeleteComposer, GroupSaveBadgeComposer, GroupSaveColorsComposer, GroupSaveInformationComposer, GroupSavePreferencesComposer } from '@nitrots/nitro-renderer';
|
||||
import { GroupDeleteComposer, GroupSaveColorsComposer, GroupSaveInformationComposer, GroupSavePreferencesComposer } from '@nitrots/nitro-renderer';
|
||||
import { FC, useCallback, useState } from 'react';
|
||||
import { LocalizeText } from '../../../../api';
|
||||
import { Base, Button, Column, Flex, Text } from '../../../../common';
|
||||
import { SendMessageHook } from '../../../../hooks';
|
||||
import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../../../layout';
|
||||
import { useGroupsContext } from '../../GroupsContext';
|
||||
import { GroupsActions } from '../../reducers/GroupsReducer';
|
||||
import { GroupSharedTabBadgeView } from '../shared-tabs/GroupSharedTabBadgeView';
|
||||
import { GroupSharedTabColorsView } from '../shared-tabs/GroupSharedTabColorsView';
|
||||
import { GroupSharedTabIdentityView } from '../shared-tabs/GroupSharedTabIdentityView';
|
||||
import { GroupManagerTabSettingsView } from './tab-settings/GroupManagerTabSettingsView';
|
||||
import { GroupTabBadgeView } from '../tabs/GroupTabBadgeView';
|
||||
import { GroupTabColorsView } from '../tabs/GroupTabColorsView';
|
||||
import { GroupTabIdentityView } from '../tabs/GroupTabIdentityView';
|
||||
import { GroupTabSettingsView } from '../tabs/GroupTabSettingsView';
|
||||
|
||||
const TABS: number[] = [1, 2, 3, 5];
|
||||
|
||||
@ -43,7 +44,7 @@ export const GroupManagerView: FC<{}> = props =>
|
||||
});
|
||||
|
||||
SendMessageHook(new GroupSaveInformationComposer(groupId, groupName, groupDescription));
|
||||
SendMessageHook(new GroupSaveBadgeComposer(groupId, badge));
|
||||
//SendMessageHook(new GroupSaveBadgeComposer(groupId, badge));
|
||||
SendMessageHook(new GroupSaveColorsComposer(groupId, groupColors[0], groupColors[1]));
|
||||
SendMessageHook(new GroupSavePreferencesComposer(groupId, groupState, groupCanMembersDecorate ? 0 : 1));
|
||||
|
||||
@ -64,36 +65,36 @@ export const GroupManagerView: FC<{}> = props =>
|
||||
return (
|
||||
<NitroCardView className="nitro-group-manager" simple={ false }>
|
||||
<NitroCardHeaderView headerText={ LocalizeText('group.window.title') } onCloseClick={ onClose } />
|
||||
<NitroCardContentView className="p-0">
|
||||
<NitroCardTabsView>
|
||||
{ TABS.map(tab =>
|
||||
{
|
||||
return (<NitroCardTabsItemView key={ tab } isActive={ currentTab === tab } onClick={ () => setCurrentTab(tab) }>
|
||||
{ LocalizeText(`group.edit.tab.${tab}`) }
|
||||
</NitroCardTabsItemView>);
|
||||
}) }
|
||||
</NitroCardTabsView>
|
||||
<div className="p-2">
|
||||
<div className="d-flex align-items-center mb-2">
|
||||
<div className={ 'flex-shrink-0 tab-image tab-' + currentTab }>
|
||||
<div></div>
|
||||
</div>
|
||||
<div className="w-100 text-black ms-2">
|
||||
<div className="fw-bold h4 m-0">{ LocalizeText('group.edit.tabcaption.' + currentTab) }</div>
|
||||
<div>{ LocalizeText('group.edit.tabdesc.' + currentTab) }</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-black manager-tab">
|
||||
{ currentTab === 1 && <GroupSharedTabIdentityView /> }
|
||||
{ currentTab === 2 && <GroupSharedTabBadgeView skipDefault={ true } /> }
|
||||
{ currentTab === 3 && <GroupSharedTabColorsView /> }
|
||||
{ currentTab === 5 && <GroupManagerTabSettingsView /> }
|
||||
</div>
|
||||
<div className="d-flex justify-content-between mt-2">
|
||||
<button className="btn btn-danger" onClick={ deleteGroup }>{ LocalizeText('group.delete') }</button>
|
||||
<button className="btn btn-success" onClick={ saveGroup }>{ LocalizeText('save') }</button>
|
||||
</div>
|
||||
</div>
|
||||
<NitroCardTabsView>
|
||||
{ TABS.map(tab =>
|
||||
{
|
||||
return (<NitroCardTabsItemView key={ tab } isActive={ currentTab === tab } onClick={ () => setCurrentTab(tab) }>
|
||||
{ LocalizeText(`group.edit.tab.${tab}`) }
|
||||
</NitroCardTabsItemView>);
|
||||
}) }
|
||||
</NitroCardTabsView>
|
||||
<NitroCardContentView>
|
||||
<Flex alignItems="center" gap={ 2 }>
|
||||
<Base className={ `nitro-group-tab-image tab-${ currentTab }`} />
|
||||
<Column grow gap={ 0 }>
|
||||
<Text bold fontSize={ 4 }>{ LocalizeText(`group.edit.tabcaption.${ currentTab }`) }</Text>
|
||||
<Text>{ LocalizeText(`group.edit.tabdesc.${ currentTab }`) }</Text>
|
||||
</Column>
|
||||
</Flex>
|
||||
<Column grow overflow="hidden">
|
||||
{ currentTab === 1 &&
|
||||
<GroupTabIdentityView /> }
|
||||
{ currentTab === 2 &&
|
||||
<GroupTabBadgeView skipDefault={ true } /> }
|
||||
{ currentTab === 3 &&
|
||||
<GroupTabColorsView /> }
|
||||
{ currentTab === 5 &&
|
||||
<GroupTabSettingsView /> }
|
||||
</Column>
|
||||
<Flex justifyContent="between">
|
||||
<Button variant="danger" onClick={ deleteGroup }>{ LocalizeText('group.delete') }</Button>
|
||||
<Button variant="success" onClick={ saveGroup }>{ LocalizeText('save') }</Button>
|
||||
</Flex>
|
||||
</NitroCardContentView>
|
||||
</NitroCardView>
|
||||
);
|
||||
|
||||
@ -1,55 +0,0 @@
|
||||
import { FC, useCallback } from 'react';
|
||||
import { LocalizeText } from '../../../../../api/utils/LocalizeText';
|
||||
import { useGroupsContext } from '../../../GroupsContext';
|
||||
import { GroupsActions } from '../../../reducers/GroupsReducer';
|
||||
|
||||
const STATES: string[] = ['regular', 'exclusive', 'private'];
|
||||
|
||||
export const GroupManagerTabSettingsView: FC<{}> = props =>
|
||||
{
|
||||
const { groupsState = null, dispatchGroupsState = null } = useGroupsContext();
|
||||
const { groupState = null, groupCanMembersDecorate = false } = groupsState;
|
||||
|
||||
const setState = useCallback((state: number) =>
|
||||
{
|
||||
dispatchGroupsState({
|
||||
type: GroupsActions.SET_GROUP_STATE,
|
||||
payload: {
|
||||
numberValues: [ state ]
|
||||
}
|
||||
})
|
||||
}, [ dispatchGroupsState ]);
|
||||
|
||||
const toggleCanMembersDecorate = useCallback(() =>
|
||||
{
|
||||
dispatchGroupsState({
|
||||
type: GroupsActions.SET_GROUP_CAN_MEMBERS_DECORATE,
|
||||
payload: {
|
||||
boolValues: [ !groupCanMembersDecorate ]
|
||||
}
|
||||
})
|
||||
}, [ dispatchGroupsState, groupCanMembersDecorate ]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{ STATES.map((state, index) =>
|
||||
{
|
||||
return <div key={ index } className="form-check mb-1">
|
||||
<input className="form-check-input" type="radio" name="groupState" id={ `groupState${ index }` } checked={ (groupState === index) } onChange={ () => setState(index) } />
|
||||
<label className="form-check-label d-flex align-items-center gap-1 fw-bold" htmlFor={'groupState' + index}>
|
||||
<i className={ `icon icon-group-type-${index}` } /> { LocalizeText(`group.edit.settings.type.${state}.label`) }
|
||||
</label>
|
||||
<div>{ LocalizeText(`group.edit.settings.type.${state}.help`) }</div>
|
||||
</div>
|
||||
}) }
|
||||
<hr className="bg-dark" />
|
||||
<div className="form-check">
|
||||
<input className="form-check-input" type="checkbox" id="groupCanMembersDecorate" checked={ groupCanMembersDecorate } onChange={() => toggleCanMembersDecorate() } />
|
||||
<label className="form-check-label fw-bold" htmlFor="groupCanMembersDecorate">
|
||||
{ LocalizeText('group.edit.settings.rights.caption') }
|
||||
</label>
|
||||
<div>{ LocalizeText('group.edit.settings.rights.members.help') }</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -1,27 +0,0 @@
|
||||
.nitro-group-members {
|
||||
width: 400px;
|
||||
|
||||
.group-badge {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.members-list {
|
||||
.list-member {
|
||||
border: 1px solid #ced4da;
|
||||
|
||||
.avatar-head {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 40px;
|
||||
height: 50px;
|
||||
|
||||
.avatar-image {
|
||||
position: absolute;
|
||||
left: -25px;
|
||||
top: -20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,9 +1,12 @@
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { GroupAdminGiveComposer, GroupAdminTakeComposer, GroupConfirmMemberRemoveEvent, GroupConfirmRemoveMemberComposer, GroupMemberParser, GroupMembersComposer, GroupMembersEvent, GroupMembershipAcceptComposer, GroupMembershipDeclineComposer, GroupMembersParser, GroupRank, GroupRemoveMemberComposer } from '@nitrots/nitro-renderer';
|
||||
import classNames from 'classnames';
|
||||
import { FC, KeyboardEvent, useCallback, useEffect, useState } from 'react';
|
||||
import { Dispatch, FC, SetStateAction, useCallback, useEffect, useState } from 'react';
|
||||
import { GetSessionDataManager, GetUserProfile, LocalizeText } from '../../../../api';
|
||||
import { CreateMessageHook, SendMessageHook } from '../../../../hooks';
|
||||
import { Base, Button, Column, Flex, Grid, Text } from '../../../../common';
|
||||
import { BatchUpdates, CreateMessageHook, SendMessageHook } from '../../../../hooks';
|
||||
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
|
||||
import { NotificationUtilities } from '../../../../views/notification-center/common/NotificationUtilities';
|
||||
import { AvatarImageView } from '../../../../views/shared/avatar-image/AvatarImageView';
|
||||
import { BadgeImageView } from '../../../../views/shared/badge-image/BadgeImageView';
|
||||
|
||||
@ -11,90 +14,31 @@ interface GroupMembersViewProps
|
||||
{
|
||||
groupId: number;
|
||||
levelId: number;
|
||||
setLevelId: Dispatch<SetStateAction<number>>;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
|
||||
export const GroupMembersView: FC<GroupMembersViewProps> = props =>
|
||||
{
|
||||
const { groupId = null, levelId = null, onClose = null } = props;
|
||||
|
||||
const { groupId = -1, levelId = -1, setLevelId = null, onClose = null } = props;
|
||||
const [ pageData, setPageData ] = useState<GroupMembersParser>(null);
|
||||
const [ pageId, setPageId ] = useState<number>(-1);
|
||||
const [ searchQuery, setSearchQuery ] = useState<string>('');
|
||||
const [ searchLevelId, setSearchLevelId ] = useState<number>(3);
|
||||
const [ totalPages, setTotalPages ] = useState<number>(0);
|
||||
const [ removingMemberName, setRemovingMemberName ] = useState<string>(null);
|
||||
|
||||
const searchMembers = useCallback((pageId: number, newLevelId?: number) =>
|
||||
const refreshMembers = useCallback(() =>
|
||||
{
|
||||
if(!groupId) return;
|
||||
|
||||
SendMessageHook(new GroupMembersComposer(groupId, pageId, searchQuery, newLevelId !== undefined ? newLevelId : searchLevelId));
|
||||
}, [ groupId, searchQuery, searchLevelId ]);
|
||||
if((groupId === -1) || (levelId === -1) || (pageId === -1)) return;
|
||||
|
||||
const onGroupMembersEvent = useCallback((event: GroupMembersEvent) =>
|
||||
{
|
||||
const parser = event.getParser();
|
||||
|
||||
setPageData(null);
|
||||
setPageData(parser);
|
||||
setSearchLevelId(parser.level);
|
||||
setTotalPages(Math.ceil(parser.totalMembersCount / parser.pageSize));
|
||||
}, []);
|
||||
SendMessageHook(new GroupMembersComposer(groupId, pageId, searchQuery, levelId));
|
||||
}, [ groupId, levelId, pageId, searchQuery ]);
|
||||
|
||||
const onGroupConfirmMemberRemoveEvent = useCallback((event: GroupConfirmMemberRemoveEvent) =>
|
||||
{
|
||||
const parser = event.getParser();
|
||||
const previousPage = () => setPageId(prevValue => (prevValue - 1));
|
||||
|
||||
if(window.confirm(LocalizeText(parser.furnitureCount > 0 ? 'group.kickconfirm.desc' : 'group.kickconfirm_nofurni.desc', ['user', 'amount'], [removingMemberName, parser.furnitureCount.toString()])))
|
||||
{
|
||||
SendMessageHook(new GroupRemoveMemberComposer(pageData.groupId, parser.userId));
|
||||
searchMembers(pageData.pageIndex);
|
||||
}
|
||||
const nextPage = () => setPageId(prevValue => (prevValue + 1));
|
||||
|
||||
setRemovingMemberName(null);
|
||||
}, [ pageData, removingMemberName, searchMembers ]);
|
||||
|
||||
CreateMessageHook(GroupMembersEvent, onGroupMembersEvent);
|
||||
CreateMessageHook(GroupConfirmMemberRemoveEvent, onGroupConfirmMemberRemoveEvent);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
setPageData(null);
|
||||
setSearchQuery('');
|
||||
setSearchLevelId(0);
|
||||
|
||||
if(!groupId) return;
|
||||
|
||||
if(levelId !== null) setSearchLevelId(levelId);
|
||||
|
||||
searchMembers(0, levelId);
|
||||
}, [ groupId, levelId ]);
|
||||
|
||||
const selectSearchLevelId = useCallback((level: number) =>
|
||||
{
|
||||
setSearchLevelId(level);
|
||||
searchMembers(0, level);
|
||||
}, [ searchMembers ]);
|
||||
|
||||
const previousPage = useCallback(() =>
|
||||
{
|
||||
searchMembers(pageData.pageIndex - 1);
|
||||
}, [ searchMembers, pageData ]);
|
||||
|
||||
const nextPage = useCallback(() =>
|
||||
{
|
||||
searchMembers(pageData.pageIndex + 1);
|
||||
}, [ searchMembers, pageData ]);
|
||||
|
||||
const onKeyDown = useCallback((event: KeyboardEvent<HTMLInputElement>) =>
|
||||
{
|
||||
if(event.key !== 'Enter') return;
|
||||
|
||||
searchMembers(pageData.pageIndex);
|
||||
}, [ searchMembers, pageData ]);
|
||||
|
||||
const getRankDescription = useCallback((member: GroupMemberParser) =>
|
||||
const getRankDescription = (member: GroupMemberParser) =>
|
||||
{
|
||||
if(member.rank === GroupRank.OWNER) return 'group.members.owner';
|
||||
|
||||
@ -106,107 +50,151 @@ export const GroupMembersView: FC<GroupMembersViewProps> = props =>
|
||||
}
|
||||
|
||||
return '';
|
||||
}, [ pageData ]);
|
||||
}
|
||||
|
||||
const toggleAdmin = useCallback((member: GroupMemberParser) =>
|
||||
const toggleAdmin = (member: GroupMemberParser) =>
|
||||
{
|
||||
if(member.rank === GroupRank.OWNER) return;
|
||||
|
||||
if(member.rank !== GroupRank.ADMIN)
|
||||
{
|
||||
SendMessageHook(new GroupAdminGiveComposer(pageData.groupId, member.id));
|
||||
}
|
||||
else
|
||||
{
|
||||
SendMessageHook(new GroupAdminTakeComposer(pageData.groupId, member.id));
|
||||
}
|
||||
if(member.rank !== GroupRank.ADMIN) SendMessageHook(new GroupAdminGiveComposer(pageData.groupId, member.id));
|
||||
else SendMessageHook(new GroupAdminTakeComposer(pageData.groupId, member.id));
|
||||
|
||||
searchMembers(pageData.pageIndex);
|
||||
}, [ pageData, searchMembers ]);
|
||||
refreshMembers();
|
||||
}
|
||||
|
||||
const acceptMembership = useCallback((member) =>
|
||||
const acceptMembership = (member: GroupMemberParser) =>
|
||||
{
|
||||
if(member.rank === GroupRank.REQUESTED)
|
||||
{
|
||||
SendMessageHook(new GroupMembershipAcceptComposer(pageData.groupId, member.id));
|
||||
searchMembers(pageData.pageIndex);
|
||||
}
|
||||
}, [ pageData, searchMembers ]);
|
||||
if(member.rank !== GroupRank.REQUESTED) return;
|
||||
|
||||
SendMessageHook(new GroupMembershipAcceptComposer(pageData.groupId, member.id));
|
||||
|
||||
const removeMemberOrDeclineMembership = useCallback((member) =>
|
||||
refreshMembers();
|
||||
}
|
||||
|
||||
const removeMemberOrDeclineMembership = (member: GroupMemberParser) =>
|
||||
{
|
||||
if(member.rank === GroupRank.REQUESTED)
|
||||
{
|
||||
SendMessageHook(new GroupMembershipDeclineComposer(pageData.groupId, member.id));
|
||||
searchMembers(pageData.pageIndex);
|
||||
}
|
||||
else
|
||||
{
|
||||
setRemovingMemberName(member.name);
|
||||
SendMessageHook(new GroupConfirmRemoveMemberComposer(pageData.groupId, member.id));
|
||||
}
|
||||
}, [ pageData, searchMembers ]);
|
||||
|
||||
if(!groupId) return null;
|
||||
refreshMembers();
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
setRemovingMemberName(member.name);
|
||||
SendMessageHook(new GroupConfirmRemoveMemberComposer(pageData.groupId, member.id));
|
||||
}
|
||||
|
||||
const onGroupMembersEvent = useCallback((event: GroupMembersEvent) =>
|
||||
{
|
||||
const parser = event.getParser();
|
||||
|
||||
BatchUpdates(() =>
|
||||
{
|
||||
setPageData(parser);
|
||||
//setSearchLevelId(parser.level);
|
||||
setTotalPages(Math.ceil(parser.totalMembersCount / parser.pageSize));
|
||||
});
|
||||
}, []);
|
||||
|
||||
CreateMessageHook(GroupMembersEvent, onGroupMembersEvent);
|
||||
|
||||
const onGroupConfirmMemberRemoveEvent = useCallback((event: GroupConfirmMemberRemoveEvent) =>
|
||||
{
|
||||
const parser = event.getParser();
|
||||
|
||||
NotificationUtilities.confirm(LocalizeText(((parser.furnitureCount > 0) ? 'group.kickconfirm.desc' : 'group.kickconfirm_nofurni.desc'), [ 'user', 'amount' ], [ removingMemberName, parser.furnitureCount.toString() ]), () =>
|
||||
{
|
||||
SendMessageHook(new GroupRemoveMemberComposer(pageData.groupId, parser.userId));
|
||||
|
||||
refreshMembers();
|
||||
}, null);
|
||||
|
||||
setRemovingMemberName(null);
|
||||
}, [ pageData, removingMemberName, refreshMembers ]);
|
||||
|
||||
CreateMessageHook(GroupConfirmMemberRemoveEvent, onGroupConfirmMemberRemoveEvent);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
setPageId(0);
|
||||
}, [ groupId, levelId, searchQuery ]);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
|
||||
})
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
if((groupId === -1) || (levelId === -1) || (pageId === -1)) return;
|
||||
|
||||
SendMessageHook(new GroupMembersComposer(groupId, pageId, searchQuery, levelId));
|
||||
}, [ groupId, levelId, pageId, searchQuery ]);
|
||||
|
||||
if(!groupId || !pageData) return null;
|
||||
|
||||
return (
|
||||
<NitroCardView className="nitro-group-members" simple={ true }>
|
||||
<NitroCardView className="nitro-group-members" simple>
|
||||
<NitroCardHeaderView headerText={ LocalizeText('group.members.title', ['groupName'], [ pageData ? pageData.groupTitle : '' ]) } onCloseClick={ onClose } />
|
||||
{ pageData && <>
|
||||
<NitroCardContentView className="pb-2">
|
||||
<div className="d-flex gap-2 align-items-center mb-2">
|
||||
<div className="group-badge">
|
||||
<BadgeImageView badgeCode={ pageData.badge } isGroup={ true } />
|
||||
</div>
|
||||
<div className="w-100">
|
||||
<input type="text" className="form-control form-control-sm w-100 mb-1" placeholder={ LocalizeText('group.members.searchinfo') } value={ searchQuery } onChange={ (e) => setSearchQuery(e.target.value) } onBlur={ () => searchMembers(pageData.pageIndex) } onKeyDown={ onKeyDown } />
|
||||
<select className="form-select form-select-sm w-100" value={ searchLevelId } onChange={ (e) => selectSearchLevelId(Number(e.target.value)) }>
|
||||
<option value="0">{ LocalizeText('group.members.search.all') }</option>
|
||||
<option value="1">{ LocalizeText('group.members.search.admins') }</option>
|
||||
<option value="2">{ LocalizeText('group.members.search.pending') }</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row row-cols-2 align-content-start g-0 w-100 members-list overflow-auto">
|
||||
{ pageData.result.map((member, index) =>
|
||||
<NitroCardContentView overflow="hidden">
|
||||
<Flex gap={ 2 }>
|
||||
<Flex center className="group-badge">
|
||||
<BadgeImageView badgeCode={ pageData.badge } isGroup={ true } className="mx-auto d-block"/>
|
||||
</Flex>
|
||||
<Column fullWidth gap={ 1 }>
|
||||
<input type="text" className="form-control form-control-sm w-100" placeholder={ LocalizeText('group.members.searchinfo') } value={ searchQuery } onChange={ event => setSearchQuery(event.target.value) } />
|
||||
<select className="form-select form-select-sm w-100" value={ levelId } onChange={ event => setLevelId(parseInt(event.target.value)) }>
|
||||
<option value="0">{ LocalizeText('group.members.search.all') }</option>
|
||||
<option value="1">{ LocalizeText('group.members.search.admins') }</option>
|
||||
<option value="2">{ LocalizeText('group.members.search.pending') }</option>
|
||||
</select>
|
||||
</Column>
|
||||
</Flex>
|
||||
<Grid columnCount={ 2 } overflow="auto" className="nitro-group-members-list-grid">
|
||||
{ pageData.result.map((member, index) =>
|
||||
{
|
||||
return (
|
||||
<div key={ index } className={ 'col pb-1' + classNames({ ' pe-1': index % 2 === 0 }) }>
|
||||
<div className="list-member bg-white rounded d-flex text-black">
|
||||
<div className="avatar-head flex-shrink-0 cursor-pointer" onClick={ () => { GetUserProfile(member.id) } }>
|
||||
<AvatarImageView figure={ member.figure } headOnly={ true } direction={ 2 } />
|
||||
</div>
|
||||
<div className="p-1 w-100 d-flex flex-column justify-content-center">
|
||||
<div className="fw-bold small cursor-pointer" onClick={ () => { GetUserProfile(member.id) } }>{ member.name }</div>
|
||||
{ member.rank !== GroupRank.REQUESTED && <div className="text-muted fst-italic small">{ LocalizeText('group.members.since', ['date'], [member.joinedAt]) }</div> }
|
||||
</div>
|
||||
<div className="d-flex flex-column pe-2 align-items-center justify-content-center">
|
||||
<div className="d-flex align-items-center">
|
||||
<i className={ 'icon icon-group-small-' + classNames({ 'owner': member.rank === GroupRank.OWNER, 'admin': member.rank === GroupRank.ADMIN, 'not-admin': member.rank === GroupRank.MEMBER, 'cursor-pointer': pageData.admin }) } title={ LocalizeText(getRankDescription(member)) } onClick={ () => toggleAdmin(member) } />
|
||||
</div>
|
||||
{ member.rank === GroupRank.REQUESTED && <div className="d-flex align-items-center">
|
||||
<i className="icon cursor-pointer icon-accept" title={ LocalizeText('group.members.accept') } onClick={ () => acceptMembership(member) } />
|
||||
</div> }
|
||||
{ member.rank !== GroupRank.OWNER && pageData.admin && member.id !== GetSessionDataManager().userId &&<div className="d-flex align-items-center mt-1">
|
||||
<i className="icon cursor-pointer icon-deny" title={ LocalizeText(member.rank === GroupRank.REQUESTED ? 'group.members.reject' : 'group.members.kick') } onClick={ () => removeMemberOrDeclineMembership(member) } />
|
||||
</div> }
|
||||
</div>
|
||||
<Flex key={ index } gap={ 2 } alignItems="center" overflow="hidden" className="member-list-item bg-white rounded p-2">
|
||||
<div className="avatar-head cursor-pointer" onClick={ () => GetUserProfile(member.id) }>
|
||||
<AvatarImageView figure={ member.figure } headOnly={ true } direction={ 2 } />
|
||||
</div>
|
||||
</div>
|
||||
<Column grow gap={ 1 }>
|
||||
<Text bold small pointer onClick={ () => GetUserProfile(member.id) }>{ member.name }</Text>
|
||||
{ (member.rank !== GroupRank.REQUESTED) &&
|
||||
<Text small italics variant="muted">{ LocalizeText('group.members.since', ['date'], [member.joinedAt]) }</Text> }
|
||||
</Column>
|
||||
<Column gap={ 1 }>
|
||||
{ (member.rank !== GroupRank.REQUESTED) &&
|
||||
<Flex center>
|
||||
<i className={ 'icon icon-group-small-' + classNames({ 'owner': (member.rank === GroupRank.OWNER), 'admin': (member.rank === GroupRank.ADMIN), 'not-admin': (member.rank === GroupRank.MEMBER), 'cursor-pointer': pageData.admin }) } title={ LocalizeText(getRankDescription(member)) } onClick={ () => toggleAdmin(member) } />
|
||||
</Flex> }
|
||||
{ (member.rank === GroupRank.REQUESTED) &&
|
||||
<Flex alignItems="center">
|
||||
<Base pointer className="nitro-friends-spritesheet icon-accept" title={ LocalizeText('group.members.accept') } onClick={ () => acceptMembership(member) }></Base>
|
||||
</Flex> }
|
||||
{ (member.rank !== GroupRank.OWNER) && pageData.admin && (member.id !== GetSessionDataManager().userId) &&
|
||||
<Flex alignItems="center">
|
||||
<Base pointer className="nitro-friends-spritesheet icon-deny" title={ LocalizeText(member.rank === GroupRank.REQUESTED ? 'group.members.reject' : 'group.members.kick') } onClick={ () => removeMemberOrDeclineMembership(member) }></Base>
|
||||
</Flex> }
|
||||
</Column>
|
||||
</Flex>
|
||||
);
|
||||
}) }
|
||||
</div>
|
||||
<div className="d-flex w-100 align-items-center">
|
||||
<div>
|
||||
<button disabled={ pageData.pageIndex === 0 } className="btn btn-primary" onClick={ previousPage }><i className="fas fa-chevron-left" /></button>
|
||||
</div>
|
||||
<div className="text-center text-black w-100">{ LocalizeText('group.members.pageinfo', ['amount', 'page', 'totalPages'], [pageData.totalMembersCount.toString(), (pageData.pageIndex + 1).toString(), totalPages.toString()]) }</div>
|
||||
<div>
|
||||
<button disabled={ pageData.pageIndex === totalPages - 1 } className="btn btn-primary" onClick={ nextPage }><i className="fas fa-chevron-right" /></button>
|
||||
</div>
|
||||
</div>
|
||||
</NitroCardContentView>
|
||||
</> }
|
||||
</Grid>
|
||||
<Flex gap={ 1 } justifyContent="between" alignItems="center">
|
||||
<Button disabled={ (pageData.pageIndex === 0) } onClick={ previousPage }>
|
||||
<FontAwesomeIcon icon="chevron-left" />
|
||||
</Button>
|
||||
<Text small>
|
||||
{ LocalizeText('group.members.pageinfo', ['amount', 'page', 'totalPages'], [pageData.totalMembersCount.toString(), (pageData.pageIndex + 1).toString(), totalPages.toString()]) }
|
||||
</Text>
|
||||
<Button disabled={ (pageData.pageIndex === (totalPages - 1)) } onClick={ nextPage }>
|
||||
<FontAwesomeIcon icon="chevron-right" />
|
||||
</Button>
|
||||
</Flex>
|
||||
</NitroCardContentView>
|
||||
</NitroCardView>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,141 +0,0 @@
|
||||
import classNames from 'classnames';
|
||||
import { FC, useCallback, useEffect, useState } from 'react';
|
||||
import { BadgeImageView } from '../../../../views/shared/badge-image/BadgeImageView';
|
||||
import { GroupBadgePart } from '../../common/GroupBadgePart';
|
||||
import { useGroupsContext } from '../../GroupsContext';
|
||||
import { GroupsActions } from '../../reducers/GroupsReducer';
|
||||
|
||||
const POSITIONS: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8];
|
||||
|
||||
interface GroupSharedTabBadgeViewProps
|
||||
{
|
||||
skipDefault?: boolean;
|
||||
}
|
||||
|
||||
export const GroupSharedTabBadgeView: FC<GroupSharedTabBadgeViewProps> = props =>
|
||||
{
|
||||
const { groupsState = null, dispatchGroupsState = null } = useGroupsContext();
|
||||
const { badgeBases = null, badgeSymbols = null, badgePartColors = null, groupBadgeParts = null } = groupsState;
|
||||
|
||||
const { skipDefault = null } = props;
|
||||
|
||||
const [ editingIndex, setEditingIndex ] = useState<number>(0);
|
||||
const [ isSelectingModel, setIsSelectingModel ] = useState<boolean>(false);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
if(skipDefault || !badgeBases || !badgePartColors || groupBadgeParts) return;
|
||||
|
||||
const badgeParts: GroupBadgePart[] = [
|
||||
new GroupBadgePart(GroupBadgePart.BASE, badgeBases[0].id, badgePartColors[0].id),
|
||||
new GroupBadgePart(GroupBadgePart.SYMBOL, 0, badgePartColors[0].id),
|
||||
new GroupBadgePart(GroupBadgePart.SYMBOL, 0, badgePartColors[0].id),
|
||||
new GroupBadgePart(GroupBadgePart.SYMBOL, 0, badgePartColors[0].id),
|
||||
new GroupBadgePart(GroupBadgePart.SYMBOL, 0, badgePartColors[0].id)
|
||||
];
|
||||
|
||||
dispatchGroupsState({
|
||||
type: GroupsActions.SET_GROUP_BADGE_PARTS,
|
||||
payload: { badgeParts }
|
||||
});
|
||||
|
||||
}, [ badgeBases, badgePartColors, groupBadgeParts ]);
|
||||
|
||||
const switchIndex = useCallback((index: number) =>
|
||||
{
|
||||
setIsSelectingModel(false);
|
||||
setEditingIndex(index);
|
||||
}, []);
|
||||
|
||||
const selectPartProperty = useCallback((property: string, key: number) =>
|
||||
{
|
||||
const clonedBadgeParts = Array.from(groupBadgeParts);
|
||||
|
||||
clonedBadgeParts[editingIndex][property] = key;
|
||||
|
||||
dispatchGroupsState({
|
||||
type: GroupsActions.SET_GROUP_BADGE_PARTS,
|
||||
payload: {
|
||||
badgeParts: clonedBadgeParts
|
||||
}
|
||||
});
|
||||
|
||||
if(property === 'key') setIsSelectingModel(false);
|
||||
}, [ editingIndex, groupBadgeParts, dispatchGroupsState ]);
|
||||
|
||||
const getCompleteBadgeCode = useCallback(() =>
|
||||
{
|
||||
let code = '';
|
||||
|
||||
if(!groupBadgeParts) return code;
|
||||
|
||||
groupBadgeParts.forEach((badgePart) =>
|
||||
{
|
||||
if(badgePart.code) code = code + badgePart.code;
|
||||
});
|
||||
|
||||
return code;
|
||||
}, [ groupBadgeParts ]);
|
||||
|
||||
const getCurrentPart = useCallback((property: string) =>
|
||||
{
|
||||
return groupBadgeParts[editingIndex][property];
|
||||
}, [ groupBadgeParts, editingIndex ]);
|
||||
|
||||
return (
|
||||
<div className="shared-tab-badge">
|
||||
<div className="d-flex gap-2">
|
||||
<div className="badge-preview flex-shrink-0 me-3">
|
||||
<BadgeImageView badgeCode={ getCompleteBadgeCode() } isGroup={ true } />
|
||||
</div>
|
||||
<div>
|
||||
<div className="d-flex gap-2 align-items-center">
|
||||
{ groupBadgeParts && groupBadgeParts.map((badgePart, partIndex) =>
|
||||
{
|
||||
return (
|
||||
<div key={ partIndex } className={ 'badge-preview flex-shrink-0 d-flex align-items-center justify-content-center cursor-pointer' + classNames({ ' active': editingIndex === partIndex }) } onClick={ () => switchIndex(partIndex) }>
|
||||
{ badgePart.code && <BadgeImageView badgeCode={ badgePart.code } isGroup={ true } /> }
|
||||
{ !badgePart.code && <i className="fas fa-plus text-primary h4 m-0" /> }
|
||||
</div>
|
||||
)
|
||||
}) }
|
||||
</div>
|
||||
{ !isSelectingModel && groupBadgeParts && <div className="d-flex gap-2 mt-3">
|
||||
<div className="badge-preview d-flex align-items-center justify-content-center flex-shrink-0 cursor-pointer" onClick={ () => setIsSelectingModel(true) }>
|
||||
{ getCurrentPart('code') && <BadgeImageView badgeCode={ getCurrentPart('code') } isGroup={ true } /> }
|
||||
{ !getCurrentPart('code') && <i className="fas fa-plus text-primary h4 m-0" /> }
|
||||
</div>
|
||||
<div>
|
||||
<div className="row row-cols-3 g-0 gap-1 w-100 h-100 overflow-auto">
|
||||
{ POSITIONS.map((position) =>
|
||||
{
|
||||
return <div key={ position } className={ 'position-swatch cursor-pointer' + classNames({ ' active': getCurrentPart('position') === position }) } onClick={ () => selectPartProperty('position', position) }></div>
|
||||
}) }
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="row row-cols-8 g-0 gap-1 w-100 h-100 overflow-auto">
|
||||
{ badgePartColors && badgePartColors.map((item, index) =>
|
||||
{
|
||||
return <div key={ index } className={ 'color-swatch cursor-pointer' + classNames({ ' active': item.id === getCurrentPart('color') }) } style={{ backgroundColor: '#' + item.color }} onClick={ () => selectPartProperty('color', item.id) }></div>
|
||||
}) }
|
||||
</div>
|
||||
</div>
|
||||
</div> }
|
||||
{ isSelectingModel && <div className="selection-list row row-cols-8 g-0 align-content-start gap-1 h-100 overflow-auto mt-3">
|
||||
{ groupBadgeParts[editingIndex].type !== GroupBadgePart.BASE && <>
|
||||
<div className="cursor-pointer badge-preview d-flex align-items-center justify-content-center" onClick={ () => selectPartProperty('key', 0) }>
|
||||
<i className="fas fa-times text-primary h4 m-0" />
|
||||
</div>
|
||||
</> }
|
||||
{ (groupBadgeParts[editingIndex].type === GroupBadgePart.BASE ? badgeBases : badgeSymbols).map((item, index) =>
|
||||
{
|
||||
return <div key={ index } className={ 'cursor-pointer badge-preview' + classNames({ ' bg-primary': groupBadgeParts[editingIndex].key === item.id }) } onClick={ () => selectPartProperty('key', item.id) }>
|
||||
<BadgeImageView badgeCode={ GroupBadgePart.getCode(groupBadgeParts[editingIndex].type, item.id, groupBadgeParts[editingIndex].color, 4) } isGroup={ true } />
|
||||
</div>
|
||||
}) }
|
||||
</div>}
|
||||
</div>
|
||||
</div>
|
||||
</div>);
|
||||
};
|
||||
@ -1,88 +0,0 @@
|
||||
import classNames from 'classnames';
|
||||
import { FC, useCallback, useEffect, useState } from 'react';
|
||||
import { LocalizeText } from '../../../../api';
|
||||
import { useGroupsContext } from '../../GroupsContext';
|
||||
import { GroupsActions } from '../../reducers/GroupsReducer';
|
||||
|
||||
export const GroupSharedTabColorsView: FC<{}> = props =>
|
||||
{
|
||||
const { groupsState = null, dispatchGroupsState = null } = useGroupsContext();
|
||||
const { groupColors = null, groupColorsA = null, groupColorsB = null } = groupsState;
|
||||
|
||||
const [ selectingColorIndex, setSelectingColorIndex ] = useState<number>(0);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
if(!groupColorsA || !groupColorsB || groupColors) return;
|
||||
|
||||
const colors: number[] = [
|
||||
groupColorsA[0].id,
|
||||
groupColorsB[0].id
|
||||
];
|
||||
|
||||
dispatchGroupsState({
|
||||
type: GroupsActions.SET_GROUP_COLORS,
|
||||
payload: {
|
||||
objectValues: colors
|
||||
}
|
||||
});
|
||||
|
||||
}, [dispatchGroupsState, groupColors, groupColorsA, groupColorsB]);
|
||||
|
||||
const getGroupColor = useCallback((colorIndex: number) =>
|
||||
{
|
||||
if(colorIndex === 0) return groupColorsA.find(c => c.id === groupColors[colorIndex]).color;
|
||||
|
||||
return groupColorsB.find(c => c.id === groupColors[colorIndex]).color;
|
||||
}, [ groupColors, groupColorsA, groupColorsB ]);
|
||||
|
||||
const selectColor = useCallback((colorId: number) =>
|
||||
{
|
||||
const clonedGroupColors = Array.from(groupColors);
|
||||
|
||||
clonedGroupColors[selectingColorIndex] = colorId;
|
||||
|
||||
dispatchGroupsState({
|
||||
type: GroupsActions.SET_GROUP_COLORS,
|
||||
payload: {
|
||||
objectValues: clonedGroupColors
|
||||
}
|
||||
});
|
||||
}, [ selectingColorIndex, groupColors, dispatchGroupsState ]);
|
||||
|
||||
return (
|
||||
<div className="shared-tab-colors d-flex flex-column gap-2">
|
||||
<div className="d-flex flex-column align-items-center">
|
||||
<div className="fw-bold">{ LocalizeText('group.edit.color.guild.color') }</div>
|
||||
{ groupColors && <div className="d-flex rounded border overflow-hidden">
|
||||
<div className="group-color-swatch" style={{ backgroundColor: '#' + getGroupColor(0) }}></div>
|
||||
<div className="group-color-swatch" style={{ backgroundColor: '#' + getGroupColor(1) }}></div>
|
||||
</div> }
|
||||
</div>
|
||||
{ selectingColorIndex === 0 && <div>
|
||||
<div className="fw-bold">{ LocalizeText('group.edit.color.primary.color') }</div>
|
||||
<div className="d-flex align-items-center gap-2">
|
||||
<div className="row row-cols-18 g-0 gap-1 w-100 h-100 overflow-auto">
|
||||
{ groupColors && groupColorsA && groupColorsA.map((item, index) =>
|
||||
{
|
||||
return <div key={ index } className={ 'color-swatch cursor-pointer' + classNames({ ' active': groupColors[selectingColorIndex] === item.id }) } style={{ backgroundColor: '#' + item.color }} onClick={ () => selectColor(item.id) }></div>
|
||||
}) }
|
||||
</div>
|
||||
<div><i className="fas fa-chevron-right h2 m-0 text-primary cursor-pointer" onClick={ () => setSelectingColorIndex(1) } /></div>
|
||||
</div>
|
||||
</div> }
|
||||
{ selectingColorIndex === 1 && <div>
|
||||
<div className="fw-bold text-end">{ LocalizeText('group.edit.color.secondary.color') }</div>
|
||||
<div className="d-flex align-items-center gap-2">
|
||||
<div><i className="fas fa-chevron-left h2 m-0 text-primary cursor-pointer" onClick={ () => setSelectingColorIndex(0) } /></div>
|
||||
<div className="row row-cols-18 g-0 gap-1 w-100 h-100 overflow-auto">
|
||||
{ groupColorsB && groupColorsB.map((item, index) =>
|
||||
{
|
||||
return <div key={ index } className={ 'color-swatch cursor-pointer' + classNames({ ' active': groupColors[selectingColorIndex] === item.id }) } style={{ backgroundColor: '#' + item.color }} onClick={ () => selectColor(item.id) }></div>
|
||||
}) }
|
||||
</div>
|
||||
</div>
|
||||
</div> }
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -1,72 +0,0 @@
|
||||
import { FC, useCallback } from 'react';
|
||||
import { CreateLinkEvent, LocalizeText } from '../../../../api';
|
||||
import { useGroupsContext } from '../../GroupsContext';
|
||||
import { GroupsActions } from '../../reducers/GroupsReducer';
|
||||
|
||||
interface GroupSharedTabIdentityViewProps
|
||||
{
|
||||
isCreator?: boolean;
|
||||
}
|
||||
|
||||
export const GroupSharedTabIdentityView: FC<GroupSharedTabIdentityViewProps> = props =>
|
||||
{
|
||||
const { groupsState = null, dispatchGroupsState = null } = useGroupsContext();
|
||||
const { groupName = '', groupDescription = '', groupHomeroomId = 0, availableRooms = null } = groupsState;
|
||||
|
||||
const { isCreator = false } = props;
|
||||
|
||||
const setName = useCallback((name: string) =>
|
||||
{
|
||||
dispatchGroupsState({
|
||||
type: GroupsActions.SET_GROUP_NAME,
|
||||
payload: {
|
||||
stringValues: [ name ]
|
||||
}
|
||||
})
|
||||
}, [ dispatchGroupsState ]);
|
||||
|
||||
const setDescription = useCallback((description: string) =>
|
||||
{
|
||||
dispatchGroupsState({
|
||||
type: GroupsActions.SET_GROUP_DESCRIPTION,
|
||||
payload: {
|
||||
stringValues: [ description ]
|
||||
}
|
||||
})
|
||||
}, [ dispatchGroupsState ]);
|
||||
|
||||
const setHomeroomId = useCallback((id: number) =>
|
||||
{
|
||||
dispatchGroupsState({
|
||||
type: GroupsActions.SET_GROUP_HOMEROOM_ID,
|
||||
payload: {
|
||||
numberValues: [ id ]
|
||||
}
|
||||
})
|
||||
}, [ dispatchGroupsState ]);
|
||||
|
||||
return (<div className="d-flex flex-column justify-content-center h-100">
|
||||
<div className="form-group mb-2">
|
||||
<label className="fw-bold">{ LocalizeText('group.edit.name') }</label>
|
||||
<input type="text" className="form-control form-control-sm" value={ groupName } maxLength={ 29 } onChange={ (e) => setName(e.target.value) } />
|
||||
</div>
|
||||
<div className="form-group mb-2">
|
||||
<label className="fw-bold">{ LocalizeText('group.edit.desc') }</label>
|
||||
<input type="text" className="form-control form-control-sm" value={ groupDescription } maxLength={ 254 } onChange={ (e) => setDescription(e.target.value) } />
|
||||
</div>
|
||||
{ isCreator && <>
|
||||
<div className="form-group mb-1">
|
||||
<label className="fw-bold">{ LocalizeText('group.edit.base') }</label>
|
||||
<select className="form-select form-select-sm" value={ groupHomeroomId } onChange={ (e) => setHomeroomId(Number(e.target.value)) }>
|
||||
<option value={ 0 } disabled>{ LocalizeText('group.edit.base.select.room') }</option>
|
||||
{ availableRooms && availableRooms.map((room, index) =>
|
||||
{
|
||||
return <option key={ index } value={ room.id }>{ room.name }</option>;
|
||||
}) }
|
||||
</select>
|
||||
</div>
|
||||
<div className="small mb-2">{ LocalizeText('group.edit.base.warning') }</div>
|
||||
<div className="cursor-pointer text-decoration-underline text-center" onClick={ () => CreateLinkEvent('navigator/create') }>{ LocalizeText('group.createroom') }</div>
|
||||
</> }
|
||||
</div>);
|
||||
};
|
||||
@ -1,79 +0,0 @@
|
||||
.nitro-groups {
|
||||
.badge-preview {
|
||||
position: relative;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: $white;
|
||||
border-radius: $border-radius;
|
||||
|
||||
&.active {
|
||||
&:before {
|
||||
position: absolute;
|
||||
content: ' ';
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 10px solid white;
|
||||
border-left: 10px solid transparent;
|
||||
border-right: 10px solid transparent;
|
||||
bottom: -10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.group-color-swatch {
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.shared-tab-badge {
|
||||
.position-swatch {
|
||||
position: relative;
|
||||
border-radius: $border-radius;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: $white;
|
||||
border: 2px solid $white;
|
||||
box-shadow: inset 3px 3px rgba(0, 0, 0, .1);
|
||||
|
||||
&.active {
|
||||
background: $primary;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.color-swatch {
|
||||
position: relative;
|
||||
border-radius: $border-radius;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid $white;
|
||||
box-shadow: inset 3px 3px rgba(0, 0, 0, .1);
|
||||
|
||||
&.active {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.selection-list {
|
||||
height: 160px;
|
||||
min-height: 160px;
|
||||
max-height: 160px;
|
||||
}
|
||||
}
|
||||
|
||||
.shared-tab-colors {
|
||||
|
||||
.color-swatch {
|
||||
position: relative;
|
||||
border-radius: $border-radius;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border: 2px solid $white;
|
||||
box-shadow: inset 2px 2px rgba(0, 0, 0, .2);
|
||||
|
||||
&.active {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
7
src/components/groups/views/tabs/GroupSharedTabs.scss
Normal file
7
src/components/groups/views/tabs/GroupSharedTabs.scss
Normal file
@ -0,0 +1,7 @@
|
||||
.nitro-groups {
|
||||
|
||||
.group-color-swatch {
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
111
src/components/groups/views/tabs/GroupTabBadgeView.tsx
Normal file
111
src/components/groups/views/tabs/GroupTabBadgeView.tsx
Normal file
@ -0,0 +1,111 @@
|
||||
import { GroupSaveBadgeComposer } from '@nitrots/nitro-renderer';
|
||||
import { FC, useEffect, useState } from 'react';
|
||||
import { Column, Flex, Grid } from '../../../../common';
|
||||
import { SendMessageHook } from '../../../../hooks';
|
||||
import { BadgeImageView } from '../../../../views/shared/badge-image/BadgeImageView';
|
||||
import { GroupBadgePart } from '../../common/GroupBadgePart';
|
||||
import { useGroupsContext } from '../../GroupsContext';
|
||||
import { GroupsActions } from '../../reducers/GroupsReducer';
|
||||
import { GroupBadgeCreatorView } from '../GroupBadgeCreatorView';
|
||||
|
||||
const POSITIONS: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8];
|
||||
|
||||
interface GroupTabBadgeViewProps
|
||||
{
|
||||
skipDefault?: boolean;
|
||||
}
|
||||
|
||||
export const GroupTabBadgeView: FC<GroupTabBadgeViewProps> = props =>
|
||||
{
|
||||
const { skipDefault = null } = props;
|
||||
const [ badgeParts, setBadgeParts ] = useState<GroupBadgePart[]>(null);
|
||||
const { groupsState = null, dispatchGroupsState = null } = useGroupsContext();
|
||||
const { badgeBases = null, badgeSymbols = null, badgePartColors = null, groupId = -1, groupBadgeParts = null } = groupsState;
|
||||
|
||||
const getModifiedBadgeCode = () =>
|
||||
{
|
||||
if(!badgeParts || !badgeParts.length) return '';
|
||||
|
||||
let badgeCode = '';
|
||||
|
||||
badgeParts.forEach(part => (part.code && (badgeCode += part.code)));
|
||||
|
||||
return badgeCode;
|
||||
}
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
if(groupBadgeParts && groupBadgeParts.length) return;
|
||||
|
||||
const badgeParts = [
|
||||
new GroupBadgePart(GroupBadgePart.BASE, badgeBases[0].id, badgePartColors[0].id),
|
||||
new GroupBadgePart(GroupBadgePart.SYMBOL, 0, badgePartColors[0].id),
|
||||
new GroupBadgePart(GroupBadgePart.SYMBOL, 0, badgePartColors[0].id),
|
||||
new GroupBadgePart(GroupBadgePart.SYMBOL, 0, badgePartColors[0].id),
|
||||
new GroupBadgePart(GroupBadgePart.SYMBOL, 0, badgePartColors[0].id)
|
||||
];
|
||||
|
||||
dispatchGroupsState({
|
||||
type: GroupsActions.SET_GROUP_BADGE_PARTS,
|
||||
payload: { badgeParts }
|
||||
});
|
||||
}, [ groupBadgeParts, badgeBases, badgePartColors, dispatchGroupsState ]);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
setBadgeParts(groupBadgeParts);
|
||||
}, [ groupBadgeParts ]);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
if((groupId <= 0) || !badgeParts || !badgeParts.length || !groupBadgeParts || !groupBadgeParts.length || (badgeParts === groupBadgeParts)) return;
|
||||
|
||||
const badge = [];
|
||||
|
||||
badgeParts.forEach((part) =>
|
||||
{
|
||||
if(!part.code) return;
|
||||
|
||||
badge.push(part.key);
|
||||
badge.push(part.color);
|
||||
badge.push(part.position);
|
||||
});
|
||||
|
||||
console.log('send')
|
||||
|
||||
SendMessageHook(new GroupSaveBadgeComposer(groupId, badge));
|
||||
}, [ groupId, badgeParts, groupBadgeParts ]);
|
||||
|
||||
// useEffect(() =>
|
||||
// {
|
||||
// if((groupId <= 0) || !badgeParts || !badgeParts.length || (badgeParts === groupBadgeParts)) return;
|
||||
|
||||
// const badge = [];
|
||||
|
||||
// badgeParts.forEach((part) =>
|
||||
// {
|
||||
// if(!part.code) return;
|
||||
|
||||
// badge.push(part.key);
|
||||
// badge.push(part.color);
|
||||
// badge.push(part.position);
|
||||
// });
|
||||
|
||||
// console.log('send')
|
||||
|
||||
// SendMessageHook(new GroupSaveBadgeComposer(groupId, badge));
|
||||
// }, [ groupId, groupBadgeParts, badgeParts ]);
|
||||
|
||||
return (
|
||||
<Grid overflow="hidden" gap={ 1 }>
|
||||
<Column size={ 2 }>
|
||||
<Flex center className="bg-muted rounded p-1">
|
||||
<BadgeImageView badgeCode={ getModifiedBadgeCode() } isGroup={ true } />
|
||||
</Flex>
|
||||
</Column>
|
||||
<Column size={ 10 } overflow="auto">
|
||||
<GroupBadgeCreatorView badgeParts={ badgeParts } setBadgeParts={ setBadgeParts } />
|
||||
</Column>
|
||||
</Grid>
|
||||
);
|
||||
};
|
||||
81
src/components/groups/views/tabs/GroupTabColorsView.tsx
Normal file
81
src/components/groups/views/tabs/GroupTabColorsView.tsx
Normal file
@ -0,0 +1,81 @@
|
||||
import classNames from 'classnames';
|
||||
import { FC, useEffect } from 'react';
|
||||
import { LocalizeText } from '../../../../api';
|
||||
import { AutoGrid, Base, Column, Flex, Grid, Text } from '../../../../common';
|
||||
import { useGroupsContext } from '../../GroupsContext';
|
||||
import { GroupsActions } from '../../reducers/GroupsReducer';
|
||||
|
||||
export const GroupTabColorsView: FC<{}> = props =>
|
||||
{
|
||||
const { groupsState = null, dispatchGroupsState = null } = useGroupsContext();
|
||||
const { groupColors = null, groupColorsA = null, groupColorsB = null } = groupsState;
|
||||
|
||||
const getGroupColor = (colorIndex: number) =>
|
||||
{
|
||||
if(colorIndex === 0) return groupColorsA.find(color => (color.id === groupColors[colorIndex])).color;
|
||||
|
||||
return groupColorsB.find(color => (color.id === groupColors[colorIndex])).color;
|
||||
}
|
||||
|
||||
const selectColor = (colorIndex: number, colorId: number) =>
|
||||
{
|
||||
const clonedGroupColors = Array.from(groupColors);
|
||||
|
||||
clonedGroupColors[colorIndex] = colorId;
|
||||
|
||||
dispatchGroupsState({
|
||||
type: GroupsActions.SET_GROUP_COLORS,
|
||||
payload: {
|
||||
objectValues: clonedGroupColors
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
if(!groupColorsA || !groupColorsB || groupColors) return;
|
||||
|
||||
const colors: number[] = [
|
||||
groupColorsA[0].id,
|
||||
groupColorsB[0].id
|
||||
];
|
||||
|
||||
dispatchGroupsState({
|
||||
type: GroupsActions.SET_GROUP_COLORS,
|
||||
payload: {
|
||||
objectValues: colors
|
||||
}
|
||||
});
|
||||
}, [ dispatchGroupsState, groupColors, groupColorsA, groupColorsB ]);
|
||||
|
||||
return (
|
||||
<Grid overflow="hidden">
|
||||
<Column size={ 2 } gap={ 1 }>
|
||||
<Text bold>{ LocalizeText('group.edit.color.guild.color') }</Text>
|
||||
{ groupColors && (groupColors.length > 0) &&
|
||||
<Flex overflow="hidden" className="rounded border">
|
||||
<Base className="group-color-swatch" style={{ backgroundColor: '#' + getGroupColor(0) }} />
|
||||
<Base className="group-color-swatch" style={{ backgroundColor: '#' + getGroupColor(1) }} />
|
||||
</Flex> }
|
||||
</Column>
|
||||
<Column size={ 5 } gap={ 1 } overflow="hidden">
|
||||
<Text bold>{ LocalizeText('group.edit.color.primary.color') }</Text>
|
||||
<AutoGrid gap={ 1 } columnCount={ 7 } columnMinWidth={ 16 } columnMinHeight={ 16 }>
|
||||
{ groupColors && groupColorsA && groupColorsA.map((item, index) =>
|
||||
{
|
||||
return <div key={ index } className={ 'group-badge-color-swatch cursor-pointer' + classNames({ ' active': (groupColors[0] === item.id) }) } style={{ backgroundColor: '#' + item.color }} onClick={ () => selectColor(0, item.id) }></div>
|
||||
}) }
|
||||
</AutoGrid>
|
||||
</Column>
|
||||
<Column size={ 5 } gap={ 1 } overflow="hidden">
|
||||
<Text bold>{ LocalizeText('group.edit.color.secondary.color') }</Text>
|
||||
<AutoGrid gap={ 1 } columnCount={ 7 } columnMinWidth={ 16 } columnMinHeight={ 16 }>
|
||||
{ groupColorsB && groupColorsB.map((item, index) =>
|
||||
{
|
||||
return <div key={ index } className={ 'group-badge-color-swatch cursor-pointer' + classNames({ ' active': (groupColors[1] === item.id) }) } style={{ backgroundColor: '#' + item.color }} onClick={ () => selectColor(1, item.id) }></div>
|
||||
}) }
|
||||
</AutoGrid>
|
||||
</Column>
|
||||
</Grid>
|
||||
);
|
||||
};
|
||||
75
src/components/groups/views/tabs/GroupTabIdentityView.tsx
Normal file
75
src/components/groups/views/tabs/GroupTabIdentityView.tsx
Normal file
@ -0,0 +1,75 @@
|
||||
import { FC } from 'react';
|
||||
import { CreateLinkEvent, LocalizeText } from '../../../../api';
|
||||
import { Column, Flex, Text } from '../../../../common';
|
||||
import { useGroupsContext } from '../../GroupsContext';
|
||||
import { GroupsActions } from '../../reducers/GroupsReducer';
|
||||
|
||||
interface GroupTabIdentityViewProps
|
||||
{
|
||||
isCreator?: boolean;
|
||||
}
|
||||
|
||||
export const GroupTabIdentityView: FC<GroupTabIdentityViewProps> = props =>
|
||||
{
|
||||
const { isCreator = false } = props;
|
||||
const { groupsState = null, dispatchGroupsState = null } = useGroupsContext();
|
||||
const { groupName = '', groupDescription = '', groupHomeroomId = 0, availableRooms = null } = groupsState;
|
||||
|
||||
const setName = (name: string) =>
|
||||
{
|
||||
dispatchGroupsState({
|
||||
type: GroupsActions.SET_GROUP_NAME,
|
||||
payload: {
|
||||
stringValues: [ name ]
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const setDescription = (description: string) =>
|
||||
{
|
||||
dispatchGroupsState({
|
||||
type: GroupsActions.SET_GROUP_DESCRIPTION,
|
||||
payload: {
|
||||
stringValues: [ description ]
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const setHomeroomId = (id: number) =>
|
||||
{
|
||||
dispatchGroupsState({
|
||||
type: GroupsActions.SET_GROUP_HOMEROOM_ID,
|
||||
payload: {
|
||||
numberValues: [ id ]
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Column gap={ 1 }>
|
||||
<Flex alignItems="center" gap={ 1 }>
|
||||
<Text className="col-3">{ LocalizeText('group.edit.name') }</Text>
|
||||
<input type="text" className="form-control form-control-sm" value={ groupName } maxLength={ 29 } onChange={ event => setName(event.target.value) } />
|
||||
</Flex>
|
||||
<Flex alignItems="center" gap={ 1 }>
|
||||
<Text className="col-3">{ LocalizeText('group.edit.desc') }</Text>
|
||||
<textarea className="form-control form-control-sm" value={ groupDescription } maxLength={ 254 } onChange={ event => setDescription(event.target.value) } />
|
||||
</Flex>
|
||||
{ isCreator &&
|
||||
<Flex gap={ 1 }>
|
||||
<Text className="col-3">{ LocalizeText('group.edit.base') }</Text>
|
||||
<Column gap={ 1 }>
|
||||
<select className="form-select form-select-sm" value={ groupHomeroomId } onChange={ event => setHomeroomId(Number(event.target.value)) }>
|
||||
<option value={ 0 } disabled>{ LocalizeText('group.edit.base.select.room') }</option>
|
||||
{ availableRooms && availableRooms.map((room, index) => <option key={ index } value={ room.id }>{ room.name }</option>) }
|
||||
</select>
|
||||
<Text small>{ LocalizeText('group.edit.base.warning') }</Text>
|
||||
</Column>
|
||||
</Flex> }
|
||||
</Column>
|
||||
{ isCreator &&
|
||||
<Text underline center fullWidth pointer onClick={ event => CreateLinkEvent('navigator/create') }>{ LocalizeText('group.createroom') }</Text> }
|
||||
</>
|
||||
);
|
||||
};
|
||||
63
src/components/groups/views/tabs/GroupTabSettingsView.tsx
Normal file
63
src/components/groups/views/tabs/GroupTabSettingsView.tsx
Normal file
@ -0,0 +1,63 @@
|
||||
import { FC } from 'react';
|
||||
import { LocalizeText } from '../../../../api/utils/LocalizeText';
|
||||
import { Column, Flex, HorizontalRule, Text } from '../../../../common';
|
||||
import { useGroupsContext } from '../../GroupsContext';
|
||||
import { GroupsActions } from '../../reducers/GroupsReducer';
|
||||
|
||||
const STATES: string[] = ['regular', 'exclusive', 'private'];
|
||||
|
||||
export const GroupTabSettingsView: FC<{}> = props =>
|
||||
{
|
||||
const { groupsState = null, dispatchGroupsState = null } = useGroupsContext();
|
||||
const { groupState = null, groupCanMembersDecorate = false } = groupsState;
|
||||
|
||||
const setState = (state: number) =>
|
||||
{
|
||||
dispatchGroupsState({
|
||||
type: GroupsActions.SET_GROUP_STATE,
|
||||
payload: {
|
||||
numberValues: [ state ]
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const toggleCanMembersDecorate = () =>
|
||||
{
|
||||
dispatchGroupsState({
|
||||
type: GroupsActions.SET_GROUP_CAN_MEMBERS_DECORATE,
|
||||
payload: {
|
||||
boolValues: [ !groupCanMembersDecorate ]
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<Column overflow="auto">
|
||||
<Column>
|
||||
{ STATES.map((state, index) =>
|
||||
{
|
||||
return (
|
||||
<Flex key={ index } alignItems="center" gap={ 1 }>
|
||||
<input className="form-check-input" type="radio" name="groupState" checked={ (groupState === index) } onChange={ event => setState(index) } />
|
||||
<Column gap={ 0 }>
|
||||
<Flex gap={ 1 }>
|
||||
<i className={ `icon icon-group-type-${index}` } />
|
||||
<Text bold>{ LocalizeText(`group.edit.settings.type.${state}.label`) }</Text>
|
||||
</Flex>
|
||||
<Text>{ LocalizeText(`group.edit.settings.type.${state}.help`) }</Text>
|
||||
</Column>
|
||||
</Flex>
|
||||
);
|
||||
}) }
|
||||
</Column>
|
||||
<HorizontalRule />
|
||||
<Flex alignItems="center" gap={ 1 }>
|
||||
<input className="form-check-input" type="checkbox" checked={ groupCanMembersDecorate } onChange={() => toggleCanMembersDecorate() } />
|
||||
<Column gap={ 1 }>
|
||||
<Text bold>{ LocalizeText('group.edit.settings.rights.caption') }</Text>
|
||||
<Text>{ LocalizeText('group.edit.settings.rights.members.help') }</Text>
|
||||
</Column>
|
||||
</Flex>
|
||||
</Column>
|
||||
);
|
||||
};
|
||||
@ -1,5 +1,5 @@
|
||||
.nitro-guide-tool {
|
||||
width: 250px;
|
||||
width: $nitro-guide-tool-width;
|
||||
|
||||
.duty-switch {
|
||||
width: 38px;
|
||||
@ -19,6 +19,7 @@
|
||||
}
|
||||
|
||||
.chat-messages {
|
||||
height: 200px;
|
||||
|
||||
.message-avatar {
|
||||
position: relative;
|
||||
|
||||
@ -83,7 +83,7 @@ export const GuideToolOngoingView: FC<GuideToolOngoingViewProps> = props =>
|
||||
</Column> }
|
||||
<Button variant="danger" disabled>{ LocalizeText('guide.help.common.report.link') }</Button>
|
||||
</Flex>
|
||||
<Column fullHeight overflow="hidden" gap={ 1 } className="bg-muted rounded chat-messages p-2">
|
||||
<Column overflow="hidden" gap={ 1 } className="bg-muted rounded chat-messages p-2">
|
||||
<Column overflow="auto">
|
||||
{ messageGroups.map((group, index) =>
|
||||
{
|
||||
|
||||
@ -31,14 +31,17 @@ export const GuideToolUserFeedbackView: FC<GuideToolUserFeedbackViewProps> = pro
|
||||
<Text bold>{ LocalizeText('guide.help.request.user.feedback.closed.title') }</Text>
|
||||
<Text>{ LocalizeText('guide.help.request.user.feedback.closed.desc') }</Text>
|
||||
</Column>
|
||||
<hr className="bg-dark m-0 mt-auto" />
|
||||
<Column>
|
||||
<Text center bold>{ LocalizeText('guide.help.request.user.feedback.question') }</Text>
|
||||
<Flex gap={ 1 }>
|
||||
<Button fullWidth variant="success" onClick={ event => giveFeedback(true) }>{ LocalizeText('guide.help.request.user.feedback.positive.button') }</Button>
|
||||
<Button fullWidth variant="danger" onClick={ event => giveFeedback(false) }>{ LocalizeText('guide.help.request.user.feedback.negative.button') }</Button>
|
||||
</Flex>
|
||||
</Column>
|
||||
{ userName && (userName.length > 0) &&
|
||||
<>
|
||||
<hr className="bg-dark m-0 mt-auto" />
|
||||
<Column>
|
||||
<Text center bold>{ LocalizeText('guide.help.request.user.feedback.question') }</Text>
|
||||
<Flex gap={ 1 }>
|
||||
<Button fullWidth variant="success" onClick={ event => giveFeedback(true) }>{ LocalizeText('guide.help.request.user.feedback.positive.button') }</Button>
|
||||
<Button fullWidth variant="danger" onClick={ event => giveFeedback(false) }>{ LocalizeText('guide.help.request.user.feedback.negative.button') }</Button>
|
||||
</Flex>
|
||||
</Column>
|
||||
</> }
|
||||
</Column>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { createContext, Dispatch, FC, ProviderProps, useContext } from 'react';
|
||||
import { INavigatorAction, INavigatorState } from '../reducers/NavigatorReducer';
|
||||
import { INavigatorAction, INavigatorState } from './reducers/NavigatorReducer';
|
||||
|
||||
export interface INavigatorContext
|
||||
interface INavigatorContext
|
||||
{
|
||||
navigatorState: INavigatorState;
|
||||
dispatchNavigatorState: Dispatch<INavigatorAction>;
|
||||
@ -4,7 +4,7 @@ import { CreateRoomSession, GetSessionDataManager } from '../../api';
|
||||
import { UpdateDoorStateEvent } from '../../events';
|
||||
import { dispatchUiEvent } from '../../hooks';
|
||||
import { CreateMessageHook, SendMessageHook } from '../../hooks/messages/message-event';
|
||||
import { useNavigatorContext } from './context/NavigatorContext';
|
||||
import { useNavigatorContext } from './NavigatorContext';
|
||||
import { NavigatorActions } from './reducers/NavigatorReducer';
|
||||
|
||||
export const NavigatorMessageHandler: FC<{}> = props =>
|
||||
|
||||
@ -9,7 +9,7 @@ import { useRoomSessionManagerEvent } from '../../hooks/events/nitro/session/roo
|
||||
import { useUiEvent } from '../../hooks/events/ui/ui-event';
|
||||
import { SendMessageHook } from '../../hooks/messages/message-event';
|
||||
import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../layout';
|
||||
import { NavigatorContextProvider } from './context/NavigatorContext';
|
||||
import { NavigatorContextProvider } from './NavigatorContext';
|
||||
import { NavigatorMessageHandler } from './NavigatorMessageHandler';
|
||||
import { initialNavigator, NavigatorActions, NavigatorReducer } from './reducers/NavigatorReducer';
|
||||
import { NavigatorRoomCreatorView } from './views/creator/NavigatorRoomCreatorView';
|
||||
|
||||
@ -12,7 +12,7 @@ import { BatchUpdates } from '../../../../hooks';
|
||||
import { SendMessageHook } from '../../../../hooks/messages';
|
||||
import { CurrencyIcon } from '../../../../views/shared/currency-icon/CurrencyIcon';
|
||||
import { IRoomModel, RoomModels } from '../../common/RoomModels';
|
||||
import { useNavigatorContext } from '../../context/NavigatorContext';
|
||||
import { useNavigatorContext } from '../../NavigatorContext';
|
||||
|
||||
export const NavigatorRoomCreatorView: FC<{}> = props =>
|
||||
{
|
||||
|
||||
@ -6,7 +6,6 @@ import { GetConfiguration, GetGroupInformation, GetSessionDataManager, LocalizeT
|
||||
import { Button } from '../../../../common/Button';
|
||||
import { Column } from '../../../../common/Column';
|
||||
import { Flex } from '../../../../common/Flex';
|
||||
import { Grid } from '../../../../common/Grid';
|
||||
import { Text } from '../../../../common/Text';
|
||||
import { NavigatorEvent } from '../../../../events';
|
||||
import { FloorplanEditorEvent } from '../../../../events/floorplan-editor/FloorplanEditorEvent';
|
||||
@ -17,7 +16,7 @@ import { SendMessageHook } from '../../../../hooks/messages';
|
||||
import { NitroCardContentView, NitroCardHeaderView, NitroCardView, UserProfileIconView } from '../../../../layout';
|
||||
import { RoomThumbnailView } from '../../../../layout/room-thumbnail/RoomThumbnailView';
|
||||
import { BadgeImageView } from '../../../../views/shared/badge-image/BadgeImageView';
|
||||
import { useNavigatorContext } from '../../context/NavigatorContext';
|
||||
import { useNavigatorContext } from '../../NavigatorContext';
|
||||
import { NavigatorActions } from '../../reducers/NavigatorReducer';
|
||||
|
||||
export class NavigatorRoomInfoViewProps
|
||||
@ -160,15 +159,17 @@ export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props =>
|
||||
}) }
|
||||
</Flex> }
|
||||
</Column>
|
||||
<Grid maxContent gap={ 1 }>
|
||||
<i onClick={ () => processAction('set_home_room') } className={ 'g-col-6 flex-shrink-0 icon icon-house-small cursor-pointer' + classNames({ ' gray': homeRoomId !== roomInfoData.enteredGuestRoom.roomId }) } />
|
||||
<FontAwesomeIcon icon="link" title={ LocalizeText('navigator.embed.caption') } className="cursor-pointer g-col-6" onClick={ event => dispatchUiEvent(new NavigatorEvent(NavigatorEvent.TOGGLE_ROOM_LINK)) } />
|
||||
<Column gap={ 1 }>
|
||||
<Flex gap={ 1 }>
|
||||
<i onClick={ () => processAction('set_home_room') } className={ 'flex-shrink-0 icon icon-house-small cursor-pointer' + classNames({ ' gray': homeRoomId !== roomInfoData.enteredGuestRoom.roomId }) } />
|
||||
<FontAwesomeIcon icon="link" title={ LocalizeText('navigator.embed.caption') } className="cursor-pointer" onClick={ event => dispatchUiEvent(new NavigatorEvent(NavigatorEvent.TOGGLE_ROOM_LINK)) } />
|
||||
</Flex>
|
||||
{ hasPermission('settings') &&
|
||||
<>
|
||||
<FontAwesomeIcon icon="cogs" title={ LocalizeText('navigator.room.popup.info.room.settings') } className="g-col-6 cursor-pointer" onClick={ event => processAction('open_room_settings') } />
|
||||
<FontAwesomeIcon icon="tools" title={ LocalizeText('open.floor.plan.editor') } className="g-col-6 cursor-pointer" onClick={ event => processAction('open_floorplan_editor') } />
|
||||
</> }
|
||||
</Grid>
|
||||
<Flex gap={ 1 }>
|
||||
<FontAwesomeIcon icon="cogs" title={ LocalizeText('navigator.room.popup.info.room.settings') } className="cursor-pointer" onClick={ event => processAction('open_room_settings') } />
|
||||
<FontAwesomeIcon icon="tools" title={ LocalizeText('open.floor.plan.editor') } className="cursor-pointer" onClick={ event => processAction('open_floorplan_editor') } />
|
||||
</Flex> }
|
||||
</Column>
|
||||
</Flex>
|
||||
<Text overflow="auto">{ roomInfoData.enteredGuestRoom.description }</Text>
|
||||
{ (roomInfoData.enteredGuestRoom.habboGroupId > 0) &&
|
||||
|
||||
@ -5,7 +5,7 @@ import { Flex } from '../../../../common/Flex';
|
||||
import { Text } from '../../../../common/Text';
|
||||
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
|
||||
import { RoomThumbnailView } from '../../../../layout/room-thumbnail/RoomThumbnailView';
|
||||
import { useNavigatorContext } from '../../context/NavigatorContext';
|
||||
import { useNavigatorContext } from '../../NavigatorContext';
|
||||
|
||||
export class NavigatorRoomLinkViewProps
|
||||
{
|
||||
|
||||
@ -1,11 +1,14 @@
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { RoomDeleteComposer } from '@nitrots/nitro-renderer';
|
||||
import { FC, useState } from 'react';
|
||||
import { LocalizeText } from '../../../../../api';
|
||||
import { Base } from '../../../../../common/Base';
|
||||
import { Flex } from '../../../../../common/Flex';
|
||||
import { Text } from '../../../../../common/Text';
|
||||
import { SendMessageHook } from '../../../../../hooks';
|
||||
import { NotificationUtilities } from '../../../../../views/notification-center/common/NotificationUtilities';
|
||||
import { GetMaxVisitorsList } from '../../../common/RoomSettingsUtils';
|
||||
import { useNavigatorContext } from '../../../context/NavigatorContext';
|
||||
import { useNavigatorContext } from '../../../NavigatorContext';
|
||||
import { NavigatorRoomSettingsTabViewProps } from './NavigatorRoomSettingsTabViewProps.types';
|
||||
|
||||
const DESC_MAX_LENGTH = 255;
|
||||
@ -17,6 +20,15 @@ export const NavigatorRoomSettingsBasicTabView: FC<NavigatorRoomSettingsTabViewP
|
||||
const { navigatorState = null } = useNavigatorContext();
|
||||
const { categories = null } = navigatorState;
|
||||
|
||||
const deleteRoom = () =>
|
||||
{
|
||||
NotificationUtilities.confirm(LocalizeText('navigator.roomsettings.deleteroom.confirm.message'), () =>
|
||||
{
|
||||
SendMessageHook(new RoomDeleteComposer(roomSettingsData.roomId));
|
||||
},
|
||||
null, null, null, LocalizeText('navigator.roomsettings.deleteroom.confirm.title'));
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Flex alignItems="center" gap={ 1 }>
|
||||
@ -58,7 +70,7 @@ export const NavigatorRoomSettingsBasicTabView: FC<NavigatorRoomSettingsTabViewP
|
||||
<input className="form-check-input" type="checkbox" checked={ roomSettingsData.allowWalkthrough } onChange={ event => handleChange('allow_walkthrough', event.target.checked) } />
|
||||
<Text>{ LocalizeText('navigator.roomsettings.allow_walk_through') }</Text>
|
||||
</Flex>
|
||||
<Text variant="danger" underline bold pointer className="d-flex justify-content-center align-items-center gap-1 mt-2">
|
||||
<Text variant="danger" underline bold pointer className="d-flex justify-content-center align-items-center gap-1" onClick={ deleteRoom }>
|
||||
<FontAwesomeIcon icon="times" />
|
||||
{ LocalizeText('navigator.roomsettings.delete') }
|
||||
</Text>
|
||||
|
||||
@ -4,7 +4,7 @@ import { LocalizeText } from '../../../../api';
|
||||
import { Button } from '../../../../common/Button';
|
||||
import { Flex } from '../../../../common/Flex';
|
||||
import { SearchFilterOptions } from '../../common/SearchFilterOptions';
|
||||
import { useNavigatorContext } from '../../context/NavigatorContext';
|
||||
import { useNavigatorContext } from '../../NavigatorContext';
|
||||
|
||||
export interface NavigatorSearchViewProps
|
||||
{
|
||||
|
||||
@ -1,21 +1,20 @@
|
||||
import { FC, useMemo } from 'react';
|
||||
import { NitroLayoutFlex } from '../..';
|
||||
import { NitroCardSubHeaderViewProps } from './NitroCardSubHeaderView.types';
|
||||
import { Flex, FlexProps } from '../../../common';
|
||||
|
||||
export const NitroCardSubHeaderView: FC<NitroCardSubHeaderViewProps> = props =>
|
||||
export const NitroCardSubHeaderView: FC<FlexProps> = props =>
|
||||
{
|
||||
const { className = '', ...rest } = props;
|
||||
const { justifyContent = 'center', classNames = [], ...rest } = props;
|
||||
|
||||
const getClassName = useMemo(() =>
|
||||
const getClassNames = useMemo(() =>
|
||||
{
|
||||
let newClassName = 'container-fluid bg-muted justify-content-center py-1';
|
||||
const newClassNames: string[] = [ 'container-fluid', 'bg-muted', 'p-1' ];
|
||||
|
||||
if(className && className.length) newClassName += ` ${ className }`;
|
||||
if(classNames.length) newClassNames.push(...classNames);
|
||||
|
||||
return newClassName;
|
||||
}, [ className ]);
|
||||
return newClassNames;
|
||||
}, [ classNames ]);
|
||||
|
||||
return (
|
||||
<NitroLayoutFlex className={ getClassName } { ...rest } />
|
||||
<Flex justifyContent={ justifyContent } classNames={ getClassNames } { ...rest } />
|
||||
);
|
||||
}
|
||||
|
||||
@ -4,6 +4,16 @@
|
||||
height: 40px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
|
||||
&.group-badge {
|
||||
width: 39px;
|
||||
height: 39px;
|
||||
|
||||
&.scale-2 {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
.badge-information {
|
||||
display: none;
|
||||
|
||||
@ -18,7 +18,6 @@ export const BadgeImageView: FC<BadgeImageViewProps> = props =>
|
||||
{
|
||||
const { badgeCode = null, isGroup = false, showInfo = false, customTitle = null, isGrayscale = false, scale = 1, classNames = [], style = {}, children = null, ...rest } = props;
|
||||
const [ badgeUrl, setBadgeUrl ] = useState<string>('');
|
||||
const [ isListening, setIsListening ] = useState<boolean>(true);
|
||||
|
||||
const getScaleClass = useMemo(() =>
|
||||
{
|
||||
@ -39,6 +38,8 @@ export const BadgeImageView: FC<BadgeImageViewProps> = props =>
|
||||
{
|
||||
const newClassNames: string[] = [ 'badge-image' ];
|
||||
|
||||
if(isGroup) newClassNames.push('group-badge');
|
||||
|
||||
if(isGrayscale) newClassNames.push('grayscale');
|
||||
|
||||
if((scale !== 1) && getScaleClass.length) newClassNames.push(getScaleClass);
|
||||
@ -46,7 +47,7 @@ export const BadgeImageView: FC<BadgeImageViewProps> = props =>
|
||||
if(classNames.length) newClassNames.push(...classNames);
|
||||
|
||||
return newClassNames;
|
||||
}, [ classNames, isGrayscale, scale, getScaleClass ]);
|
||||
}, [ classNames, isGroup, isGrayscale, scale, getScaleClass ]);
|
||||
|
||||
const getStyle = useMemo(() =>
|
||||
{
|
||||
@ -62,42 +63,28 @@ export const BadgeImageView: FC<BadgeImageViewProps> = props =>
|
||||
useEffect(() =>
|
||||
{
|
||||
if(!badgeCode || !badgeCode.length) return;
|
||||
|
||||
const existing = (isGroup) ? GetSessionDataManager().loadGroupBadgeImage(badgeCode) : GetSessionDataManager().loadBadgeImage(badgeCode);
|
||||
|
||||
let didSetBadge = false;
|
||||
|
||||
const onBadgeImageReadyEvent = (event: BadgeImageReadyEvent) =>
|
||||
{
|
||||
if(event.badgeId !== badgeCode) return;
|
||||
|
||||
const nitroSprite = new NitroSprite(event.image);
|
||||
setBadgeUrl(TextureUtils.generateImageUrl(nitroSprite));
|
||||
setBadgeUrl(TextureUtils.generateImageUrl(new NitroSprite(event.image)));
|
||||
|
||||
if(isListening)
|
||||
{
|
||||
GetSessionDataManager().events.removeEventListener(BadgeImageReadyEvent.IMAGE_READY, onBadgeImageReadyEvent);
|
||||
setIsListening(false);
|
||||
}
|
||||
didSetBadge = true;
|
||||
|
||||
GetSessionDataManager().events.removeEventListener(BadgeImageReadyEvent.IMAGE_READY, onBadgeImageReadyEvent);
|
||||
}
|
||||
|
||||
if(!existing)
|
||||
{
|
||||
GetSessionDataManager().events.addEventListener(BadgeImageReadyEvent.IMAGE_READY, onBadgeImageReadyEvent);
|
||||
}
|
||||
else
|
||||
{
|
||||
const image = (isGroup) ? GetSessionDataManager().getGroupBadgeImage(badgeCode) : GetSessionDataManager().getBadgeImage(badgeCode);
|
||||
const nitroSprite = new NitroSprite(image);
|
||||
setBadgeUrl(TextureUtils.generateImageUrl(nitroSprite));
|
||||
}
|
||||
GetSessionDataManager().events.addEventListener(BadgeImageReadyEvent.IMAGE_READY, onBadgeImageReadyEvent);
|
||||
|
||||
return (() =>
|
||||
{
|
||||
if(isListening)
|
||||
{
|
||||
GetSessionDataManager().events.removeEventListener(BadgeImageReadyEvent.IMAGE_READY, onBadgeImageReadyEvent);
|
||||
}
|
||||
});
|
||||
}, [ badgeCode, isGroup, isListening ]);
|
||||
const texture = isGroup ? GetSessionDataManager().getGroupBadgeImage(badgeCode) : GetSessionDataManager().getBadgeImage(badgeCode);
|
||||
|
||||
if(texture && !didSetBadge) setBadgeUrl(TextureUtils.generateImageUrl(new NitroSprite(texture)));
|
||||
|
||||
return () => GetSessionDataManager().events.removeEventListener(BadgeImageReadyEvent.IMAGE_READY, onBadgeImageReadyEvent);
|
||||
}, [ badgeCode, isGroup ]);
|
||||
|
||||
return (
|
||||
<Base classNames={ getClassNames } style={ getStyle } { ...rest }>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user