Add navigation sidebar toggle keybind
This commit is contained in:
parent
899a89cb3b
commit
c9f8a51cfe
5 changed files with 32 additions and 0 deletions
|
@ -17,6 +17,7 @@ import EmojiBoardOpener from '../../organisms/emoji-board/EmojiBoardOpener';
|
||||||
|
|
||||||
import initMatrix from '../../../client/initMatrix';
|
import initMatrix from '../../../client/initMatrix';
|
||||||
import navigation from '../../../client/state/navigation';
|
import navigation from '../../../client/state/navigation';
|
||||||
|
import settings from '../../../client/state/settings';
|
||||||
import cons from '../../../client/state/cons';
|
import cons from '../../../client/state/cons';
|
||||||
import DragDrop from '../../organisms/drag-drop/DragDrop';
|
import DragDrop from '../../organisms/drag-drop/DragDrop';
|
||||||
|
|
||||||
|
@ -26,6 +27,7 @@ function Client() {
|
||||||
const [isLoading, changeLoading] = useState(true);
|
const [isLoading, changeLoading] = useState(true);
|
||||||
const [loadingMsg, setLoadingMsg] = useState('Heating up');
|
const [loadingMsg, setLoadingMsg] = useState('Heating up');
|
||||||
const [dragCounter, setDragCounter] = useState(0);
|
const [dragCounter, setDragCounter] = useState(0);
|
||||||
|
const [navBarVis, setNavBarVis] = useState(true);
|
||||||
const classNameHidden = 'client__item-hidden';
|
const classNameHidden = 'client__item-hidden';
|
||||||
|
|
||||||
const navWrapperRef = useRef(null);
|
const navWrapperRef = useRef(null);
|
||||||
|
@ -39,14 +41,25 @@ function Client() {
|
||||||
navWrapperRef.current?.classList.remove(classNameHidden);
|
navWrapperRef.current?.classList.remove(classNameHidden);
|
||||||
roomWrapperRef.current?.classList.add(classNameHidden);
|
roomWrapperRef.current?.classList.add(classNameHidden);
|
||||||
}
|
}
|
||||||
|
function onNavigationBarToggle() {
|
||||||
|
setNavBarVis(navBarVis => {
|
||||||
|
if (!navBarVis)
|
||||||
|
navWrapperRef.current.style.display = '';
|
||||||
|
else
|
||||||
|
navWrapperRef.current.style.display = 'none';
|
||||||
|
return !navBarVis;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
navigation.on(cons.events.navigation.ROOM_SELECTED, onRoomSelected);
|
navigation.on(cons.events.navigation.ROOM_SELECTED, onRoomSelected);
|
||||||
navigation.on(cons.events.navigation.NAVIGATION_OPENED, onNavigationSelected);
|
navigation.on(cons.events.navigation.NAVIGATION_OPENED, onNavigationSelected);
|
||||||
|
settings.on(cons.events.settings.NAVIGATION_BAR_TOGGLED, onNavigationBarToggle);
|
||||||
|
|
||||||
return (() => {
|
return (() => {
|
||||||
navigation.removeListener(cons.events.navigation.ROOM_SELECTED, onRoomSelected);
|
navigation.removeListener(cons.events.navigation.ROOM_SELECTED, onRoomSelected);
|
||||||
navigation.removeListener(cons.events.navigation.NAVIGATION_OPENED, onNavigationSelected);
|
navigation.removeListener(cons.events.navigation.NAVIGATION_OPENED, onNavigationSelected);
|
||||||
|
settings.removeListener(cons.events.settings.NAVIGATION_BAR_TOGGLED, onNavigationBarToggle);
|
||||||
});
|
});
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
|
|
@ -13,6 +13,12 @@ export function toggleMarkdown() {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function toggleNavigationBar() {
|
||||||
|
appDispatcher.dispatch({
|
||||||
|
type: cons.actions.settings.TOGGLE_NAVIGATION_BAR,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
export function togglePeopleDrawer() {
|
export function togglePeopleDrawer() {
|
||||||
appDispatcher.dispatch({
|
appDispatcher.dispatch({
|
||||||
type: cons.actions.settings.TOGGLE_PEOPLE_DRAWER,
|
type: cons.actions.settings.TOGGLE_PEOPLE_DRAWER,
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
import { openSearch, toggleRoomSettings } from '../action/navigation';
|
import { openSearch, toggleRoomSettings } from '../action/navigation';
|
||||||
|
import { toggleNavigationBar, togglePeopleDrawer } from '../action/settings';
|
||||||
import navigation from '../state/navigation';
|
import navigation from '../state/navigation';
|
||||||
import { markAsRead } from '../action/notifications';
|
import { markAsRead } from '../action/notifications';
|
||||||
|
|
||||||
|
@ -47,6 +48,13 @@ function listenKeyboard(event) {
|
||||||
) return;
|
) return;
|
||||||
msgTextarea?.focus();
|
msgTextarea?.focus();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// toggle navigation bar
|
||||||
|
if (event.key === ',') {
|
||||||
|
event.preventDefault();
|
||||||
|
if (navigation.isRawModalVisible) return;
|
||||||
|
toggleNavigationBar();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!event.ctrlKey && !event.altKey && !event.metaKey) {
|
if (!event.ctrlKey && !event.altKey && !event.metaKey) {
|
||||||
|
|
|
@ -67,6 +67,7 @@ const cons = {
|
||||||
settings: {
|
settings: {
|
||||||
TOGGLE_SYSTEM_THEME: 'TOGGLE_SYSTEM_THEME',
|
TOGGLE_SYSTEM_THEME: 'TOGGLE_SYSTEM_THEME',
|
||||||
TOGGLE_MARKDOWN: 'TOGGLE_MARKDOWN',
|
TOGGLE_MARKDOWN: 'TOGGLE_MARKDOWN',
|
||||||
|
TOGGLE_NAVIGATION_BAR: 'TOGGLE_NAVIGATION_BAR',
|
||||||
TOGGLE_PEOPLE_DRAWER: 'TOGGLE_PEOPLE_DRAWER',
|
TOGGLE_PEOPLE_DRAWER: 'TOGGLE_PEOPLE_DRAWER',
|
||||||
TOGGLE_MEMBERSHIP_EVENT: 'TOGGLE_MEMBERSHIP_EVENT',
|
TOGGLE_MEMBERSHIP_EVENT: 'TOGGLE_MEMBERSHIP_EVENT',
|
||||||
TOGGLE_NICKAVATAR_EVENT: 'TOGGLE_NICKAVATAR_EVENT',
|
TOGGLE_NICKAVATAR_EVENT: 'TOGGLE_NICKAVATAR_EVENT',
|
||||||
|
@ -139,6 +140,7 @@ const cons = {
|
||||||
settings: {
|
settings: {
|
||||||
SYSTEM_THEME_TOGGLED: 'SYSTEM_THEME_TOGGLED',
|
SYSTEM_THEME_TOGGLED: 'SYSTEM_THEME_TOGGLED',
|
||||||
MARKDOWN_TOGGLED: 'MARKDOWN_TOGGLED',
|
MARKDOWN_TOGGLED: 'MARKDOWN_TOGGLED',
|
||||||
|
NAVIGATION_BAR_TOGGLED: 'NAVIGATION_BAR_TOGGLED',
|
||||||
PEOPLE_DRAWER_TOGGLED: 'PEOPLE_DRAWER_TOGGLED',
|
PEOPLE_DRAWER_TOGGLED: 'PEOPLE_DRAWER_TOGGLED',
|
||||||
MEMBERSHIP_EVENTS_TOGGLED: 'MEMBERSHIP_EVENTS_TOGGLED',
|
MEMBERSHIP_EVENTS_TOGGLED: 'MEMBERSHIP_EVENTS_TOGGLED',
|
||||||
NICKAVATAR_EVENTS_TOGGLED: 'NICKAVATAR_EVENTS_TOGGLED',
|
NICKAVATAR_EVENTS_TOGGLED: 'NICKAVATAR_EVENTS_TOGGLED',
|
||||||
|
|
|
@ -157,6 +157,9 @@ class Settings extends EventEmitter {
|
||||||
setSettings('isMarkdown', this.isMarkdown);
|
setSettings('isMarkdown', this.isMarkdown);
|
||||||
this.emit(cons.events.settings.MARKDOWN_TOGGLED, this.isMarkdown);
|
this.emit(cons.events.settings.MARKDOWN_TOGGLED, this.isMarkdown);
|
||||||
},
|
},
|
||||||
|
[cons.actions.settings.TOGGLE_NAVIGATION_BAR]: () => {
|
||||||
|
this.emit(cons.events.settings.NAVIGATION_BAR_TOGGLED, this.isMarkdown);
|
||||||
|
},
|
||||||
[cons.actions.settings.TOGGLE_PEOPLE_DRAWER]: () => {
|
[cons.actions.settings.TOGGLE_PEOPLE_DRAWER]: () => {
|
||||||
this.isPeopleDrawer = !this.isPeopleDrawer;
|
this.isPeopleDrawer = !this.isPeopleDrawer;
|
||||||
setSettings('isPeopleDrawer', this.isPeopleDrawer);
|
setSettings('isPeopleDrawer', this.isPeopleDrawer);
|
||||||
|
|
Loading…
Reference in a new issue