UI/update global UI (#459)
* Update loading screen to use Lottie animation - Replace simple logo with Lottie animation from loadercalendar.lottie - Center animation on screen with full viewport coverage - Set animation width to 175px - Install @lottiefiles/dotlottie-react package * update spacing event modal * add twake workplace logo to loading screen * update spacing create calendar modal * fix evenchip description color * using variant instead of sx
This commit is contained in:
lenhanphung
@@ -88,7 +88,8 @@ export function AccessTab({ calendar }: { calendar: Calendar }) {
|
||||
<TextField
|
||||
disabled
|
||||
fullWidth
|
||||
label={t("calendar.caldav_access")}
|
||||
label=""
|
||||
inputProps={{ "aria-label": t("calendar.caldav_access") }}
|
||||
value={calDAVLink}
|
||||
size="small"
|
||||
InputProps={{
|
||||
@@ -109,7 +110,8 @@ export function AccessTab({ calendar }: { calendar: Calendar }) {
|
||||
<TextField
|
||||
disabled
|
||||
fullWidth
|
||||
label={t("calendar.secretUrl")}
|
||||
label=""
|
||||
inputProps={{ "aria-label": t("calendar.secretUrl") }}
|
||||
value={secretLink}
|
||||
size="small"
|
||||
InputProps={{
|
||||
|
||||
@@ -359,3 +359,7 @@ tbody > tr.fc-scrollgrid-section:first-of-type .fc-scroller
|
||||
position absolute
|
||||
width 1px
|
||||
whiteSpace nowrap
|
||||
.date-time-group .MuiFormControl-root
|
||||
margin: 0
|
||||
.date-time-group.show-full-field > .MuiBox-root:first-of-type
|
||||
margin-bottom: 8px
|
||||
|
||||
@@ -53,27 +53,30 @@ export function ImportTab({
|
||||
}, [importFile, importUrl, importMode]);
|
||||
|
||||
return (
|
||||
<Box mt={2}>
|
||||
<>
|
||||
{/* Form group 1: Select file button - first group, margin top 0 */}
|
||||
{importMode === "file" && (
|
||||
<>
|
||||
<Box mb={1}>
|
||||
<Button
|
||||
variant="outlined"
|
||||
component="label"
|
||||
size="medium"
|
||||
sx={{ borderRadius: "12px" }}
|
||||
>
|
||||
{t("common.select_file")}
|
||||
<input
|
||||
type="file"
|
||||
hidden
|
||||
accept=".ics"
|
||||
onChange={(e) => setImportFile(e.target.files?.[0] ?? null)}
|
||||
/>
|
||||
</Button>
|
||||
</Box>
|
||||
<Box mt={0}>
|
||||
<Button
|
||||
variant="outlined"
|
||||
component="label"
|
||||
size="medium"
|
||||
sx={{ borderRadius: "12px" }}
|
||||
>
|
||||
{t("common.select_file")}
|
||||
<input
|
||||
type="file"
|
||||
hidden
|
||||
accept=".ics"
|
||||
onChange={(e) => setImportFile(e.target.files?.[0] ?? null)}
|
||||
/>
|
||||
</Button>
|
||||
{importFile && (
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="text.secondary"
|
||||
sx={{ marginTop: "6px" }}
|
||||
>
|
||||
{importFile.name}
|
||||
</Typography>
|
||||
)}
|
||||
@@ -81,38 +84,67 @@ export function ImportTab({
|
||||
variant="caption"
|
||||
color="text.secondary"
|
||||
display="block"
|
||||
mb={2}
|
||||
sx={{ marginTop: "6px" }}
|
||||
>
|
||||
{t("calendar.import_file_description")}
|
||||
</Typography>
|
||||
</>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Form group 2: URL field */}
|
||||
{importMode === "url" && (
|
||||
<TextField
|
||||
<Box mt={0}>
|
||||
<TextField
|
||||
fullWidth
|
||||
label={t("calendar.ics_feed_url")}
|
||||
value={importUrl}
|
||||
onChange={(e) => setImportUrl(e.target.value)}
|
||||
size="small"
|
||||
margin="dense"
|
||||
sx={{
|
||||
"&.MuiFormControl-root.MuiFormControl-marginDense": {
|
||||
marginTop: "6px",
|
||||
marginBottom: 0,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Form group 3: Import to */}
|
||||
<Box mt={2}>
|
||||
<FormControl
|
||||
fullWidth
|
||||
label={t("calendar.ics_feed_url")}
|
||||
value={importUrl}
|
||||
onChange={(e) => setImportUrl(e.target.value)}
|
||||
size="small"
|
||||
margin="dense"
|
||||
/>
|
||||
)}
|
||||
|
||||
<FormControl fullWidth size="small" sx={{ mt: 2 }}>
|
||||
<InputLabel id="import-to-label">{t("calendar.import_to")}</InputLabel>
|
||||
<Select
|
||||
labelId="import-to-label"
|
||||
label={t("calendar.import_to")}
|
||||
value={importTarget}
|
||||
onChange={(e) => setImportTarget(e.target.value)}
|
||||
sx={{
|
||||
"&.MuiFormControl-root.MuiFormControl-marginDense": {
|
||||
marginTop: "6px",
|
||||
marginBottom: 0,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<MenuItem value="new">{t("calendar.new_calendar")}</MenuItem>
|
||||
{CalendarItemList(personalCalendars)}
|
||||
</Select>
|
||||
</FormControl>
|
||||
<InputLabel id="import-to-label">
|
||||
{t("calendar.import_to")}
|
||||
</InputLabel>
|
||||
<Select
|
||||
labelId="import-to-label"
|
||||
label={t("calendar.import_to")}
|
||||
value={importTarget}
|
||||
onChange={(e) => setImportTarget(e.target.value)}
|
||||
>
|
||||
<MenuItem value="new">{t("calendar.new_calendar")}</MenuItem>
|
||||
{CalendarItemList(personalCalendars)}
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Box>
|
||||
|
||||
{importTarget === "new" && <SettingsTab {...newCalParams} />}
|
||||
</Box>
|
||||
{/* Form group 4: SettingsTab (when importing to new calendar) */}
|
||||
{importTarget === "new" && (
|
||||
<Box mt={2}>
|
||||
<SettingsTab {...newCalParams} />
|
||||
</Box>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -49,62 +49,79 @@ export function SettingsTab({
|
||||
}, [description]);
|
||||
|
||||
return (
|
||||
<Box mt={2}>
|
||||
<TextField
|
||||
fullWidth
|
||||
label=""
|
||||
inputProps={{ "aria-label": t("common.name") }}
|
||||
placeholder={t("common.name")}
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
size="small"
|
||||
margin="dense"
|
||||
/>
|
||||
|
||||
<AddDescButton
|
||||
showDescription={toggleDesc}
|
||||
setShowDescription={setToggleDesc}
|
||||
showMore={false}
|
||||
description={description}
|
||||
setDescription={setDescription}
|
||||
buttonVariant="contained"
|
||||
buttonColor="secondary"
|
||||
/>
|
||||
|
||||
<Box mt={2}>
|
||||
<Typography variant="body2" gutterBottom>
|
||||
{t("calendar.color")}
|
||||
</Typography>
|
||||
<ColorPicker
|
||||
onChange={(color) => setColor(color)}
|
||||
selectedColor={color}
|
||||
<>
|
||||
{/* Form group 1: Name field - first group, margin top 0 */}
|
||||
<Box mt={0}>
|
||||
<TextField
|
||||
fullWidth
|
||||
label=""
|
||||
inputProps={{ "aria-label": t("common.name") }}
|
||||
placeholder={t("common.name")}
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
size="small"
|
||||
sx={{
|
||||
"&.MuiFormControl-root": {
|
||||
marginTop: 0,
|
||||
marginBottom: 0,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Form group 2: Description */}
|
||||
<Box mt={2}>
|
||||
<AddDescButton
|
||||
showDescription={toggleDesc}
|
||||
setShowDescription={setToggleDesc}
|
||||
showMore={false}
|
||||
description={description}
|
||||
setDescription={setDescription}
|
||||
buttonVariant="contained"
|
||||
buttonColor="secondary"
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Form group 3: Color */}
|
||||
<Box mt={2}>
|
||||
<Typography variant="h6" sx={{ margin: 0 }}>
|
||||
{t("calendar.color")}
|
||||
</Typography>
|
||||
<Box sx={{ marginTop: "6px" }}>
|
||||
<ColorPicker
|
||||
onChange={(color) => setColor(color)}
|
||||
selectedColor={color}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Form group 4: New events visibility */}
|
||||
{isOwn && (
|
||||
<Box mt={2}>
|
||||
<Typography variant="body2" gutterBottom>
|
||||
<Typography variant="h6" sx={{ margin: 0 }}>
|
||||
{t("calendar.newEventsVisibility")}
|
||||
</Typography>
|
||||
<ToggleButtonGroup
|
||||
value={visibility}
|
||||
exclusive
|
||||
onChange={(e, val) => val && setVisibility(val)}
|
||||
size="medium"
|
||||
sx={{ borderRadius: "12px" }}
|
||||
>
|
||||
<ToggleButton value="public" sx={{ width: "140px" }}>
|
||||
<PublicIcon fontSize="small" sx={{ mr: 1 }} />
|
||||
{t("common.all")}
|
||||
</ToggleButton>
|
||||
<Box sx={{ marginTop: "6px" }}>
|
||||
<ToggleButtonGroup
|
||||
value={visibility}
|
||||
exclusive
|
||||
onChange={(e, val) => val && setVisibility(val)}
|
||||
size="medium"
|
||||
sx={{ borderRadius: "12px" }}
|
||||
>
|
||||
<ToggleButton value="public" sx={{ width: "140px" }}>
|
||||
<PublicIcon fontSize="small" sx={{ mr: 1 }} />
|
||||
{t("common.all")}
|
||||
</ToggleButton>
|
||||
|
||||
<ToggleButton value="private" sx={{ width: "140px" }}>
|
||||
<LockOutlineIcon fontSize="small" sx={{ mr: 1 }} />
|
||||
{t("common.you")}
|
||||
</ToggleButton>
|
||||
</ToggleButtonGroup>
|
||||
<ToggleButton value="private" sx={{ width: "140px" }}>
|
||||
<LockOutlineIcon fontSize="small" sx={{ mr: 1 }} />
|
||||
{t("common.you")}
|
||||
</ToggleButton>
|
||||
</ToggleButtonGroup>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user