jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): menu hover and exit behaviour

Browse source
This commit is contained in:
Shekar Siri 2023-10-30 14:27:51 +01:00
parent 6f94897047
commit d385ee5d7d
3 changed files with 44 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
frontend/app/initialize.tsx
View file

@ -35,7 +35,12 @@ const customTheme: ThemeConfig = {
itemActiveBg: colors['active-blue'],
itemSelectedBg: colors['active-blue'],
itemSelectedColor: colors['teal']
itemSelectedColor: colors['teal'],
itemMarginBlock: 0,
itemPaddingInline: 50,
iconMarginInlineEnd: 14,
collapsedWidth: 180,
},
Button: {
colorPrimary: colors.teal

53
frontend/app/layout/SideMenu.tsx
View file

@ -47,14 +47,14 @@ function SideMenu(props: Props) {
const updatedItems = category.items.map(item => {
if (item.hidden) return item;
const isHidden = [
(item.key === MENU.NOTES && modules.includes(MODULES.NOTES)),
(item.key === MENU.LIVE_SESSIONS || item.key === MENU.RECORDINGS || item.key === MENU.STATS) && modules.includes(MODULES.ASSIST),
(item.key === MENU.SESSIONS && modules.includes(MODULES.OFFLINE_RECORDINGS)),
(item.key === MENU.ALERTS && modules.includes(MODULES.ALERTS)),
(item.isAdmin && !isAdmin),
(item.isEnterprise && !isEnterprise)
].some(cond => cond);
const isHidden = [
(item.key === MENU.NOTES && modules.includes(MODULES.NOTES)),
(item.key === MENU.LIVE_SESSIONS || item.key === MENU.RECORDINGS || item.key === MENU.STATS) && modules.includes(MODULES.ASSIST),
(item.key === MENU.SESSIONS && modules.includes(MODULES.OFFLINE_RECORDINGS)),
(item.key === MENU.ALERTS && modules.includes(MODULES.ALERTS)),
(item.isAdmin && !isAdmin),
(item.isEnterprise && !isEnterprise)
].some(cond => cond);
return { ...item, hidden: isHidden };
});
@ -81,7 +81,7 @@ function SideMenu(props: Props) {
const menuRoutes: any = {
exit: () => props.history.push(withSiteId(routes.sessions(), siteId)),
[MENU.EXIT]: () => props.history.push(withSiteId(routes.sessions(), siteId)),
[MENU.SESSIONS]: () => withSiteId(routes.sessions(), siteId),
[MENU.BOOKMARKS]: () => withSiteId(routes.bookmarks(), siteId),
[MENU.NOTES]: () => withSiteId(routes.notes(), siteId),
@ -122,7 +122,7 @@ function SideMenu(props: Props) {
const isMenuItemActive = (key: string) => {
const { pathname } = location;
const activeRoute = menuRoutes[key];
if (activeRoute) {
if (activeRoute && !key.includes('exit')) {
const route = activeRoute();
return pathname.startsWith(route);
}
@ -142,17 +142,6 @@ function SideMenu(props: Props) {
style={{ marginTop: '8px', border: 'none' }}
selectedKeys={menu.flatMap(category => category.items.filter((item: any) => isMenuItemActive(item.key)).map(item => item.key))}
>
{isPreferencesActive && (
<Menu.ItemGroup>
<Menu.Item
key='exit'
// style={{ color: '#333', height: '32px' }}
icon={<SVG name='arrow-bar-left' size={16} />}
>
{!isCollapsed && <Text className='ml-2'>Exit</Text>}
</Menu.Item>
</Menu.ItemGroup>
)}
{menu.map((category, index) => (
<React.Fragment key={category.key}>
{!category.hidden && (
@ -160,11 +149,26 @@ function SideMenu(props: Props) {
{index > 0 && <Divider style={{ margin: '6px 0' }} />}
<Menu.ItemGroup
key={category.key}
title={<div style={{ paddingLeft: isCollapsed ? '' : '6px' }}
className={cn({ 'text-center': isCollapsed })}>{category.title}</div>}
title={category.title}
// title={<div style={{ paddingLeft: isCollapsed ? '' : '6px' }}
// className={cn({ 'text-center': isCollapsed })}>{category.title}</div>}
>
{category.items.filter((item: any) => !item.hidden).map((item: any) => {
const isActive = isMenuItemActive(item.key);
if (item.key === MENU.EXIT) {
return (
<Menu.Item
key={item.key}
style={{ paddingLeft: '20px' }}
icon={<Icon name={item.icon} size={16} color={isActive ? 'teal' : ''} />}
className={cn('!rounded hover-fill-teal')}
>
{item.label}
</Menu.Item>
);
}
return item.children ? (
<Menu.SubMenu
key={item.key}
@ -178,7 +182,8 @@ function SideMenu(props: Props) {
) : (
<Menu.Item
key={item.key}
icon={<Icon name={item.icon} size={16} color={isActive ? 'teal' : ''} className={"hover-fill-teal"} />}
icon={<Icon name={item.icon} size={16} color={isActive ? 'teal' : ''}
className={'hover-fill-teal'} />}
style={{ paddingLeft: '20px' }}
className={cn('!rounded hover-fill-teal')}
itemIcon={item.leading ?

10
frontend/app/layout/data.ts
View file

@ -54,6 +54,7 @@ export const enum MENU {
FEATURE_FLAGS = 'feature-flags',
PREFERENCES = 'preferences',
SUPPORT = 'support',
EXIT = 'exit',
}
export const categories: Category[] = [
@ -74,7 +75,7 @@ export const categories: Category[] = [
items: [
{ label: 'Cobrowse', key: MENU.LIVE_SESSIONS, icon: 'broadcast' },
{ label: 'Recordings', key: MENU.RECORDINGS, icon: 'record-btn', isEnterprise: true },
{ label: 'Cobrowsing Report', key: MENU.STATS, icon: 'file-bar-graph', isEnterprise: true },
{ label: 'Cobrowsing Report', key: MENU.STATS, icon: 'file-bar-graph', isEnterprise: true }
]
},
{
@ -106,6 +107,13 @@ export const categories: Category[] = [
];
export const preferences: Category[] = [
{
title: '',
key: 'exit',
items: [
{ label: 'Exit', key: MENU.EXIT, icon: 'arrow-bar-left' }
]
},
{
title: 'Preferences',
key: 'preferences',