Add btn and hotkey to close room settings (#269)

Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
Ajay Bura 2022-01-30 10:05:46 +05:30
parent f310196937
commit 0c32d5302c
4 changed files with 58 additions and 6 deletions

View file

@ -2,13 +2,16 @@ import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import './RoomSettings.scss'; import './RoomSettings.scss';
import { blurOnBubbling } from '../../atoms/button/script';
import initMatrix from '../../../client/initMatrix'; import initMatrix from '../../../client/initMatrix';
import cons from '../../../client/state/cons'; import cons from '../../../client/state/cons';
import navigation from '../../../client/state/navigation'; import navigation from '../../../client/state/navigation';
import { openInviteUser } from '../../../client/action/navigation'; import { openInviteUser, toggleRoomSettings } from '../../../client/action/navigation';
import * as roomActions from '../../../client/action/room'; import * as roomActions from '../../../client/action/room';
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 ScrollView from '../../atoms/scroll/ScrollView'; import ScrollView from '../../atoms/scroll/ScrollView';
import Tabs from '../../atoms/tabs/Tabs'; import Tabs from '../../atoms/tabs/Tabs';
@ -28,6 +31,7 @@ import ShieldUserIC from '../../../../public/res/ic/outlined/shield-user.svg';
import LockIC from '../../../../public/res/ic/outlined/lock.svg'; import LockIC from '../../../../public/res/ic/outlined/lock.svg';
import AddUserIC from '../../../../public/res/ic/outlined/add-user.svg'; import AddUserIC from '../../../../public/res/ic/outlined/add-user.svg';
import LeaveArrowIC from '../../../../public/res/ic/outlined/leave-arrow.svg'; import LeaveArrowIC from '../../../../public/res/ic/outlined/leave-arrow.svg';
import ChevronTopIC from '../../../../public/res/ic/outlined/chevron-top.svg';
import { useForceUpdate } from '../../hooks/useForceUpdate'; import { useForceUpdate } from '../../hooks/useForceUpdate';
@ -124,6 +128,7 @@ SecuritySettings.propTypes = {
function RoomSettings({ roomId }) { function RoomSettings({ roomId }) {
const [, forceUpdate] = useForceUpdate(); const [, forceUpdate] = useForceUpdate();
const [selectedTab, setSelectedTab] = useState(tabItems[0]); const [selectedTab, setSelectedTab] = useState(tabItems[0]);
const room = initMatrix.matrixClient.getRoom(roomId);
const handleTabChange = (tabItem) => { const handleTabChange = (tabItem) => {
setSelectedTab(tabItem); setSelectedTab(tabItem);
@ -153,9 +158,20 @@ function RoomSettings({ roomId }) {
<ScrollView autoHide> <ScrollView autoHide>
<div className="room-settings__content"> <div className="room-settings__content">
<Header> <Header>
<button
className="room-settings__header-btn"
onClick={() => toggleRoomSettings()}
type="button"
onMouseUp={(e) => blurOnBubbling(e, '.room-settings__header-btn')}
>
<TitleWrapper> <TitleWrapper>
<Text variant="s1" weight="medium" primary>Room settings</Text> <Text variant="s1" weight="medium" primary>
{`${room.name}`}
<span style={{ color: 'var(--tc-surface-low)' }}> room settings</span>
</Text>
</TitleWrapper> </TitleWrapper>
<RawIcon src={ChevronTopIC} />
</button>
</Header> </Header>
<RoomProfile roomId={roomId} /> <RoomProfile roomId={roomId} />
<Tabs <Tabs

View file

@ -1,4 +1,5 @@
@use '../../partials/dir'; @use '../../partials/dir';
@use '../../partials/flex';
.room-settings { .room-settings {
height: 100%; height: 100%;
@ -6,6 +7,32 @@
position: relative; position: relative;
} }
& .header {
padding: 0 var(--sp-extra-tight);
}
&__header-btn {
min-width: 0;
@extend .cp-fx__row--s-c;
@include dir.side(margin, 0, auto);
padding: var(--sp-ultra-tight) var(--sp-extra-tight);
border-radius: calc(var(--bo-radius) / 2);
cursor: pointer;
@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;
}
}
&__content { &__content {
padding-bottom: calc(2 * var(--sp-extra-loose)); padding-bottom: calc(2 * var(--sp-extra-loose));

View file

@ -127,7 +127,8 @@ function SpaceSettings() {
className="space-settings" className="space-settings"
title={( title={(
<Text variant="s1" weight="medium" primary> <Text variant="s1" weight="medium" primary>
{twemojify(isOpen ? `${room.name} - space settings` : 'Space settings')} {isOpen && twemojify(room.name)}
<span style={{ color: 'var(--tc-surface-low)' }}> space settings</span>
</Text> </Text>
)} )}
contentOptions={<IconButton src={CrossIC} onClick={requestClose} tooltip="Close" />} contentOptions={<IconButton src={CrossIC} onClick={requestClose} tooltip="Close" />}

View file

@ -1,4 +1,4 @@
import { openSearch } from '../action/navigation'; import { openSearch, toggleRoomSettings } from '../action/navigation';
import navigation from '../state/navigation'; import navigation from '../state/navigation';
function listenKeyboard(event) { function listenKeyboard(event) {
@ -17,11 +17,19 @@ function listenKeyboard(event) {
if (['text', 'textarea'].includes(document.activeElement.type)) { if (['text', 'textarea'].includes(document.activeElement.type)) {
return; return;
} }
// esc - close room settings panel
if (event.keyCode === 27 && navigation.isRoomSettings) {
toggleRoomSettings();
}
if ((event.keyCode !== 8 && event.keyCode < 48) if ((event.keyCode !== 8 && event.keyCode < 48)
|| (event.keyCode >= 91 && event.keyCode <= 93) || (event.keyCode >= 91 && event.keyCode <= 93)
|| (event.keyCode >= 112 && event.keyCode <= 183)) { || (event.keyCode >= 112 && event.keyCode <= 183)) {
return; return;
} }
// press any key to focus and type in message field
const msgTextarea = document.getElementById('message-textarea'); const msgTextarea = document.getElementById('message-textarea');
msgTextarea?.focus(); msgTextarea?.focus();
} }