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 {
@extend .cp-fx__item-one;
@extend .cp-fx__column;
import React, { useState } from 'react';
import PropTypes from 'prop-types';
+import './DrawerHeader.scss';
import { twemojify } from '../../../util/twemojify';
import initMatrix from '../../../client/initMatrix';
import cons from '../../../client/state/cons';
import {
- openPublicRooms, openCreateRoom, openInviteUser,
+ openSpaceSettings, openPublicRooms, openCreateRoom, openInviteUser,
} from '../../../client/action/navigation';
import { createSpaceShortcut, deleteSpaceShortcut } from '../../../client/action/room';
+import { blurOnBubbling } from '../../atoms/button/script';
+
import Text from '../../atoms/text/Text';
+import RawIcon from '../../atoms/system-icons/RawIcon';
import Header, { TitleWrapper } from '../../atoms/header/Header';
import IconButton from '../../atoms/button/IconButton';
import ContextMenu, { MenuItem, MenuHeader } from '../../atoms/context-menu/ContextMenu';
import PlusIC from '../../../../public/res/ic/outlined/plus.svg';
import HashPlusIC from '../../../../public/res/ic/outlined/hash-plus.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 PinFilledIC from '../../../../public/res/ic/filled/pin.svg';
function DrawerHeader({ selectedTab, spaceId }) {
const [, forceUpdate] = useState({});
const mx = initMatrix.matrixClient;
+ const { spaceShortcut } = initMatrix.roomList;
const tabName = selectedTab !== cons.tabs.DIRECTS ? 'Home' : 'Direct messages';
const room = mx.getRoom(spaceId);
return (
<Header>
- <TitleWrapper>
- <Text variant="s1" weight="medium" primary>{twemojify(spaceName) || tabName}</Text>
- </TitleWrapper>
+ {spaceName ? (
+ <button
+ 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 && (
<IconButton
size="extra-small"
- variant="surface"
- tooltip={initMatrix.roomList.spaceShortcut.has(spaceId) ? 'Unpin' : 'Pin to sidebar'}
- src={initMatrix.roomList.spaceShortcut.has(spaceId) ? PinFilledIC : PinIC}
+ tooltip={spaceShortcut.has(spaceId) ? 'Unpin' : 'Pin to sidebar'}
+ src={spaceShortcut.has(spaceId) ? PinFilledIC : PinIC}
onClick={() => {
- if (initMatrix.roomList.spaceShortcut.has(spaceId)) deleteSpaceShortcut(spaceId);
+ if (spaceShortcut.has(spaceId)) deleteSpaceShortcut(spaceId);
else createSpaceShortcut(spaceId);
forceUpdate({});
}}
/>
</>
)}
- {/* <IconButton onClick={() => ''} tooltip="Menu" src={VerticalMenuIC} size="normal" /> */}
</Header>
);
}
--- /dev/null
+@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;
+ }
+}
\ No newline at end of file
import CreateRoom from '../create-room/CreateRoom';
import InviteUser from '../invite-user/InviteUser';
import Settings from '../settings/Settings';
+import SpaceSettings from '../space-settings/SpaceSettings';
function Windows() {
const [isInviteList, changeInviteList] = useState(false);
isOpen={settings}
onRequestClose={() => changeSettings(false)}
/>
+ <SpaceSettings />
</>
);
}
--- /dev/null
+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;
--- /dev/null
+@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;
+}
\ No newline at end of file
});
}
+export function openSpaceSettings(spaceId, tabText) {
+ appDispatcher.dispatch({
+ type: cons.actions.navigation.OPEN_SPACE_SETTINGS,
+ spaceId,
+ tabText,
+ });
+}
+
export function toggleRoomSettings(tabText) {
appDispatcher.dispatch({
type: cons.actions.navigation.TOGGLE_ROOM_SETTINGS,
SELECT_TAB: 'SELECT_TAB',
SELECT_SPACE: 'SELECT_SPACE',
SELECT_ROOM: 'SELECT_ROOM',
+ OPEN_SPACE_SETTINGS: 'OPEN_SPACE_SETTINGS',
TOGGLE_ROOM_SETTINGS: 'TOGGLE_ROOM_SETTINGS',
OPEN_INVITE_LIST: 'OPEN_INVITE_LIST',
OPEN_PUBLIC_ROOMS: 'OPEN_PUBLIC_ROOMS',
TAB_SELECTED: 'TAB_SELECTED',
SPACE_SELECTED: 'SPACE_SELECTED',
ROOM_SELECTED: 'ROOM_SELECTED',
+ SPACE_SETTINGS_OPENED: 'SPACE_SETTINGS_OPENED',
ROOM_SETTINGS_TOGGLED: 'ROOM_SETTINGS_TOGGLED',
INVITE_LIST_OPENED: 'INVITE_LIST_OPENED',
PUBLIC_ROOMS_OPENED: 'PUBLIC_ROOMS_OPENED',
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]: () => {
this.isRoomSettings = !this.isRoomSettings;
this.emit(
projects / rainny.git / commitdiff