Add space settings

Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
Ajay Bura 2022-01-29 13:48:06 +05:30
parent 9d8efce26d
commit 833edc9568
9 changed files with 271 additions and 9 deletions

View file

@ -10,6 +10,13 @@
1px solid var(--bg-surface-border), 1px solid var(--bg-surface-border),
); );
& .header {
padding: var(--sp-extra-tight);
& > .header__title-wrapper {
@include dir.side(margin, var(--sp-ultra-tight), 0);
}
}
&__content-wrapper { &__content-wrapper {
@extend .cp-fx__item-one; @extend .cp-fx__item-one;
@extend .cp-fx__column; @extend .cp-fx__column;

View file

@ -1,16 +1,20 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import './DrawerHeader.scss';
import { twemojify } from '../../../util/twemojify'; import { twemojify } from '../../../util/twemojify';
import initMatrix from '../../../client/initMatrix'; import initMatrix from '../../../client/initMatrix';
import cons from '../../../client/state/cons'; import cons from '../../../client/state/cons';
import { import {
openPublicRooms, openCreateRoom, openInviteUser, openSpaceSettings, openPublicRooms, openCreateRoom, openInviteUser,
} from '../../../client/action/navigation'; } from '../../../client/action/navigation';
import { createSpaceShortcut, deleteSpaceShortcut } from '../../../client/action/room'; import { createSpaceShortcut, deleteSpaceShortcut } from '../../../client/action/room';
import { blurOnBubbling } from '../../atoms/button/script';
import Text from '../../atoms/text/Text'; import Text from '../../atoms/text/Text';
import RawIcon from '../../atoms/system-icons/RawIcon';
import Header, { TitleWrapper } from '../../atoms/header/Header'; import Header, { TitleWrapper } from '../../atoms/header/Header';
import IconButton from '../../atoms/button/IconButton'; import IconButton from '../../atoms/button/IconButton';
import ContextMenu, { MenuItem, MenuHeader } from '../../atoms/context-menu/ContextMenu'; import ContextMenu, { MenuItem, MenuHeader } from '../../atoms/context-menu/ContextMenu';
@ -18,12 +22,14 @@ import ContextMenu, { MenuItem, MenuHeader } from '../../atoms/context-menu/Cont
import PlusIC from '../../../../public/res/ic/outlined/plus.svg'; import PlusIC from '../../../../public/res/ic/outlined/plus.svg';
import HashPlusIC from '../../../../public/res/ic/outlined/hash-plus.svg'; import HashPlusIC from '../../../../public/res/ic/outlined/hash-plus.svg';
import HashSearchIC from '../../../../public/res/ic/outlined/hash-search.svg'; import HashSearchIC from '../../../../public/res/ic/outlined/hash-search.svg';
import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg';
import PinIC from '../../../../public/res/ic/outlined/pin.svg'; import PinIC from '../../../../public/res/ic/outlined/pin.svg';
import PinFilledIC from '../../../../public/res/ic/filled/pin.svg'; import PinFilledIC from '../../../../public/res/ic/filled/pin.svg';
function DrawerHeader({ selectedTab, spaceId }) { function DrawerHeader({ selectedTab, spaceId }) {
const [, forceUpdate] = useState({}); const [, forceUpdate] = useState({});
const mx = initMatrix.matrixClient; const mx = initMatrix.matrixClient;
const { spaceShortcut } = initMatrix.roomList;
const tabName = selectedTab !== cons.tabs.DIRECTS ? 'Home' : 'Direct messages'; const tabName = selectedTab !== cons.tabs.DIRECTS ? 'Home' : 'Direct messages';
const room = mx.getRoom(spaceId); const room = mx.getRoom(spaceId);
@ -31,17 +37,30 @@ function DrawerHeader({ selectedTab, spaceId }) {
return ( return (
<Header> <Header>
<TitleWrapper> {spaceName ? (
<Text variant="s1" weight="medium" primary>{twemojify(spaceName) || tabName}</Text> <button
</TitleWrapper> className="drawer-header__btn"
onClick={() => openSpaceSettings(spaceId)}
type="button"
onMouseUp={(e) => blurOnBubbling(e, '.drawer-header__btn')}
>
<TitleWrapper>
<Text variant="s1" weight="medium" primary>{twemojify(spaceName)}</Text>
</TitleWrapper>
<RawIcon size="small" src={ChevronBottomIC} />
</button>
) : (
<TitleWrapper>
<Text variant="s1" weight="medium" primary>{tabName}</Text>
</TitleWrapper>
)}
{spaceName && ( {spaceName && (
<IconButton <IconButton
size="extra-small" size="extra-small"
variant="surface" tooltip={spaceShortcut.has(spaceId) ? 'Unpin' : 'Pin to sidebar'}
tooltip={initMatrix.roomList.spaceShortcut.has(spaceId) ? 'Unpin' : 'Pin to sidebar'} src={spaceShortcut.has(spaceId) ? PinFilledIC : PinIC}
src={initMatrix.roomList.spaceShortcut.has(spaceId) ? PinFilledIC : PinIC}
onClick={() => { onClick={() => {
if (initMatrix.roomList.spaceShortcut.has(spaceId)) deleteSpaceShortcut(spaceId); if (spaceShortcut.has(spaceId)) deleteSpaceShortcut(spaceId);
else createSpaceShortcut(spaceId); else createSpaceShortcut(spaceId);
forceUpdate({}); forceUpdate({});
}} }}
@ -72,7 +91,6 @@ function DrawerHeader({ selectedTab, spaceId }) {
/> />
</> </>
)} )}
{/* <IconButton onClick={() => ''} tooltip="Menu" src={VerticalMenuIC} size="normal" /> */}
</Header> </Header>
); );
} }

View file

@ -0,0 +1,28 @@
@use '../../partials/flex';
@use '../../partials/dir';
.drawer-header__btn {
min-width: 0;
@extend .cp-fx__row--s-c;
@include dir.side(margin, 0, auto);
padding: var(--sp-ultra-tight);
border-radius: calc(var(--bo-radius) / 2);
cursor: pointer;
& .header__title-wrapper {
@include dir.side(margin, 0, var(--sp-extra-tight));
}
@media (hover:hover) {
&:hover {
background-color: var(--bg-surface-hover);
box-shadow: var(--bs-surface-outline);
}
}
&:focus,
&:active {
background-color: var(--bg-surface-active);
box-shadow: var(--bs-surface-outline);
outline: none;
}
}

View file

@ -8,6 +8,7 @@ import PublicRooms from '../public-rooms/PublicRooms';
import CreateRoom from '../create-room/CreateRoom'; import CreateRoom from '../create-room/CreateRoom';
import InviteUser from '../invite-user/InviteUser'; import InviteUser from '../invite-user/InviteUser';
import Settings from '../settings/Settings'; import Settings from '../settings/Settings';
import SpaceSettings from '../space-settings/SpaceSettings';
function Windows() { function Windows() {
const [isInviteList, changeInviteList] = useState(false); const [isInviteList, changeInviteList] = useState(false);
@ -83,6 +84,7 @@ function Windows() {
isOpen={settings} isOpen={settings}
onRequestClose={() => changeSettings(false)} onRequestClose={() => changeSettings(false)}
/> />
<SpaceSettings />
</> </>
); );
} }

View file

@ -0,0 +1,154 @@
import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import './SpaceSettings.scss';
import { twemojify } from '../../../util/twemojify';
import initMatrix from '../../../client/initMatrix';
import cons from '../../../client/state/cons';
import navigation from '../../../client/state/navigation';
import { leave, createSpaceShortcut, deleteSpaceShortcut } from '../../../client/action/room';
import Text from '../../atoms/text/Text';
import IconButton from '../../atoms/button/IconButton';
import Tabs from '../../atoms/tabs/Tabs';
import { MenuHeader, MenuItem } from '../../atoms/context-menu/ContextMenu';
import PopupWindow from '../../molecules/popup-window/PopupWindow';
import RoomProfile from '../../molecules/room-profile/RoomProfile';
import RoomVisibility from '../../molecules/room-visibility/RoomVisibility';
import RoomAliases from '../../molecules/room-aliases/RoomAliases';
import RoomPermissions from '../../molecules/room-permissions/RoomPermissions';
import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
import SettingsIC from '../../../../public/res/ic/outlined/settings.svg';
import ShieldUserIC from '../../../../public/res/ic/outlined/shield-user.svg';
import LeaveArrowIC from '../../../../public/res/ic/outlined/leave-arrow.svg';
import PinIC from '../../../../public/res/ic/outlined/pin.svg';
import PinFilledIC from '../../../../public/res/ic/filled/pin.svg';
import { useForceUpdate } from '../../hooks/useForceUpdate';
const tabText = {
GENERAL: 'General',
PERMISSIONS: 'Permissions',
};
const tabItems = [{
iconSrc: SettingsIC,
text: tabText.GENERAL,
disabled: false,
}, {
iconSrc: ShieldUserIC,
text: tabText.PERMISSIONS,
disabled: false,
}];
function GeneralSettings({ roomId }) {
const isPinned = initMatrix.roomList.spaceShortcut.has(roomId);
const [, forceUpdate] = useForceUpdate();
return (
<>
<div className="room-settings__card">
<MenuItem
onClick={() => {
if (isPinned) deleteSpaceShortcut(roomId);
else createSpaceShortcut(roomId);
forceUpdate();
}}
iconSrc={isPinned ? PinFilledIC : PinIC}
>
{isPinned ? 'Unpin from sidebar' : 'Pin to sidebar'}
</MenuItem>
<MenuItem
variant="danger"
onClick={() => {
if (confirm('Are you really want to leave this space?')) {
leave(roomId);
}
}}
iconSrc={LeaveArrowIC}
>
Leave
</MenuItem>
</div>
<div className="space-settings__card">
<MenuHeader>Space visibility (who can join)</MenuHeader>
<RoomVisibility roomId={roomId} />
</div>
<div className="space-settings__card">
<MenuHeader>Space addresses</MenuHeader>
<RoomAliases roomId={roomId} />
</div>
</>
);
}
GeneralSettings.propTypes = {
roomId: PropTypes.string.isRequired,
};
function useWindowToggle(setSelectedTab) {
const [window, setWindow] = useState(null);
useEffect(() => {
const openSpaceSettings = (spaceId, tab) => {
setWindow({ spaceId, tabText });
const tabItem = tabItems.find((item) => item.text === tab);
if (tabItem) setSelectedTab(tabItem);
};
navigation.on(cons.events.navigation.SPACE_SETTINGS_OPENED, openSpaceSettings);
return () => {
navigation.removeListener(cons.events.navigation.SPACE_SETTINGS_OPENED, openSpaceSettings);
};
}, []);
const requestClose = () => setWindow(null);
return [window, requestClose];
}
function SpaceSettings() {
const [selectedTab, setSelectedTab] = useState(tabItems[0]);
const [window, requestClose] = useWindowToggle(setSelectedTab);
const isOpen = window !== null;
const roomId = window?.spaceId;
const mx = initMatrix.matrixClient;
const room = mx.getRoom(roomId);
const handleTabChange = (tabItem) => {
setSelectedTab(tabItem);
};
return (
<PopupWindow
isOpen={isOpen}
className="space-settings"
title={(
<Text variant="s1" weight="medium" primary>
{twemojify(isOpen ? `${room.name} - space settings` : 'Space settings')}
</Text>
)}
contentOptions={<IconButton src={CrossIC} onClick={requestClose} tooltip="Close" />}
onRequestClose={requestClose}
>
{isOpen && (
<div className="space-settings__content">
<RoomProfile roomId={roomId} />
<Tabs
items={tabItems}
defaultSelected={tabItems.findIndex((tab) => tab.text === selectedTab.text)}
onSelect={handleTabChange}
/>
<div className="space-settings__cards-wrapper">
{selectedTab.text === tabText.GENERAL && <GeneralSettings roomId={roomId} />}
{selectedTab.text === tabText.PERMISSIONS && <RoomPermissions roomId={roomId} />}
</div>
</div>
)}
</PopupWindow>
);
}
export default SpaceSettings;

View file

@ -0,0 +1,40 @@
@use '../../partials/dir.scss';
.space-settings {
& .pw {
background-color: var(--bg-surface-low);
}
& .room-profile {
padding: var(--sp-loose) var(--sp-extra-loose);
}
& .tabs {
box-shadow: inset 0 -1px 0 var(--bg-surface-border);
&__content {
padding: 0 var(--sp-normal);
}
}
&__cards-wrapper {
padding: 0 var(--sp-normal);
@include dir.side(padding, var(--sp-normal), var(--sp-extra-tight));
}
}
.space-settings__card {
margin: var(--sp-normal) 0;
background-color: var(--bg-surface);
border-radius: var(--bo-radius);
box-shadow: var(--bs-surface-border);
overflow: hidden;
& > .context-menu__header:first-child {
margin-top: 2px;
}
}
.space-settings .room-permissions__card {
@extend .space-settings__card;
}

View file

@ -23,6 +23,14 @@ export function selectRoom(roomId, eventId) {
}); });
} }
export function openSpaceSettings(spaceId, tabText) {
appDispatcher.dispatch({
type: cons.actions.navigation.OPEN_SPACE_SETTINGS,
spaceId,
tabText,
});
}
export function toggleRoomSettings(tabText) { export function toggleRoomSettings(tabText) {
appDispatcher.dispatch({ appDispatcher.dispatch({
type: cons.actions.navigation.TOGGLE_ROOM_SETTINGS, type: cons.actions.navigation.TOGGLE_ROOM_SETTINGS,

View file

@ -30,6 +30,7 @@ const cons = {
SELECT_TAB: 'SELECT_TAB', SELECT_TAB: 'SELECT_TAB',
SELECT_SPACE: 'SELECT_SPACE', SELECT_SPACE: 'SELECT_SPACE',
SELECT_ROOM: 'SELECT_ROOM', SELECT_ROOM: 'SELECT_ROOM',
OPEN_SPACE_SETTINGS: 'OPEN_SPACE_SETTINGS',
TOGGLE_ROOM_SETTINGS: 'TOGGLE_ROOM_SETTINGS', TOGGLE_ROOM_SETTINGS: 'TOGGLE_ROOM_SETTINGS',
OPEN_INVITE_LIST: 'OPEN_INVITE_LIST', OPEN_INVITE_LIST: 'OPEN_INVITE_LIST',
OPEN_PUBLIC_ROOMS: 'OPEN_PUBLIC_ROOMS', OPEN_PUBLIC_ROOMS: 'OPEN_PUBLIC_ROOMS',
@ -66,6 +67,7 @@ const cons = {
TAB_SELECTED: 'TAB_SELECTED', TAB_SELECTED: 'TAB_SELECTED',
SPACE_SELECTED: 'SPACE_SELECTED', SPACE_SELECTED: 'SPACE_SELECTED',
ROOM_SELECTED: 'ROOM_SELECTED', ROOM_SELECTED: 'ROOM_SELECTED',
SPACE_SETTINGS_OPENED: 'SPACE_SETTINGS_OPENED',
ROOM_SETTINGS_TOGGLED: 'ROOM_SETTINGS_TOGGLED', ROOM_SETTINGS_TOGGLED: 'ROOM_SETTINGS_TOGGLED',
INVITE_LIST_OPENED: 'INVITE_LIST_OPENED', INVITE_LIST_OPENED: 'INVITE_LIST_OPENED',
PUBLIC_ROOMS_OPENED: 'PUBLIC_ROOMS_OPENED', PUBLIC_ROOMS_OPENED: 'PUBLIC_ROOMS_OPENED',

View file

@ -89,6 +89,9 @@ class Navigation extends EventEmitter {
action.eventId, action.eventId,
); );
}, },
[cons.actions.navigation.OPEN_SPACE_SETTINGS]: () => {
this.emit(cons.events.navigation.SPACE_SETTINGS_OPENED, action.spaceId, action.tabText);
},
[cons.actions.navigation.TOGGLE_ROOM_SETTINGS]: () => { [cons.actions.navigation.TOGGLE_ROOM_SETTINGS]: () => {
this.isRoomSettings = !this.isRoomSettings; this.isRoomSettings = !this.isRoomSettings;
this.emit( this.emit(