diff --git a/src/app/features/room/MediaGallery.tsx b/src/app/features/room/MediaGallery.tsx index a7d299988..ac4e96478 100644 --- a/src/app/features/room/MediaGallery.tsx +++ b/src/app/features/room/MediaGallery.tsx @@ -21,6 +21,7 @@ import { useMatrixClient } from '../../hooks/useMatrixClient'; import { useMediaAuthentication } from '../../hooks/useMediaAuthentication'; import { decryptFile, downloadEncryptedMedia, mxcUrlToHttp } from '../../utils/matrix'; import { ContainerColor } from '../../styles/ContainerColor.css'; +import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize'; type GalleryTab = 'image' | 'video' | 'file'; @@ -531,6 +532,8 @@ type MediaGalleryProps = { export function MediaGallery({ room, onClose }: MediaGalleryProps) { const mx = useMatrixClient(); const useAuthentication = useMediaAuthentication(); + const screenSize = useScreenSizeContext(); + const isMobile = screenSize === ScreenSize.Mobile; const [tab, setTab] = useState('image'); const [loading, setLoading] = useState(false); @@ -650,9 +653,9 @@ export function MediaGallery({ room, onClose }: MediaGalleryProps) { top: 0, right: 0, bottom: 0, - width: '320px', + width: isMobile ? '100%' : '320px', zIndex: 500, - borderLeft: `1px solid ${color.Surface.ContainerLine}`, + borderLeft: isMobile ? 'none' : `1px solid ${color.Surface.ContainerLine}`, overflow: 'hidden', }} > diff --git a/src/app/features/room/MembersDrawer.css.ts b/src/app/features/room/MembersDrawer.css.ts index 860ceda01..24b940be1 100644 --- a/src/app/features/room/MembersDrawer.css.ts +++ b/src/app/features/room/MembersDrawer.css.ts @@ -3,6 +3,14 @@ import { config, toRem } from 'folds'; export const MembersDrawer = style({ width: toRem(266), + '@media': { + '(max-width: 750px)': { + position: 'fixed', + inset: 0, + width: '100%', + zIndex: 500, + }, + }, }); export const MembersDrawerHeader = style({ diff --git a/src/app/features/room/Room.tsx b/src/app/features/room/Room.tsx index 215bdf3d8..5cc8377ec 100644 --- a/src/app/features/room/Room.tsx +++ b/src/app/features/room/Room.tsx @@ -78,9 +78,11 @@ export function Room() { )} - {!callView && screenSize === ScreenSize.Desktop && isDrawer && ( + {!callView && isDrawer && ( <> - + {screenSize === ScreenSize.Desktop && ( + + )} )} diff --git a/src/app/features/room/RoomViewHeader.tsx b/src/app/features/room/RoomViewHeader.tsx index 65c74c4a0..061661bcf 100644 --- a/src/app/features/room/RoomViewHeader.tsx +++ b/src/app/features/room/RoomViewHeader.tsx @@ -80,10 +80,14 @@ import { bookmarksPanelAtom } from '../../state/bookmarksPanel'; type RoomMenuProps = { room: Room; requestClose: () => void; + galleryOpen?: boolean; + onToggleGallery?: () => void; }; -const RoomMenu = forwardRef(({ room, requestClose }, ref) => { +const RoomMenu = forwardRef( + ({ room, requestClose, galleryOpen, onToggleGallery }, ref) => { const mx = useMatrixClient(); const [hideActivity] = useSetting(settingsAtom, 'hideActivity'); + const screenSize = useScreenSizeContext(); const unread = useRoomUnread(room.roomId, roomToUnreadAtom); const powerLevels = usePowerLevelsContext(); const creators = useRoomCreators(room); @@ -99,6 +103,7 @@ const RoomMenu = forwardRef(({ room, requestClose const [invitePrompt, setInvitePrompt] = useState(false); const [reportRoomOpen, setReportRoomOpen] = useState(false); const [bookmarksOpen, setBookmarksOpen] = useAtom(bookmarksPanelAtom); + const [peopleDrawer, setPeopleDrawer] = useSetting(settingsAtom, 'isPeopleDrawer'); const handleMarkAsRead = () => { markAsRead(mx, room.roomId, hideActivity); @@ -186,6 +191,38 @@ const RoomMenu = forwardRef(({ room, requestClose Saved Messages + {screenSize === ScreenSize.Mobile && ( + { + setPeopleDrawer(!peopleDrawer); + requestClose(); + }} + size="300" + after={} + radii="300" + aria-pressed={peopleDrawer} + > + + Members + + + )} + {screenSize === ScreenSize.Mobile && onToggleGallery && ( + { + onToggleGallery(); + requestClose(); + }} + size="300" + after={} + radii="300" + aria-pressed={galleryOpen} + > + + Media Gallery + + + )} {!isServerNotice && ( (({ room, requestClose ); -}); +}, +); type CallMenuProps = { onVoiceCall: () => void; @@ -783,7 +821,12 @@ export function RoomViewHeader({ callView }: { callView?: boolean }) { escapeDeactivates: stopPropagation, }} > - setMenuAnchor(undefined)} /> + setMenuAnchor(undefined)} + galleryOpen={galleryOpen} + onToggleGallery={() => setGalleryOpen((v) => !v)} + /> } />