adding the hide navigation button and settings option

This commit is contained in:
duarm 2022-10-01 00:17:34 -03:00 committed by duarm
parent 4ea14c853e
commit 9e7cd4b627
10 changed files with 74 additions and 4 deletions

View file

@ -8,7 +8,7 @@ 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 { toggleRoomSettings, openReusableContextMenu, openNavigation } from '../../../client/action/navigation'; import { toggleNavigation, toggleRoomSettings, openReusableContextMenu, openNavigation } from '../../../client/action/navigation';
import { togglePeopleDrawer } from '../../../client/action/settings'; import { togglePeopleDrawer } from '../../../client/action/settings';
import colorMXID from '../../../util/colorMXID'; import colorMXID from '../../../util/colorMXID';
import { getEventCords } from '../../../util/common'; import { getEventCords } from '../../../util/common';
@ -24,6 +24,7 @@ import RoomOptions from '../../molecules/room-options/RoomOptions';
import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg'; import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg';
import SearchIC from '../../../../public/res/ic/outlined/search.svg'; import SearchIC from '../../../../public/res/ic/outlined/search.svg';
import UserIC from '../../../../public/res/ic/outlined/user.svg'; import UserIC from '../../../../public/res/ic/outlined/user.svg';
import HomeIC from '../../../../public/res/ic/outlined/home.svg';
import VerticalMenuIC from '../../../../public/res/ic/outlined/vertical-menu.svg'; import VerticalMenuIC from '../../../../public/res/ic/outlined/vertical-menu.svg';
import BackArrowIC from '../../../../public/res/ic/outlined/chevron-left.svg'; import BackArrowIC from '../../../../public/res/ic/outlined/chevron-left.svg';
@ -76,11 +77,17 @@ function RoomViewHeader({ roomId }) {
return ( return (
<Header> <Header>
<IconButton <IconButton
src={BackArrowIC} src={HomeIC}
className="room-header__back-btn" className="room-header__back-btn"
tooltip="Return to navigation" tooltip="Return to navigation"
onClick={() => openNavigation()} onClick={() => openNavigation()}
/> />
<IconButton
src={BackArrowIC}
className="room-header__hide-navigation-btn"
tooltip="Hide Navigation"
onClick={() => toggleNavigation()}
/>
<button <button
ref={roomHeaderBtnRef} ref={roomHeaderBtnRef}
className="room-header__btn" className="room-header__btn"

View file

@ -45,3 +45,10 @@
display: none; display: none;
} }
} }
.room-header__hide-navigation-btn {
@include dir.side(margin, 0, var(--sp-tight));
@include screen.smallerThan(mobileBreakpoint) {
display: none;
}
}

View file

@ -7,7 +7,7 @@ import settings from '../../../client/state/settings';
import navigation from '../../../client/state/navigation'; import navigation from '../../../client/state/navigation';
import { import {
toggleSystemTheme, toggleMarkdown, toggleMembershipEvents, toggleNickAvatarEvents, toggleSystemTheme, toggleMarkdown, toggleMembershipEvents, toggleNickAvatarEvents,
toggleNotifications, toggleNotificationSounds, toggleNotifications, toggleNotificationSounds, toggleHideNavigation,
} from '../../../client/action/settings'; } from '../../../client/action/settings';
import { usePermission } from '../../hooks/usePermission'; import { usePermission } from '../../hooks/usePermission';
@ -103,6 +103,16 @@ function AppearanceSection() {
)} )}
content={<Text variant="b3">Hide membership change messages from room timeline. (Join, Leave, Invite, Kick and Ban)</Text>} content={<Text variant="b3">Hide membership change messages from room timeline. (Join, Leave, Invite, Kick and Ban)</Text>}
/> />
<SettingTile
title="Hide navigation by default"
options={(
<Toggle
isActive={settings.hideNavigation}
onToggle={() => { toggleHideNavigation(); updateState({}); }}
/>
)}
content={<Text variant="b3">Hide the navigation bar by default, when cinny is opened.</Text>}
/>
<SettingTile <SettingTile
title="Hide nick/avatar events" title="Hide nick/avatar events"
options={( options={(

View file

@ -15,6 +15,7 @@ import Windows from '../../organisms/pw/Windows';
import Dialogs from '../../organisms/pw/Dialogs'; import Dialogs from '../../organisms/pw/Dialogs';
import EmojiBoardOpener from '../../organisms/emoji-board/EmojiBoardOpener'; import EmojiBoardOpener from '../../organisms/emoji-board/EmojiBoardOpener';
import settings from '../../../client/state/settings';
import initMatrix from '../../../client/initMatrix'; import initMatrix from '../../../client/initMatrix';
import navigation from '../../../client/state/navigation'; import navigation from '../../../client/state/navigation';
import cons from '../../../client/state/cons'; import cons from '../../../client/state/cons';
@ -24,9 +25,11 @@ import VerticalMenuIC from '../../../../public/res/ic/outlined/vertical-menu.svg
function Client() { function Client() {
const [isLoading, changeLoading] = useState(true); const [isLoading, changeLoading] = useState(true);
const [roomSelected, selectRoom] = useState(false);
const [loadingMsg, setLoadingMsg] = useState('Heating up'); const [loadingMsg, setLoadingMsg] = useState('Heating up');
const [dragCounter, setDragCounter] = useState(0); const [dragCounter, setDragCounter] = useState(0);
const classNameHidden = 'client__item-hidden'; const classNameHidden = 'client__item-hidden';
const toggleHidden = 'toggle-hidden';
const navWrapperRef = useRef(null); const navWrapperRef = useRef(null);
const roomWrapperRef = useRef(null); const roomWrapperRef = useRef(null);
@ -34,19 +37,25 @@ function Client() {
function onRoomSelected() { function onRoomSelected() {
navWrapperRef.current?.classList.add(classNameHidden); navWrapperRef.current?.classList.add(classNameHidden);
roomWrapperRef.current?.classList.remove(classNameHidden); roomWrapperRef.current?.classList.remove(classNameHidden);
selectRoom(navigation.selectedRoomId);
} }
function onNavigationSelected() { function onNavigationSelected() {
navWrapperRef.current?.classList.remove(classNameHidden); navWrapperRef.current?.classList.remove(classNameHidden);
roomWrapperRef.current?.classList.add(classNameHidden); roomWrapperRef.current?.classList.add(classNameHidden);
} }
function onNavigationToggled() {
navWrapperRef.current?.classList.toggle(toggleHidden);
}
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);
navigation.on(cons.events.navigation.NAVIGATION_TOGGLED, onNavigationToggled);
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);
navigation.removeListener(cons.events.navigation.NAVIGATION_TOGGLED, onNavigationToggled);
}); });
}, []); }, []);
@ -165,7 +174,7 @@ function Client() {
onDragLeave={handleDragLeave} onDragLeave={handleDragLeave}
onDrop={handleDrop} onDrop={handleDrop}
> >
<div className="navigation__wrapper" ref={navWrapperRef}> <div className={`navigation__wrapper ${settings.hideNavigation && roomSelected ? toggleHidden : ''}`} ref={navWrapperRef}>
<Navigation /> <Navigation />
</div> </div>
<div className={`room__wrapper ${classNameHidden}`} ref={roomWrapperRef}> <div className={`room__wrapper ${classNameHidden}`} ref={roomWrapperRef}>

View file

@ -13,6 +13,10 @@
} }
} }
.toggle-hidden {
display: none;
}
.room__wrapper { .room__wrapper {
flex: 1; flex: 1;
min-width: 0; min-width: 0;

View file

@ -30,6 +30,12 @@ export function openNavigation() {
}); });
} }
export function toggleNavigation() {
appDispatcher.dispatch({
type: cons.actions.navigation.TOGGLE_NAVIGATION,
});
}
export function openSpaceSettings(roomId, tabText) { export function openSpaceSettings(roomId, tabText) {
appDispatcher.dispatch({ appDispatcher.dispatch({
type: cons.actions.navigation.OPEN_SPACE_SETTINGS, type: cons.actions.navigation.OPEN_SPACE_SETTINGS,

View file

@ -25,6 +25,12 @@ export function toggleMembershipEvents() {
}); });
} }
export function toggleHideNavigation() {
appDispatcher.dispatch({
type: cons.actions.settings.TOGGLE_HIDE_NAVIGATION,
});
}
export function toggleNickAvatarEvents() { export function toggleNickAvatarEvents() {
appDispatcher.dispatch({ appDispatcher.dispatch({
type: cons.actions.settings.TOGGLE_NICKAVATAR_EVENT, type: cons.actions.settings.TOGGLE_NICKAVATAR_EVENT,

View file

@ -55,6 +55,7 @@ const cons = {
OPEN_SEARCH: 'OPEN_SEARCH', OPEN_SEARCH: 'OPEN_SEARCH',
OPEN_REUSABLE_CONTEXT_MENU: 'OPEN_REUSABLE_CONTEXT_MENU', OPEN_REUSABLE_CONTEXT_MENU: 'OPEN_REUSABLE_CONTEXT_MENU',
OPEN_NAVIGATION: 'OPEN_NAVIGATION', OPEN_NAVIGATION: 'OPEN_NAVIGATION',
TOGGLE_NAVIGATION: 'TOGGLE_NAVIGATION',
OPEN_REUSABLE_DIALOG: 'OPEN_REUSABLE_DIALOG', OPEN_REUSABLE_DIALOG: 'OPEN_REUSABLE_DIALOG',
OPEN_EMOJI_VERIFICATION: 'OPEN_EMOJI_VERIFICATION', OPEN_EMOJI_VERIFICATION: 'OPEN_EMOJI_VERIFICATION',
}, },
@ -75,6 +76,7 @@ const cons = {
TOGGLE_MARKDOWN: 'TOGGLE_MARKDOWN', TOGGLE_MARKDOWN: 'TOGGLE_MARKDOWN',
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_HIDE_NAVIGATION: 'TOGGLE_HIDE_NAVIGATION',
TOGGLE_NICKAVATAR_EVENT: 'TOGGLE_NICKAVATAR_EVENT', TOGGLE_NICKAVATAR_EVENT: 'TOGGLE_NICKAVATAR_EVENT',
TOGGLE_NOTIFICATIONS: 'TOGGLE_NOTIFICATIONS', TOGGLE_NOTIFICATIONS: 'TOGGLE_NOTIFICATIONS',
TOGGLE_NOTIFICATION_SOUNDS: 'TOGGLE_NOTIFICATION_SOUNDS', TOGGLE_NOTIFICATION_SOUNDS: 'TOGGLE_NOTIFICATION_SOUNDS',
@ -89,6 +91,7 @@ const cons = {
SPACE_MANAGE_OPENED: 'SPACE_MANAGE_OPENED', SPACE_MANAGE_OPENED: 'SPACE_MANAGE_OPENED',
SPACE_ADDEXISTING_OPENED: 'SPACE_ADDEXISTING_OPENED', SPACE_ADDEXISTING_OPENED: 'SPACE_ADDEXISTING_OPENED',
ROOM_SETTINGS_TOGGLED: 'ROOM_SETTINGS_TOGGLED', ROOM_SETTINGS_TOGGLED: 'ROOM_SETTINGS_TOGGLED',
NAVIGATION_TOGGLED: 'NAVIGATIONS_TOGGLED',
SHORTCUT_SPACES_OPENED: 'SHORTCUT_SPACES_OPENED', SHORTCUT_SPACES_OPENED: 'SHORTCUT_SPACES_OPENED',
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

@ -349,6 +349,9 @@ class Navigation extends EventEmitter {
[cons.actions.navigation.OPEN_NAVIGATION]: () => { [cons.actions.navigation.OPEN_NAVIGATION]: () => {
this.emit(cons.events.navigation.NAVIGATION_OPENED); this.emit(cons.events.navigation.NAVIGATION_OPENED);
}, },
[cons.actions.navigation.TOGGLE_NAVIGATION]: () => {
this.emit(cons.events.navigation.NAVIGATION_TOGGLED, this.navigationVisible);
},
[cons.actions.navigation.OPEN_EMOJIBOARD]: () => { [cons.actions.navigation.OPEN_EMOJIBOARD]: () => {
this.emit( this.emit(
cons.events.navigation.EMOJIBOARD_OPENED, cons.events.navigation.EMOJIBOARD_OPENED,

View file

@ -25,6 +25,7 @@ class Settings extends EventEmitter {
this.useSystemTheme = this.getUseSystemTheme(); this.useSystemTheme = this.getUseSystemTheme();
this.isMarkdown = this.getIsMarkdown(); this.isMarkdown = this.getIsMarkdown();
this.hideNavigation = this.getHideNavigation();
this.isPeopleDrawer = this.getIsPeopleDrawer(); this.isPeopleDrawer = this.getIsPeopleDrawer();
this.hideMembershipEvents = this.getHideMembershipEvents(); this.hideMembershipEvents = this.getHideMembershipEvents();
this.hideNickAvatarEvents = this.getHideNickAvatarEvents(); this.hideNickAvatarEvents = this.getHideNickAvatarEvents();
@ -88,6 +89,15 @@ class Settings extends EventEmitter {
return settings.useSystemTheme; return settings.useSystemTheme;
} }
getHideNavigation() {
if (typeof this.hideNavigation === 'boolean') return this.hideNavigation;
const settings = getSettings();
if (settings === null) return false;
if (typeof settings.hideNavigation === 'undefined') return false;
return settings.hideNavigation;
}
getIsMarkdown() { getIsMarkdown() {
if (typeof this.isMarkdown === 'boolean') return this.isMarkdown; if (typeof this.isMarkdown === 'boolean') return this.isMarkdown;
@ -167,6 +177,11 @@ class Settings extends EventEmitter {
setSettings('hideMembershipEvents', this.hideMembershipEvents); setSettings('hideMembershipEvents', this.hideMembershipEvents);
this.emit(cons.events.settings.MEMBERSHIP_EVENTS_TOGGLED, this.hideMembershipEvents); this.emit(cons.events.settings.MEMBERSHIP_EVENTS_TOGGLED, this.hideMembershipEvents);
}, },
[cons.actions.settings.TOGGLE_HIDE_NAVIGATION]: () => {
this.hideNavigation = !this.hideNavigation;
setSettings('hideNavigation', this.hideNavigation);
this.emit(cons.events.settings.HIDE_NAVIGATION_TOGGLED, this.hideNavigation);
},
[cons.actions.settings.TOGGLE_NICKAVATAR_EVENT]: () => { [cons.actions.settings.TOGGLE_NICKAVATAR_EVENT]: () => {
this.hideNickAvatarEvents = !this.hideNickAvatarEvents; this.hideNickAvatarEvents = !this.hideNickAvatarEvents;
setSettings('hideNickAvatarEvents', this.hideNickAvatarEvents); setSettings('hideNickAvatarEvents', this.hideNickAvatarEvents);