From dc8e6e53c7fcaba7c1be6ed9417ddec19cd700cc Mon Sep 17 00:00:00 2001 From: Laurenz Date: Sun, 24 Apr 2022 11:23:10 +0100 Subject: [PATCH] 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> --- src/app/atoms/button/IconButton.jsx | 5 ++- src/app/atoms/header/Header.scss | 5 +++ .../molecules/popup-window/PopupWindow.scss | 2 +- .../molecules/room-options/RoomOptions.jsx | 3 +- src/app/organisms/emoji-board/EmojiBoard.scss | 2 + src/app/organisms/invite-list/InviteList.jsx | 3 +- src/app/organisms/room/Room.jsx | 4 +- src/app/organisms/room/Room.scss | 9 +++- src/app/organisms/room/RoomSettings.jsx | 3 +- src/app/organisms/room/RoomViewCmdBar.jsx | 6 ++- src/app/organisms/room/RoomViewHeader.jsx | 11 ++++- src/app/organisms/room/RoomViewHeader.scss | 17 +++++++- src/app/organisms/settings/Settings.scss | 16 ++++++- src/app/partials/screen.scss | 28 +++++++++++++ src/app/templates/client/Client.jsx | 42 +++++++++++++++++-- src/app/templates/client/Client.scss | 14 ++++++- src/client/action/navigation.js | 9 ++++ src/client/state/cons.js | 2 + src/client/state/navigation.js | 3 ++ 19 files changed, 167 insertions(+), 17 deletions(-) create mode 100644 src/app/partials/screen.scss diff --git a/src/app/atoms/button/IconButton.jsx b/src/app/atoms/button/IconButton.jsx index a06c136..f6a8730 100644 --- a/src/app/atoms/button/IconButton.jsx +++ b/src/app/atoms/button/IconButton.jsx @@ -11,11 +11,12 @@ const IconButton = React.forwardRef(({ variant, size, type, tooltip, tooltipPlacement, src, onClick, tabIndex, disabled, isImage, + className, }, ref) => { const btn = ( toggleRoomSettings(tabText.SEARCH)} tooltip="Search" src={SearchIC} /> - + } + */ + const navWrapperRef = useRef(null); + /** + * @type {React.MutableRefObject} + */ + const roomWrapperRef = useRef(null); + + // #region Liston on events for compact screen sizes + function onRoomSelected() { + // setActiveView(viewPossibilities.room); + navWrapperRef.current.classList.add(classNameHidden); + roomWrapperRef.current.classList.remove(classNameHidden); + } + function onNavigationSelected() { + // setActiveView(viewPossibilities.nav); + navWrapperRef.current.classList.remove(classNameHidden); + roomWrapperRef.current.classList.add(classNameHidden); + } + + useEffect(() => { + navigation.on(cons.events.navigation.ROOM_SELECTED, onRoomSelected); + navigation.on(cons.events.navigation.NAVIGATION_OPENED, onNavigationSelected); + + return (() => { + navigation.removeListener(cons.events.navigation.ROOM_SELECTED, onRoomSelected); + navigation.removeListener(cons.events.navigation.NAVIGATION_OPENED, onNavigationSelected); + }); + }, []); + // #endregion + useEffect(() => { let counter = 0; const iId = setInterval(() => { @@ -64,6 +98,7 @@ function Client() { ); } + // #region drag and drop function dragContainsFiles(e) { if (!e.dataTransfer.types) return false; @@ -119,6 +154,7 @@ function Client() { initMatrix.roomsInput.setAttachment(roomId, file); initMatrix.roomsInput.emit(cons.events.roomsInput.ATTACHMENT_SET, file); } + // #endregion return (
-
+
-
+
diff --git a/src/app/templates/client/Client.scss b/src/app/templates/client/Client.scss index 45a5052..67d5dfd 100644 --- a/src/app/templates/client/Client.scss +++ b/src/app/templates/client/Client.scss @@ -1,3 +1,5 @@ +@use '../../partials/screen'; + .client-container { display: flex; height: 100%; @@ -5,12 +7,22 @@ .navigation__wrapper { width: var(--navigation-width); + + @include screen.smallerThan(mobileBreakpoint) { + width: 100%; + } } + .room__wrapper { flex: 1; min-width: 0; } +@include screen.smallerThan(mobileBreakpoint) { + .client__item-hidden { + display: none; + } +} .loading-display { position: absolute; @@ -41,4 +53,4 @@ .text { color: var(--tc-link); } -} \ No newline at end of file +} diff --git a/src/client/action/navigation.js b/src/client/action/navigation.js index e16d25d..8876732 100644 --- a/src/client/action/navigation.js +++ b/src/client/action/navigation.js @@ -23,6 +23,15 @@ export function selectRoom(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, diff --git a/src/client/state/cons.js b/src/client/state/cons.js index 4e258ac..34a3a92 100644 --- a/src/client/state/cons.js +++ b/src/client/state/cons.js @@ -47,6 +47,7 @@ const cons = { CLICK_REPLY_TO: 'CLICK_REPLY_TO', OPEN_SEARCH: 'OPEN_SEARCH', OPEN_REUSABLE_CONTEXT_MENU: 'OPEN_REUSABLE_CONTEXT_MENU', + OPEN_NAVIGATION: 'OPEN_NAVIGATION', OPEN_REUSABLE_DIALOG: 'OPEN_REUSABLE_DIALOG', }, room: { @@ -93,6 +94,7 @@ const cons = { REPLY_TO_CLICKED: 'REPLY_TO_CLICKED', SEARCH_OPENED: 'SEARCH_OPENED', REUSABLE_CONTEXT_MENU_OPENED: 'REUSABLE_CONTEXT_MENU_OPENED', + NAVIGATION_OPENED: 'NAVIGATION_OPENED', REUSABLE_DIALOG_OPENED: 'REUSABLE_DIALOG_OPENED', }, roomList: { diff --git a/src/client/state/navigation.js b/src/client/state/navigation.js index eb59e7a..bbecb2e 100644 --- a/src/client/state/navigation.js +++ b/src/client/state/navigation.js @@ -131,6 +131,9 @@ class Navigation extends EventEmitter { [cons.actions.navigation.OPEN_SETTINGS]: () => { this.emit(cons.events.navigation.SETTINGS_OPENED, action.tabText); }, + [cons.actions.navigation.OPEN_NAVIGATION]: () => { + this.emit(cons.events.navigation.NAVIGATION_OPENED); + }, [cons.actions.navigation.OPEN_EMOJIBOARD]: () => { this.emit( cons.events.navigation.EMOJIBOARD_OPENED,