diff --git a/src/app/organisms/room/PeopleDrawer.jsx b/src/app/organisms/room/PeopleDrawer.jsx index 0a9226c2..2ab9976c 100644 --- a/src/app/organisms/room/PeopleDrawer.jsx +++ b/src/app/organisms/room/PeopleDrawer.jsx @@ -61,6 +61,7 @@ function PeopleDrawer({ roomId }) { const PER_PAGE_MEMBER = 50; const mx = initMatrix.matrixClient; const room = mx.getRoom(roomId); + const canInvite = room?.canInvite(mx.getUserId()); const [itemCount, setItemCount] = useState(PER_PAGE_MEMBER); const [membership, setMembership] = useState('join'); @@ -148,7 +149,7 @@ function PeopleDrawer({ roomId }) { {`${room.getJoinedMemberCount()} members`} - openInviteUser(roomId)} tooltip="Invite" src={AddUserIC} /> + openInviteUser(roomId)} tooltip="Invite" src={AddUserIC} disabled={!canInvite} />
diff --git a/src/app/organisms/room/RoomSettings.jsx b/src/app/organisms/room/RoomSettings.jsx index 82817b5f..ec3f7f5d 100644 --- a/src/app/organisms/room/RoomSettings.jsx +++ b/src/app/organisms/room/RoomSettings.jsx @@ -1,21 +1,28 @@ -import React, { useEffect } from 'react'; +import React, { useState, useEffect } from 'react'; import PropTypes from 'prop-types'; import './RoomSettings.scss'; +import initMatrix from '../../../client/initMatrix'; import cons from '../../../client/state/cons'; import navigation from '../../../client/state/navigation'; +import { openInviteUser } from '../../../client/action/navigation'; +import * as roomActions from '../../../client/action/room'; import Text from '../../atoms/text/Text'; import Header, { TitleWrapper } from '../../atoms/header/Header'; import ScrollView from '../../atoms/scroll/ScrollView'; import Tabs from '../../atoms/tabs/Tabs'; +import { MenuHeader, MenuItem } from '../../atoms/context-menu/ContextMenu'; import RoomProfile from '../../molecules/room-profile/RoomProfile'; +import RoomNotification from '../../molecules/room-notification/RoomNotification'; import SettingsIC from '../../../../public/res/ic/outlined/settings.svg'; import SearchIC from '../../../../public/res/ic/outlined/search.svg'; import ShieldUserIC from '../../../../public/res/ic/outlined/shield-user.svg'; import LockIC from '../../../../public/res/ic/outlined/lock.svg'; import InfoIC from '../../../../public/res/ic/outlined/info.svg'; +import AddUserIC from '../../../../public/res/ic/outlined/add-user.svg'; +import LeaveArrowIC from '../../../../public/res/ic/outlined/leave-arrow.svg'; import { useForceUpdate } from '../../hooks/useForceUpdate'; @@ -41,16 +48,53 @@ const tabItems = [{ disabled: false, }]; +function GeneralSettings({ roomId }) { + const mx = initMatrix.matrixClient; + const room = mx.getRoom(roomId); + const canInvite = room.canInvite(mx.getUserId()); + + return ( + <> +
+ Notification + +
+
+ openInviteUser(roomId)} + iconSrc={AddUserIC} + > + Invite + + roomActions.leave(roomId)} iconSrc={LeaveArrowIC}>Leave +
+ + ); +} + +GeneralSettings.propTypes = { + roomId: PropTypes.string.isRequired, +}; + function RoomSettings({ roomId }) { const [, forceUpdate] = useForceUpdate(); + const [selectedTab, setSelectedTab] = useState(tabItems[0]); + + const handleTabChange = (tabItem) => { + setSelectedTab(tabItem); + }; useEffect(() => { + let mounted = true; const settingsToggle = (isVisible) => { + if (!mounted) return; if (isVisible) forceUpdate(); else setTimeout(() => forceUpdate(), 200); }; navigation.on(cons.events.navigation.ROOM_SETTINGS_TOGGLED, settingsToggle); return () => { + mounted = false; navigation.removeListener(cons.events.navigation.ROOM_SETTINGS_TOGGLED, settingsToggle); }; }, []); @@ -67,10 +111,9 @@ function RoomSettings({ roomId }) { - false} /> +
- {/*
-
*/} + {selectedTab.text === tabItems[0].text && }
diff --git a/src/app/organisms/room/RoomSettings.scss b/src/app/organisms/room/RoomSettings.scss index fd78f6bf..480e4c80 100644 --- a/src/app/organisms/room/RoomSettings.scss +++ b/src/app/organisms/room/RoomSettings.scss @@ -2,10 +2,12 @@ .room-settings { height: 100%; + & .scrollbar { + position: relative; + } &__content { padding-bottom: calc(2 * var(--sp-extra-loose)); - position: relative; & .room-profile { margin: var(--sp-extra-loose); @@ -15,6 +17,7 @@ & .tabs { position: sticky; top: 0; + z-index: 999; width: 100%; background-color: var(--bg-surface-low); box-shadow: 0 -4px 0 var(--bg-surface-low), @@ -26,14 +29,19 @@ } &__cards-wrapper { - padding: var(--sp-normal); + padding: 0 var(--sp-normal); @include dir.side(padding, var(--sp-normal), var(--sp-extra-tight)); } &__card { + margin: var(--sp-normal) 0; background-color: var(--bg-surface); border-radius: var(--bo-radius); box-shadow: var(--bs-surface-border); - padding: 16px; + overflow: hidden; + + & > .context-menu__header:first-child { + margin-top: 2px; + } } } \ No newline at end of file diff --git a/src/app/organisms/room/RoomView.scss b/src/app/organisms/room/RoomView.scss index 73aac899..dcf3edda 100644 --- a/src/app/organisms/room/RoomView.scss +++ b/src/app/organisms/room/RoomView.scss @@ -7,16 +7,15 @@ width: 100%; position: absolute; top: 0; - z-index: 99; + z-index: 999; box-shadow: none; - transition: transform 200ms var(--fluid-slide-down), - box-shadow 200ms var(--fluid-slide-down); + transition: transform 200ms var(--fluid-slide-down); &--dropped { transform: translateY(calc(100% - var(--header-height))); border-radius: var(--bo-radius) var(--bo-radius) 0 0; - box-shadow: var(--bs-popup); + box-shadow: 0 0 0 1px var(--bg-surface-border); } &__content-wrapper {