Files
cinny/src/client/action/navigation.js
T
Laurenz 67853a05c0 Adapt to different device widths (#401)
* Now adapting to small screen sizes, needs improvements

* Fix that site only gets into mobile mode when resized

* - Added navigation event triggered if user requests to return to navigation on compact screens
- People drawer wont be shown on compact screens
  - Still accessible using settings
  - would be duplicated UI
- mobileSize is now compactSize

* Put threshold for collapsing the base UI in a shared file

* Switch to a more simple solution using CSS media queries over JS
- Move back button to the left a bit so it doesnt get in touch with room icon

* switch from component-individual-thresholds to device-type thresholds
- <750px: Mobile
- <900px: Tablet
- >900px: Desktop

* Make Settings drawer component collapse on mobile

* Fix EmojiBoard not showing up and messing up UI when screen is smaller than 360px

* Improve code quality; allow passing classNames to IconButton
- remove unnessesary div wrappers
- use dir.side where appropriate
- rename threshold and its mixins to more descriptive names
- Rename "OPEN_NAVIGATION" to "NAVIGATION_OPENED"

* - follow BEM methology
- remove ROOM_SELECTED listener
- rename NAVIGATION_OPENED to OPEN_NAVIGATION where appropriate
- this does NOT changes that ref should be used for changing visability

* Use ref to change visability to avoid re-rendering

* Use ref to change visability to avoid re-rendering

* Fix that room component is not hidden by default.
This resulted in a broken view when application is viewed in mobile size without having selected a room since loading.

* fix: leaving a room should bring one back to navigation

Co-authored-by: Ajay Bura <32841439+ajbura@users.noreply.github.com>
2022-04-24 15:53:10 +05:30

171 lines
3.5 KiB
JavaScript

import appDispatcher from '../dispatcher';
import cons from '../state/cons';
export function selectTab(tabId) {
appDispatcher.dispatch({
type: cons.actions.navigation.SELECT_TAB,
tabId,
});
}
export function selectSpace(roomId) {
appDispatcher.dispatch({
type: cons.actions.navigation.SELECT_SPACE,
roomId,
});
}
export function selectRoom(roomId, eventId) {
appDispatcher.dispatch({
type: cons.actions.navigation.SELECT_ROOM,
roomId,
eventId,
});
}
/**
* Open navigation on compact screen sizes
*/
export function openNavigation() {
appDispatcher.dispatch({
type: cons.actions.navigation.OPEN_NAVIGATION,
});
}
export function openSpaceSettings(roomId, tabText) {
appDispatcher.dispatch({
type: cons.actions.navigation.OPEN_SPACE_SETTINGS,
roomId,
tabText,
});
}
export function openSpaceManage(roomId) {
appDispatcher.dispatch({
type: cons.actions.navigation.OPEN_SPACE_MANAGE,
roomId,
});
}
export function openSpaceAddExisting(roomId) {
appDispatcher.dispatch({
type: cons.actions.navigation.OPEN_SPACE_ADDEXISTING,
roomId,
});
}
export function toggleRoomSettings(tabText) {
appDispatcher.dispatch({
type: cons.actions.navigation.TOGGLE_ROOM_SETTINGS,
tabText,
});
}
export function openShortcutSpaces() {
appDispatcher.dispatch({
type: cons.actions.navigation.OPEN_SHORTCUT_SPACES,
});
}
export function openInviteList() {
appDispatcher.dispatch({
type: cons.actions.navigation.OPEN_INVITE_LIST,
});
}
export function openPublicRooms(searchTerm) {
appDispatcher.dispatch({
type: cons.actions.navigation.OPEN_PUBLIC_ROOMS,
searchTerm,
});
}
export function openCreateRoom(isSpace = false, parentId = null) {
appDispatcher.dispatch({
type: cons.actions.navigation.OPEN_CREATE_ROOM,
isSpace,
parentId,
});
}
export function openInviteUser(roomId, searchTerm) {
appDispatcher.dispatch({
type: cons.actions.navigation.OPEN_INVITE_USER,
roomId,
searchTerm,
});
}
export function openProfileViewer(userId, roomId) {
appDispatcher.dispatch({
type: cons.actions.navigation.OPEN_PROFILE_VIEWER,
userId,
roomId,
});
}
export function openSettings(tabText) {
appDispatcher.dispatch({
type: cons.actions.navigation.OPEN_SETTINGS,
tabText,
});
}
export function openEmojiBoard(cords, requestEmojiCallback) {
appDispatcher.dispatch({
type: cons.actions.navigation.OPEN_EMOJIBOARD,
cords,
requestEmojiCallback,
});
}
export function openReadReceipts(roomId, userIds) {
appDispatcher.dispatch({
type: cons.actions.navigation.OPEN_READRECEIPTS,
roomId,
userIds,
});
}
export function openViewSource(event) {
appDispatcher.dispatch({
type: cons.actions.navigation.OPEN_VIEWSOURCE,
event,
});
}
export function replyTo(userId, eventId, body) {
appDispatcher.dispatch({
type: cons.actions.navigation.CLICK_REPLY_TO,
userId,
eventId,
body,
});
}
export function openSearch(term) {
appDispatcher.dispatch({
type: cons.actions.navigation.OPEN_SEARCH,
term,
});
}
export function openReusableContextMenu(placement, cords, render, afterClose) {
appDispatcher.dispatch({
type: cons.actions.navigation.OPEN_REUSABLE_CONTEXT_MENU,
placement,
cords,
render,
afterClose,
});
}
export function openReusableDialog(title, render, afterClose) {
appDispatcher.dispatch({
type: cons.actions.navigation.OPEN_REUSABLE_DIALOG,
title,
render,
afterClose,
});
}