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

Fix button style, button type (#450)

Browse Source
This commit is contained in:
lenhanphung
2026-01-13 17:36:10 +07:00
committed by GitHub
parent aaaa2599ed
commit 2482e9f957
15 changed files with 336 additions and 276 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Calendar/AccessTab.tsx
+10 -1
View File
@@ -90,6 +90,7 @@ export function AccessTab({ calendar }: { calendar: Calendar }) {
fullWidth
label={t("calendar.caldav_access")}
value={calDAVLink}
size="small"
InputProps={{
endAdornment: (
<InputAdornment position="end">
@@ -110,6 +111,7 @@ export function AccessTab({ calendar }: { calendar: Calendar }) {
fullWidth
label={t("calendar.secretUrl")}
value={secretLink}
size="small"
InputProps={{
endAdornment: (
<InputAdornment position="end">
@@ -120,7 +122,12 @@ export function AccessTab({ calendar }: { calendar: Calendar }) {
),
}}
/>
<Button variant="contained" onClick={handleResetSecretLink}>
<Button
variant="contained"
color="secondary"
onClick={handleResetSecretLink}
sx={{ borderRadius: "4px" }}
>
{t("actions.reset")}
</Button>
</Box>
@@ -142,9 +149,11 @@ export function AccessTab({ calendar }: { calendar: Calendar }) {
<Button
variant="contained"
color="secondary"
onClick={handleExport}
startIcon={!exportLoading && <FileDownloadOutlinedIcon />}
disabled={exportLoading}
sx={{ borderRadius: "4px" }}
>
{exportLoading ? (
<Box display="flex" alignItems="center" gap={1}>
src/components/Calendar/ImportTab.tsx
+16 -9
View File
@@ -56,15 +56,22 @@ export function ImportTab({
<Box mt={2}>
{importMode === "file" && (
<>
<Button variant="outlined" component="label" sx={{ mb: 1 }}>
{t("common.select_file")}
<input
type="file"
hidden
accept=".ics"
onChange={(e) => setImportFile(e.target.files?.[0] ?? null)}
/>
</Button>
<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>
{importFile && (
<Typography variant="body2" color="text.secondary">
{importFile.name}
src/components/Calendar/SettingsTab.tsx
+4 -1
View File
@@ -67,6 +67,8 @@ export function SettingsTab({
showMore={false}
description={description}
setDescription={setDescription}
buttonVariant="contained"
buttonColor="secondary"
/>
<Box mt={2}>
@@ -88,7 +90,8 @@ export function SettingsTab({
value={visibility}
exclusive
onChange={(e, val) => val && setVisibility(val)}
size="small"
size="medium"
sx={{ borderRadius: "12px" }}
>
<ToggleButton value="public" sx={{ width: "140px" }}>
<PublicIcon fontSize="small" sx={{ mr: 1 }} />
src/components/Event/AddDescButton.tsx
+16 -5
View File
@@ -9,12 +9,23 @@ export function AddDescButton({
showMore,
description,
setDescription,
buttonVariant,
buttonColor,
}: {
showDescription: boolean;
setShowDescription: (b: boolean) => void;
showMore: boolean;
description: string;
setDescription: (d: string) => void;
buttonVariant?: "text" | "outlined" | "contained";
buttonColor?:
| "inherit"
| "primary"
| "secondary"
| "success"
| "error"
| "info"
| "warning";
}) {
const { t } = useI18n();
return (
@@ -25,11 +36,9 @@ export function AddDescButton({
<Button
startIcon={<DescriptionIcon />}
onClick={() => setShowDescription(true)}
size="small"
sx={{
textTransform: "none",
color: "text.secondary",
}}
size="medium"
variant={buttonVariant}
color={buttonColor}
>
{t("event.form.addDescription")}
</Button>
@@ -40,6 +49,7 @@ export function AddDescButton({
<FieldWithLabel
label={t("event.form.description")}
isExpanded={showMore}
sx={{ padding: 0, margin: 0 }}
>
<TextField
fullWidth
@@ -57,6 +67,7 @@ export function AddDescButton({
"& .MuiInputBase-root": {
maxHeight: "33%",
overflowY: "auto",
padding: 0,
},
"& textarea": {
resize: "vertical",
src/components/Event/EventChip/EventChip.tsx
+1 -1
View File
@@ -166,7 +166,7 @@ export function EventChip({
{startTime}
</Typography>
)}
{DisplayedIcons(IconDisplayed)}
{DisplayedIcons(IconDisplayed, titleStyle.color)}
<Typography variant="body2" noWrap style={titleStyle}>
{event.title}
</Typography>
src/components/Event/EventChip/EventChipUtils.tsx
+23 -14
View File
@@ -156,28 +156,37 @@ export function getCardStyle(
}
}
export function DisplayedIcons(IconDisplayed: IconDisplayConfig) {
export function DisplayedIcons(
IconDisplayed: IconDisplayConfig,
iconColor?: string
) {
if (!Object.values(IconDisplayed).find((b) => b === true)) return;
const iconStyle: React.CSSProperties = {
fontSize: "15px",
color: iconColor || "inherit",
marginRight: 2,
};
return (
<Box
<span
className="event-chip-icons"
style={{
display: "flex",
display: "inline-flex",
flexDirection: "row",
gap: "1px",
color: iconColor || "inherit",
margin: 0,
marginRight: "4px",
fontFamily: "inherit",
fontWeight: "inherit",
lineHeight: "inherit",
letterSpacing: "inherit",
}}
>
{IconDisplayed.needAction && (
<HelpOutlineIcon style={{ fontSize: "15px" }} />
)}
{IconDisplayed.declined && <CancelIcon style={{ fontSize: "15px" }} />}
{IconDisplayed.tentative && (
<HelpOutlineIcon style={{ fontSize: "15px" }} />
)}
{IconDisplayed.private && (
<LockOutlineIcon style={{ fontSize: "15px" }} />
)}
</Box>
{IconDisplayed.needAction && <HelpOutlineIcon style={iconStyle} />}
{IconDisplayed.declined && <CancelIcon style={iconStyle} />}
{IconDisplayed.tentative && <HelpOutlineIcon style={iconStyle} />}
{IconDisplayed.private && <LockOutlineIcon style={iconStyle} />}
</span>
);
}
src/components/Event/EventFormFields.tsx
+19 -10
View File
@@ -22,6 +22,7 @@ import {
ContentCopy as CopyIcon,
Close as DeleteIcon,
} from "@mui/icons-material";
import iconCamera from "../../static/images/icon-camera.svg";
import AttendeeSelector from "../Attendees/AttendeeSearch";
import RepeatEvent from "./EventRepeat";
import { RepetitionObject } from "../../features/Events/EventsTypes";
@@ -446,6 +447,8 @@ export default function EventFormFields({
showMore={showMore}
description={description}
setDescription={setDescription}
buttonVariant="contained"
buttonColor="secondary"
/>
<FieldWithLabel label={t("event.form.dateTime")} isExpanded={showMore}>
@@ -555,12 +558,15 @@ export default function EventFormFields({
>
<Box display="flex" gap={1} alignItems="center">
<Button
startIcon={<VideocamIcon />}
startIcon={
<img src={iconCamera} alt="camera" width={24} height={24} />
}
onClick={handleAddVideoConference}
size="medium"
variant="contained"
color="secondary"
sx={{
textTransform: "none",
color: "text.secondary",
borderRadius: "4px",
display: hasVideoConference ? "none" : "flex",
}}
>
@@ -570,12 +576,15 @@ export default function EventFormFields({
{hasVideoConference && meetingLink && (
<>
<Button
startIcon={<VideocamIcon />}
startIcon={
<img src={iconCamera} alt="camera" width={24} height={24} />
}
onClick={() => window.open(meetingLink, "_blank")}
size="medium"
variant="contained"
color="primary"
sx={{
textTransform: "none",
borderRadius: "4px",
mr: 1,
}}
>
@@ -716,14 +725,14 @@ export default function EventFormFields({
setEventClass(newValue);
}
}}
size="small"
size="medium"
>
<ToggleButton value="PUBLIC" sx={{ width: "140px" }}>
<PublicIcon sx={{ mr: 1, fontSize: "16px" }} />
<ToggleButton value="PUBLIC" sx={{ minWidth: "160px" }}>
<PublicIcon sx={{ mr: 1 }} />
{t("event.form.visibleAll")}
</ToggleButton>
<ToggleButton value="PRIVATE" sx={{ width: "140px" }}>
<LockIcon sx={{ mr: 1, fontSize: "16px" }} />
<ToggleButton value="PRIVATE" sx={{ minWidth: "160px" }}>
<LockIcon sx={{ mr: 1 }} />
{t("event.form.visibleParticipants")}
</ToggleButton>
</ToggleButtonGroup>
src/components/Event/components/FieldWithLabel.tsx
+5 -3
View File
@@ -1,5 +1,5 @@
import React from "react";
import { Box, Typography } from "@linagora/twake-mui";
import { Box, Typography, SxProps, Theme } from "@linagora/twake-mui";
/**
* Helper component for field with label
@@ -10,15 +10,17 @@ export const FieldWithLabel = React.memo(
label,
isExpanded,
children,
sx,
}: {
label: string | React.ReactNode;
isExpanded: boolean;
children: React.ReactNode;
sx?: SxProps<Theme>;
}) => {
if (!isExpanded) {
// Normal mode: label on top
return (
<Box>
<Box sx={sx}>
<Typography
component="div"
sx={{
@@ -37,7 +39,7 @@ export const FieldWithLabel = React.memo(
// Extended mode: label on left
return (
<Box display="flex" alignItems="center">
<Box display="flex" alignItems="center" sx={sx}>
<Typography
component="div"
sx={{
src/components/Menubar/Menubar.tsx
+16 -9
View File
@@ -171,23 +171,30 @@ export function Menubar({
<div className="navigation-controls">
<ButtonGroup
variant="outlined"
size="small"
size="medium"
sx={{
height: "43px",
"& .MuiButton-root": {
color: "#525256",
borderColor: "#AEAEC0",
"& button:first-of-type": {
borderRadius: "12px 0 0 12px",
},
"& button:last-of-type": {
borderRadius: "0 12px 12px 0",
},
}}
>
<Button onClick={() => handleNavigation("prev")}>
<ChevronLeftIcon />
<Button
sx={{ width: 20 }}
onClick={() => handleNavigation("prev")}
>
<ChevronLeftIcon sx={{ height: 20 }} />
</Button>
<Button onClick={() => handleNavigation("today")}>
{t("menubar.today")}
</Button>
<Button onClick={() => handleNavigation("next")}>
<ChevronRightIcon />
<Button
sx={{ width: 20 }}
onClick={() => handleNavigation("next")}
>
<ChevronRightIcon sx={{ height: 20 }} />
</Button>
</ButtonGroup>
</div>