apitech
/
Rocket.Chat
mirror of https://github.com/RocketChat/Rocket.Chat
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

chore: Navbar lvl1 arrangements (#29816)

Browse Source
pull/29917/head
Guilherme Gazzo 2 years ago committed by GitHub
parent e1eac77e1e
commit 63b0b5ef2e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 135 additions and 118 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      apps/meteor/client/sidebar/Sidebar.stories.tsx
  2. 113
      apps/meteor/client/sidebar/Sidebar.tsx
  3. 100
      apps/meteor/client/sidebar/SidebarRegion.tsx
  4. 2
      apps/meteor/client/sidebar/index.ts
  5. 5
      apps/meteor/client/views/modal/ModalRegion.tsx
  6. 11
      apps/meteor/client/views/room/Header/Header.tsx
  7. 20
      apps/meteor/client/views/root/MainLayout/LayoutWithSidebar.tsx

2
apps/meteor/client/sidebar/Sidebar.stories.tsx
Unescape View File

@ -6,7 +6,7 @@ import type { ObjectId } from 'mongodb';
import type { ContextType } from 'react';
import React from 'react';
import Sidebar from './Sidebar';
import Sidebar from './SidebarRegion';
export default {
title: 'Sidebar',

113
apps/meteor/client/sidebar/Sidebar.tsx
Unescape View File

@ -2,7 +2,7 @@ import { css } from '@rocket.chat/css-in-js';
import { Box, Palette } from '@rocket.chat/fuselage';
import { useSessionStorage } from '@rocket.chat/fuselage-hooks';
import { useLayout, useSetting, useUserPreference } from '@rocket.chat/ui-contexts';
import React from 'react';
import React, { memo } from 'react';
import SidebarRoomList from './RoomList';
import SidebarFooter from './footer';
@ -12,7 +12,7 @@ import StatusDisabledSection from './sections/StatusDisabledSection';
const Sidebar = () => {
const sidebarViewMode = useUserPreference('sidebarViewMode');
const sidebarHideAvatar = !useUserPreference('sidebarDisplayAvatar');
const { isMobile, sidebar } = useLayout();
const { sidebar } = useLayout();
const [bannerDismissed, setBannerDismissed] = useSessionStorage('presence_cap_notifier', false);
const presenceDisabled = useSetting<boolean>('Presence_broadcast_disabled');
@ -20,100 +20,29 @@ const Sidebar = () => {
background-color: ${Palette.surface['surface-tint']};
`;
const sideBarStyle = css`
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
height: 100%;
user-select: none;
transition: transform 0.3s;
&.opened {
box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 15px 1px;
transform: translate3d(0px, 0px, 0px);
}
@media (max-width: 767px) {
position: absolute;
user-select: none;
transform: translate3d(-100%, 0, 0);
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
touch-action: pan-y;
-webkit-user-drag: none;
will-change: transform;
.rtl & {
transform: translate3d(200%, 0, 0);
&.opened {
box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 15px 1px;
transform: translate3d(0px, 0px, 0px);
}
}
}
@media (min-width: 768px) and (max-width: 1599px) {
width: var(--sidebar-width);
min-width: var(--sidebar-width);
}
@media (min-width: 1600px) and (max-width: 1919px) {
width: var(--sidebar-md-width);
min-width: var(--sidebar-md-width);
}
@media (min-width: 1920px) {
width: var(--sidebar-lg-width);
min-width: var(--sidebar-lg-width);
}
`;
const sidebarWrapStyle = css`
position: absolute;
z-index: 1;
top: 0;
left: 0;
height: 100%;
user-select: none;
transition: opacity 0.3s;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
touch-action: pan-y;
-webkit-user-drag: none;
&.opened {
width: 100%;
background-color: rgb(0, 0, 0);
opacity: 0.8;
}
`;
return (
<>
<Box id='sidebar-region' className={['rcx-sidebar', !sidebar.isCollapsed && isMobile && 'opened', sideBarStyle].filter(Boolean)}>
<Box
display='flex'
flexDirection='column'
height='100%'
is='nav'
className={[
'rcx-sidebar--main',
`rcx-sidebar rcx-sidebar--${sidebarViewMode}`,
sidebarHideAvatar && 'rcx-sidebar--hide-avatar',
sideBarBackground,
].filter(Boolean)}
role='navigation'
data-qa-opened={sidebar.isCollapsed ? 'false' : 'true'}
>
<SidebarHeader />
{presenceDisabled && !bannerDismissed && <StatusDisabledSection onDismiss={() => setBannerDismissed(true)} />}
<SidebarRoomList />
<SidebarFooter />
</Box>
<Box
display='flex'
flexDirection='column'
height='100%'
is='nav'
className={[
'rcx-sidebar--main',
`rcx-sidebar rcx-sidebar--${sidebarViewMode}`,
sidebarHideAvatar && 'rcx-sidebar--hide-avatar',
sideBarBackground,
].filter(Boolean)}
role='navigation'
data-qa-opened={sidebar.isCollapsed ? 'false' : 'true'}
>
<SidebarHeader />
{presenceDisabled && !bannerDismissed && <StatusDisabledSection onDismiss={() => setBannerDismissed(true)} />}
<SidebarRoomList />
<SidebarFooter />
</Box>
{isMobile && (
<Box className={[sidebarWrapStyle, !sidebar.isCollapsed && 'opened'].filter(Boolean)} onClick={() => sidebar.toggle()}></Box>
)}
</>
);
};
export default Sidebar;
export default memo(Sidebar);

100
apps/meteor/client/sidebar/SidebarRegion.tsx
Unescape View File

@ -0,0 +1,100 @@
import { css } from '@rocket.chat/css-in-js';
import { Box } from '@rocket.chat/fuselage';
import { FeaturePreview, FeaturePreviewOff, FeaturePreviewOn } from '@rocket.chat/ui-client';
import { useLayout } from '@rocket.chat/ui-contexts';
import React, { lazy, memo } from 'react';
import Sidebar from './Sidebar';
const Navbar = lazy(() => import('../navbar/Navbar'));
const SidebarRegion = () => {
const { isMobile, sidebar } = useLayout();
const sideBarStyle = css`
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
height: 100%;
user-select: none;
transition: transform 0.3s;
&.opened {
box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 15px 1px;
transform: translate3d(0px, 0px, 0px);
}
@media (max-width: 767px) {
position: absolute;
user-select: none;
transform: translate3d(-100%, 0, 0);
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
touch-action: pan-y;
-webkit-user-drag: none;
will-change: transform;
.rtl & {
transform: translate3d(200%, 0, 0);
&.opened {
box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 15px 1px;
transform: translate3d(0px, 0px, 0px);
}
}
}
@media (min-width: 768px) and (max-width: 1599px) {
width: var(--sidebar-width);
min-width: var(--sidebar-width);
}
@media (min-width: 1600px) and (max-width: 1919px) {
width: var(--sidebar-md-width);
min-width: var(--sidebar-md-width);
}
@media (min-width: 1920px) {
width: var(--sidebar-lg-width);
min-width: var(--sidebar-lg-width);
}
`;
const sidebarWrapStyle = css`
position: absolute;
z-index: 1;
top: 0;
left: 0;
height: 100%;
user-select: none;
transition: opacity 0.3s;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
touch-action: pan-y;
-webkit-user-drag: none;
&.opened {
width: 100%;
background-color: rgb(0, 0, 0);
opacity: 0.8;
}
`;
return (
<>
<FeaturePreview feature='navigationBar'>
<FeaturePreviewOn>
<Navbar />
</FeaturePreviewOn>
<FeaturePreviewOff>
<></>
</FeaturePreviewOff>
</FeaturePreview>
<Box id='sidebar-region' className={['rcx-sidebar', !sidebar.isCollapsed && isMobile && 'opened', sideBarStyle].filter(Boolean)}>
<Sidebar />
</Box>
{isMobile && (
<Box className={[sidebarWrapStyle, !sidebar.isCollapsed && 'opened'].filter(Boolean)} onClick={() => sidebar.toggle()}></Box>
)}
</>
);
};
export default memo(SidebarRegion);

2
apps/meteor/client/sidebar/index.ts
Unescape View File

@ -1 +1 @@
export { default } from './Sidebar';
export { default } from './SidebarRegion';

5
apps/meteor/client/views/modal/ModalRegion.tsx
Unescape View File

@ -1,11 +1,12 @@
import { useModal, useCurrentModal } from '@rocket.chat/ui-contexts';
import type { ReactElement } from 'react';
import React, { useCallback } from 'react';
import { FocusScope } from 'react-aria';
import React, { lazy, useCallback } from 'react';
import ModalBackdrop from '../../components/modal/ModalBackdrop';
import ModalPortal from '../../components/modal/ModalPortal';
const FocusScope = lazy(() => import('react-aria').then((module) => ({ default: module.FocusScope })));
const ModalRegion = (): ReactElement | null => {
const currentModal = useCurrentModal();
const { setModal } = useModal();

11
apps/meteor/client/views/room/Header/Header.tsx
Unescape View File

@ -3,13 +3,14 @@ import { isVoipRoom } from '@rocket.chat/core-typings';
import { HeaderToolbox } from '@rocket.chat/ui-client';
import { useLayout } from '@rocket.chat/ui-contexts';
import type { ReactElement } from 'react';
import React, { memo, useMemo } from 'react';
import React, { lazy, memo, useMemo } from 'react';
import BurgerMenu from '../../../components/BurgerMenu';
import DirectRoomHeader from './DirectRoomHeader';
import OmnichannelRoomHeader from './Omnichannel/OmnichannelRoomHeader';
import VoipRoomHeader from './Omnichannel/VoipRoomHeader';
import RoomHeader from './RoomHeader';
const DirectRoomHeader = lazy(() => import('./DirectRoomHeader'));
const OmnichannelRoomHeader = lazy(() => import('./Omnichannel/OmnichannelRoomHeader'));
const VoipRoomHeader = lazy(() => import('./Omnichannel/VoipRoomHeader'));
const RoomHeader = lazy(() => import('./RoomHeader'));
type HeaderProps<T> = {
room: T;

20
apps/meteor/client/views/root/MainLayout/LayoutWithSidebar.tsx
Unescape View File

@ -1,12 +1,10 @@
import { Box } from '@rocket.chat/fuselage';
import { FeaturePreview, FeaturePreviewOff, FeaturePreviewOn } from '@rocket.chat/ui-client';
import { useLayout, useSetting, useCurrentModal, useRoute, useCurrentRoutePath } from '@rocket.chat/ui-contexts';
import { PaletteStyleTag } from '@rocket.chat/ui-theming/src/PaletteStyleTag';
import { SidebarPaletteStyleTag } from '@rocket.chat/ui-theming/src/SidebarPaletteStyleTag';
import type { ReactElement, ReactNode } from 'react';
import React, { useEffect, useRef } from 'react';
import Navbar from '../../../navbar';
import Sidebar from '../../../sidebar';
const LayoutWithSidebar = ({ children }: { children: ReactNode }): ReactElement => {
@ -50,22 +48,10 @@ const LayoutWithSidebar = ({ children }: { children: ReactNode }): ReactElement
>
<PaletteStyleTag />
<SidebarPaletteStyleTag />
{!removeSidenav ? (
<>
<FeaturePreview feature='navigationBar'>
<FeaturePreviewOn>
<Navbar />
</FeaturePreviewOn>
<FeaturePreviewOff>
<></>
</FeaturePreviewOff>
</FeaturePreview>
<Sidebar />
</>
) : null}
<div className={['rc-old', 'main-content', readReceiptsEnabled ? 'read-receipts-enabled' : undefined].filter(Boolean).join(' ')}>
{!removeSidenav && <Sidebar />}
<main className={['rc-old', 'main-content', readReceiptsEnabled ? 'read-receipts-enabled' : undefined].filter(Boolean).join(' ')}>
{children}
</div>
</main>
</Box>
);
};

Write Preview
Loading…
Cancel
Save