eduvia/workavia-calendar-front
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

#681 day view with sidebar on mobile

Browse Source
This commit is contained in:
lethemanh
2026-04-07 15:07:44 +07:00
parent aa96a39b28
commit 4bb4ec64ad
17 changed files with 362 additions and 298 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Calendar/Calendar.tsx
+2 -1
View File
@@ -385,6 +385,7 @@ const CalendarApp: React.FC<CalendarAppProps> = ({
tempUsers={tempUsers}
setTempUsers={setTempUsers}
currentView={currentView}
onDateChange={onDateChange}
/>
<div className="calendar">
<ImportAlert />
@@ -505,7 +506,7 @@ const CalendarApp: React.FC<CalendarAppProps> = ({
hour12: false
}}
datesSet={arg => {
setCurrentView(arg.view.type)
onViewChange?.(arg.view.type)
const calendarCurrentDate =
calendarRef.current?.getDate() || new Date(arg.start)
setDisplayedDateAndRange(calendarCurrentDate)
src/components/Calendar/CalendarLayout.tsx
-2
View File
@@ -72,8 +72,6 @@ export default function CalendarLayout(): JSX.Element {
if (!calendarRef.current) return
dispatch(setView('calendar'))
calendarRef.current.changeView(view)
// Notify parent about view change
setCurrentView(view)
src/components/Calendar/SideBar.tsx
-148
View File
@@ -1,148 +0,0 @@
import { CalendarApi } from '@fullcalendar/core'
import { Box, Button, Drawer, radius } from '@linagora/twake-mui'
import AddIcon from '@mui/icons-material/Add'
import CalendarViewDayOutlinedIcon from '@mui/icons-material/CalendarViewDayOutlined'
import CalendarViewMonthOutlinedIcon from '@mui/icons-material/CalendarViewMonthOutlined'
import CalendarViewWeekOutlinedIcon from '@mui/icons-material/CalendarViewWeekOutlined'
import { Dispatch, MutableRefObject, SetStateAction } from 'react'
import { useI18n } from 'twake-i18n'
import { User } from '../Attendees/PeopleSearch'
import { FieldWithLabel } from '../Event/components/FieldWithLabel'
import CalendarSelection from './CalendarSelection'
import { MiniCalendar } from './MiniCalendar'
import { TempCalendarsInput } from './TempCalendarsInput'
interface CalendarSidebarProps {
isTablet: boolean
open: boolean
onClose: () => void
calendarRef: MutableRefObject<CalendarApi | null>
isIframe?: boolean
onCreateEvent: () => void
onViewChange: (view: string) => void
selectedMiniDate: Date
setSelectedMiniDate: (date: Date) => void
selectedCalendars: string[]
setSelectedCalendars: Dispatch<SetStateAction<string[]>>
tempUsers: User[]
setTempUsers: Dispatch<SetStateAction<User[]>>
}
export default function Sidebar({
isTablet,
open,
onClose,
calendarRef,
isIframe,
onCreateEvent,
onViewChange,
selectedMiniDate,
setSelectedMiniDate,
selectedCalendars,
setSelectedCalendars,
tempUsers,
setTempUsers
}: CalendarSidebarProps) {
const { t } = useI18n()
return (
<Drawer
variant={isTablet ? 'temporary' : 'permanent'}
open={isTablet ? open : true}
onClose={onClose}
className="sidebar"
sx={{
[`& .MuiDrawer-paper`]: {
paddingTop: isTablet ? 2 : 0,
paddingBottom: 3,
paddingLeft: 3,
paddingRight: 2,
width: '270px',
marginTop: isTablet ? 0 : '70px'
},
zIndex: isTablet ? 3000 : 5
}}
slotProps={{ paper: { className: 'sidebar' } }}
>
{!isTablet && (
<>
<Box
sx={{
position: 'sticky',
top: 0,
zIndex: 10,
backgroundColor: '#fff',
paddingTop: isIframe ? '10px' : 3
}}
>
<Button
size="medium"
variant="contained"
fullWidth
onClick={onCreateEvent}
sx={{
borderRadius: radius.lg,
fontSize: '16px',
fontWeight: 500,
lineHeight: 'normal'
}}
>
<AddIcon sx={{ marginRight: 0.5, fontSize: '20px' }} />{' '}
{t('event.createEvent')}
</Button>
</Box>
<Box>
<MiniCalendar
calendarRef={calendarRef}
selectedDate={selectedMiniDate}
setSelectedMiniDate={setSelectedMiniDate}
/>
</Box>
</>
)}
{isTablet && (
<FieldWithLabel label={t('sidebar.displayMode')} isExpanded={false}>
<Button
variant="text"
onClick={() => onViewChange('timeGridDay')}
startIcon={<CalendarViewDayOutlinedIcon />}
>
{t('menubar.views.day')}
</Button>
<Button
variant="text"
onClick={() => {
onViewChange('timeGridWeek')
}}
startIcon={<CalendarViewWeekOutlinedIcon />}
>
{t('menubar.views.week')}
</Button>
<Button
variant="text"
onClick={() => onViewChange('dayGridMonth')}
startIcon={<CalendarViewMonthOutlinedIcon />}
>
{t('menubar.views.month')}
</Button>
</FieldWithLabel>
)}
<Box sx={{ mb: 3, mt: 2 }}>
<TempCalendarsInput
tempUsers={tempUsers}
setTempUsers={setTempUsers}
handleToggleEventPreview={onCreateEvent}
/>
</Box>
<Box className="calendarList">
<CalendarSelection
selectedCalendars={selectedCalendars}
setSelectedCalendars={setSelectedCalendars}
/>
</Box>
</Drawer>
)
}
src/components/Calendar/Sidebar/MobileSidebar.tsx
+125
View File
@@ -0,0 +1,125 @@
import { Drawer, IconButton, Box } from '@linagora/twake-mui'
import { CalendarSidebarProps } from './SideBar'
import { SidebarCommonContent } from './SidebarCommonContent'
import { ViewSwitcher } from './ViewSwitcher'
import { MainTitle } from '@/components/Menubar/MainTitle'
import HelpOutlineIcon from '@mui/icons-material/HelpOutline'
import { useI18n } from 'twake-i18n'
import { AppListMenu } from '@/components/Menubar/AppListMenu'
import { UserMenu } from '@/components/Menubar/UserMenu'
import { useAppSelector } from '@/app/hooks'
import { useUtilMenus } from '../hooks/useUtilMenus'
export const MobileSidebar: React.FC<CalendarSidebarProps> = ({
open,
onClose,
onViewChange,
onCreateEvent,
tempUsers,
setTempUsers,
selectedCalendars,
setSelectedCalendars,
currentView,
isIframe,
calendarRef,
onDateChange
}) => {
const { t } = useI18n()
const user = useAppSelector(state => state.user.userData)
const {
anchorEl,
supportLink,
userMenuAnchorEl,
handleAppMenuOpen,
handleAppMenuClose,
handleUserMenuOpen,
handleUserMenuClose,
handleSettingsClick,
handleLogoutClick
} = useUtilMenus()
return (
<Drawer
variant="temporary"
open={open}
onClose={onClose}
className="sidebar"
sx={{
[`& .MuiDrawer-paper`]: {
paddingTop: 2,
paddingBottom: 3,
paddingLeft: 3,
paddingRight: 2,
width: '270px',
marginTop: 0
}
}}
slotProps={{ paper: { className: 'sidebar' } }}
>
{!isIframe && (
<Box
display="flex"
flexDirection="row"
justifyContent="space-between"
sx={{ mb: 2 }}
>
<MainTitle
calendarRef={calendarRef}
currentView={currentView}
onViewChange={onViewChange}
onDateChange={onDateChange}
/>
<Box display="flex" alignItems="center">
{supportLink && (
<IconButton
component="a"
href={supportLink}
target="_blank"
rel="noopener noreferrer"
style={{ marginRight: 4 }}
aria-label={t('menubar.help')}
title={t('menubar.help')}
>
<HelpOutlineIcon fontSize="small" />
</IconButton>
)}
<AppListMenu
anchorEl={anchorEl}
onAppMenuOpen={handleAppMenuOpen}
onAppMenuClose={handleAppMenuClose}
iconSize="small"
/>
<UserMenu
anchorEl={userMenuAnchorEl}
onClose={handleUserMenuClose}
onSettingsClick={handleSettingsClick}
onLogoutClick={() => void handleLogoutClick()}
onUserMenuOpen={handleUserMenuOpen}
isIframe={isIframe}
user={user}
size="s"
/>
</Box>
</Box>
)}
<ViewSwitcher
onClose={onClose}
onViewChange={onViewChange}
currentView={currentView}
/>
<SidebarCommonContent
onCreateEvent={onCreateEvent}
tempUsers={tempUsers}
setTempUsers={setTempUsers}
selectedCalendars={selectedCalendars}
setSelectedCalendars={setSelectedCalendars}
/>
</Drawer>
)
}
src/components/Calendar/Sidebar/SideBar.tsx
+6 -2
View File
@@ -4,6 +4,7 @@ import { Dispatch, MutableRefObject, SetStateAction } from 'react'
import { User } from '../../Attendees/PeopleSearch'
import { DesktopSidebar } from './DesktopSidebar'
import { TabletSidebar } from './TabletSidebar'
import { MobileSidebar } from './MobileSidebar'
export interface CalendarSidebarProps {
open: boolean
@@ -19,6 +20,7 @@ export interface CalendarSidebarProps {
tempUsers: User[]
setTempUsers: Dispatch<SetStateAction<User[]>>
currentView: string
onDateChange?: (date: Date) => void
}
const Sidebar: React.FC<CalendarSidebarProps> = (
@@ -26,9 +28,11 @@ const Sidebar: React.FC<CalendarSidebarProps> = (
) => {
const { isTablet, isTooSmall: isMobile } = useScreenSizeDetection()
if (isMobile) return null
if (isMobile) {
return <MobileSidebar {...sharedProps} />
}
return isTablet ? (
return isTablet || isMobile ? (
<TabletSidebar {...sharedProps} />
) : (
<DesktopSidebar {...sharedProps} />
src/components/Calendar/Sidebar/TabletSidebar.tsx
+9 -79
View File
@@ -1,39 +1,9 @@
import {
Drawer,
ListItemIcon,
ListItemText,
MenuItem,
MenuList,
useTheme
} from '@linagora/twake-mui'
import CalendarViewDayOutlinedIcon from '@mui/icons-material/CalendarViewDayOutlined'
import CalendarViewMonthOutlinedIcon from '@mui/icons-material/CalendarViewMonthOutlined'
import CalendarViewWeekOutlinedIcon from '@mui/icons-material/CalendarViewWeekOutlined'
import { useI18n } from 'twake-i18n'
import { FieldWithLabel } from '../../Event/components/FieldWithLabel'
import { CALENDAR_VIEWS } from '../utils/constants'
import { Drawer } from '@linagora/twake-mui'
import { CalendarSidebarProps } from './SideBar'
import { SidebarCommonContent } from './SidebarCommonContent'
import { ViewSwitcher } from './ViewSwitcher'
const VIEW_OPTIONS = [
{
label: 'menubar.views.day',
value: CALENDAR_VIEWS.timeGridDay,
icon: <CalendarViewDayOutlinedIcon />
},
{
label: 'menubar.views.week',
value: CALENDAR_VIEWS.timeGridWeek,
icon: <CalendarViewWeekOutlinedIcon />
},
{
label: 'menubar.views.month',
value: CALENDAR_VIEWS.dayGridMonth,
icon: <CalendarViewMonthOutlinedIcon />
}
]
export function TabletSidebar({
export const TabletSidebar: React.FC<CalendarSidebarProps> = ({
open,
onClose,
onViewChange,
@@ -43,15 +13,7 @@ export function TabletSidebar({
selectedCalendars,
setSelectedCalendars,
currentView
}: CalendarSidebarProps) {
const { t } = useI18n()
const theme = useTheme()
const changeViewAndClose = (view: string): void => {
onViewChange(view)
onClose()
}
}) => {
return (
<Drawer
variant="temporary"
@@ -70,43 +32,11 @@ export function TabletSidebar({
}}
slotProps={{ paper: { className: 'sidebar' } }}
>
<FieldWithLabel label={t('sidebar.displayMode')} isExpanded={false}>
<MenuList>
{VIEW_OPTIONS.map(option => {
const isSelected = option.value === currentView
return (
<MenuItem
key={option.value}
selected={isSelected}
onClick={() => changeViewAndClose(option.value)}
>
<ListItemIcon
sx={{
color: isSelected
? theme.palette.primary.main
: theme.palette.text.primary
}}
>
{option.icon}
</ListItemIcon>
<ListItemText
primary={t(option.label)}
primaryTypographyProps={{
sx: {
fontSize: '14px',
fontWeight: 500,
lineHeight: '20px',
color: isSelected
? theme.palette.primary.main
: theme.palette.text.primary
}
}}
/>
</MenuItem>
)
})}
</MenuList>
</FieldWithLabel>
<ViewSwitcher
onClose={onClose}
onViewChange={onViewChange}
currentView={currentView}
/>
<SidebarCommonContent
onCreateEvent={onCreateEvent}
src/components/Calendar/Sidebar/ViewSwitcher.tsx
+85
View File
@@ -0,0 +1,85 @@
import React from 'react'
import {
ListItemIcon,
ListItemText,
MenuItem,
MenuList,
useTheme
} from '@linagora/twake-mui'
import CalendarViewDayOutlinedIcon from '@mui/icons-material/CalendarViewDayOutlined'
import CalendarViewMonthOutlinedIcon from '@mui/icons-material/CalendarViewMonthOutlined'
import CalendarViewWeekOutlinedIcon from '@mui/icons-material/CalendarViewWeekOutlined'
import { useI18n } from 'twake-i18n'
import { FieldWithLabel } from '../../Event/components/FieldWithLabel'
import { CALENDAR_VIEWS } from '../utils/constants'
import { CalendarSidebarProps } from './SideBar'
const VIEW_OPTIONS = [
{
label: 'menubar.views.day',
value: CALENDAR_VIEWS.timeGridDay,
icon: <CalendarViewDayOutlinedIcon />
},
{
label: 'menubar.views.week',
value: CALENDAR_VIEWS.timeGridWeek,
icon: <CalendarViewWeekOutlinedIcon />
},
{
label: 'menubar.views.month',
value: CALENDAR_VIEWS.dayGridMonth,
icon: <CalendarViewMonthOutlinedIcon />
}
]
export const ViewSwitcher: React.FC<
Pick<CalendarSidebarProps, 'onClose' | 'onViewChange' | 'currentView'>
> = ({ onClose, onViewChange, currentView }) => {
const { t } = useI18n()
const theme = useTheme()
const changeViewAndClose = (view: string): void => {
onViewChange(view)
onClose()
}
return (
<FieldWithLabel label={t('sidebar.displayMode')} isExpanded={false}>
<MenuList>
{VIEW_OPTIONS.map(option => {
const isSelected = option.value === currentView
return (
<MenuItem
key={option.value}
selected={isSelected}
onClick={() => changeViewAndClose(option.value)}
>
<ListItemIcon
sx={{
color: isSelected
? theme.palette.primary.main
: theme.palette.text.primary
}}
>
{option.icon}
</ListItemIcon>
<ListItemText
primary={t(option.label)}
primaryTypographyProps={{
sx: {
fontSize: '14px',
fontWeight: 500,
lineHeight: '20px',
color: isSelected
? theme.palette.primary.main
: theme.palette.text.primary
}
}}
/>
</MenuItem>
)
})}
</MenuList>
</FieldWithLabel>
)
}
src/components/Calendar/hooks/useCalendarViewHandlers.ts
+3 -1
View File
@@ -2,7 +2,9 @@
import { useCallback } from 'react'
import { createViewHandlers, ViewHandlersProps } from '../handlers/viewHandlers'
export const useCalendarViewHandlers = (props: ViewHandlersProps) => {
export const useCalendarViewHandlers = (
props: ViewHandlersProps
): ReturnType<typeof createViewHandlers> => {
const viewHandlers = createViewHandlers(props)
return {
src/components/Calendar/hooks/useUtilMenus.ts
+77
View File
@@ -0,0 +1,77 @@
import { useAppDispatch } from '@/app/hooks'
import { setView } from '@/features/Settings/SettingsSlice'
import { Logout } from '@/features/User/oidcAuth'
import { useScreenSizeDetection } from '@/useScreenSizeDetection'
import { redirectTo } from '@/utils/navigation'
import { useEffect, useState } from 'react'
export const useUtilMenus = (): {
anchorEl: null | HTMLElement
userMenuAnchorEl: null | HTMLElement
supportLink: string
handleAppMenuOpen: (event: React.MouseEvent<HTMLElement>) => void
handleAppMenuClose: () => void
handleUserMenuOpen: (event: React.MouseEvent<HTMLElement>) => void
handleUserMenuClose: () => void
handleSettingsClick: () => void
handleLogoutClick: () => Promise<void>
} => {
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
const [userMenuAnchorEl, setUserMenuAnchorEl] = useState<null | HTMLElement>(
null
)
const supportLink = window.SUPPORT_URL
const dispatch = useAppDispatch()
const { isTablet, isTooSmall: isMobile } = useScreenSizeDetection()
useEffect(() => {
const resetMenuAnchorsOnResize = (): void => {
setAnchorEl(null)
setUserMenuAnchorEl(null)
}
resetMenuAnchorsOnResize()
}, [isTablet, isMobile])
const handleAppMenuOpen = (event: React.MouseEvent<HTMLElement>): void =>
setAnchorEl(event.currentTarget)
const handleAppMenuClose = (): void => setAnchorEl(null)
const handleUserMenuOpen = (event: React.MouseEvent<HTMLElement>): void =>
setUserMenuAnchorEl(event.currentTarget)
const handleUserMenuClose = (): void => {
setUserMenuAnchorEl(null)
}
const handleSettingsClick = (): void => {
dispatch(setView('settings'))
handleUserMenuClose()
}
const handleLogoutClick = async (): Promise<void> => {
try {
const logoutUrl = await Logout()
redirectTo(logoutUrl.href)
} catch (error) {
console.error('Logout failed:', error)
} finally {
sessionStorage.removeItem('tokenSet')
handleUserMenuClose()
}
}
return {
anchorEl,
userMenuAnchorEl,
supportLink,
handleAppMenuOpen,
handleAppMenuClose,
handleUserMenuOpen,
handleUserMenuClose,
handleSettingsClick,
handleLogoutClick
}
}
src/components/Menubar/AppListMenu.tsx
+4 -7
View File
@@ -3,15 +3,12 @@ import WidgetsOutlinedIcon from '@mui/icons-material/WidgetsOutlined'
import { useI18n } from 'twake-i18n'
import { AppIcon, AppIconProps } from './AppIcon'
export function AppListMenu({
anchorEl,
onAppMenuOpen,
onAppMenuClose
}: {
export const AppListMenu: React.FC<{
anchorEl: HTMLElement | null
onAppMenuOpen: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void
onAppMenuClose: () => void
}) {
iconSize?: 'inherit' | 'small' | 'medium' | 'large'
}> = ({ anchorEl, onAppMenuOpen, onAppMenuClose, iconSize = 'inherit' }) => {
const { t } = useI18n()
const applist: AppIconProps[] = window.appList ?? []
@@ -27,7 +24,7 @@ export function AppListMenu({
aria-label={t('menubar.apps')}
title={t('menubar.apps')}
>
<WidgetsOutlinedIcon />
<WidgetsOutlinedIcon fontSize={iconSize} />
</IconButton>
<Popover
src/components/Menubar/MainTitle.tsx
+17 -13
View File
@@ -6,6 +6,7 @@ import { Button } from '@linagora/twake-mui'
import React from 'react'
import { useI18n } from 'twake-i18n'
import { CALENDAR_VIEWS } from '../Calendar/utils/constants'
import { useScreenSizeDetection } from '@/useScreenSizeDetection'
export type MainTitleProps = {
calendarRef: React.RefObject<CalendarApi | null>
@@ -14,33 +15,36 @@ export type MainTitleProps = {
onDateChange?: (date: Date) => void
}
export function MainTitle({
export const MainTitle: React.FC<MainTitleProps> = ({
calendarRef,
currentView,
onViewChange,
onDateChange
}: MainTitleProps) {
}: MainTitleProps) => {
const { t } = useI18n()
const dispatch = useAppDispatch()
const { isTablet, isTooSmall: isMobile } = useScreenSizeDetection()
const handleLogoClick = async () => {
const isDesktop = !isTablet && !isMobile
const handleLogoClick = (): void => {
if (!calendarRef.current) return
await dispatch(setView('calendar'))
dispatch(setView('calendar'))
if (currentView !== CALENDAR_VIEWS.timeGridWeek) {
if (currentView !== CALENDAR_VIEWS.timeGridWeek && isDesktop) {
calendarRef.current.changeView(CALENDAR_VIEWS.timeGridWeek)
if (onViewChange) {
onViewChange(CALENDAR_VIEWS.timeGridWeek)
}
onViewChange?.(CALENDAR_VIEWS.timeGridWeek)
}
if (currentView !== CALENDAR_VIEWS.timeGridDay && !isDesktop) {
calendarRef.current.changeView(CALENDAR_VIEWS.timeGridDay)
onViewChange?.(CALENDAR_VIEWS.timeGridDay)
}
calendarRef.current.today()
if (onDateChange) {
const newDate = calendarRef.current.getDate()
onDateChange(newDate)
}
onDateChange?.(calendarRef.current.getDate())
}
return (
@@ -51,7 +55,7 @@ export function MainTitle({
style={{ background: 'none', border: 0, padding: 0, cursor: 'pointer' }}
>
<img
className="logo"
className={`logo ${isMobile ? 'logo--mobile' : ''}`}
src={logo}
alt={t('menubar.logoAlt')}
onClick={handleLogoClick}
src/components/Menubar/Menubar.styl
+4
View File
@@ -55,6 +55,10 @@
max-width 230px
margin-left 1rem
&--mobile
max-width 130px
margin-left 0
.nav-month
padding-right 2px
padding-left 2px
src/components/Menubar/Menubar.tsx
+16 -40
View File
@@ -1,17 +1,16 @@
import { useAppDispatch, useAppSelector } from '@/app/hooks'
import { setView } from '@/features/Settings/SettingsSlice'
import { Logout } from '@/features/User/oidcAuth'
import { userData } from '@/features/User/userDataTypes'
import { useScreenSizeDetection } from '@/useScreenSizeDetection'
import { redirectTo } from '@/utils/navigation'
import { CalendarApi } from '@fullcalendar/core'
import React, { useEffect, useState } from 'react'
import React, { useEffect } from 'react'
import { push } from 'redux-first-history'
import { useI18n } from 'twake-i18n'
import { DesktopMenubar } from './DesktopMenubar'
import './Menubar.styl'
import { TabletMenubar } from './TabletMenubar'
import { MobileMenubar } from './MobileMenuBar'
import { useUtilMenus } from '../Calendar/hooks/useUtilMenus'
export type AppIconProps = {
name: string
@@ -59,22 +58,22 @@ export const Menubar: React.FC<MenubarProps> = ({
const { t } = useI18n() // deliberately NOT using f()
const user = useAppSelector(state => state.user.userData)
const supportLink = window.SUPPORT_URL
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
const [userMenuAnchorEl, setUserMenuAnchorEl] = useState<null | HTMLElement>(
null
)
const {
anchorEl,
userMenuAnchorEl,
supportLink,
handleAppMenuOpen,
handleAppMenuClose,
handleUserMenuOpen,
handleUserMenuClose,
handleSettingsClick,
handleLogoutClick
} = useUtilMenus()
const dispatch = useAppDispatch()
const { isTablet, isTooSmall: isMobile } = useScreenSizeDetection()
useEffect(() => {
const resetMenuAnchorsOnResize = (): void => {
setAnchorEl(null)
setUserMenuAnchorEl(null)
}
resetMenuAnchorsOnResize()
}, [isTablet])
useEffect(() => {
if (!user) {
dispatch(push('/'))
@@ -114,30 +113,6 @@ export const Menubar: React.FC<MenubarProps> = ({
}
}
const handleAppMenuOpen = (event: React.MouseEvent<HTMLElement>): void =>
setAnchorEl(event.currentTarget)
const handleAppMenuClose = (): void => setAnchorEl(null)
const handleUserMenuOpen = (event: React.MouseEvent<HTMLElement>): void =>
setUserMenuAnchorEl(event.currentTarget)
const handleUserMenuClose = (): void => {
setUserMenuAnchorEl(null)
}
const handleSettingsClick = (): void => {
dispatch(setView('settings'))
handleUserMenuClose()
}
const handleLogoutClick = async (): Promise<void> => {
const logoutUrl = await Logout()
sessionStorage.removeItem('tokenSet')
redirectTo(logoutUrl.href)
handleUserMenuClose()
}
// Use i18n for month names instead of date-fns
const monthIndex = currentDate.getMonth()
const year = currentDate.getFullYear()
@@ -174,6 +149,7 @@ export const Menubar: React.FC<MenubarProps> = ({
currentDate={currentDate}
onDateChange={onDateChange}
handleNavigation={handleNavigation}
onOpenSidebar={onToggleSidebar}
/>
)
}
src/components/Menubar/MobileMenuBar.tsx
+7 -1
View File
@@ -2,6 +2,7 @@ import { CalendarApi } from '@fullcalendar/core'
import { IconButton, Stack } from '@linagora/twake-mui'
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'
import ArrowDropUpIcon from '@mui/icons-material/ArrowDropUp'
import MenuIcon from '@mui/icons-material/Menu'
import React, { useState } from 'react'
import { useI18n } from 'twake-i18n'
import SearchBar from './EventSearchBar'
@@ -15,13 +16,15 @@ export type MobileMenubarProps = {
currentDate: Date
onDateChange?: (date: Date) => void
handleNavigation: (action: 'prev' | 'next' | 'today') => void
onOpenSidebar: () => void
}
export const MobileMenubar: React.FC<MobileMenubarProps> = ({
calendarRef,
currentDate,
onDateChange,
handleNavigation
handleNavigation,
onOpenSidebar
}) => {
const { t } = useI18n()
@@ -37,6 +40,9 @@ export const MobileMenubar: React.FC<MobileMenubarProps> = ({
<>
<header className="menubar">
<div className="left-menu">
<IconButton onClick={onOpenSidebar}>
<MenuIcon />
</IconButton>
<div className="menu-items">
<SmallNavigationControls onNavigate={handleNavigation} />
</div>
src/components/Menubar/UserMenu.tsx
+4 -2
View File
@@ -25,6 +25,7 @@ export type UserMenuProps = {
onUserMenuOpen: (event: MouseEvent<HTMLElement>) => void
user: userData | null
isIframe?: boolean
size?: 's' | 'm' | 'l'
}
export function UserMenu({
@@ -34,7 +35,8 @@ export function UserMenu({
onLogoutClick,
onUserMenuOpen,
user,
isIframe = false
isIframe = false,
size = 'm'
}: UserMenuProps): JSX.Element {
const { t } = useI18n()
const theme = useTheme()
@@ -50,7 +52,7 @@ export function UserMenu({
title={isIframe ? t('menubar.settings') : t('menubar.userProfile')}
>
{!isIframe ? (
<Avatar color={stringToGradient(displayName)} size="m">
<Avatar color={stringToGradient(displayName)} size={size}>
{getInitials(displayName)}
</Avatar>
) : (
src/components/Menubar/components/MonthSelector.tsx
+1
View File
@@ -49,6 +49,7 @@ export const MonthSelector: React.FC<MonthSelectorProps> = ({
key={i}
size="large"
variant={isSelected ? 'contained' : 'outlined'}
aria-pressed={isSelected}
sx={{
borderRadius: radius.md
}}
src/locales/fr.json
+2 -2
View File
@@ -232,8 +232,8 @@
},
"menubar": {
"today": "Aujourd'hui",
"next": "Précédent",
"prev": "Suivant",
"next": "Suivant",
"prev": "Précédent",
"refresh": "Actualiser",
"viewSelector": "Sélectionner la vue",
"languageSelector": "Sélectionner la langue",