+
{ groupInformation.canMembersDecorate &&
}
-
{ group.title }
+
{ groupInformation.title }
{ LocalizeText('group.created', ['date', 'owner'], [groupInformation.createdAt, groupInformation.ownerName]) }
{ groupInformation.description }
@@ -136,7 +143,7 @@ export const GroupInformationView: FC
= props =>
{ groupInformation.type !== GroupType.PRIVATE &&
-
);
}
diff --git a/src/views/right-side/RightSideView.tsx b/src/views/right-side/RightSideView.tsx
index 5917174e..c503a533 100644
--- a/src/views/right-side/RightSideView.tsx
+++ b/src/views/right-side/RightSideView.tsx
@@ -1,4 +1,5 @@
import { FC } from 'react';
+import { GroupRoomInformationView } from '../groups/views/room-information/GroupRoomInformationView';
import { NotificationCenterView } from '../notification-center/NotificationCenterView';
import { PurseView } from '../purse/PurseView';
import { RightSideProps } from './RightSideView.types';
@@ -9,6 +10,7 @@ export const RightSideView: FC
= props =>
diff --git a/src/views/room/widgets/chat/message/ChatWidgetMessageView.scss b/src/views/room/widgets/chat/message/ChatWidgetMessageView.scss
index e2bbbbbf..9bdbcb6b 100644
--- a/src/views/room/widgets/chat/message/ChatWidgetMessageView.scss
+++ b/src/views/room/widgets/chat/message/ChatWidgetMessageView.scss
@@ -62,7 +62,7 @@
word-break: break-word;
max-width: 350px;
min-height: 25px;
- font-size: $font-size-sm;
+ font-size: 15px;
border-image-slice: 17 6 6 29 fill;
border-image-width: 17px 6px 6px 29px;
diff --git a/src/views/user-profile/views/groups-container/GroupsContainerView.tsx b/src/views/user-profile/views/groups-container/GroupsContainerView.tsx
index 9e10dafa..dc7ee616 100644
--- a/src/views/user-profile/views/groups-container/GroupsContainerView.tsx
+++ b/src/views/user-profile/views/groups-container/GroupsContainerView.tsx
@@ -1,5 +1,7 @@
+import { GroupInformationComposer, GroupInformationEvent, GroupInformationParser } from '@nitrots/nitro-renderer';
import classNames from 'classnames';
-import { FC, useEffect, useState } from 'react';
+import { FC, useCallback, useEffect, useState } from 'react';
+import { CreateMessageHook, SendMessageHook } from '../../../../hooks';
import { GroupInformationView } from '../../../groups/views/information/GroupInformationView';
import { BadgeImageView } from '../../../shared/badge-image/BadgeImageView';
import { GroupsContainerViewProps } from './GroupsContainerView.types';
@@ -8,12 +10,31 @@ export const GroupsContainerView: FC = props =>
{
const { groups = null, onLeaveGroup = null } = props;
- const [ selectedIndex, setSelectedIndex ] = useState(null);
+ const [ selectedGroupId, setSelectedGroupId ] = useState(null);
+ const [ groupInformation, setGroupInformation ] = useState(null);
+
+ const onGroupInformationEvent = useCallback((event: GroupInformationEvent) =>
+ {
+ const parser = event.getParser();
+
+ if(!selectedGroupId || selectedGroupId !== parser.id || parser.flag) return;
+
+ if(groupInformation) setGroupInformation(null);
+
+ setGroupInformation(parser);
+ }, [ groupInformation, selectedGroupId ]);
+
+ CreateMessageHook(GroupInformationEvent, onGroupInformationEvent);
useEffect(() =>
{
- if(groups.length > 0 && selectedIndex === null) setSelectedIndex(0);
- }, [ groups ]);
+ if(groups.length > 0 && !selectedGroupId) setSelectedGroupId(groups[0].id);
+ }, [ groups, selectedGroupId ]);
+
+ useEffect(() =>
+ {
+ if(selectedGroupId) SendMessageHook(new GroupInformationComposer(selectedGroupId, false));
+ }, [ selectedGroupId ]);
if(!groups) return null;
@@ -23,14 +44,14 @@ export const GroupsContainerView: FC = props =>
{ groups.map((group, index) =>
{
- return
setSelectedIndex(index) } className={ 'profile-groups-item flex-shrink-0 d-flex align-items-center justify-content-center cursor-pointer' + classNames({ ' active': selectedIndex === index }) }>
+ return
setSelectedGroupId(group.id) } className={ 'profile-groups-item flex-shrink-0 d-flex align-items-center justify-content-center cursor-pointer' + classNames({ ' active': selectedGroupId === group.id }) }>
}) }
- { selectedIndex > -1 && }
+ { groupInformation && }
);
diff --git a/src/views/wired/WiredView.scss b/src/views/wired/WiredView.scss
index ce1bc799..eba870c2 100644
--- a/src/views/wired/WiredView.scss
+++ b/src/views/wired/WiredView.scss
@@ -3,36 +3,52 @@
padding:7px;
.icon {
- width: 16px;
- height: 9px;
background-repeat: no-repeat;
background-position: center;
&.icon-mv-1 {
+ width: 16px;
+ height: 9px;
background-image: url('../../assets/images/wired/icon_wired_around.png');
}
&.icon-mv-2 {
+ width: 16px;
+ height: 9px;
background-image: url('../../assets/images/wired/icon_wired_up_down.png');
}
&.icon-mv-3 {
+ width: 16px;
+ height: 9px;
background-image: url('../../assets/images/wired/icon_wired_left_right.png');
}
&.icon-ne {
+ width: 16px;
+ height: 9px;
background-image: url('../../assets/images/wired/icon_wired_north_east.png');
}
&.icon-se {
+ width: 16px;
+ height: 9px;
background-image: url('../../assets/images/wired/icon_wired_south_east.png');
}
&.icon-sw {
+ width: 16px;
+ height: 9px;
background-image: url('../../assets/images/wired/icon_wired_south_west.png');
}
&.icon-nw {
+ width: 16px;
+ height: 9px;
background-image: url('../../assets/images/wired/icon_wired_north_west.png');
}
&.icon-rot-1 {
+ width: 16px;
+ height: 9px;
background-image: url('../../assets/images/wired/icon_wired_rotate_clockwise.png');
}
&.icon-rot-2 {
+ width: 16px;
+ height: 9px;
background-image: url('../../assets/images/wired/icon_wired_rotate_counter_clockwise.png');
}
}