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

#765 disable auto zoom in on ios

Browse Source
This commit is contained in:
lethemanh
2026-04-20 10:28:24 +07:00
parent d42fe1ce9f
commit 69e0bd741f
9 changed files with 49 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Calendar/MobileTempSearchInput.tsx
+1 -1
View File
@@ -36,7 +36,7 @@ export const MobileTempSearchInput: React.FC<MobileTempSearchInputProps> = ({
<TextField
{...params}
autoFocus
size="small"
size="medium"
sx={{
'& .MuiOutlinedInput-notchedOutline': {
border: 'none'
src/components/Event/AddDescButton.tsx
+2 -1
View File
@@ -5,6 +5,7 @@ import React from 'react'
import { useI18n } from 'twake-i18n'
import { FieldWithLabel } from './components/FieldWithLabel'
import { SectionPreviewRow } from './components/SectionPreviewRow'
import { useScreenSizeDetection } from '@/useScreenSizeDetection'
export function AddDescButton({
showDescription,
@@ -43,7 +44,7 @@ export function AddDescButton({
placeholder={t('event.form.descriptionPlaceholder')}
value={description}
onChange={e => setDescription(e.target.value)}
size="small"
size={isMobile ? 'medium' : 'small'}
margin="dense"
multiline
minRows={2}
src/components/Event/EventFormFields.tsx
+9 -6
View File
@@ -177,8 +177,8 @@ export default function EventFormFields({
setSelectedResources
}: EventFormFieldsProps): JSX.Element {
const { t } = useI18n()
const { isTooSmall: isMobile } = useScreenSizeDetection()
const [timezoneDrawerOpen, setTimezoneDrawerOpen] = React.useState(false)
// Internal state for 4 separate fields
@@ -514,7 +514,7 @@ export default function EventFormFields({
onChange={e => {
setTitle(e.target.value)
}}
size="small"
size={isMobile ? 'medium' : 'small'}
margin="dense"
inputRef={titleInputRef}
/>
@@ -694,7 +694,9 @@ export default function EventFormFields({
timezone={timezone}
end={end}
placeholder={t('event.form.addGuestsPlaceholder')}
inputSlot={params => <TextField {...params} size="small" />}
inputSlot={params => (
<TextField {...params} size={isMobile ? 'medium' : 'small'} />
)}
/>
</FieldWithLabel>
@@ -815,7 +817,6 @@ export default function EventFormFields({
showMore={showMore}
description={description}
setDescription={setDescription}
isMobile={isMobile}
/>
<FieldWithLabel
@@ -841,7 +842,7 @@ export default function EventFormFields({
placeholder={t('event.form.locationPlaceholder')}
value={location}
onChange={e => setLocation(e.target.value)}
size="small"
size={isMobile ? 'medium' : 'small'}
margin="dense"
/>
)}
@@ -922,7 +923,9 @@ export default function EventFormFields({
<ResourceSearch
objectTypes={['resource']}
selectedResources={selectedResources}
inputSlot={params => <TextField {...params} size="small" />}
inputSlot={params => (
<TextField {...params} size={isMobile ? 'medium' : 'small'} />
)}
onChange={(_event: React.SyntheticEvent, value: Resource[]) => {
handleResourceChange(value)
}}
src/components/Event/EventRepeat.tsx
+12 -16
View File
@@ -24,6 +24,7 @@ import { useI18n } from 'twake-i18n'
import { ReadOnlyDateField } from './components/ReadOnlyPickerField'
import { LONG_DATE_FORMAT } from './utils/dateTimeFormatters'
import { FC_DAYS, WeekDaySelector } from './WeekDaySelector'
import { useScreenSizeDetection } from '@/useScreenSizeDetection'
const numericSlotProps = {
htmlInput: {
@@ -36,18 +37,9 @@ export const RepeatEvent: React.FC<{
eventStart: Date
setRepetition: (repetition: RepetitionObject) => void
isOwn?: boolean
}> = ({
repetition,
eventStart,
setRepetition,
isOwn = true
}: {
repetition: RepetitionObject
eventStart: Date
setRepetition: (repetition: RepetitionObject) => void
isOwn?: boolean
}) => {
}> = ({ repetition, eventStart, setRepetition, isOwn = true }) => {
const { t } = useI18n()
const { isTooSmall: isMobile } = useScreenSizeDetection()
const days = ['MO', 'TU', 'WE', 'TH', 'FR', 'SA', 'SU']
const day = new Date(eventStart)
const dateCalendarLayoutSx = {
@@ -85,8 +77,8 @@ export const RepeatEvent: React.FC<{
interval: Number(e.target.value)
})
}
size="small"
sx={{ width: 80 }}
size={isMobile ? 'medium' : 'small'}
style={{ width: 80 }}
slotProps={{
htmlInput: {
...numericSlotProps.htmlInput,
@@ -223,8 +215,12 @@ export const RepeatEvent: React.FC<{
<Box
sx={{
width: 220,
'& .MuiInputBase-root': { fontSize: 14 },
'& .MuiInputBase-input': { fontSize: 14 }
'& .MuiInputBase-root': {
fontSize: isMobile ? 16 : 14
},
'& .MuiInputBase-input': {
fontSize: isMobile ? 16 : 14
}
}}
>
<DatePicker
@@ -278,7 +274,7 @@ export const RepeatEvent: React.FC<{
</Typography>
<TextField
type="number"
size="small"
size={isMobile ? 'medium' : 'small'}
value={repetition.occurrences || 1}
onChange={e => {
const value = Number(e.target.value)
src/components/Event/components/DateTimeFields/TouchDatePickerField.tsx
+3 -3
View File
@@ -104,7 +104,7 @@ const DatePickerDialogContent: React.FC<DatePickerDialogProps> = ({
<DateField
fullWidth
inputMode="numeric"
size="small"
size="medium"
value={internalValue}
onChange={handleInternalChange}
autoFocus
@@ -171,8 +171,8 @@ export const TouchDatePickerField: React.FC<DatePickerFieldProps> = ({
slots={{ field: ReadOnlyDateField }}
slotProps={{
openPickerButton: { sx: { display: 'none' } },
...getDateSlotProps(testId, hasError, label),
field: getDateFieldSlotProps(testId, hasError, label),
...getDateSlotProps(testId, hasError, label, true),
field: getDateFieldSlotProps(testId, hasError, label, true),
layout: { sx: dateCalendarLayoutSx }
}}
/>
src/components/Event/components/DateTimeFields/TouchTimePickerField.tsx
+1 -1
View File
@@ -113,7 +113,7 @@ export const TouchTimePickerField: React.FC<TimePickerFieldProps> = ({
slotProps={{
openPickerButton: { sx: { display: 'none' } },
field: {
...getTimeFieldSlotProps(testId, hasError, label),
...getTimeFieldSlotProps(testId, hasError, label, true),
onFocus: e => e.target.blur()
}
}}
src/components/Event/components/DateTimeFields/dateTimePickerSlotProps.ts
+12 -8
View File
@@ -28,7 +28,8 @@ export const timePickerPopperSx = {
const baseFieldProps = (
testId: string,
hasError = false,
label?: string
label?: string,
isMobile?: boolean
): Pick<
TextFieldProps,
| 'size'
@@ -39,7 +40,7 @@ const baseFieldProps = (
| 'sx'
| 'inputProps'
> => ({
size: 'small' as const,
size: isMobile ? ('medium' as const) : ('small' as const),
margin: 'dense' as const,
fullWidth: true,
InputLabelProps: { shrink: true },
@@ -54,17 +55,19 @@ const baseFieldProps = (
export const getDateSlotProps = (
testId: string,
hasError = false,
label?: string
label?: string,
isMobile?: boolean
): Partial<DatePickerSlotProps<true>> => ({
textField: {
...baseFieldProps(testId, hasError, label)
...baseFieldProps(testId, hasError, label, isMobile)
}
})
export const getDateFieldSlotProps = (
testId: string,
hasError = false,
label?: string
label?: string,
isMobile?: boolean
): Partial<DatePickerFieldProps> &
Pick<
TextFieldProps,
@@ -75,12 +78,13 @@ export const getDateFieldSlotProps = (
| 'error'
| 'sx'
| 'inputProps'
> => baseFieldProps(testId, hasError, label)
> => baseFieldProps(testId, hasError, label, isMobile)
export const getTimeFieldSlotProps = (
testId: string,
hasError = false,
label?: string
label?: string,
isMobile?: boolean
): Partial<TimePickerFieldProps> &
Pick<
TextFieldProps,
@@ -91,4 +95,4 @@ export const getTimeFieldSlotProps = (
| 'error'
| 'sx'
| 'inputProps'
> => baseFieldProps(testId, hasError, label)
> => baseFieldProps(testId, hasError, label, isMobile)
src/components/Timezone/SmallTimeZoneSelector.tsx
+2 -2
View File
@@ -128,6 +128,7 @@ export const SmallTimezoneSelector: React.FC<
<TextField
inputRef={inputRef}
fullWidth
size="medium"
variant="standard"
placeholder={t('calendar.searchTimezone')}
value={searchQuery}
@@ -152,8 +153,7 @@ export const SmallTimezoneSelector: React.FC<
}}
sx={{
'& .MuiInputBase-root': {
padding: '8px 0',
fontSize: '16px'
padding: '8px 0'
}
}}
/>
src/declarations.ts
+7
View File
@@ -41,3 +41,10 @@ declare module '@linagora/twake-mui' {
export const radius: Record<string, string | number>
}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
declare const process: {
env: {
[key: string]: string | undefined
}
}