From e517c3afbbc9fb7d6430448feac79a37a77e4ed4 Mon Sep 17 00:00:00 2001 From: MyNameIsBatman Date: Wed, 1 Sep 2021 01:02:34 -0300 Subject: [PATCH] Groups updates --- src/assets/images/groups/creator_images.png | Bin 0 -> 7966 bytes src/assets/images/groups/creator_tabs.png | Bin 0 -> 1215 bytes .../{ => icons}/group_decorate_icon.png | Bin .../{ => icons}/group_icon_big_admin.png | Bin .../{ => icons}/group_icon_big_member.png | Bin .../{ => icons}/group_icon_big_owner.png | Bin .../groups/{ => icons}/grouptype_icon_0.png | Bin .../groups/{ => icons}/grouptype_icon_1.png | Bin .../groups/{ => icons}/grouptype_icon_2.png | Bin src/assets/styles/icons.scss | 14 +- src/views/groups/GroupView.scss | 1 + src/views/groups/GroupsView.tsx | 7 +- src/views/groups/common/GroupBadgePart.ts | 26 +++ src/views/groups/common/GroupSettings.ts | 172 ++++++++++++++++++ .../groups/context/GroupsContext.types.ts | 38 +++- .../views/creator/GroupCreatorView.scss | 115 ++++++++++++ .../groups/views/creator/GroupCreatorView.tsx | 111 +++++++++++ .../views/creator/GroupCreatorView.types.ts | 5 + .../GroupCreatorTabIdentityView.tsx | 66 +++++++ .../GroupCreatorTabIdentityView.types.ts | 4 + src/views/navigator/NavigatorView.tsx | 4 + 21 files changed, 553 insertions(+), 10 deletions(-) create mode 100644 src/assets/images/groups/creator_images.png create mode 100644 src/assets/images/groups/creator_tabs.png rename src/assets/images/groups/{ => icons}/group_decorate_icon.png (100%) rename src/assets/images/groups/{ => icons}/group_icon_big_admin.png (100%) rename src/assets/images/groups/{ => icons}/group_icon_big_member.png (100%) rename src/assets/images/groups/{ => icons}/group_icon_big_owner.png (100%) rename src/assets/images/groups/{ => icons}/grouptype_icon_0.png (100%) rename src/assets/images/groups/{ => icons}/grouptype_icon_1.png (100%) rename src/assets/images/groups/{ => icons}/grouptype_icon_2.png (100%) create mode 100644 src/views/groups/common/GroupBadgePart.ts create mode 100644 src/views/groups/common/GroupSettings.ts create mode 100644 src/views/groups/views/creator/GroupCreatorView.scss create mode 100644 src/views/groups/views/creator/GroupCreatorView.tsx create mode 100644 src/views/groups/views/creator/GroupCreatorView.types.ts create mode 100644 src/views/groups/views/creator/views/creator-tab-identity/GroupCreatorTabIdentityView.tsx create mode 100644 src/views/groups/views/creator/views/creator-tab-identity/GroupCreatorTabIdentityView.types.ts diff --git a/src/assets/images/groups/creator_images.png b/src/assets/images/groups/creator_images.png new file mode 100644 index 0000000000000000000000000000000000000000..b39b0d7b83eddbaac0371d61c975412730c6c32b GIT binary patch literal 7966 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 literal 0 HcmV?d00001 diff --git a/src/assets/images/groups/creator_tabs.png b/src/assets/images/groups/creator_tabs.png new file mode 100644 index 0000000000000000000000000000000000000000..e95b9f0cb0eae57a2178cd5b3efa87c58f61e30c GIT binary patch literal 1215 zcmeAS@N?(olHy`uVBq!ia0vp^tw6k#gAGU)mDzzLI14-?iy0XB4ude`@%$Aj3=AxV zo-U3d6}R5rHO#x>Aj0-wuTxaj5y4AAi=MD?a27I1NkuIY;pm*aq|rlUPQ$d>6WZ!d zu9=aN(|^3otmW&z{H67iGw$a6IVo5D>}T%0eO3FXmgU9G_PA+N`LXKvr%%gGgm{nf z9sPVhe#yiPg9QxCTv&)M4$uGI8c)pBm#6#57tK*vz`(?XPVn)${<>r|ufY3Heq3~> zx(e6wjs8uY>DHR(z$}u`5a`OtCJ_o_ES7H&+_5p{wX;E!*|gcW79KUOyW5%V>w6&Xwsl!#Hf#a4Q7l%UHLI$OZ-5LrF z8H*U0I{3I08eRZHq~l;#9*A{8+2_B(Q3tL@n=Xg{8*Bqsuw7Qm3P|8#leoI7*xy|Sx_iVhVE-_L1w5gtVm4Bx-yRuc6 z5Su{ZulBR6ejAtzt**bZMwwM$0B)Xqf7cU5e@~NJ6G*}geCqS zUU0#lhYL*k++48fpu5}0w@I5tH8=nK@{H~H*VYqyCl9|Xm{|AoZ*0ou+VX8Xt@|4k zfuZIh$|~{t?3K_faT*6A)Z5;cS{E1gEMiEuRrut$zv{MM=i_@o3HFXXm)Eb~rP(j^ z^1YBd_c0YN13q~dw+ZFHZl{-PTzYS*+9%c%2~^16^(pPtadH2vjDoH)$JfdeH=gR1Ihv~5zmqC)4gg;PmT;oR_5mSkuiEGL(d=!;9?-qE7 z;n5E69`S`I3>qxnF+D!&&ZW?||3JmX8B84#tj9L5w`=GKPOy1x2TUDYJ?if>m;~1! z*kSpd(d7)&mvEdUJ2kWs{b}3S=9>u2HkMN2xwK^#NULc_P anf+4U-PY;(L8`zKiNVv=&t;ucLK6Vt7V4P* literal 0 HcmV?d00001 diff --git a/src/assets/images/groups/group_decorate_icon.png b/src/assets/images/groups/icons/group_decorate_icon.png similarity index 100% rename from src/assets/images/groups/group_decorate_icon.png rename to src/assets/images/groups/icons/group_decorate_icon.png diff --git a/src/assets/images/groups/group_icon_big_admin.png b/src/assets/images/groups/icons/group_icon_big_admin.png similarity index 100% rename from src/assets/images/groups/group_icon_big_admin.png rename to src/assets/images/groups/icons/group_icon_big_admin.png diff --git a/src/assets/images/groups/group_icon_big_member.png b/src/assets/images/groups/icons/group_icon_big_member.png similarity index 100% rename from src/assets/images/groups/group_icon_big_member.png rename to src/assets/images/groups/icons/group_icon_big_member.png diff --git a/src/assets/images/groups/group_icon_big_owner.png b/src/assets/images/groups/icons/group_icon_big_owner.png similarity index 100% rename from src/assets/images/groups/group_icon_big_owner.png rename to src/assets/images/groups/icons/group_icon_big_owner.png diff --git a/src/assets/images/groups/grouptype_icon_0.png b/src/assets/images/groups/icons/grouptype_icon_0.png similarity index 100% rename from src/assets/images/groups/grouptype_icon_0.png rename to src/assets/images/groups/icons/grouptype_icon_0.png diff --git a/src/assets/images/groups/grouptype_icon_1.png b/src/assets/images/groups/icons/grouptype_icon_1.png similarity index 100% rename from src/assets/images/groups/grouptype_icon_1.png rename to src/assets/images/groups/icons/grouptype_icon_1.png diff --git a/src/assets/images/groups/grouptype_icon_2.png b/src/assets/images/groups/icons/grouptype_icon_2.png similarity index 100% rename from src/assets/images/groups/grouptype_icon_2.png rename to src/assets/images/groups/icons/grouptype_icon_2.png diff --git a/src/assets/styles/icons.scss b/src/assets/styles/icons.scss index fb6146f6..889f6c82 100644 --- a/src/assets/styles/icons.scss +++ b/src/assets/styles/icons.scss @@ -550,43 +550,43 @@ } &.icon-group-type-0 { - background: url('../images/groups/grouptype_icon_0.png'); + background: url('../images/groups/icons/grouptype_icon_0.png'); width: 16px; height: 16px; } &.icon-group-type-1 { - background: url('../images/groups/grouptype_icon_1.png'); + background: url('../images/groups/icons/grouptype_icon_1.png'); width: 16px; height: 16px; } &.icon-group-type-2 { - background: url('../images/groups/grouptype_icon_2.png'); + background: url('../images/groups/icons/grouptype_icon_2.png'); width: 16px; height: 16px; } &.icon-group-decorate { - background: url('../images/groups/group_decorate_icon.png'); + background: url('../images/groups/icons/group_decorate_icon.png'); width: 15px; height: 15px; } &.icon-group-member { - background: url('../images/groups/group_icon_big_member.png'); + background: url('../images/groups/icons/group_icon_big_member.png'); width: 20px; height: 20px; } &.icon-group-admin { - background: url('../images/groups/group_icon_big_admin.png'); + background: url('../images/groups/icons/group_icon_big_admin.png'); width: 20px; height: 20px; } &.icon-group-owner { - background: url('../images/groups/group_icon_big_owner.png'); + background: url('../images/groups/icons/group_icon_big_owner.png'); width: 20px; height: 20px; } diff --git a/src/views/groups/GroupView.scss b/src/views/groups/GroupView.scss index 44eafba0..acfe8f77 100644 --- a/src/views/groups/GroupView.scss +++ b/src/views/groups/GroupView.scss @@ -1,3 +1,4 @@ +@import './views/creator/GroupCreatorView'; @import './views/information/GroupInformationView'; @import './views/information-standalone/GroupInformationStandaloneView'; @import './views/room-information/GroupRoomInformationView'; diff --git a/src/views/groups/GroupsView.tsx b/src/views/groups/GroupsView.tsx index 85cc0cb7..bdfc443a 100644 --- a/src/views/groups/GroupsView.tsx +++ b/src/views/groups/GroupsView.tsx @@ -1,16 +1,19 @@ import { GroupBadgePartsComposer, ILinkEventTracker } from '@nitrots/nitro-renderer'; -import { FC, useCallback, useEffect, useReducer } from 'react'; +import { FC, useCallback, useEffect, useReducer, useState } from 'react'; import { AddEventLinkTracker, RemoveLinkEventTracker } from '../../api'; import { SendMessageHook } from '../../hooks'; import { GroupsContextProvider } from './context/GroupsContext'; import { GroupsReducer, initialGroups } from './context/GroupsContext.types'; import { GroupsMessageHandler } from './GroupsMessageHandler'; +import { GroupCreatorView } from './views/creator/GroupCreatorView'; import { GroupInformationStandaloneView } from './views/information-standalone/GroupInformationStandaloneView'; export const GroupsView: FC<{}> = props => { const [ groupsState, dispatchGroupsState ] = useReducer(GroupsReducer, initialGroups); + const [ isCreatorVisible, setIsCreatorVisible ] = useState(false); + useEffect(() => { SendMessageHook(new GroupBadgePartsComposer()); @@ -25,6 +28,7 @@ export const GroupsView: FC<{}> = props => switch(parts[1]) { case 'create': + setIsCreatorVisible(true); return; } }, []); @@ -44,6 +48,7 @@ export const GroupsView: FC<{}> = props => return ( + setIsCreatorVisible(false) } /> ); diff --git a/src/views/groups/common/GroupBadgePart.ts b/src/views/groups/common/GroupBadgePart.ts new file mode 100644 index 00000000..03338223 --- /dev/null +++ b/src/views/groups/common/GroupBadgePart.ts @@ -0,0 +1,26 @@ +export class GroupBadgePart +{ + public static BASE: string = 'b'; + public static SYMBOL: string = 's'; + public static SYMBOL_ALT: string = 't'; + + public type: string; + public key: number; + public color: number; + public position: number; + + constructor(type: string) + { + this.type = type; + this.key = 0; + this.color = 0; + this.position = 4; + } + + public get code(): string + { + if(this.key === 0) return null; + + return this.type + (this.key < 10 ? '0' : '') + this.key + (this.color < 10 ? '0' : '') + this.color + (this.type === GroupBadgePart.BASE ? '' : this.position); + } +} diff --git a/src/views/groups/common/GroupSettings.ts b/src/views/groups/common/GroupSettings.ts new file mode 100644 index 00000000..cf1e4ae3 --- /dev/null +++ b/src/views/groups/common/GroupSettings.ts @@ -0,0 +1,172 @@ +import { GroupBadgePart } from './GroupBadgePart'; + +export class GroupSettings +{ + private _id: number; + private _name: string; + private _description: string; + private _roomId: string; + + private _badgeParts: GroupBadgePart[]; + private _colorA: number; + private _colorB: number; + + private _state: number; + private _canMembersDecorate: boolean; + + constructor() + { + this._id = 0; + this._name = ''; + this._description = ''; + this._roomId = '0'; + + this._badgeParts = []; + this._colorA = 0; + this.colorB = 0; + + this._state = 0; + this._canMembersDecorate = false; + + this._badgeParts.push(new GroupBadgePart(GroupBadgePart.BASE)); + this._badgeParts.push(new GroupBadgePart(GroupBadgePart.SYMBOL)); + this._badgeParts.push(new GroupBadgePart(GroupBadgePart.SYMBOL)); + this._badgeParts.push(new GroupBadgePart(GroupBadgePart.SYMBOL)); + this._badgeParts.push(new GroupBadgePart(GroupBadgePart.SYMBOL)); + } + + public getBadgePart(index: number): GroupBadgePart + { + return this._badgeParts[index]; + } + + public setPartsColor(color: number): void + { + this._badgeParts.forEach((symbol) => + { + symbol.color = color; + }); + } + + public get id(): number + { + return this._id; + } + + public set id(id: number) + { + this._id = id; + } + + public get name(): string + { + return this._name; + } + + public set name(name: string) + { + this._name = name; + } + + public get description(): string + { + return this._description; + } + + public set description(description: string) + { + this._description = description; + } + + public get roomId(): string + { + return this._roomId; + } + + public set roomId(id: string) + { + this._roomId = id; + } + + public get badgeParts(): GroupBadgePart[] + { + return this._badgeParts; + } + + public set badgeParts(parts: GroupBadgePart[]) + { + this._badgeParts = parts; + } + + public get colorA(): number + { + return this._colorA; + } + + public set colorA(id: number) + { + this._colorA = id; + } + + public get colorB(): number + { + return this._colorB; + } + + public set colorB(id: number) + { + this._colorB = id; + } + + public get currentBadgeCode(): string + { + let code = ''; + + this._badgeParts.forEach((part) => + { + if(part.code) + { + code = code + part.code; + } + }); + + return code; + } + + public get currentBadgeArray(): number[] + { + const badge = []; + + this._badgeParts.forEach((part) => + { + if(part.code) + { + badge.push(part.key); + badge.push(part.color); + badge.push(part.position); + } + }); + + return badge; + } + + public get state(): number + { + return this._state; + } + + public set state(state: number) + { + this._state = state; + } + + public get canMembersDecorate(): boolean + { + return this._canMembersDecorate; + } + + public set canMembersDecorate(value: boolean) + { + this._canMembersDecorate = value; + } +} diff --git a/src/views/groups/context/GroupsContext.types.ts b/src/views/groups/context/GroupsContext.types.ts index 1bc4b089..dcef1768 100644 --- a/src/views/groups/context/GroupsContext.types.ts +++ b/src/views/groups/context/GroupsContext.types.ts @@ -18,20 +18,29 @@ export interface IGroupsState badgePartColors: Map; groupColorsA: Map; groupColorsB: Map; + groupName: string; + groupDescription: string; + groupHomeroomId: number; } export interface IGroupsAction { type: string; - payload: { + payload?: { arrayMaps?: Map[]; stringMaps?: Map[]; + stringValue?: string; + numberValue?: number; } } export class GroupsActions { public static SET_BADGE_PARTS: string = 'GA_SET_BADGE_PARTS'; + public static SET_GROUP_NAME: string = 'GA_SET_GROUP_NAME'; + public static SET_GROUP_DESCRIPTION: string = 'GA_SET_GROUP_DESCRIPTION'; + public static SET_GROUP_HOMEROOM_ID: string = 'GA_SET_GROUP_HOMEROOM_ID'; + public static RESET_GROUP_SETTINGS: string = 'GA_RESET_GROUP_SETTINGS'; } export const initialGroups: IGroupsState = { @@ -39,7 +48,10 @@ export const initialGroups: IGroupsState = { badgeSymbols: null, badgePartColors: null, groupColorsA: null, - groupColorsB: null + groupColorsB: null, + groupName: '', + groupDescription: '', + groupHomeroomId: 0 }; export const GroupsReducer: Reducer = (state, action) => @@ -55,6 +67,28 @@ export const GroupsReducer: Reducer = (state, actio return { ...state, badgeBases, badgeSymbols, badgePartColors, groupColorsA, groupColorsB }; } + case GroupsActions.SET_GROUP_NAME: { + const groupName = action.payload.stringValue; + + return { ...state, groupName }; + } + case GroupsActions.SET_GROUP_DESCRIPTION: { + const groupDescription = action.payload.stringValue; + + return { ...state, groupDescription }; + } + case GroupsActions.SET_GROUP_HOMEROOM_ID: { + const groupHomeroomId = action.payload.numberValue; + + return { ...state, groupHomeroomId }; + } + case GroupsActions.RESET_GROUP_SETTINGS: { + const groupName = ''; + const groupDescription = ''; + const groupHomeroomId = 0; + + return { ...state, groupName, groupDescription, groupHomeroomId }; + } default: return state; } diff --git a/src/views/groups/views/creator/GroupCreatorView.scss b/src/views/groups/views/creator/GroupCreatorView.scss new file mode 100644 index 00000000..e1c376ab --- /dev/null +++ b/src/views/groups/views/creator/GroupCreatorView.scss @@ -0,0 +1,115 @@ +.nitro-group-creator { + width: 433px; + + .creator-tabs { + display: flex; + align-items: center; + + .tab { + position: relative; + margin-left: -6px; + 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; + } + + &.tab-blue-flat { + width: 84px; + height: 24px; + background-position: 0px 0px; + + div { + margin-top: 1px; + } + + &.active { + height: 28px; + background-position: 0px -24px; + } + } + + &.tab-blue-arrow { + width: 83px; + height: 24px; + background-position: 0px -52px; + + div { + margin-top: 1px; + } + + &.active { + height: 28px; + background-position: 0px -76px; + } + } + + &.tab-yellow { + width: 133px; + height: 28px; + background-position: 0px -104px; + + div { + margin-top: 3px; + } + + &.active { + height: 33px; + background-position: 0px -132px; + } + } + } + } + + .tab-image { + width: 122px; + height: 68px; + display: flex; + align-items: center; + justify-content: center; + + div { + background-image: url('../../../../assets/images/groups/creator_images.png'); + background-repeat: no-repeat; + } + + &.tab-1 { + div { + background-position: 0px 0px; + width: 99px; + 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 { + div { + background-position: 0px -95px; + width: 114px; + height: 61px; + } + } + } +} diff --git a/src/views/groups/views/creator/GroupCreatorView.tsx b/src/views/groups/views/creator/GroupCreatorView.tsx new file mode 100644 index 00000000..a62a3969 --- /dev/null +++ b/src/views/groups/views/creator/GroupCreatorView.tsx @@ -0,0 +1,111 @@ +import { GroupBuyDataComposer, GroupBuyDataEvent } from '@nitrots/nitro-renderer'; +import classNames from 'classnames'; +import { FC, useCallback, useEffect, useState } from 'react'; +import { Button } from 'react-bootstrap'; +import { LocalizeText } from '../../../../api'; +import { CreateMessageHook, SendMessageHook } from '../../../../hooks'; +import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout'; +import { useGroupsContext } from '../../context/GroupsContext'; +import { GroupsActions } from '../../context/GroupsContext.types'; +import { GroupCreatorViewProps } from './GroupCreatorView.types'; +import { GroupCreatorTabIdentityView } from './views/creator-tab-identity/GroupCreatorTabIdentityView'; + +const TABS: number[] = [1, 2, 3, 4]; + +export const GroupCreatorView: FC = props => +{ + const { groupsState = null, dispatchGroupsState = null } = useGroupsContext(); + const { groupName = null, groupHomeroomId = null } = groupsState; + + const { isVisible = false, onClose = null } = props; + + const [ currentTab, setCurrentTab ] = useState(1); + const [ availableRooms, setAvailableRooms ] = useState>(null); + const [ cost, setCost ] = useState(0); + + useEffect(() => + { + if(!isVisible) + { + setCurrentTab(1); + dispatchGroupsState({ + type: GroupsActions.RESET_GROUP_SETTINGS + }); + } + else + { + SendMessageHook(new GroupBuyDataComposer()); + } + }, [ isVisible ]); + + const onGroupBuyDataEvent = useCallback((event: GroupBuyDataEvent) => + { + const parser = event.getParser(); + + setAvailableRooms(parser.availableRooms); + setCost(parser.groupCost); + }, []); + + CreateMessageHook(GroupBuyDataEvent, onGroupBuyDataEvent); + + const previousStep = useCallback(() => + { + if(currentTab === 1) return onClose(); + + setCurrentTab(value => value - 1); + }, [ currentTab, onClose ]); + + const nextStep = useCallback(() => + { + switch(currentTab) + { + case 1: { + if(!groupName || groupName.length === 0 || !groupHomeroomId) + { + alert(LocalizeText('group.edit.error.no.name.or.room.selected')); + return; + } + break; + } + } + + setCurrentTab(value => + { + return (value === 4 ? value : value + 1) + }); + }, [ currentTab, groupName, groupHomeroomId ]); + + if(!isVisible) return null; + + return ( + + + +
+ { TABS.map((tab, index) => + { + return (
+
{ LocalizeText('group.create.steplabel.' + tab) }
+
); + }) } +
+
+
+
+
+
+
{ LocalizeText('group.create.stepcaption.' + currentTab) }
+
{ LocalizeText('group.create.stepdesc.' + currentTab) }
+
+
+
+ { currentTab === 1 && } +
+
+ + +
+ + + ); +}; diff --git a/src/views/groups/views/creator/GroupCreatorView.types.ts b/src/views/groups/views/creator/GroupCreatorView.types.ts new file mode 100644 index 00000000..249f5dbf --- /dev/null +++ b/src/views/groups/views/creator/GroupCreatorView.types.ts @@ -0,0 +1,5 @@ +export interface GroupCreatorViewProps +{ + isVisible: boolean; + onClose: () => void; +} diff --git a/src/views/groups/views/creator/views/creator-tab-identity/GroupCreatorTabIdentityView.tsx b/src/views/groups/views/creator/views/creator-tab-identity/GroupCreatorTabIdentityView.tsx new file mode 100644 index 00000000..b19421b6 --- /dev/null +++ b/src/views/groups/views/creator/views/creator-tab-identity/GroupCreatorTabIdentityView.tsx @@ -0,0 +1,66 @@ +import { FC, useCallback } from 'react'; +import { CreateLinkEvent, LocalizeText } from '../../../../../../api'; +import { useGroupsContext } from '../../../../context/GroupsContext'; +import { GroupsActions } from '../../../../context/GroupsContext.types'; +import { GroupCreatorTabIdentityViewProps } from './GroupCreatorTabIdentityView.types'; + +export const GroupCreatorTabIdentityView: FC = props => +{ + const { groupsState = null, dispatchGroupsState = null } = useGroupsContext(); + const { groupName = '', groupDescription = '', groupHomeroomId = 0 } = groupsState; + + const { availableRooms = null } = props; + + const setName = useCallback((name: string) => + { + dispatchGroupsState({ + type: GroupsActions.SET_GROUP_NAME, + payload: { + stringValue: name + } + }) + }, [ dispatchGroupsState ]); + + const setDescription = useCallback((description: string) => + { + dispatchGroupsState({ + type: GroupsActions.SET_GROUP_DESCRIPTION, + payload: { + stringValue: description + } + }) + }, [ dispatchGroupsState ]); + + const setHomeroomId = useCallback((id: number) => + { + dispatchGroupsState({ + type: GroupsActions.SET_GROUP_HOMEROOM_ID, + payload: { + numberValue: id + } + }) + }, [ dispatchGroupsState ]); + + return (<> +
+ + setName(e.target.value) } /> +
+
+ + setDescription(e.target.value) } /> +
+
+ + +
+
{ LocalizeText('group.edit.base.warning') }
+
CreateLinkEvent('navigator/create') }>{ LocalizeText('group.createroom') }
+ ); +}; diff --git a/src/views/groups/views/creator/views/creator-tab-identity/GroupCreatorTabIdentityView.types.ts b/src/views/groups/views/creator/views/creator-tab-identity/GroupCreatorTabIdentityView.types.ts new file mode 100644 index 00000000..f53468af --- /dev/null +++ b/src/views/groups/views/creator/views/creator-tab-identity/GroupCreatorTabIdentityView.types.ts @@ -0,0 +1,4 @@ +export interface GroupCreatorTabIdentityViewProps +{ + availableRooms: Map; +} diff --git a/src/views/navigator/NavigatorView.tsx b/src/views/navigator/NavigatorView.tsx index f31fc246..49c05fae 100644 --- a/src/views/navigator/NavigatorView.tsx +++ b/src/views/navigator/NavigatorView.tsx @@ -143,6 +143,10 @@ export const NavigatorView: FC = props => } } return; + case 'create': + setIsVisible(true); + setCreatorOpen(true); + return; } }, []);